@extends('layouts.app')
@section('title', $workerType === 'volunteer' ? 'Register Volunteer' : 'Register Locum')
@section('content')
@include('locum.partials.payroll-tabs', ['active' => $workerType === 'volunteer' ? 'volunteers' : 'register'])
<div class="max-w-3xl">
    @php $isVolunteer = ($workerType ?? 'locum') === 'volunteer'; @endphp

    <form method="POST" action="{{ route('locum.store') }}" enctype="multipart/form-data">@csrf
        <input type="hidden" name="worker_type" value="{{ $workerType }}">

        <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 Registration @else Personal Information @endif
                </h3>
                <span class="badge {{ $isVolunteer ? 'badge-purple' : 'badge-info' }} font-mono">Next: {{ $nextStaffNumber }}</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') }}">
                </div>
                <div>
                    <label class="form-label">Last Name</label>
                    <input type="text" name="last_name" class="form-input" value="{{ old('last_name') }}">
                </div>
                <div>
                    <label class="form-label">{{ $isVolunteer ? 'Volunteer No.' : 'Locum Staff No.' }}</label>
                    <input type="text" class="form-input bg-gray-100 font-mono" value="{{ $nextStaffNumber }}" disabled>
                    <p class="text-xs text-gray-400 mt-1">Auto-generated</p>
                </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') }}">
                </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') }}">
                </div>
                <div>
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-input" value="{{ old('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') }}">
                </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') === $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')===$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')===$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">
                        <option value="">Select...</option>
                        @include('partials._department-options', ['selected' => old('department_id')])
                    </select>
                </div>
            </div>

            {{-- Statutory & tax (locums only — volunteers don't get paid) --}}
            @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') }}">
                </div>
                <div>
                    <label class="form-label">SHA Number</label>
                    <input type="text" name="sha_number" class="form-input font-mono" value="{{ old('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') }}">
                </div>
            </div>
            @endunless

            {{-- Professional license --}}
            <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') }}" oninput="toggleLicenseExpiry()">
                </div>
                <div id="license-expiry-wrap" style="{{ old('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') }}">
                </div>
            </div>

            {{-- Emergency contact --}}
            <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') }}">
                </div>
                <div>
                    <label class="form-label">Contact Phone</label>
                    <input type="text" name="emergency_contact_phone" class="form-input" value="{{ old('emergency_contact_phone') }}">
                </div>
            </div>

            {{-- Documents --}}
            <h3 class="text-sm font-bold text-gray-700 uppercase pt-3">Documents</h3>
            <div>
                <label class="form-label">Upload PDF / image 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">Up to 5MB each. Hold Ctrl / Cmd to select multiple.</p>
            </div>

            {{-- Payment (locums only) --}}
            @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','per_shift')==='per_shift' ? 'selected':'' }}>Rate per Shift (Daily Rate)</option>
                        <option value="percentage" {{ old('rate_type')==='percentage' ? 'selected':'' }}>Percentage of Procedure</option>
                    </select>
                    <p class="text-xs text-gray-400 mt-1" id="rate-type-hint">Doctors, Nurses, Clinical Officers, Receptionists → per shift. Sonographers, Dentists, Physios → percentage.</p>
                </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', 3000) }}">
                    <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','mpesa')==='mpesa' ? 'selected':'' }}>M-Pesa</option>
                        <option value="bank"  {{ old('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') }}">
                </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') }}"></div>
                    <div><label class="form-label">Bank Account</label><input type="text" name="bank_account" class="form-input" value="{{ old('bank_account') }}"></div>
                </div>
            </div>
            @endunless

            <div class="flex gap-3 pt-3">
                <button type="submit" class="btn-success">Register {{ $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 hasLicense = document.getElementById('license-no-input').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'); input.value=''; }
}
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)
@if(old('payment_mode')==='bank') togglePaymentFields('bank'); @endif
(function(){ var rts = document.getElementById('rate-type-select'); if (rts) toggleRateLabel(rts.value); })();
@endif
toggleLicenseExpiry();
</script>
@endsection