@extends('layouts.user')

@section('title', __('employees.edit_employee'))
@section('page_title', __('employees.edit_employee'))
@section('breadcrumb', __('employees.breadcrumb'))

@section('content')
<div class="w-full px-1 sm:px-2 lg:px-3 space-y-6">

    {{-- Header --}}
    <div class="border border-slate-200 bg-gradient-to-r from-white to-slate-50 p-4 shadow-sm">
        <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
            <div>
                <p class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">{{ __('employees.hr_management') }}</p>
                <h1 class="mt-1 text-lg font-bold text-slate-800">{{ __('employees.edit_employee') }}</h1>
                <p class="mt-1 text-xs text-slate-500">
                    {{ __('employees.edit_employee_subtitle') }}
                </p>
            </div>

            <a href="{{ route('user.hr.employees.index') }}"
               class="border border-slate-200 bg-white px-4 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50">
                {{ __('employees.back_to_employees') }}
            </a>
        </div>
    </div>

    <form action="{{ route('user.hr.employees.update', $employee->id) }}"
          method="POST"
          enctype="multipart/form-data"
          class="space-y-5">
        @csrf
        @method('PUT')

        {{-- Basic --}}
        <div class="border border-slate-200 bg-white shadow-sm">
            <div class="border-b bg-slate-50 px-4 py-3">
                <h2 class="text-sm font-bold text-slate-800">{{ __('employees.basic_information') }}</h2>
                <p class="text-xs text-slate-500">{{ __('employees.basic_information_subtitle') }}</p>
            </div>

            <div class="p-4 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">

                <div>
                    <label class="text-xs font-semibold">{{ __('employees.employee_code') }}</label>
                    <input type="text"
                           value="{{ $employee->employee_code }}"
                           readonly
                           class="w-full border bg-slate-50 px-3 py-2 text-xs">
                </div>

                <div>
                    <label class="text-xs font-semibold">{{ __('employees.name') }} *</label>
                    <input type="text"
                           name="name"
                           value="{{ old('name', $employee->name) }}"
                           class="w-full border px-3 py-2 text-xs">
                </div>

                <div>
                    <label class="text-xs font-semibold">{{ __('employees.phone') }}</label>
                    <input type="text"
                           name="phone"
                           value="{{ old('phone', $employee->phone) }}"
                           class="w-full border px-3 py-2 text-xs">
                </div>

                <div>
                    <label class="text-xs font-semibold">{{ __('employees.email') }}</label>
                    <input type="email"
                           name="email"
                           value="{{ old('email', $employee->email) }}"
                           class="w-full border px-3 py-2 text-xs">
                </div>

                <div>
                    <label class="text-xs font-semibold">{{ __('employees.designation') }}</label>
                    <select name="designation_id"
                            class="w-full border px-3 py-2 text-xs">
                        <option value="">{{ __('employees.select') }}</option>
                        @foreach($designations as $designation)
                            <option value="{{ $designation->id }}"
                                @selected(old('designation_id',$employee->designation_id)==$designation->id)>
                                {{ $designation->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="text-xs font-semibold">{{ __('employees.joining_date') }}</label>
                    <input type="date"
                           name="joining_date"
                           value="{{ old('joining_date', optional($employee->joining_date)->format('Y-m-d')) }}"
                           class="w-full border px-3 py-2 text-xs">
                </div>

                <div>
                    <label class="text-xs font-semibold">{{ __('employees.employee_type') }}</label>
                    <select name="employee_type"
                            id="employee_type"
                            class="w-full border px-3 py-2 text-xs">
                        <option value="monthly" @selected(old('employee_type', $employee->employee_type) === 'monthly')>{{ __('employees.monthly') }}</option>
                        <option value="daily_roz" @selected(old('employee_type', $employee->employee_type) === 'daily_roz')>{{ __('employees.daily_roz') }}</option>
                    </select>
                </div>

                <div>
                    <label class="text-xs font-semibold">{{ __('employees.opening_balance') }}</label>
                    <input type="number"
                           name="opening_balance"
                           value="{{ old('opening_balance',$employee->opening_balance) }}"
                           class="w-full border px-3 py-2 text-xs">
                </div>

                <div>
                    <label class="text-xs font-semibold">{{ __('employees.status') }}</label>
                    <select name="status"
                            class="w-full border px-3 py-2 text-xs">
                        <option value="active" @selected(old('status', $employee->status) === 'active')>{{ __('employees.active') }}</option>
                        <option value="inactive" @selected(old('status', $employee->status) === 'inactive')>{{ __('employees.inactive') }}</option>
                    </select>
                </div>

            </div>
        </div>

        {{-- Photo --}}
        <div class="border border-slate-200 bg-white shadow-sm">
            <div class="border-b bg-slate-50 px-4 py-3">
                <h2 class="text-sm font-bold">{{ __('employees.photo') }}</h2>
            </div>

            <div class="p-4 grid grid-cols-2 gap-4">

                <input type="file" name="photo" id="photoInput"
                       class="border px-3 py-2 text-xs">

                <img id="photoPreview"
                     src="{{ asset($employee->photo ?? 'images/default-avatar.png') }}"
                     class="h-24 w-24 border object-cover"
                     alt="{{ __('employees.preview') }}">
            </div>
        </div>

        {{-- Address --}}
        <div class="border border-slate-200 bg-white shadow-sm">
            <div class="border-b bg-slate-50 px-4 py-3">
                <h2 class="text-sm font-bold">{{ __('employees.address') }}</h2>
            </div>

            <div class="p-4 grid gap-4 md:grid-cols-2">
                <textarea name="present_address"
                          class="border px-3 py-2 text-xs">{{ $employee->present_address }}</textarea>

                <textarea name="permanent_address"
                          class="border px-3 py-2 text-xs">{{ $employee->permanent_address }}</textarea>
            </div>
        </div>

        {{-- Actions --}}
        <div class="flex justify-end gap-2">
            <a href="{{ route('user.hr.employees.index') }}"
               class="border px-4 py-2 text-xs">{{ __('employees.cancel') }}</a>

            <button type="submit"
                    class="bg-slate-900 text-white px-4 py-2 text-xs">
                {{ __('employees.update') }}
            </button>
        </div>
    </form>
</div>
@endsection