@extends('layouts.app')
@section('title', 'Locum Payments')
@section('content')
@include('locum.partials.payroll-tabs', ['active' => 'payments'])
@php
    $canPay = Auth::user()->hasAnyRole('Super Admin','Hospital Admin');
    // Receptionist sees a simplified payments view: no payroll math
    // (Gross / WHT / Deductions / Net), no shift counts, no stat tiles.
    // They only need to see *that* a locum was paid, when, and how.
    $canSeeFinancials = Auth::user()->hasAnyRole('Super Admin','Hospital Admin','HR User','Finance User');
@endphp

{{-- Filters --}}
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
    <div class="px-5 py-3 border-b flex flex-wrap gap-2 items-end">
        <form method="GET" class="flex gap-2 items-end">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Locum name..." class="form-input text-xs w-44">
            <select name="status" class="form-input text-xs w-28">
                <option value="">All Status</option>
                <option value="pending" {{ request('status')==='pending'?'selected':'' }}>Pending</option>
                <option value="paid" {{ request('status')==='paid'?'selected':'' }}>Paid</option>
            </select>
            <button class="btn-primary text-xs">Filter</button>
            @if(request()->hasAny(['search','status']))<a href="{{ route('locum.payments') }}" class="btn-secondary text-xs">Clear</a>@endif
        </form>
    </div>

    {{-- Payments Table --}}
    <table class="w-full">
        <thead class="bg-gray-50"><tr>
            <th class="table-header">Locum</th>
            <th class="table-header">Period</th>
            @if($canSeeFinancials)
            <th class="table-header text-right">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>
            @endif
            <th class="table-header">Pay Mode</th>
            <th class="table-header">Status</th>
            <th class="table-header">Transaction</th>
            <th class="table-header">Date Paid</th>
            <th class="table-header">Actions</th>
        </tr></thead>
        <tbody class="divide-y divide-gray-50">
        @forelse($items as $item)
            <tr class="hover:bg-blue-50/30">
                <td class="table-cell">
                    <a href="{{ route('locum.show', $item->locum_id) }}" class="text-sm font-medium text-cr-700 hover:underline">{{ $item->locum->full_name ?? '' }}</a>
                    <p class="text-xs text-gray-400">{{ $item->locum->role_designation ?? '' }} · {{ $item->locum->payment_mode ?? '' }} · {{ $item->locum->mpesa_no ?? $item->locum->bank_name ?? '' }}</p>
                </td>
                <td class="table-cell text-xs">{{ $item->batch->month_name ?? '' }}</td>
                @if($canSeeFinancials)
                <td class="table-cell text-xs text-right">{{ $item->total_shifts }}</td>
                <td class="table-cell text-xs text-right">KES {{ number_format($item->gross_pay) }}</td>
                <td class="table-cell text-xs text-right text-red-600">KES {{ number_format($item->wht_amount) }}</td>
                <td class="table-cell text-xs text-right font-bold text-green-700">KES {{ number_format($item->net_pay) }}</td>
                @endif
                <td class="table-cell text-xs capitalize">{{ $item->payment_method ?? $item->locum->payment_mode ?? '-' }}</td>
                <td class="table-cell">
                    <span class="badge {{ $item->payment_status==='paid'?'badge-success':'badge-warning' }}">{{ ucfirst($item->payment_status) }}</span>
                </td>
                <td class="table-cell text-xs font-mono">{{ $item->transaction_code ?? '-' }}</td>
                <td class="table-cell text-xs">{{ $item->payment_date ? $item->payment_date->format('d M Y') : '-' }}</td>
                <td class="table-cell">
                    @if($item->payment_status === 'pending')
                        @if($canPay)
                        <button onclick="openPayModal({{ $item->id }}, '{{ addslashes($item->locum->full_name ?? '') }}', {{ $item->net_pay }}, '{{ $item->locum->payment_mode ?? 'mpesa' }}')" class="text-xs text-green-600 bg-green-50 px-2 py-1 rounded hover:bg-green-100">Mark Paid</button>
                        @else
                        <span class="badge badge-warning">Pending</span>
                        @endif
                    @else
                    <span class="text-xs text-gray-400">Completed</span>
                    @endif
                </td>
            </tr>
        @empty
            <tr><td colspan="{{ $canSeeFinancials ? 11 : 7 }}" class="table-cell text-center text-gray-400 py-10">
                @if(Auth::user()->hasAnyRole('Super Admin','Hospital Admin','HR User'))
                No payment records found. Generate and approve a payroll batch first from <a href="{{ route('locum.payroll') }}" class="text-cr-600 underline">Locum Payroll</a>.
                @else
                No payment records found.
                @endif
            </td></tr>
        @endforelse
        </tbody>
    </table>
    @if($items->hasPages())<div class="px-4 py-3 border-t bg-gray-50">{{ $items->links() }}</div>@endif
</div>

{{-- Payment Modal --}}
<div id="pay-modal" class="fixed inset-0 bg-black/30 z-50 flex items-center justify-center" style="display:none">
    <div class="bg-white rounded-xl p-6 w-96 shadow-xl">
        <h4 class="text-sm font-bold mb-1">Record Payment</h4>
        <p class="text-xs text-gray-500 mb-3" id="pay-info"></p>
        <form method="POST" id="pay-form">@csrf @method('PUT')
            <div class="space-y-3">
                <div><label class="form-label">Payment Method <span class="text-red-500">*</span></label>
                    <select name="payment_method" required class="form-input" id="pay-method">
                        <option value="mpesa">M-Pesa</option>
                        <option value="bank">Bank Transfer</option>
                        <option value="cash">Cash</option>
                        <option value="cheque">Cheque</option>
                    </select>
                </div>
                <div><label class="form-label">Transaction Code / Reference <span class="text-red-500">*</span></label>
                    <input type="text" name="transaction_code" required class="form-input" placeholder="e.g. QJK3L7M9X2">
                </div>
            </div>
            <div class="flex gap-2 mt-4">
                <button type="submit" class="btn-success text-xs">Confirm Payment</button>
                <button type="button" onclick="document.getElementById('pay-modal').style.display='none'" class="btn-secondary text-xs">Cancel</button>
            </div>
        </form>
    </div>
</div>
@endsection
@section('scripts')
<script>
function openPayModal(itemId, name, amount, mode){
    document.getElementById('pay-form').action = `${window.HMIS_BASE}/locum-payments/${itemId}/pay`;
    document.getElementById('pay-info').textContent = name + ' | KES ' + amount.toLocaleString();
    document.getElementById('pay-method').value = mode || 'mpesa';
    document.getElementById('pay-modal').style.display = 'flex';
}
</script>
@endsection