@extends('layouts.app')
@section('title', 'Edit Staff — ' . $staff->full_name)
@section('content')

<div class="mb-4 flex items-start justify-between flex-wrap gap-3">
    <div>
        <div class="text-xs text-gray-400 mb-1">
            <a href="{{ route('hr.index', ['panel' => 'staff']) }}" class="text-purple-700 hover:underline">Staff Register</a>
            <span class="text-gray-300 mx-1">/</span>
            <a href="{{ route('hr.staff.show', $staff->id) }}" class="text-purple-700 hover:underline">{{ $staff->full_name }}</a>
            <span class="text-gray-300 mx-1">/</span>
            Edit
        </div>
        <h2 class="text-lg font-bold text-gray-700">Edit Staff Record</h2>
        <p class="text-xs text-gray-500">{{ $staff->employee_number }} · {{ $staff->department->name ?? 'No department' }}</p>
    </div>
    <div class="flex items-center gap-2">
        <a href="{{ route('hr.staff.show', $staff->id) }}" class="btn-secondary text-xs">Cancel</a>
    </div>
</div>

@if($errors->any())
<div class="mb-4 bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 text-xs">
    <p class="font-semibold mb-1">Please fix the following:</p>
    <ul class="list-disc list-inside">
        @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<form method="POST" action="{{ route('hr.staff.update', $staff->id) }}" class="space-y-4">
    @csrf
    @method('PUT')

    {{-- ─── Personal Details ─── --}}
    <div class="bg-white rounded-xl border p-5">
        <h3 class="text-sm font-bold text-gray-700 uppercase mb-4 pb-2 border-b">
            <span class="text-purple-700">1.</span> Personal Details
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="form-label">First Name <span class="text-red-500">*</span></label>
                <input type="text" name="first_name" required class="form-input"
                       value="{{ old('first_name', $staff->first_name) }}">
            </div>
            <div>
                <label class="form-label">Last Name <span class="text-red-500">*</span></label>
                <input type="text" name="last_name" required class="form-input"
                       value="{{ old('last_name', $staff->last_name) }}">
            </div>
            <div>
                <label class="form-label">Employee #</label>
                <input type="text" class="form-input bg-gray-50 text-gray-500"
                       value="{{ $staff->employee_number }}" disabled>
                <p class="text-xs text-gray-400 mt-1">Auto-generated, cannot be changed</p>
            </div>
            <div>
                <label class="form-label">ID Number <span class="text-red-500">*</span></label>
                <input type="text" name="id_number" required class="form-input"
                       value="{{ old('id_number', $staff->id_number) }}">
            </div>
            <div>
                <label class="form-label">Phone <span class="text-red-500">*</span></label>
                <input type="text" name="phone" required class="form-input"
                       value="{{ old('phone', $staff->phone) }}">
            </div>
            <div>
                <label class="form-label">Email <span class="text-red-500">*</span></label>
                <input type="email" name="email" required class="form-input"
                       value="{{ old('email', $staff->email) }}">
            </div>
            <div>
                <label class="form-label">Date of Birth</label>
                <input type="date" name="date_of_birth" class="form-input"
                       value="{{ old('date_of_birth', optional($staff->date_of_birth)->format('Y-m-d')) }}">
            </div>
            <div>
                <label class="form-label">Gender <span class="text-red-500">*</span></label>
                <select name="gender" required class="form-input">
                    <option value="">Select…</option>
                    <option value="male"   {{ old('gender', $staff->gender) === 'male'   ? 'selected' : '' }}>Male</option>
                    <option value="female" {{ old('gender', $staff->gender) === 'female' ? 'selected' : '' }}>Female</option>
                </select>
            </div>
        </div>
    </div>

    {{-- ─── Employment Details ─── --}}
    <div class="bg-white rounded-xl border p-5">
        <h3 class="text-sm font-bold text-gray-700 uppercase mb-4 pb-2 border-b">
            <span class="text-purple-700">2.</span> Employment
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="form-label">Department <span class="text-red-500">*</span></label>
                <select name="department_id" required class="form-input">
                    <option value="">Select…</option>
                    @include('partials._department-options', ['selected' => old('department_id', $staff->department_id)])
                </select>
            </div>
            <div>
                <label class="form-label">Designation</label>
                <input type="text" name="designation" class="form-input"
                       value="{{ old('designation', $staff->designation) }}"
                       placeholder="e.g. Nurse, Doctor, Pharmacist">
            </div>
            {{-- Professional License: optional, but expiry becomes required
                 once a number is entered. JS at the bottom of this view
                 hides the expiry input until a number is typed. --}}
            @php $lnEdit = old('license_no', $staff->license_no); @endphp
            <div>
                <label class="form-label">License Number</label>
                <input type="text" name="license_no" class="form-input" id="staff-edit-license-no"
                       value="{{ $lnEdit }}" oninput="toggleStaffEditLicenseExpiry()"
                       placeholder="Optional — e.g. NCK / KMPDC registration">
            </div>
            <div id="staff-edit-license-expiry-wrap" style="{{ $lnEdit ? '' : 'display:none' }}">
                <label class="form-label">License Expiry <span class="text-red-500">*</span></label>
                <input type="date" name="license_expiry" class="form-input" id="staff-edit-license-expiry"
                       value="{{ old('license_expiry', $staff->license_expiry?->format('Y-m-d')) }}">
            </div>
            <div>
                <label class="form-label">Status <span class="text-red-500">*</span></label>
                <select name="status" required class="form-input">
                    @foreach(['active', 'inactive', 'on_leave', 'suspended', 'terminated'] as $st)
                        <option value="{{ $st }}" {{ old('status', $staff->status) === $st ? 'selected' : '' }}>
                            {{ ucfirst(str_replace('_', ' ', $st)) }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="form-label">Employment Type</label>
                <select name="employment_type" class="form-input">
                    <option value="">—</option>
                    @foreach(['full_time' => 'Full-time', 'contract' => 'Contract', 'casual' => 'Casual', 'locum' => 'Locum', 'intern' => 'Intern', 'consultant' => 'Consultant'] as $val => $lbl)
                        <option value="{{ $val }}" {{ old('employment_type', $staff->employment_type) === $val ? 'selected' : '' }}>{{ $lbl }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="form-label">Contract Type</label>
                <select name="contract_type" class="form-input">
                    <option value="">—</option>
                    @foreach(['permanent' => 'Permanent', 'contract' => 'Contract', 'casual' => 'Casual'] as $val => $lbl)
                        <option value="{{ $val }}" {{ old('contract_type', $staff->contract_type) === $val ? 'selected' : '' }}>{{ $lbl }}</option>
                    @endforeach
                </select>
            </div>
            <div></div>
            <div>
                <label class="form-label">Employment Date</label>
                <input type="date" name="employment_date" class="form-input"
                       value="{{ old('employment_date', optional($staff->employment_date)->format('Y-m-d')) }}">
            </div>
            <div>
                <label class="form-label">End Date</label>
                <input type="date" name="end_date" class="form-input"
                       value="{{ old('end_date', optional($staff->end_date)->format('Y-m-d')) }}">
                <p class="text-xs text-gray-400 mt-1">Only if contract is ending or has ended</p>
            </div>
        </div>
    </div>

    {{-- ─── Compensation ─── --}}
    <div class="bg-white rounded-xl border p-5">
        <div class="flex items-start justify-between mb-4 pb-2 border-b">
            <h3 class="text-sm font-bold text-gray-700 uppercase">
                <span class="text-purple-700">3.</span> Compensation
            </h3>
            @if(Route::has('payroll.staff.profile'))
            <a href="{{ route('payroll.staff.profile', $staff->id) }}" class="text-xs text-purple-700 hover:underline">
                Open in Payroll Profile →
            </a>
            @endif
        </div>
        <p class="text-xs text-gray-500 mb-4">
            These figures feed into payroll generation.
            @if(Route::has('payroll.staff.profile'))
                The <a href="{{ route('payroll.staff.profile', $staff->id) }}" class="text-purple-700 hover:underline">Payroll Profile page</a>
                is the canonical place for tax / SHA / NSSF detail. Edits here flow through to the next payroll run.
            @else
                Edits here flow through to the next payroll run.
            @endif
        </p>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="form-label">Basic Salary (KES)</label>
                <input type="number" name="salary" step="0.01" min="0" class="form-input"
                       value="{{ old('salary', $staff->salary) }}">
            </div>
            <div>
                <label class="form-label">Taxable Allowances (KES)</label>
                <input type="number" name="taxable_allowances" step="0.01" min="0" class="form-input"
                       value="{{ old('taxable_allowances', $staff->taxable_allowances) }}">
                <p class="text-xs text-gray-400 mt-1">House, transport, etc.</p>
            </div>
            <div>
                <label class="form-label">Non-taxable Allowances (KES)</label>
                <input type="number" name="non_taxable_allowances" step="0.01" min="0" class="form-input"
                       value="{{ old('non_taxable_allowances', $staff->non_taxable_allowances) }}">
                <p class="text-xs text-gray-400 mt-1">Per diem, etc.</p>
            </div>
            <div>
                <label class="form-label">Benefits in Kind (KES)</label>
                <input type="number" name="benefits_in_kind" step="0.01" min="0" class="form-input"
                       value="{{ old('benefits_in_kind', $staff->benefits_in_kind) }}">
            </div>
            <div>
                <label class="form-label">Pension Contribution (KES)</label>
                <input type="number" name="pension_contribution" step="0.01" min="0" class="form-input"
                       value="{{ old('pension_contribution', $staff->pension_contribution) }}">
            </div>
            <div>
                <label class="form-label">Insurance Relief (KES)</label>
                <input type="number" name="insurance_relief" step="0.01" min="0" class="form-input"
                       value="{{ old('insurance_relief', $staff->insurance_relief) }}">
            </div>
        </div>
    </div>

    {{-- ─── Statutory Numbers ─── --}}
    <div class="bg-white rounded-xl border p-5">
        <h3 class="text-sm font-bold text-gray-700 uppercase mb-4 pb-2 border-b">
            <span class="text-purple-700">4.</span> Statutory Numbers
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="form-label">KRA PIN <span class="text-red-500">*</span></label>
                <input type="text" name="kra_pin" required class="form-input font-mono"
                       value="{{ old('kra_pin', $staff->kra_pin) }}" placeholder="A012345678X">
            </div>
            <div>
                <label class="form-label">NSSF Number <span class="text-red-500">*</span></label>
                <input type="text" name="nssf_number" required class="form-input font-mono"
                       value="{{ old('nssf_number', $staff->nssf_number) }}">
            </div>
            <div>
                <label class="form-label">SHA Number</label>
                <input type="text" name="sha_number" class="form-input font-mono"
                       value="{{ old('sha_number', $staff->sha_number) }}"
                       placeholder="Social Health Authority registration">
            </div>
        </div>
    </div>

    {{-- ─── Payment Method ─── --}}
    <div class="bg-white rounded-xl border p-5">
        <h3 class="text-sm font-bold text-gray-700 uppercase mb-4 pb-2 border-b">
            <span class="text-purple-700">5.</span> Payment Method
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="form-label">Method</label>
                <select name="payment_method" class="form-input">
                    <option value="">—</option>
                    @foreach(['bank' => 'Bank Transfer', 'mpesa' => 'M-Pesa', 'cash' => 'Cash', 'cheque' => 'Cheque'] as $val => $lbl)
                        <option value="{{ $val }}" {{ old('payment_method', $staff->payment_method) === $val ? 'selected' : '' }}>{{ $lbl }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="form-label">Bank Name</label>
                <input type="text" name="bank_name" class="form-input"
                       value="{{ old('bank_name', $staff->bank_name) }}">
            </div>
            <div>
                <label class="form-label">Bank Account</label>
                <input type="text" name="bank_account" class="form-input"
                       value="{{ old('bank_account', $staff->bank_account) }}">
            </div>
            <div>
                <label class="form-label">M-Pesa Number</label>
                <input type="text" name="mobile_payment_number" class="form-input"
                       value="{{ old('mobile_payment_number', $staff->mobile_payment_number) }}"
                       placeholder="07XXXXXXXX">
            </div>
        </div>
    </div>

    {{-- ─── Emergency Contact ─── --}}
    <div class="bg-white rounded-xl border p-5">
        <h3 class="text-sm font-bold text-gray-700 uppercase mb-4 pb-2 border-b">
            <span class="text-purple-700">6.</span> Emergency Contact
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="form-label">Name</label>
                <input type="text" name="emergency_contact_name" class="form-input"
                       value="{{ old('emergency_contact_name', $staff->emergency_contact_name) }}">
            </div>
            <div>
                <label class="form-label">Phone</label>
                <input type="text" name="emergency_contact_phone" class="form-input"
                       value="{{ old('emergency_contact_phone', $staff->emergency_contact_phone) }}">
            </div>
        </div>
    </div>

    {{-- ─── Notes ─── --}}
    <div class="bg-white rounded-xl border p-5">
        <h3 class="text-sm font-bold text-gray-700 uppercase mb-4 pb-2 border-b">
            <span class="text-purple-700">7.</span> Notes
        </h3>
        <textarea name="notes" rows="3" class="form-input"
                  placeholder="Any internal notes about this staff member…">{{ old('notes', $staff->notes) }}</textarea>
    </div>

    {{-- ─── Submit ─── --}}
    <div class="flex items-center justify-end gap-2 pt-2">
        <a href="{{ route('hr.staff.show', $staff->id) }}" class="btn-secondary text-xs">Cancel</a>
        <button type="submit" class="btn-primary text-xs">Save Changes</button>
    </div>
</form>

@endsection

@section('scripts')
<script>
// Show/hide the License Expiry input based on whether a License Number is
// present. Same pattern as the locum form and the staff Add modal.
function toggleStaffEditLicenseExpiry(){
    var n = document.getElementById('staff-edit-license-no');
    var wrap = document.getElementById('staff-edit-license-expiry-wrap');
    var input = document.getElementById('staff-edit-license-expiry');
    if (!n || !wrap || !input) return;
    var hasLicense = n.value.trim().length > 0;
    wrap.style.display = hasLicense ? '' : 'none';
    if (hasLicense) { input.setAttribute('required','required'); } else { input.removeAttribute('required'); }
}
window.addEventListener('DOMContentLoaded', toggleStaffEditLicenseExpiry);
</script>
@endsection