@extends('layouts.app')
@section('title', 'Edit ' . (($locum->worker_type ?? 'locum') === 'volunteer' ? 'Volunteer' : 'Locum') . ' | ' . $locum->full_name)
@section('content')
@php $isVolunteer = ($locum->worker_type ?? 'locum') === 'volunteer'; @endphp
@include('locum.partials.payroll-tabs', ['active' => $isVolunteer ? 'volunteers' : 'register'])

<div class="max-w-3xl">

    {{-- Convert worker type — separate small form above the main edit form.
         Can't be inside the edit <form> because forms cannot be nested. --}}
    <div class="bg-white rounded-xl border border-{{ $isVolunteer ? 'purple' : 'amber' }}-200 p-3 mb-4 text-xs flex items-center justify-between gap-3 flex-wrap">
        <span>
            <strong>Currently registered as:</strong>
            <span class="{{ $isVolunteer ? 'text-purple-700' : 'text-amber-700' }} font-semibold">
                {{ $isVolunteer ? 'Volunteer' : 'Paid Locum' }}
            </span>
            <span class="text-gray-500 ml-2">
                @if($isVolunteer)
                    No payment is recorded for shifts. Convert to a paid locum to start tracking pay.
                @else
                    Eligible for shift entries and payroll. Convert to volunteer to stop pay tracking (history preserved).
                @endif
            </span>
        </span>
        <form method="POST" action="{{ route('locum.convert', $locum) }}" class="inline"
              onsubmit="return confirm('{{ $isVolunteer
                    ? 'Convert ' . addslashes($locum->full_name) . ' to a paid locum? Existing data is preserved; you will need to add KRA PIN, rate, and payment details before recording new shifts.'
                    : 'Convert ' . addslashes($locum->full_name) . ' to a volunteer? Existing shifts and payments are preserved, but no new paid shifts can be recorded.' }}');">
            @csrf @method('PUT')
            <input type="hidden" name="target" value="{{ $isVolunteer ? 'locum' : 'volunteer' }}">
            <button type="submit" class="text-xs {{ $isVolunteer ? 'bg-cr-600 hover:bg-cr-700' : 'bg-purple-600 hover:bg-purple-700' }} text-white px-3 py-1.5 rounded font-semibold">
                Convert to {{ $isVolunteer ? 'Paid Locum' : 'Volunteer' }}
            </button>
        </form>
    </div>

    {{-- Convert to Full-Time Staff — goes to a different DB table
         (staff_records), so we redirect to the HR staff create modal
         pre-filled. The locum/volunteer record is only deactivated after
         the user actually saves the new staff record. --}}
    <div class="bg-white rounded-xl border border-emerald-200 p-3 mb-4 text-xs flex items-center justify-between gap-3 flex-wrap">
        <span>
            <strong>Promote to Full-Time:</strong>
            <span class="text-gray-500 ml-2">
                Move this person to the permanent staff register. Their existing details (name, ID, KRA, SHA, NSSF, license, contacts, documents) will be pre-filled on the staff form for review.
                The {{ $isVolunteer ? 'volunteer' : 'locum' }} record stays active until the new staff record is saved.
            </span>
        </span>
        <form method="POST" action="{{ route('locum.convert-to-staff', $locum) }}" class="inline"
              onsubmit="return confirm('Pre-fill the Add Staff form with {{ addslashes($locum->full_name) }}\'s details?\n\nThe {{ $isVolunteer ? 'volunteer' : 'locum' }} record will only be deactivated after you save the new staff record. You can cancel partway through with no changes.');">
            @csrf
            <button type="submit" class="text-xs bg-emerald-600 hover:bg-emerald-700 text-white px-3 py-1.5 rounded font-semibold">
                Convert to Full-Time Staff
            </button>
        </form>
    </div>

    <form method="POST" action="{{ route('locum.update', $locum) }}" enctype="multipart/form-data">@csrf @method('PUT')
        <div class="bg-white rounded-xl border p-6 space-y-5">
            <div class="flex items-center justify-between">
                <h3 class="text-sm font-bold text-gray-700 uppercase">
                    @if($isVolunteer) Volunteer @else Personal Information @endif
                </h3>
                <span class="badge {{ $isVolunteer ? 'badge-purple' : 'badge-info' }} font-mono">{{ $locum->staff_number }}</span>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 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', $locum->first_name ?: explode(' ', trim($locum->full_name ?? ''), 2)[0] ?? '') }}">
                </div>
                <div>
                    <label class="form-label">Last Name</label>
                    <input type="text" name="last_name" class="form-input"
                        value="{{ old('last_name', $locum->last_name ?: (explode(' ', trim($locum->full_name ?? ''), 2)[1] ?? '')) }}">
                </div>
                <div>
                    <label class="form-label">ID / Passport Number</label>
                    <input type="text" name="id_passport_no" class="form-input" value="{{ old('id_passport_no', $locum->id_passport_no) }}">
                </div>
                <div>
                    <label class="form-label">Phone Number <span class="text-red-500">*</span></label>
                    <input type="text" name="phone" required class="form-input" value="{{ old('phone', $locum->phone) }}">
                </div>
                <div>
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-input" value="{{ old('email', $locum->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', $locum->date_of_birth?->format('Y-m-d')) }}">
                </div>
                <div>
                    <label class="form-label">Gender</label>
                    <select name="gender" class="form-input">
                        <option value="">—</option>
                        @foreach(['male' => 'Male', 'female' => 'Female', 'other' => 'Other', 'prefer_not_to_say' => 'Prefer not to say'] as $v => $l)
                            <option value="{{ $v }}" {{ old('gender', $locum->gender) === $v ? 'selected' : '' }}>{{ $l }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="form-label">Role / Designation <span class="text-red-500">*</span></label>
                    @if($isVolunteer)
                        <select name="role_designation" required class="form-input">
                            <option value="">Select...</option>
                            @foreach(['Cleaner','Volunteer Nurse','Pharmacy Intern','Records Clerk','Community Health Volunteer','General Volunteer','Other'] as $r)
                                <option value="{{ $r }}" {{ old('role_designation', $locum->role_designation)===$r?'selected':'' }}>{{ $r }}</option>
                            @endforeach
                        </select>
                    @else
                        <select name="role_designation" required class="form-input" id="role-select" onchange="autoSetRateType(this.value)">
                            <option value="">Select...</option>
                            @foreach(['Doctor','Nurse','Clinical Officer','Receptionist','Cashier','CNA','Lab Technician','Pharmacist','Radiographer','Physiotherapist','Dentist','Sonographer','Other'] as $r)
                                <option value="{{ $r }}" {{ old('role_designation', $locum->role_designation)===$r?'selected':'' }}>{{ $r }}</option>
                            @endforeach
                        </select>
                    @endif
                </div>
                <div>
                    <label class="form-label">Department <span class="text-red-500">*</span></label>
                    <select name="department_id" required class="form-input">
                        @include('partials._department-options', ['selected' => old('department_id', $locum->department_id)])
                    </select>
                </div>
                <div>
                    <label class="form-label">Status</label>
                    <select name="status" class="form-input">
                        <option value="active"   {{ old('status',$locum->status)==='active'?'selected':'' }}>Active</option>
                        <option value="inactive" {{ old('status',$locum->status)==='inactive'?'selected':'' }}>Inactive</option>
                    </select>
                </div>
            </div>

            @unless($isVolunteer)
            <h3 class="text-sm font-bold text-gray-700 uppercase pt-3">Statutory &amp; Tax</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', $locum->kra_pin) }}">
                </div>
                <div>
                    <label class="form-label">SHA Number</label>
                    <input type="text" name="sha_number" class="form-input font-mono" value="{{ old('sha_number', $locum->sha_number) }}">
                </div>
                <div>
                    <label class="form-label">NSSF Number</label>
                    <input type="text" name="nssf_number" class="form-input font-mono" value="{{ old('nssf_number', $locum->nssf_number) }}">
                </div>
            </div>
            @endunless

            <h3 class="text-sm font-bold text-gray-700 uppercase pt-3">Professional License</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="form-label">License Number</label>
                    <input type="text" name="license_no" class="form-input" id="license-no-input"
                        value="{{ old('license_no', $locum->license_no) }}" oninput="toggleLicenseExpiry()">
                </div>
                <div id="license-expiry-wrap" style="{{ old('license_no', $locum->license_no) ? '' : '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="license-expiry-input"
                        value="{{ old('license_expiry', $locum->license_expiry?->format('Y-m-d')) }}">
                </div>
            </div>

            <h3 class="text-sm font-bold text-gray-700 uppercase pt-3">Emergency Contact</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="form-label">Contact Name</label>
                    <input type="text" name="emergency_contact_name" class="form-input" value="{{ old('emergency_contact_name', $locum->emergency_contact_name) }}">
                </div>
                <div>
                    <label class="form-label">Contact Phone</label>
                    <input type="text" name="emergency_contact_phone" class="form-input" value="{{ old('emergency_contact_phone', $locum->emergency_contact_phone) }}">
                </div>
            </div>

            <h3 class="text-sm font-bold text-gray-700 uppercase pt-3">Documents</h3>
            <div class="space-y-3">
                @if($locum->documents)
                    <div class="bg-gray-50 border rounded p-3 space-y-1">
                        <p class="text-xs font-semibold text-gray-500 uppercase">Existing</p>
                        @foreach($locum->documents as $doc)
                            <div class="text-xs flex items-center gap-2">
                                <a href="{{ asset('storage/' . ($doc['path'] ?? '')) }}" target="_blank" class="text-blue-600 hover:underline">{{ $doc['name'] ?? 'file' }}</a>
                                <span class="text-gray-400">· uploaded {{ \Carbon\Carbon::parse($doc['uploaded_at'] ?? now())->format('d M Y') }}</span>
                            </div>
                        @endforeach
                    </div>
                @endif
                <div>
                    <label class="form-label">Add more files</label>
                    <input type="file" name="documents[]" multiple accept=".pdf,.jpg,.jpeg,.png" class="form-input">
                    <p class="text-xs text-gray-400 mt-1">Existing files are kept; uploads add to the list. Up to 5 MB each.</p>
                </div>
            </div>

            @unless($isVolunteer)
            <h3 class="text-sm font-bold text-gray-700 uppercase pt-3">Payment Details</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="form-label">Rate Type <span class="text-red-500">*</span></label>
                    <select name="rate_type" required class="form-input" id="rate-type-select" onchange="toggleRateLabel(this.value)">
                        <option value="per_shift"  {{ old('rate_type', $locum->rate_type ?? 'per_shift')==='per_shift'?'selected':'' }}>Rate per Shift (Daily Rate)</option>
                        <option value="percentage" {{ old('rate_type', $locum->rate_type)==='percentage'?'selected':'' }}>Percentage of Procedure</option>
                    </select>
                </div>
                <div>
                    <label class="form-label" id="rate-label">Default Rate per Shift (KES) <span class="text-red-500">*</span></label>
                    <input type="number" step="0.01" name="default_rate" required class="form-input" id="rate-input" value="{{ old('default_rate', $locum->default_rate) }}">
                    <p class="text-xs text-gray-400 mt-1" id="rate-hint">Enter flat KES amount per shift</p>
                </div>
                <div>
                    <label class="form-label">Payment Mode</label>
                    <select name="payment_mode" class="form-input" onchange="togglePaymentFields(this.value)">
                        <option value="mpesa" {{ old('payment_mode', $locum->payment_mode)==='mpesa'?'selected':'' }}>M-Pesa</option>
                        <option value="bank"  {{ old('payment_mode', $locum->payment_mode)==='bank'?'selected':'' }}>Bank Transfer</option>
                    </select>
                </div>
                <div id="mpesa-field">
                    <label class="form-label">M-Pesa Number</label>
                    <input type="text" name="mpesa_no" class="form-input" value="{{ old('mpesa_no', $locum->mpesa_no) }}">
                </div>
                <div id="bank-fields" class="md:col-span-2 grid grid-cols-2 gap-4" style="display:none">
                    <div><label class="form-label">Bank Name</label><input type="text" name="bank_name" class="form-input" value="{{ old('bank_name', $locum->bank_name) }}"></div>
                    <div><label class="form-label">Bank Account</label><input type="text" name="bank_account" class="form-input" value="{{ old('bank_account', $locum->bank_account) }}"></div>
                </div>
                <div class="md:col-span-2 border-t pt-4 mt-2">
                    <label class="form-label">Link to System Account <span class="text-gray-400 font-normal">(optional — enables imaging report auto-population in shift entry)</span></label>
                    <select name="user_id" class="form-input">
                        <option value="">Not linked to a system account</option>
                        @foreach(\App\Models\User::orderBy('name')->get() as $u)
                            <option value="{{ $u->id }}" {{ old('user_id', $locum->user_id) == $u->id ? 'selected' : '' }}>
                                {{ $u->name }} — {{ $u->roles->first()->name ?? 'No role' }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
            @endunless

            <div class="flex gap-3 pt-3">
                <button type="submit" class="btn-primary">Update {{ $isVolunteer ? 'Volunteer' : 'Locum' }}</button>
                <a href="{{ route('locum.index', $isVolunteer ? ['worker_type' => 'volunteer'] : []) }}" class="btn-secondary">Cancel</a>
            </div>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
function togglePaymentFields(mode){
    var m = document.getElementById('mpesa-field');
    var b = document.getElementById('bank-fields');
    if (m) m.style.display = mode==='mpesa' ? '' : 'none';
    if (b) b.style.display = mode==='bank' ? '' : 'none';
}
function toggleLicenseExpiry(){
    var n = document.getElementById('license-no-input');
    if (!n) return;
    var hasLicense = n.value.trim().length > 0;
    var wrap = document.getElementById('license-expiry-wrap');
    var input = document.getElementById('license-expiry-input');
    if (!wrap || !input) return;
    wrap.style.display = hasLicense ? '' : 'none';
    if(hasLicense){ input.setAttribute('required','required'); } else { input.removeAttribute('required'); }
}
function toggleRateLabel(type){
    var label = document.getElementById('rate-label');
    var hint = document.getElementById('rate-hint');
    if (!label || !hint) return;
    if(type==='percentage'){
        label.innerHTML = 'Default Percentage (%) <span class="text-red-500">*</span>';
        hint.textContent = 'Enter percentage of procedure amount (e.g. 30 for 30%)';
    } else {
        label.innerHTML = 'Default Rate per Shift (KES) <span class="text-red-500">*</span>';
        hint.textContent = 'Enter flat KES amount per shift';
    }
}
function autoSetRateType(role){
    var pctRoles = ['Radiographer','Physiotherapist','Dentist','Sonographer'];
    var sel = document.getElementById('rate-type-select');
    if (!sel) return;
    sel.value = pctRoles.includes(role) ? 'percentage' : 'per_shift';
    toggleRateLabel(sel.value);
}
@if(!$isVolunteer)
togglePaymentFields('{{ old('payment_mode', $locum->payment_mode ?? 'mpesa') }}');
(function(){ var rts = document.getElementById('rate-type-select'); if (rts) toggleRateLabel(rts.value); })();
@endif
toggleLicenseExpiry();
</script>
@endsection