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

{{-- Profile Header --}}
<div class="bg-white rounded-xl border border-gray-200 p-5 mb-4">
    <div class="flex flex-wrap items-start gap-4">
        <div class="w-14 h-14 {{ $isVolunteer ? 'bg-purple-100 text-purple-700' : 'bg-cr-100 text-cr-700' }} rounded-full flex items-center justify-center text-lg font-bold flex-shrink-0">
            {{ collect(explode(' ', $locum->full_name))->map(fn($n) => $n[0] ?? '')->take(2)->implode('') }}
        </div>
        <div class="flex-1 min-w-0">
            <h2 class="text-lg font-bold text-gray-900">
                {{ $locum->full_name }}
                @if($isVolunteer)<span class="ml-2 text-[10px] font-bold text-purple-700 bg-purple-100 px-1.5 py-0.5 rounded align-middle">VOLUNTEER</span>@endif
            </h2>
            <p class="text-sm text-gray-500">
                @if($locum->staff_number)<span class="font-mono {{ $isVolunteer ? 'text-purple-700' : 'text-cr-700' }} font-semibold">{{ $locum->staff_number }}</span> · @endif
                {{ $locum->role_designation ?? '' }} · {{ $locum->department->name ?? '' }}
            </p>
            <div class="flex flex-wrap gap-4 mt-2 text-xs text-gray-500">
                @if($locum->id_passport_no)<span>ID: {{ $locum->id_passport_no }}</span>@endif
                @if($locum->phone)<span>📞 {{ $locum->phone }}</span>@endif
                @if($locum->email)<span>✉ {{ $locum->email }}</span>@endif
                @unless($isVolunteer)
                    @if($locum->kra_pin)<span>KRA: {{ $locum->kra_pin }}</span>@endif
                @endunless
            </div>
        </div>
        <div class="flex gap-2">
            <span class="badge {{ $locum->status==='active' ? 'badge-success' : 'badge-gray' }}">{{ ucfirst($locum->status) }}</span>
            @if($locum->is_license_expired)<span class="badge badge-danger">License Expired</span>@elseif($locum->is_license_expiring_soon)<span class="badge badge-warning">License Expiring</span>@endif
            <a href="{{ route('locum.edit', $locum) }}" class="btn-secondary text-xs">Edit</a>
            @if($locum->status === 'active')
                {{-- Promote-to-permanent is rare in normal operations,
                     so we keep it as a small secondary action in the
                     header next to Edit. Clicking opens a modal that
                     collects the employment terms — everything else
                     (personal info, statutory numbers, license,
                     emergency contact, documents) carries straight
                     from the locum row, no re-typing. --}}
                <button type="button"
                        onclick="document.getElementById('promoteLocumModal').classList.remove('hidden')"
                        class="btn-primary text-xs flex items-center gap-1"
                        title="Convert this {{ $isVolunteer ? 'volunteer' : 'locum' }} to permanent staff">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7l4-4m0 0l4 4m-4-4v18"/></svg>
                    Promote to Staff
                </button>
            @endif
        </div>
    </div>
</div>

{{-- ─── Promote to Permanent Staff modal ──────────────────────────
     Triggered by the "Promote to Staff" button in the header.
     Hidden by default. PersonOnboardingService copies everything
     the locum row already has across to a new StaffRecord and
     links them via the same User row. The original locum row is
     kept (status=converted) so payroll/shift history isn't
     orphaned. --}}
@if($locum->status === 'active')
<div id="promoteLocumModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-xl mx-4 p-6 max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-start mb-4">
            <div>
                <h3 class="font-bold text-base">Promote to Permanent Staff</h3>
                <p class="text-xs text-gray-500 mt-0.5">
                    Move {{ $locum->first_name }} from {{ $isVolunteer ? 'volunteer' : 'locum' }} to a permanent staff record.
                    Personal details, statutory numbers, and license info carry over —
                    you only need to confirm employment terms.
                </p>
            </div>
            <button type="button"
                    onclick="document.getElementById('promoteLocumModal').classList.add('hidden')"
                    class="text-gray-400 hover:text-gray-600 text-xl leading-none">&times;</button>
        </div>
        <form method="POST" action="{{ route('people.promote-locum', $locum) }}"
              onsubmit="return confirm('Promote {{ $locum->full_name }} to permanent staff? The {{ $isVolunteer ? 'volunteer' : 'locum' }} record will be marked converted but kept for audit. This action can be reversed from the new staff profile.');">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div>
                    <label class="form-label">Employment Date</label>
                    <input type="date" name="employment_date" class="form-input" value="{{ date('Y-m-d') }}">
                </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>
            </div>
            <p class="text-[11px] text-gray-500 mt-3">
                After promoting, set salary &amp; allowances on the new staff profile — locums don't have those fields, so they're not carried over.
            </p>
            <div class="flex justify-end gap-2 mt-5 pt-4 border-t">
                <button type="button"
                        onclick="document.getElementById('promoteLocumModal').classList.add('hidden')"
                        class="btn-secondary text-xs">Cancel</button>
                <button type="submit" class="btn-primary text-xs">Promote to Permanent</button>
            </div>
        </form>
    </div>
</div>
<script>
// ESC closes the promote modal — matches the rest of the system's modal UX.
document.addEventListener('keydown', function(e){
    if (e.key === 'Escape') {
        document.getElementById('promoteLocumModal')?.classList.add('hidden');
    }
});
</script>
@endif

{{-- Stats — only for paid locums (volunteers have no shifts/earnings) --}}
@unless($isVolunteer)
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
    <div class="stat-card text-center"><p class="text-xs text-gray-400 uppercase">Total Shifts</p><p class="text-xl font-bold">{{ $shiftStats['total'] }}</p></div>
    <div class="stat-card text-center"><p class="text-xs text-gray-400 uppercase">This Month</p><p class="text-xl font-bold">{{ $shiftStats['this_month'] }}</p></div>
    <div class="stat-card text-center"><p class="text-xs text-gray-400 uppercase">Pending Approval</p><p class="text-xl font-bold text-amber-600">{{ $shiftStats['pending_approval'] }}</p></div>
    <div class="stat-card text-center"><p class="text-xs text-gray-400 uppercase">Total Earned</p><p class="text-xl font-bold text-green-600">KES {{ number_format($shiftStats['total_earned']) }}</p></div>
</div>
@endunless

{{-- Personal + License + (Statutory|Payment) panels --}}
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">

    {{-- Personal --}}
    <div class="bg-white rounded-xl border p-4 space-y-2 text-sm">
        <h4 class="text-xs font-bold text-gray-500 uppercase">Personal</h4>
        <div class="flex justify-between"><span class="text-gray-500">Date of Birth</span><span>{{ $locum->date_of_birth ? $locum->date_of_birth->format('d M Y') : '—' }}</span></div>
        <div class="flex justify-between"><span class="text-gray-500">Gender</span><span class="capitalize">{{ $locum->gender ? str_replace('_', ' ', $locum->gender) : '—' }}</span></div>
        <div class="flex justify-between border-t pt-2 mt-2"><span class="text-gray-500">Emergency Contact</span><span class="text-right">{{ $locum->emergency_contact_name ?? '—' }}</span></div>
        @if($locum->emergency_contact_phone)
            <div class="flex justify-between"><span class="text-gray-500"></span><span class="text-xs">📞 {{ $locum->emergency_contact_phone }}</span></div>
        @endif
    </div>

    {{-- License --}}
    <div class="bg-white rounded-xl border p-4 space-y-2 text-sm">
        <h4 class="text-xs font-bold text-gray-500 uppercase">License</h4>
        <div class="flex justify-between"><span class="text-gray-500">Number</span><span>{{ $locum->license_no ?? '—' }}</span></div>
        <div class="flex justify-between"><span class="text-gray-500">Expiry</span><span class="{{ $locum->is_license_expired ? 'text-red-600 font-bold' : '' }}">{{ $locum->license_expiry ? $locum->license_expiry->format('d M Y') : '—' }}</span></div>
    </div>

    {{-- Statutory + Payment (paid locums) OR Quick Actions (volunteers) --}}
    @if($isVolunteer)
        <div class="bg-white rounded-xl border p-4 text-sm">
            <h4 class="text-xs font-bold text-gray-500 uppercase mb-2">Notes</h4>
            <p class="text-xs text-gray-500">Volunteer — no payment is recorded for shifts. Schedule them on the duty roster like any other staff.</p>
        </div>
    @else
        @if(Auth::user()->activeRoleName() !== 'Receptionist')
        <div class="bg-white rounded-xl border p-4 space-y-2 text-sm">
            <h4 class="text-xs font-bold text-gray-500 uppercase">Statutory &amp; Payment</h4>
            <div class="flex justify-between"><span class="text-gray-500">SHA</span><span class="font-mono">{{ $locum->sha_number ?? '—' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">NSSF</span><span class="font-mono">{{ $locum->nssf_number ?? '—' }}</span></div>
            <div class="flex justify-between border-t pt-2 mt-2"><span class="text-gray-500">Mode</span><span class="capitalize">{{ $locum->payment_mode ?? '—' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Rate</span><span class="font-semibold">@if($locum->rate_type==='percentage'){{ $locum->default_rate }}%@else KES {{ number_format($locum->default_rate ?? 0) }}/shift @endif</span></div>
            @if($locum->payment_mode === 'mpesa')<div class="flex justify-between"><span class="text-gray-500">M-Pesa</span><span>{{ $locum->mpesa_no ?? '—' }}</span></div>@endif
            @if($locum->payment_mode === 'bank')<div class="flex justify-between"><span class="text-gray-500">Bank</span><span>{{ $locum->bank_name ?? '—' }} · {{ $locum->bank_account ?? '—' }}</span></div>@endif
        </div>
        @endif
    @endif
</div>

{{-- Documents --}}
@if($locum->documents)
<div class="bg-white rounded-xl border p-4 mb-4">
    <h4 class="text-xs font-bold text-gray-500 uppercase mb-2">Documents</h4>
    <div class="space-y-1">
        @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>
</div>
@endif

{{-- Recent Shifts (paid locums only) --}}
@unless($isVolunteer)
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
    <div class="px-5 py-3 border-b flex justify-between items-center">
        <h3 class="text-sm font-bold text-gray-700">Recent Shifts</h3>
        <a href="{{ route('locum.shifts.create') }}?locum_id={{ $locum->id }}" class="btn-primary text-xs">+ Record Shift</a>
    </div>
    <table class="w-full">
        <thead class="bg-gray-50"><tr><th class="table-header">Date</th><th class="table-header">Shift</th><th class="table-header">Dept</th><th class="table-header">Rate</th><th class="table-header text-right">Gross Pay</th><th class="table-header">Status</th></tr></thead>
        <tbody class="divide-y divide-gray-50">
        @forelse($locum->shifts as $s)
            @php $sc = ['draft'=>'badge-gray','submitted'=>'badge-info','verified'=>'badge-info','approved'=>'badge-success','rejected'=>'badge-danger']; @endphp
            <tr>
                <td class="table-cell text-xs">{{ $s->work_date->format('d M Y') }}</td>
                <td class="table-cell text-xs capitalize">{{ $s->shift_type }}</td>
                <td class="table-cell text-xs">{{ $s->department->name ?? '-' }}</td>
                <td class="table-cell text-xs">@if($s->rate_type==='percentage'){{ $s->rate_applied }}%@else KES {{ number_format($s->rate_applied) }}@endif</td>
                <td class="table-cell text-xs text-right font-semibold">KES {{ number_format($s->gross_amount) }}</td>
                <td class="table-cell"><span class="badge {{ $sc[$s->approval_status] ?? 'badge-gray' }}">{{ ucfirst($s->approval_status) }}</span></td>
            </tr>
        @empty
            <tr><td colspan="6" class="table-cell text-center text-gray-400 py-8">No shifts recorded yet.</td></tr>
        @endforelse
        </tbody>
    </table>
</div>
@endunless

@endsection