@extends('layouts.app')
@section('title', 'Statutory Remittances')
@section('content')
@include('hr.partials.ft-staff-tabs', ['active' => 'remittances'])

{{-- Filters --}}
<div class="bg-white rounded-xl border p-4 mb-4">
    <form method="GET" class="flex flex-wrap gap-3 items-end">
        <div>
            <label class="form-label">Status</label>
            <select name="status" class="form-input text-xs">
                <option value="all" @if($statusFilter==='all') selected @endif>All</option>
                <option value="unpaid" @if($statusFilter==='unpaid') selected @endif>Unpaid</option>
                <option value="paid" @if($statusFilter==='paid') selected @endif>Paid</option>
            </select>
        </div>
        <div>
            <label class="form-label">Month</label>
            <input type="month" name="month" value="{{ $monthFilter }}" class="form-input text-xs">
        </div>
        <button type="submit" class="btn-secondary text-xs">Filter</button>
        <a href="{{ route('payroll.remittances') }}" class="text-xs text-gray-500 hover:underline">Clear</a>
    </form>
</div>

{{-- Table --}}
<div class="bg-white rounded-xl border overflow-hidden">
    <table class="w-full text-xs">
        <thead class="bg-gray-50"><tr>
            <th class="table-header">Run</th>
            <th class="table-header">Statutory Body</th>
            <th class="table-header text-right">Amount Due</th>
            <th class="table-header">Due Date</th>
            <th class="table-header">Status</th>
            <th class="table-header">Reference</th>
            <th class="table-header">Paid On</th>
            <th class="table-header">Proof</th>
            <th class="table-header"></th>
        </tr></thead>
        <tbody class="divide-y divide-gray-50">
        @forelse($remits as $r)
            <tr class="hover:bg-purple-50/20">
                <td class="table-cell">
                    <a href="{{ route('payroll.run.show', $r->run->id) }}" class="font-medium" style="color:#5c1269">{{ $r->run->run_number ?? '' }}</a>
                    <p class="text-gray-400 text-xs">{{ $r->run->month_label ?? '' }}</p>
                </td>
                <td class="table-cell font-medium">{{ $r->label }}</td>
                <td class="table-cell text-right font-semibold">{{ number_format($r->amount_due, 2) }}</td>
                <td class="table-cell">{{ $r->due_date?->format('d M Y') }}</td>
                <td class="table-cell">
                    @if($r->display_status === 'paid')<span class="badge badge-success">Paid</span>
                    @elseif($r->display_status === 'overdue')<span class="badge badge-danger">Overdue</span>
                    @else<span class="badge badge-warning">Unpaid</span>@endif
                    @if($r->is_late)<span class="badge badge-danger ml-1">Late</span>@endif
                </td>
                <td class="table-cell text-gray-500">{{ $r->payment_reference ?? '-' }}</td>
                <td class="table-cell">{{ $r->payment_date?->format('d M Y') ?? '-' }}</td>
                <td class="table-cell">
                    @if($r->proof_path)<a href="{{ asset('storage/' . $r->proof_path) }}" target="_blank" class="text-blue-600 hover:underline">View</a>@else <span class="text-gray-400">—</span>@endif
                </td>
                <td class="table-cell">
                    @if($r->status !== 'paid')
                    <button onclick="openPay({{ $r->id }}, '{{ addslashes($r->label) }}', {{ $r->amount_due }})" class="text-xs font-medium" style="color:#5c1269">Mark Paid</button>
                    @endif
                </td>
            </tr>
        @empty
            <tr><td colspan="9" class="table-cell text-center text-gray-400 py-12">No remittances match those filters.</td></tr>
        @endforelse
        </tbody>
    </table>
</div>

{{-- Mark Paid Modal --}}
<div id="pay-modal" style="position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;display:none;align-items:center;justify-content:center">
    <div style="background:#fff;border-radius:12px;padding:20px;max-width:480px;width:90%">
        <h3 class="text-base font-bold mb-1">Mark Remittance as Paid</h3>
        <p class="text-xs text-gray-500 mb-4" id="pay-label"></p>
        <form method="POST" id="pay-form" enctype="multipart/form-data">@csrf @method('PUT')
            <div class="mb-3">
                <label class="form-label">Payment Reference *</label>
                <input type="text" name="payment_reference" class="form-input" placeholder="e.g. iTax acknowledgement no." required>
            </div>
            <div class="mb-3">
                <label class="form-label">Payment Date *</label>
                <input type="date" name="payment_date" class="form-input" value="{{ now()->toDateString() }}" required>
            </div>
            <div class="mb-3">
                <label class="form-label">Upload Proof (PDF / Image)</label>
                <input type="file" name="proof" class="form-input" accept=".pdf,.jpg,.jpeg,.png">
                <p class="text-xs text-gray-500 mt-1">Max 4MB. Will be stored against this remittance.</p>
            </div>
            <div class="mb-3">
                <label class="form-label">Notes</label>
                <textarea name="notes" class="form-input" rows="2"></textarea>
            </div>
            <div class="flex justify-end gap-2 mt-4">
                <button type="button" onclick="document.getElementById('pay-modal').style.display='none'" class="btn-secondary">Cancel</button>
                <button type="submit" class="btn-success">Confirm Payment</button>
            </div>
        </form>
    </div>
</div>

<script>
function openPay(id, label, amount) {
    document.getElementById('pay-label').textContent = label + ' — KES ' + Number(amount).toLocaleString();
    document.getElementById('pay-form').action = '/payroll/remittance/' + id + '/pay';
    document.getElementById('pay-modal').style.display = 'flex';
}
document.getElementById('pay-modal').addEventListener('click', e => {
    if (e.target.id === 'pay-modal') e.target.style.display = 'none';
});
</script>
@endsection