@extends('layouts.app')
@section('title','Edit — '.$employee->full_name)
@section('page-title','Employees')

@section('content')
<div class="page-header">
    <div class="d-flex align-items-center gap-2 flex-wrap">
        <a href="{{ route('employees.show', $employee) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i></a>
        <div>
            <h1>Edit: {{ $employee->full_name }}</h1>
            <nav aria-label="breadcrumb"><ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('employees.index') }}">Employees</a></li>
                <li class="breadcrumb-item"><a href="{{ route('employees.show', $employee) }}">{{ $employee->full_name }}</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol></nav>
        </div>
    </div>
</div>

<form method="POST" action="{{ route('employees.update', $employee) }}">
@csrf @method('PUT')

<div class="row g-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header"><i class="bi bi-person me-2" style="color:var(--ul-primary);"></i>Personal Information</div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-12 col-sm-4">
                        <label class="form-label">Last Name *</label>
                        <input type="text" name="last_name" class="form-control" value="{{ old('last_name', $employee->last_name) }}" required>
                    </div>
                    <div class="col-12 col-sm-4">
                        <label class="form-label">First Name *</label>
                        <input type="text" name="first_name" class="form-control" value="{{ old('first_name', $employee->first_name) }}" required>
                    </div>
                    <div class="col-12 col-sm-4">
                        <label class="form-label">Middle Name</label>
                        <input type="text" name="middle_name" class="form-control" value="{{ old('middle_name', $employee->middle_name) }}">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Present Address</label>
                        <input type="text" name="present_address" class="form-control" value="{{ old('present_address', $employee->present_address) }}">
                    </div>
                    <div class="col-6 col-sm-3">
                        <label class="form-label">Date of Birth</label>
                        <input type="date" name="date_of_birth" class="form-control" value="{{ old('date_of_birth', $employee->date_of_birth?->format('Y-m-d')) }}">
                    </div>
                    <div class="col-6 col-sm-3">
                        <label class="form-label">Gender</label>
                        <select name="gender" class="form-select">
                            <option value="">— Select —</option>
                            <option value="Male"   {{ old('gender',$employee->gender)==='Male'?'selected':'' }}>Male</option>
                            <option value="Female" {{ old('gender',$employee->gender)==='Female'?'selected':'' }}>Female</option>
                        </select>
                    </div>
                    <div class="col-6 col-sm-3">
                        <label class="form-label">Marital Status</label>
                        <select 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':'' }}>{{ $ms }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6 col-sm-3">
                        <label class="form-label">Citizenship</label>
                        <input type="text" name="citizenship" class="form-control" value="{{ old('citizenship', $employee->citizenship) }}">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="card">
            <div class="card-header"><i class="bi bi-briefcase me-2" style="color:var(--ul-primary);"></i>Employment Details</div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-12 col-sm-6">
                        <label class="form-label">Position *</label>
                        <input type="text" name="position" class="form-control" value="{{ old('position', $employee->position) }}" required>
                    </div>
                    <div class="col-12 col-sm-6">
                        <label class="form-label">Department *</label>
                        <select name="department_id" class="form-select" required>
                            <option value="">— Select —</option>
                            @foreach($departments as $d)
                            <option value="{{ $d->id }}" {{ old('department_id',$employee->department_id)==$d->id?'selected':'' }}>{{ $d->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6 col-sm-3">
                        <label class="form-label">Date of Employment</label>
                        <input type="date" name="date_of_employment" class="form-control" value="{{ old('date_of_employment', $employee->date_of_employment?->format('Y-m-d')) }}">
                    </div>
                    <div class="col-6 col-sm-3">
                        <label class="form-label">Employment Type</label>
                        <select name="employment_type" class="form-select">
                            @foreach(['full_time'=>'Full Time','part_time'=>'Part Time','contract'=>'Contract','temporary'=>'Temporary'] as $val=>$label)
                            <option value="{{ $val }}" {{ old('employment_type',$employee->employment_type)===$val?'selected':'' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6 col-sm-3">
                        <label class="form-label">Salary (USD)</label>
                        <input type="number" name="salary_usd" class="form-control" value="{{ old('salary_usd', $employee->salary_usd) }}" step="0.01" min="0">
                    </div>
                    <div class="col-6 col-sm-3">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-select">
                            @foreach(['active','on_leave','suspended','terminated','retired'] as $s)
                            <option value="{{ $s }}" {{ old('status',$employee->status)===$s?'selected':'' }}>{{ ucfirst(str_replace('_',' ',$s)) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6 col-sm-4">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control" value="{{ old('email', $employee->user->email ?? '') }}">
                    </div>
                    <div class="col-6 col-sm-4">
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" class="form-control" value="{{ old('phone', $employee->user->phone ?? '') }}">
                    </div>
                    <div class="col-6 col-sm-4">
                        <label class="form-label">Bank Name</label>
                        <input type="text" name="bank_name" class="form-control" value="{{ old('bank_name', $employee->bank_name) }}">
                    </div>

                    {{-- Attendance Mode --}}
                    <div class="col-12">
                        <label class="form-label">Attendance & Clock-In Mode</label>
                        <div class="row g-2">
                            @foreach([
                                'required'     => ['icon'=>'bi-geo-alt-fill',    'color'=>'primary', 'label'=>'Required',     'desc'=>'Must clock in. GPS restriction applies if globally enabled. Absent days are deducted from pay.'],
                                'remote'       => ['icon'=>'bi-wifi',            'color'=>'info',    'label'=>'Remote',       'desc'=>'May clock in from any location. GPS is bypassed. Attendance is still tracked and absent days may still be deducted.'],
                                'not_required' => ['icon'=>'bi-shield-check',    'color'=>'success', 'label'=>'Not Required', 'desc'=>'Clock-in is not expected. Always paid the full period salary. Suitable for senior staff, fixed-salary managers, and directors.'],
                            ] as $value => $opt)
                            @php $selected = old('attendance_mode', $employee->attendance_mode ?? 'required') === $value; @endphp
                            <div class="col-12 col-sm-4">
                                <label style="cursor:pointer;display:block;">
                                    <input type="radio" name="attendance_mode" value="{{ $value }}"
                                           style="display:none;" class="att-mode-radio"
                                           {{ $selected ? 'checked' : '' }}>
                                    <div class="att-mode-card {{ $selected ? 'selected' : '' }}"
                                         style="border:2px solid {{ $selected ? 'var(--ul-primary)' : 'var(--card-border)' }};
                                                border-radius:12px;padding:.9rem;text-align:center;
                                                background:{{ $selected ? 'var(--body-bg)' : 'var(--card-bg)' }};
                                                transition:all .15s;">
                                        <i class="bi {{ $opt['icon'] }} text-{{ $opt['color'] }}" style="font-size:1.4rem;display:block;margin-bottom:.4rem;"></i>
                                        <div class="fw-bold" style="font-size:.85rem;">{{ $opt['label'] }}</div>
                                        <div style="font-size:.72rem;color:var(--text-2);margin-top:.25rem;line-height:1.4;">{{ $opt['desc'] }}</div>
                                    </div>
                                </label>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- Pension Eligible --}}
                    <div class="col-12">
                        <div class="d-flex align-items-center justify-content-between p-3 rounded-3"
                             style="background:var(--body-bg);border:1px solid var(--card-border);">
                            <div>
                                <div class="fw-semibold" style="font-size:.88rem;">Pension Eligible</div>
                                <div style="font-size:.78rem;color:var(--text-2);">
                                    When enabled, this employee appears in the Pension module's enroll list.
                                    Disable for contractors, short-term staff, or anyone excluded from the pension scheme.
                                </div>
                            </div>
                            <div class="form-check form-switch ms-3 mb-0">
                                <input type="checkbox" name="pension_eligible" id="pensionEligible"
                                       class="form-check-input" role="switch" value="1"
                                       style="width:2.5rem;height:1.3rem;cursor:pointer;"
                                       {{ old('pension_eligible', $employee->pension_eligible) ? 'checked' : '' }}>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="card">
            <div class="card-body d-flex gap-2">
                <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i>Save Changes</button>
                <a href="{{ route('employees.show', $employee) }}" class="btn btn-outline-secondary">Cancel</a>
            </div>
        </div>
    </div>
</div>
</form>
@push('scripts')
<script>
document.querySelectorAll('.att-mode-radio').forEach(function(radio) {
    radio.addEventListener('change', function() {
        document.querySelectorAll('.att-mode-card').forEach(function(card) {
            card.style.borderColor = 'var(--card-border)';
            card.style.background  = 'var(--card-bg)';
        });
        var card = this.closest('label').querySelector('.att-mode-card');
        card.style.borderColor = 'var(--ul-primary)';
        card.style.background  = 'var(--body-bg)';
    });
});
</script>
@endpush
@endsection