@extends('layouts.app')
@section('title', 'Staff Register')
@section('styles')
<style>
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;display:none;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto}
.modal-bg.show{display:flex}
.modal-box{background:#fff;border-radius:12px;max-width:920px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.25);margin:auto}
.modal-head{background:linear-gradient(135deg,#3b1054,#5c1269);color:#fff;padding:14px 22px;border-radius:12px 12px 0 0;display:flex;justify-content:space-between;align-items:center}
.modal-head h3{font-size:14px;font-weight:600;margin:0}
.modal-close{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;line-height:1;padding:0 6px}
.staff-tbl tbody tr{transition:background .12s}
.staff-tbl tbody tr:hover{background:#faf5fb}
</style>
@endsection
@section('content')

{{-- Unified Full Time Staff tabset (Staff Register · Payroll Profile ·
     Leave Management · Payroll Runs · Payments · Statutory Remittances).
     Active tab here is "register" — the Leave panel is reached via the
     internal panel-switcher below OR by the dedicated /hr/leave URL the
     top tab links to. --}}
@include('hr.partials.ft-staff-tabs', ['active' => 'register'])

{{-- ════════════════════════════════════════════════════════════
     STAFF REGISTER — clean one-pager. Top tabs (above) handle
     navigation to Leave Management, Payroll Profile, etc. so we
     don't repeat that here. KPIs intentionally dropped: each one
     was either static or duplicated info available one click away.
     ════════════════════════════════════════════════════════════ --}}

{{-- Header / Action bar --}}
<div class="mb-4 flex flex-wrap items-start justify-between gap-3">
    <div>
        <h2 class="text-lg font-bold text-gray-700">Staff Register</h2>
        <p class="text-xs text-gray-500">View, search and edit full-time staff records.</p>
    </div>
    <div class="flex items-center gap-2 flex-wrap">
        {{-- Add Staff routes through the unified People form
             (May 24 2026) so personal info isn't re-typed every
             time a new permanent hire is added. The old modal
             still exists below for callers using the panel
             switcher with ?action=add, but the primary entry
             point is now the consolidated form. --}}
        <a href="{{ route('people.create', ['type' => 'permanent']) }}" class="btn-primary text-xs flex items-center gap-1.5">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Add Staff
        </a>
    </div>
</div>

{{-- Flash success --}}
@if(session('success'))
<div class="mb-4 bg-green-50 border border-green-200 text-green-700 rounded-lg px-4 py-3 text-xs">{{ session('success') }}</div>
@endif

{{-- ═══ STAFF REGISTER ═══ --}}
<div>
    <div class="bg-white rounded-xl border overflow-hidden">
        <div class="px-5 py-3 border-b flex items-center justify-between flex-wrap gap-3">
            <div class="flex items-center gap-3">
                <h4 class="text-sm font-bold text-gray-700 uppercase">Staff Register</h4>
                <span class="text-xs text-gray-400" id="staffCount">{{ count($allStaff ?? []) }} record{{ count($allStaff ?? []) === 1 ? '' : 's' }}</span>
                @if(!empty($showInactive))
                    <span class="text-[10px] uppercase font-bold tracking-wide text-amber-700 bg-amber-100 px-2 py-0.5 rounded">incl. inactive</span>
                @endif
            </div>
            <div class="flex items-center gap-2">
                {{-- Toggle inactive visibility. Default = hidden. When showing
                     them, badge in the header makes that explicit so the user
                     doesn't forget they're looking at a wider list. --}}
                @if(!empty($showInactive))
                    <a href="{{ route('hr.index', ['panel' => 'staff']) }}"
                       class="text-xs px-3 py-1.5 rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-50">
                        Hide inactive
                    </a>
                @elseif(($inactiveStaffCount ?? 0) > 0)
                    <a href="{{ route('hr.index', ['panel' => 'staff', 'show_inactive' => 1]) }}"
                       class="text-xs px-3 py-1.5 rounded border border-amber-300 bg-amber-50 text-amber-800 hover:bg-amber-100">
                        Show inactive ({{ $inactiveStaffCount }})
                    </a>
                @endif
                <input type="text" id="staffSearch" placeholder="Search name, employee #, designation, department…"
                       class="form-input text-xs" style="min-width:280px"
                       oninput="filterStaffTable(this.value)">
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-xs staff-tbl" id="staffTable">
                <thead class="bg-gray-50 text-gray-600 uppercase text-xs">
                    <tr>
                        <th class="px-4 py-2.5 text-left font-semibold">Employee #</th>
                        <th class="px-4 py-2.5 text-left font-semibold">Name</th>
                        <th class="px-4 py-2.5 text-left font-semibold">Designation</th>
                        <th class="px-4 py-2.5 text-left font-semibold">Department</th>
                        <th class="px-4 py-2.5 text-left font-semibold">Phone</th>
                        <th class="px-4 py-2.5 text-left font-semibold">Status</th>
                        <th class="px-4 py-2.5 text-right font-semibold">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse(($allStaff ?? []) as $s)
                    <tr class="border-t border-gray-50 staff-row"
                        data-search="{{ strtolower($s->full_name . ' ' . $s->employee_number . ' ' . ($s->designation ?? '') . ' ' . ($s->department->name ?? '') . ' ' . ($s->phone ?? '')) }}">
                        <td class="px-4 py-2.5 font-mono">{{ $s->employee_number }}</td>
                        <td class="px-4 py-2.5 font-medium text-gray-700">{{ $s->full_name }}</td>
                        <td class="px-4 py-2.5 text-gray-500">{{ $s->designation ?? '—' }}</td>
                        <td class="px-4 py-2.5 text-gray-500">{{ $s->department->name ?? '—' }}</td>
                        <td class="px-4 py-2.5 text-gray-500">{{ $s->phone ?? '—' }}</td>
                        <td class="px-4 py-2.5">
                            @php
                                $statusBadge = match($s->status) {
                                    'active'     => 'badge-success',
                                    'on_leave'   => 'badge-warning',
                                    'suspended'  => 'badge-warning',
                                    'inactive'   => 'badge-gray',
                                    'terminated' => 'badge-danger',
                                    default      => 'badge-gray',
                                };
                            @endphp
                            <span class="badge {{ $statusBadge }} text-xs">{{ ucfirst(str_replace('_', ' ', $s->status)) }}</span>
                        </td>
                        <td class="px-4 py-2.5 text-right whitespace-nowrap">
                            <a href="{{ route('hr.staff.show', $s->id) }}"
                               class="text-xs px-3 py-1 rounded-md border border-gray-200 text-gray-600 hover:bg-gray-100 hover:text-gray-900 no-underline inline-block">View</a>
                            <a href="{{ route('hr.staff.edit', $s->id) }}"
                               class="text-xs px-3 py-1 rounded-md border border-purple-200 text-purple-700 bg-purple-50 hover:bg-purple-100 ml-1 no-underline inline-block">Edit</a>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="7" class="px-4 py-10 text-center text-gray-400">
                        <p class="mb-2">No staff records yet.</p>
                        <a href="{{ route('people.create', ['type' => 'permanent']) }}" class="btn-primary text-xs">+ Add the first staff member</a>
                    </td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- ═══ ADD STAFF MODAL ═══ --}}
<div class="modal-bg" id="addStaffModal" onclick="if(event.target.id==='addStaffModal') closeAddStaffModal()">
    <div class="modal-box">
        <div class="modal-head">
            <h3>Add New Staff Member</h3>
            <div class="flex items-center gap-3">
                <span class="text-xs px-2 py-1 rounded bg-white/15">Next: {{ $nextEmployeeNumber }}</span>
                <button type="button" class="modal-close" onclick="closeAddStaffModal()" aria-label="Close">&times;</button>
            </div>
        </div>
        <div class="p-6">
            @php
                // staff_prefill is populated by LocumController@convertToStaff when
                // someone clicks "Convert to Full-Time" on a locum/volunteer profile.
                // It only lives for one request, so on validation failure the modal
                // re-renders from `old()` values instead — `old()` always wins so
                // the user's edits aren't clobbered.
                $sp = session('staff_prefill', []);
                $pendingLocumId = session('pending_locum_id');
            @endphp
            @if($pendingLocumId && !empty($sp))
            <div class="mb-4 bg-blue-50 border border-blue-200 text-blue-800 rounded-lg px-4 py-3 text-xs">
                <strong>Locum → Full-Time conversion in progress.</strong>
                The fields below are pre-filled from the existing record. Review them, fill in any blanks
                (especially designation and emergency contact if missing), then save to complete the conversion.
                The original locum/volunteer record will be deactivated after save.
            </div>
            @endif
            @if($errors->any() && old('first_name'))
            <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.store') }}">@csrf
                {{-- Pending locum ID survives form validation errors via hidden
                     field (session flash only lasts one request). --}}
                @if($pendingLocumId)<input type="hidden" name="pending_locum_id" value="{{ $pendingLocumId }}">@endif
                <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', $sp['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', $sp['last_name'] ?? '') }}"></div>
                    <div><label class="form-label">Staff No.</label><input type="text" class="form-input bg-gray-100" value="{{ $nextEmployeeNumber }}" disabled><p class="text-xs text-gray-400 mt-1">Auto-generated</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', $sp['id_number'] ?? '') }}"></div>
                    <div><label class="form-label">KRA PIN <span class="text-red-500">*</span></label><input type="text" name="kra_pin" required class="form-input" value="{{ old('kra_pin', $sp['kra_pin'] ?? '') }}"></div>
                    <div><label class="form-label">SHA Number <span class="text-red-500">*</span></label><input type="text" name="sha_number" required class="form-input" value="{{ old('sha_number', $sp['sha_number'] ?? '') }}"></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" value="{{ old('nssf_number', $sp['nssf_number'] ?? '') }}"></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', $sp['email'] ?? '') }}"></div>
                    <div><label class="form-label">Gender <span class="text-red-500">*</span></label>
                        @php $g = old('gender', $sp['gender'] ?? ''); @endphp
                        <select name="gender" required class="form-input"><option value="">Select…</option><option value="male" {{ $g==='male'?'selected':'' }}>Male</option><option value="female" {{ $g==='female'?'selected':'' }}>Female</option></select>
                    </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', $sp['phone'] ?? '') }}"></div>
                    <div><label class="form-label">Department <span class="text-red-500">*</span></label>
                        @php $dept = old('department_id', $sp['department_id'] ?? ''); @endphp
                        <select name="department_id" required class="form-input"><option value="">Select…</option>@include('partials._department-options', ['selected' => $dept])</select>
                    </div>
                    <div><label class="form-label">Designation</label><input type="text" name="designation" class="form-input" value="{{ old('designation', $sp['designation'] ?? '') }}" placeholder="e.g. Nurse, Doctor"></div>
                    <div><label class="form-label">Contract Type</label>
                        <select name="contract_type" class="form-input"><option value="permanent">Permanent</option><option value="contract">Contract</option><option value="casual">Casual</option></select>
                    </div>
                    {{-- Professional License: number is optional; expiry becomes
                         required when a number is present (matches locum form
                         and HRController validation). --}}
                    @php $lnAdd = old('license_no', $sp['license_no'] ?? ''); @endphp
                    <div>
                        <label class="form-label">License Number</label>
                        <input type="text" name="license_no" id="staff-license-no" class="form-input"
                               value="{{ $lnAdd }}" oninput="toggleStaffLicenseExpiry()" placeholder="Optional">
                    </div>
                    <div id="staff-license-expiry-wrap" style="{{ $lnAdd ? '' : 'display:none' }}">
                        <label class="form-label">License Expiry <span class="text-red-500">*</span></label>
                        <input type="date" name="license_expiry" id="staff-license-expiry" class="form-input"
                               value="{{ old('license_expiry', $sp['license_expiry'] ?? '') }}">
                    </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', $sp['date_of_birth'] ?? '') }}"></div>
                    <div><label class="form-label">Employment Date</label><input type="date" name="employment_date" class="form-input" value="{{ old('employment_date', date('Y-m-d')) }}"></div>
                    <div><label class="form-label">Emergency Contact</label><input type="text" name="emergency_contact_name" class="form-input" value="{{ old('emergency_contact_name', $sp['emergency_contact_name'] ?? '') }}" placeholder="Name"></div>
                    <div><label class="form-label">Emergency Phone</label><input type="text" name="emergency_contact_phone" class="form-input" value="{{ old('emergency_contact_phone', $sp['emergency_contact_phone'] ?? '') }}"></div>
                    <div class="md:col-span-3"><label class="form-label">Notes</label><textarea name="notes" class="form-input" rows="2">{{ old('notes') }}</textarea></div>
                </div>
                <p class="text-xs text-gray-500 mt-3">Compensation (salary, allowances, payroll method) is set after creation from the staff member's profile or the Payroll module.</p>
                <div class="flex items-center justify-end gap-2 mt-4 pt-4 border-t">
                    <button type="button" onclick="closeAddStaffModal()" class="btn-secondary text-xs">Cancel</button>
                    <button type="submit" class="btn-success text-xs">Save Staff Record</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection
@section('scripts')
<script>
// Staff Register: live search filter
function filterStaffTable(q){
    q = (q || '').trim().toLowerCase();
    var rows = document.querySelectorAll('#staffTable tbody tr.staff-row');
    var visible = 0;
    rows.forEach(function(r){
        var match = !q || (r.dataset.search || '').indexOf(q) !== -1;
        r.style.display = match ? '' : 'none';
        if (match) visible++;
    });
    var c = document.getElementById('staffCount');
    if (c) c.textContent = visible + ' record' + (visible === 1 ? '' : 's');
}

// Add Staff modal controls
function openAddStaffModal(){
    document.getElementById('addStaffModal').classList.add('show');
    document.body.style.overflow = 'hidden';
}
function closeAddStaffModal(){
    document.getElementById('addStaffModal').classList.remove('show');
    document.body.style.overflow = '';
}
// Show/hide the License Expiry input based on whether a License Number is
// present. Mirrors the locum form pattern so a half-filled license can't
// silently slip through, and the form doesn't show an empty expiry slot
// for staff who don't have a license at all.
function toggleStaffLicenseExpiry(){
    var n = document.getElementById('staff-license-no');
    var wrap = document.getElementById('staff-license-expiry-wrap');
    var input = document.getElementById('staff-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'); input.value = ''; }
}
// Run on load to sync state (handles prefill from locum→staff conversion).
window.addEventListener('DOMContentLoaded', toggleStaffLicenseExpiry);
// ESC closes modal
document.addEventListener('keydown', function(e){
    if(e.key === 'Escape') closeAddStaffModal();
});
// If validation failed on add staff, reopen the modal automatically
@if($errors->any() && old('first_name'))
window.addEventListener('DOMContentLoaded', function(){ openAddStaffModal(); });
@endif
// Auto-open modal on the locum→staff conversion redirect
// (LocumController@convertToStaff sends ?action=add). Also strip the
// query param so a refresh doesn't keep popping the modal.
@if(request('action') === 'add' || session('staff_prefill'))
window.addEventListener('DOMContentLoaded', function(){
    openAddStaffModal();
    var u = new URL(window.location.href);
    if (u.searchParams.get('action')) {
        u.searchParams.delete('action');
        window.history.replaceState({}, '', u.toString());
    }
});
@endif
</script>
@endsection