@extends('layouts.app')

@section('title', 'Edit ' . $employee->full_name)

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('employees.index') }}">Employees</a>
        <span class="separator">/</span>
        <a href="{{ route('employees.show', $employee) }}">{{ $employee->full_name }}</a>
        <span class="separator">/</span>
        <span class="current">Edit</span>
    </div>
@endsection

@section('content')
<div x-data="{ sections: { personal: true, employment: true, custom: false } }">
    <div class="flex items-center justify-between mb-5">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">Edit Employee</h1>
            <p class="text-sm text-gray-500 mt-1">{{ $employee->full_name }} ({{ $employee->employee_code }})</p>
        </div>
    </div>

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

        {{-- Personal Information --}}
        <div class="card-static overflow-hidden">
            <button type="button" @click="sections.personal = !sections.personal" class="w-full card-header cursor-pointer hover:bg-gray-50 transition-colors">
                <h2 class="card-header-title">Personal Information</h2>
                <svg class="w-5 h-5 text-gray-400 transition-transform" :class="sections.personal ? 'rotate-180' : ''" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            <div x-show="sections.personal" x-collapse class="card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div>
                        <label class="form-label">Employee Code</label>
                        <input type="text" value="{{ $employee->employee_code }}" class="form-input bg-gray-50" readonly>
                    </div>
                    <div>
                        <label for="first_name" class="form-label">First Name <span class="text-danger-500">*</span></label>
                        <input type="text" id="first_name" name="first_name" value="{{ old('first_name', $employee->first_name) }}" class="form-input @error('first_name') form-input-error @enderror" required>
                        @error('first_name') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="last_name" class="form-label">Last Name <span class="text-danger-500">*</span></label>
                        <input type="text" id="last_name" name="last_name" value="{{ old('last_name', $employee->last_name) }}" class="form-input @error('last_name') form-input-error @enderror" required>
                        @error('last_name') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="email" class="form-label">Email <span class="text-danger-500">*</span></label>
                        <input type="email" id="email" name="email" value="{{ old('email', $employee->user?->email) }}" class="form-input @error('email') form-input-error @enderror" required>
                        @error('email') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="date_of_birth" class="form-label">Date of Birth</label>
                        <input type="date" id="date_of_birth" name="date_of_birth" value="{{ old('date_of_birth', $employee->date_of_birth?->format('Y-m-d')) }}" class="form-input">
                    </div>
                    <div>
                        <label for="gender" class="form-label">Gender</label>
                        <select id="gender" name="gender" class="form-select">
                            <option value="">Select</option>
                            @foreach(['male', 'female', 'other'] as $g)
                                <option value="{{ $g }}" {{ old('gender', $employee->gender) == $g ? 'selected' : '' }}>{{ ucfirst($g) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="nationality" class="form-label">Nationality</label>
                        <input type="text" id="nationality" name="nationality" value="{{ old('nationality', $employee->nationality) }}" class="form-input">
                    </div>
                    <div>
                        <label for="national_id" class="form-label">National / Civil ID</label>
                        <input type="text" id="national_id" name="national_id" value="{{ old('national_id', $employee->national_id) }}" class="form-input">
                    </div>
                    <div>
                        <label for="passport_number" class="form-label">Passport Number</label>
                        <input type="text" id="passport_number" name="passport_number" value="{{ old('passport_number', $employee->passport_number) }}" class="form-input">
                    </div>
                    <div>
                        <label for="marital_status" class="form-label">Marital Status</label>
                        <select id="marital_status" name="marital_status" class="form-select">
                            <option value="">Select</option>
                            @foreach(['single', 'married', 'divorced', 'widowed'] as $ms)
                                <option value="{{ $ms }}" {{ old('marital_status', $employee->marital_status) == $ms ? 'selected' : '' }}>{{ ucfirst($ms) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="profile_photo" class="form-label">Profile Photo</label>
                        <input type="file" id="profile_photo" name="profile_photo" accept="image/*" class="form-input text-sm">
                        @if($employee->profile_photo)
                            <p class="text-xxs text-gray-400 mt-1">Current photo will be kept if no new photo is uploaded.</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- Employment Details --}}
        <div class="card-static overflow-hidden">
            <button type="button" @click="sections.employment = !sections.employment" class="w-full card-header cursor-pointer hover:bg-gray-50 transition-colors">
                <h2 class="card-header-title">Employment Details</h2>
                <svg class="w-5 h-5 text-gray-400 transition-transform" :class="sections.employment ? 'rotate-180' : ''" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            <div x-show="sections.employment" x-collapse class="card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div>
                        <label for="department_id" class="form-label">Department <span class="text-danger-500">*</span></label>
                        <select id="department_id" name="department_id" class="form-select" required>
                            <option value="">Select</option>
                            @foreach($departments as $dept)
                                <option value="{{ $dept->id }}" {{ old('department_id', $employee->department_id) == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                            @endforeach
                        </select>
                        @error('department_id') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="designation_id" class="form-label">Designation <span class="text-danger-500">*</span></label>
                        <select id="designation_id" name="designation_id" class="form-select" required>
                            <option value="">Select</option>
                            @foreach($designations as $des)
                                <option value="{{ $des->id }}" {{ old('designation_id', $employee->designation_id) == $des->id ? 'selected' : '' }}>{{ $des->name }}</option>
                            @endforeach
                        </select>
                        @error('designation_id') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="reporting_manager_id" class="form-label">Reporting Manager</label>
                        <select id="reporting_manager_id" name="reporting_manager_id" class="form-select">
                            <option value="">None</option>
                            @foreach($employees as $emp)
                                <option value="{{ $emp->id }}" {{ old('reporting_manager_id', $employee->reporting_manager_id) == $emp->id ? 'selected' : '' }}>{{ $emp->full_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="joining_date" class="form-label">Joining Date <span class="text-danger-500">*</span></label>
                        <input type="date" name="joining_date" value="{{ old('joining_date', $employee->joining_date->format('Y-m-d')) }}" class="form-input" required>
                        @error('joining_date') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="probation_end_date" class="form-label">Probation End Date</label>
                        <input type="date" name="probation_end_date" value="{{ old('probation_end_date', $employee->probation_end_date?->format('Y-m-d')) }}" class="form-input">
                    </div>
                    <div>
                        <label for="contract_type" class="form-label">Contract Type <span class="text-danger-500">*</span></label>
                        <select name="contract_type" class="form-select" required>
                            @foreach(['permanent', 'contract', 'temporary'] as $ct)
                                <option value="{{ $ct }}" {{ old('contract_type', $employee->contract_type) == $ct ? 'selected' : '' }}>{{ ucfirst($ct) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="contract_end_date" class="form-label">Contract End Date</label>
                        <input type="date" name="contract_end_date" value="{{ old('contract_end_date', $employee->contract_end_date?->format('Y-m-d')) }}" class="form-input">
                    </div>
                    <div>
                        <label for="work_location" class="form-label">Work Location</label>
                        <input type="text" name="work_location" value="{{ old('work_location', $employee->work_location) }}" class="form-input">
                    </div>
                </div>
            </div>
        </div>

        {{-- Custom Fields --}}
        @if($customFields->isNotEmpty())
        <div class="card-static overflow-hidden">
            <button type="button" @click="sections.custom = !sections.custom" class="w-full card-header cursor-pointer hover:bg-gray-50 transition-colors">
                <h2 class="card-header-title">Additional Information</h2>
                <svg class="w-5 h-5 text-gray-400 transition-transform" :class="sections.custom ? 'rotate-180' : ''" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            <div x-show="sections.custom" x-collapse class="card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    @foreach($customFields->flatten() as $field)
                        <div>
                            <label class="form-label">{{ $field->field_label }}</label>
                            @if($field->field_type === 'select')
                                <select name="custom_fields[{{ $field->id }}]" class="form-select">
                                    <option value="">Select</option>
                                    @foreach($field->options ?? [] as $option)
                                        <option value="{{ $option }}" {{ ($customValues[$field->id] ?? '') == $option ? 'selected' : '' }}>{{ $option }}</option>
                                    @endforeach
                                </select>
                            @elseif($field->field_type === 'textarea')
                                <textarea name="custom_fields[{{ $field->id }}]" class="form-input" rows="3">{{ $customValues[$field->id] ?? '' }}</textarea>
                            @else
                                <input type="{{ $field->field_type }}" name="custom_fields[{{ $field->id }}]" value="{{ $customValues[$field->id] ?? '' }}" class="form-input">
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endif

        {{-- Submit --}}
        <div class="flex items-center gap-3 pt-2">
            <button type="submit" class="btn-primary">Save Changes</button>
            <a href="{{ route('employees.show', $employee) }}" class="btn-secondary">Cancel</a>
        </div>
    </form>
</div>
@endsection