@extends('layouts.app')
@section('title', 'Locum Payroll')
@section('content')
@include('locum.partials.payroll-tabs', ['active' => 'payroll'])

{{-- Unpaid Approved Shifts --}}
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden mb-5">
    <div class="px-5 py-3 border-b bg-amber-50 flex items-center justify-between">
        <div>
            <h3 class="text-sm font-bold text-amber-800">Approved Shifts | Ready for Payroll</h3>
            <p class="text-xs text-amber-600">Select the shifts you want to include in a payroll run, then click "Create Payroll Run".</p>
        </div>
        <span class="badge badge-warning">{{ $unpaidShifts->count() }} shift(s)</span>
    </div>

    @if($unpaidShifts->count())
    <form method="POST" action="{{ route('locum.payroll.generate') }}" id="payroll-run-form">@csrf
        <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50"><tr>
                <th class="table-header w-8"><input type="checkbox" onclick="toggleAllPR(this)" class="rounded" checked></th>
                <th class="table-header">Date</th>
                <th class="table-header">Locum</th>
                <th class="table-header">Shift</th>
                <th class="table-header">Rate</th>
                <th class="table-header text-right">Gross Pay</th>
                <th class="table-header">Dept</th>
            </tr></thead>
            <tbody class="divide-y divide-gray-50">
            @foreach($unpaidShifts as $s)
                <tr class="hover:bg-blue-50/30">
                    <td class="table-cell"><input type="checkbox" name="shift_ids[]" value="{{ $s->id }}" class="pr-cb rounded" checked></td>
                    <td class="table-cell text-xs">{{ $s->work_date->format('d M Y') }}</td>
                    <td class="table-cell text-sm font-medium">{{ $s->locum->full_name ?? '' }}</td>
                    <td class="table-cell text-xs capitalize">{{ $s->shift_type }}</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 text-xs">{{ $s->department->name ?? '-' }}</td>
                </tr>
            @endforeach
            </tbody>
            <tfoot class="bg-gray-50">
                <tr>
                    <td colspan="5" class="table-cell text-xs text-right font-bold">Selected Total:</td>
                    <td class="table-cell text-xs text-right font-bold text-cr-700" id="selected-total">KES {{ number_format($unpaidShifts->sum('gross_amount')) }}</td>
                    <td class="table-cell"></td>
                </tr>
            </tfoot>
        </table>
        </div>

        <div class="px-5 py-4 border-t bg-gray-50 flex flex-wrap gap-3 items-end">
            <div>
                <label class="form-label">Run Label (optional)</label>
                <input type="text" name="batch_label" class="form-input text-xs w-56" placeholder="e.g. Weekly pay | Week 15">
            </div>
            <div>
                <label class="form-label">Notes</label>
                <input type="text" name="notes" class="form-input text-xs w-48" placeholder="Optional notes...">
            </div>
            <button type="submit" class="btn-success text-xs px-5">Create Payroll Run</button>
            <p class="text-xs text-gray-400">WHT @ 5% will be auto-calculated. You can adjust deductions after creation.</p>
        </div>
    </form>
    @else
    <div class="px-5 py-10 text-center text-gray-400 text-sm">
        No approved shifts pending payroll. Approve shifts from <a href="{{ route('locum.shifts') }}" class="text-cr-600 underline">Locum Shift Entries</a> first.
    </div>
    @endif
</div>

{{-- Past Payroll Runs --}}
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
    <div class="px-5 py-3 border-b"><h3 class="text-sm font-bold text-gray-700">Payroll Runs</h3></div>
    <table class="w-full">
        <thead class="bg-gray-50"><tr>
            <th class="table-header">Run</th>
            <th class="table-header">Period</th>
            <th class="table-header">Locums</th>
            <th class="table-header">Shifts</th>
            <th class="table-header text-right">Gross Pay</th>
            <th class="table-header text-right">WHT (5%)</th>
            <th class="table-header text-right">Net Pay</th>
            <th class="table-header">Status</th>
            <th class="table-header">Created</th>
            <th class="table-header">Actions</th>
        </tr></thead>
        <tbody class="divide-y divide-gray-50">
        @forelse($batches as $b)
            @php $sc = ['draft'=>'badge-gray','approved'=>'badge-success','paid'=>'badge-success','cancelled'=>'badge-danger']; @endphp
            <tr class="hover:bg-blue-50/30">
                <td class="table-cell text-sm font-medium">{{ $b->batch_label }}</td>
                <td class="table-cell text-xs">{{ $b->period_from?->format('d M') }}{{ $b->period_to ? ' – '.$b->period_to->format('d M Y') : '' }}</td>
                <td class="table-cell text-xs text-center">{{ $b->items->count() }}</td>
                <td class="table-cell text-xs text-center">{{ $b->items->sum('total_shifts') }}</td>
                <td class="table-cell text-xs text-right font-semibold">KES {{ number_format($b->items->sum('gross_pay')) }}</td>
                <td class="table-cell text-xs text-right text-red-600">KES {{ number_format($b->items->sum('wht_amount')) }}</td>
                <td class="table-cell text-xs text-right font-bold text-green-700">KES {{ number_format($b->items->sum('net_pay')) }}</td>
                <td class="table-cell"><span class="badge {{ $sc[$b->status] ?? 'badge-gray' }}">{{ ucfirst($b->status) }}</span></td>
                <td class="table-cell text-xs">{{ $b->created_at->format('d M Y') }}</td>
                <td class="table-cell">
                    <div class="flex gap-1">
                        <a href="{{ route('locum.payroll.show', $b) }}" class="text-xs text-cr-600 bg-cr-50 px-2 py-1 rounded hover:bg-cr-100">View</a>
                        @if($b->status === 'draft')
                            <form method="POST" action="{{ route('locum.payroll.delete', $b) }}">@csrf @method('DELETE')
                                <button class="text-xs text-red-500 bg-red-50 px-2 py-1 rounded hover:bg-red-100" onclick="return confirm('Delete this run? Shifts will return to the unpaid pool.')">Delete</button>
                            </form>
                        @endif
                    </div>
                </td>
            </tr>
        @empty
            <tr><td colspan="10" class="table-cell text-center text-gray-400 py-8">No payroll runs yet.</td></tr>
        @endforelse
        </tbody>
    </table>
    @if($batches->hasPages())<div class="px-4 py-3 border-t bg-gray-50">{{ $batches->links() }}</div>@endif
</div>
@endsection
@section('scripts')
<script>
function toggleAllPR(el){ document.querySelectorAll('.pr-cb').forEach(cb=>cb.checked=el.checked); updateTotal(); }
document.querySelectorAll('.pr-cb').forEach(cb=>cb.addEventListener('change', updateTotal));
function updateTotal(){
    let total = 0;
    document.querySelectorAll('.pr-cb:checked').forEach(cb=>{
        const row = cb.closest('tr');
        const amt = row.querySelector('td:nth-child(6)').textContent.replace(/[^0-9.]/g,'');
        total += parseFloat(amt) || 0;
    });
    document.getElementById('selected-total').textContent = 'KES ' + total.toLocaleString();
}
</script>
@endsection