@extends('layouts.app')

@section('title', 'Premium Collections')

@section('content')
    <div class="flex items-center justify-between mb-5">
        <h1 class="text-lg font-bold text-gray-900">Premium Collections</h1>
        <div class="flex gap-2">
            <form method="POST" action="{{ route('corporate.premiums.generate') }}" class="inline">
                @csrf
                <input type="hidden" name="billing_month" value="{{ request('billing_month', now()->format('Y-m')) }}">
                @if (request('corporate_account_id'))
                    <input type="hidden" name="corporate_account_id" value="{{ request('corporate_account_id') }}">
                @endif
                <button class="btn-secondary" onclick="return confirm('Generate premium rows for the selected month? This is idempotent — existing rows will not be duplicated.')">
                    Auto-generate Monthly Premiums
                </button>
            </form>
        </div>
    </div>

    {{-- ============ Stat summary ============ --}}
    <div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-5">
        <div class="stat-card">
            <div class="text-xs text-gray-500 uppercase">Expected</div>
            <div class="text-xl font-bold">KES {{ number_format($stats['expected'] ?? 0, 0) }}</div>
        </div>
        <div class="stat-card done">
            <div class="text-xs text-gray-500 uppercase">Collected</div>
            <div class="text-xl font-bold text-green-700">KES {{ number_format($stats['collected'] ?? 0, 0) }}</div>
        </div>
        <div class="stat-card waiting">
            <div class="text-xs text-gray-500 uppercase">Outstanding</div>
            <div class="text-xl font-bold text-amber-700">KES {{ number_format($stats['outstanding'] ?? 0, 0) }}</div>
        </div>
        <div class="stat-card consult">
            <div class="text-xs text-gray-500 uppercase">Paid Rows</div>
            <div class="text-xl font-bold">{{ number_format($stats['paid_count'] ?? 0) }}</div>
        </div>
        <div class="stat-card lab">
            <div class="text-xs text-gray-500 uppercase">Due Rows</div>
            <div class="text-xl font-bold">{{ number_format($stats['due_count'] ?? 0) }}</div>
        </div>
    </div>

    {{-- ============ Filters ============ --}}
    <form method="GET" class="bg-white rounded-lg border border-gray-200 p-4 mb-5 grid grid-cols-1 md:grid-cols-5 gap-3">
        <div>
            <label class="form-label">Scheme</label>
            <select name="corporate_account_id" class="form-input">
                <option value="">All schemes</option>
                @foreach ($accounts as $a)
                    <option value="{{ $a->id }}" @selected(request('corporate_account_id') == $a->id)>{{ $a->code }} — {{ $a->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="form-label">Billing Month</label>
            <input type="month" name="billing_month" value="{{ request('billing_month') }}" class="form-input">
        </div>
        <div>
            <label class="form-label">Status</label>
            <select name="status" class="form-input">
                <option value="">All</option>
                @foreach (['Due','Partial','Paid','Overdue','Waived'] as $s)
                    <option value="{{ $s }}" @selected(request('status') === $s)>{{ $s }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="form-label">Search</label>
            <input type="text" name="q" value="{{ request('q') }}" placeholder="Member # / receipt…" class="form-input">
        </div>
        <div class="flex items-end">
            <button type="submit" class="btn-primary w-full">Apply</button>
        </div>
    </form>

    {{-- ============ Ledger table ============ --}}
    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="table-header">
                        <th class="px-3 py-3 text-left">Month</th>
                        <th class="px-3 py-3 text-left">Scheme</th>
                        <th class="px-3 py-3 text-left">Member #</th>
                        <th class="px-3 py-3 text-left">Member Name</th>
                        <th class="px-3 py-3 text-right">Expected</th>
                        <th class="px-3 py-3 text-right">Paid</th>
                        <th class="px-3 py-3 text-left">Due Date</th>
                        <th class="px-3 py-3 text-left">Payment Date</th>
                        <th class="px-3 py-3 text-left">Method</th>
                        <th class="px-3 py-3 text-left">Receipt</th>
                        <th class="px-3 py-3 text-left">Status</th>
                        <th class="px-3 py-3 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse ($rows as $r)
                        <tr class="hover:bg-gray-50 {{ $r->isReversed() ? 'opacity-60 line-through' : '' }}">
                            <td class="table-cell font-mono text-xs">{{ $r->billing_month }}</td>
                            <td class="table-cell text-xs">{{ $r->account?->code }}</td>
                            <td class="table-cell font-mono text-xs">{{ $r->member?->member_number }}</td>
                            <td class="table-cell">
                                {{ $r->member?->patient ? trim($r->member->patient->first_name . ' ' . $r->member->patient->last_name) : '—' }}
                            </td>
                            <td class="table-cell text-right">{{ number_format($r->amount_expected, 0) }}</td>
                            <td class="table-cell text-right font-medium">{{ number_format($r->amount_paid, 0) }}</td>
                            <td class="table-cell text-xs">{{ $r->due_date?->format('d M Y') }}</td>
                            <td class="table-cell text-xs">{{ $r->payment_date?->format('d M Y') ?? '—' }}</td>
                            <td class="table-cell text-xs">{{ $r->payment_method ?? '—' }}</td>
                            <td class="table-cell text-xs font-mono">{{ $r->receipt_number ?? '—' }}</td>
                            <td class="table-cell">
                                @php
                                    $b = match ($r->status) {
                                        'Paid'    => 'badge-success',
                                        'Partial' => 'badge-warning',
                                        'Waived'  => 'badge-info',
                                        'Overdue' => 'badge-danger',
                                        default   => 'badge-gray',
                                    };
                                @endphp
                                <span class="badge {{ $b }}">{{ $r->status }}</span>
                            </td>
                            <td class="table-cell text-right text-xs">
                                @if (!$r->isReversed() && $r->status !== 'Paid')
                                    <button onclick="openPostModal({{ $r->id }}, {{ $r->amount_expected }}, {{ $r->amount_paid }})" class="text-cr-700 hover:underline">Post</button>
                                @endif
                                @if (!$r->isReversed() && in_array($r->status, ['Paid','Partial']))
                                    <button onclick="openReverseModal({{ $r->id }})" class="text-red-600 hover:underline ml-2">Reverse</button>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="12" class="text-center py-8 text-gray-400">No premium rows match the filter.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if (method_exists($rows, 'links'))
            <div class="px-5 py-3 border-t border-gray-200">{{ $rows->withQueryString()->links() }}</div>
        @endif
    </div>
</div>

{{-- ============ Post Payment Modal ============ --}}
<div id="postModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 p-4">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
        <div class="px-5 py-4 border-b border-gray-200 flex justify-between">
            <h3 class="font-semibold">Post Premium Payment</h3>
            <button onclick="closeModal('postModal')" class="text-2xl leading-none">&times;</button>
        </div>
        <form id="postForm" method="POST" class="p-5 space-y-3">
            @csrf
            <div>
                <label class="form-label">Amount Paid (KES) *</label>
                <input type="number" name="amount_paid" id="postAmount" step="0.01" min="0" class="form-input" required>
                <div class="text-xs text-gray-500 mt-1">Expected: KES <span id="postExpected"></span></div>
            </div>
            <div>
                <label class="form-label">Payment Date *</label>
                <input type="date" name="payment_date" value="{{ now()->format('Y-m-d') }}" class="form-input" required>
            </div>
            <div>
                <label class="form-label">Payment Method *</label>
                <select name="payment_method" class="form-input" required>
                    <option value="Cash">Cash</option>
                    <option value="M-Pesa">M-Pesa</option>
                    <option value="Bank">Bank Transfer</option>
                    <option value="SACCO Remittance">SACCO Remittance</option>
                    <option value="Waiver">Waiver</option>
                </select>
            </div>
            <div>
                <label class="form-label">Receipt / Transaction Ref</label>
                <input type="text" name="receipt_number" class="form-input">
            </div>
            <div>
                <label class="form-label">Notes</label>
                <textarea name="notes" class="form-input" rows="2"></textarea>
            </div>
            <div class="flex justify-end gap-2 pt-3 border-t border-gray-100">
                <button type="button" onclick="closeModal('postModal')" class="btn-secondary">Cancel</button>
                <button type="submit" class="btn-primary">Post Payment</button>
            </div>
        </form>
    </div>
</div>

{{-- ============ Reverse Modal ============ --}}
<div id="reverseModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 p-4">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
        <div class="px-5 py-4 border-b border-gray-200 flex justify-between">
            <h3 class="font-semibold text-red-700">Reverse Premium Payment</h3>
            <button onclick="closeModal('reverseModal')" class="text-2xl leading-none">&times;</button>
        </div>
        <form id="reverseForm" method="POST" class="p-5 space-y-3">
            @csrf
            <div class="text-sm text-gray-700 bg-red-50 border border-red-200 px-3 py-2 rounded">
                Reversal will recompute the member's compliance status and create an audit-trail entry. The row is preserved.
            </div>
            <div>
                <label class="form-label">Reason for Reversal *</label>
                <textarea name="reason" class="form-input" rows="3" required></textarea>
            </div>
            <div class="flex justify-end gap-2 pt-3 border-t border-gray-100">
                <button type="button" onclick="closeModal('reverseModal')" class="btn-secondary">Cancel</button>
                <button type="submit" class="btn-danger">Reverse</button>
            </div>
        </form>
    </div>

<script>
    function openPostModal(id, expected, currentPaid) {
        const form = document.getElementById('postForm');
        form.action = '{{ url('corporate/premiums') }}/' + id + '/post';
        document.getElementById('postExpected').textContent = Number(expected).toLocaleString();
        document.getElementById('postAmount').value = expected;
        document.getElementById('postModal').classList.remove('hidden');
        document.getElementById('postModal').classList.add('flex');
    }
    function openReverseModal(id) {
        const form = document.getElementById('reverseForm');
        form.action = '{{ url('corporate/premiums') }}/' + id + '/reverse';
        document.getElementById('reverseModal').classList.remove('hidden');
        document.getElementById('reverseModal').classList.add('flex');
    }
    function closeModal(id) {
        const m = document.getElementById(id);
        m.classList.add('hidden'); m.classList.remove('flex');
    }
</script>
@endsection