@extends('layouts.app')
@section('title', 'Insurance & Claims')
@section('styles')
<style>.cl-tabs{display:flex;gap:2px;border-bottom:2px solid #e5e7eb;padding:0 4px}.cl-tab{padding:10px 16px;font-size:12px;font-weight:600;color:#6b7280;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;background:none;border-top:none;border-left:none;border-right:none;display:flex;align-items:center;gap:5px}.cl-tab:hover{color:#0069c9;background:#f0f7ff}.cl-tab.active{color:#0069c9;border-bottom-color:#0069c9}.cl-tab .tc{background:#e5e7eb;color:#4b5563;font-size:12px;padding:1px 7px;border-radius:99px;font-weight:700}.cl-tab.active .tc{background:#dbeafe;color:#1e40af}.cl-panel{display:none}.cl-panel.active{display:block}</style>
@endsection
@section('content')
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div><h1 class="text-lg font-bold text-gray-900">Insurance & Claims</h1><p class="text-xs text-gray-400">Track insured bills through submission and payment</p></div>
</div>

{{-- Stats --}}
<div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-4">
    <div class="stat-card"><p class="text-xs text-gray-400 uppercase">Total Claims</p><p class="text-xl font-bold">{{ number_format($stats['total_amount'] ?? 0) }}</p></div>
    <div class="stat-card"><p class="text-xs text-gray-400 uppercase">Pending</p><p class="text-xl font-bold text-amber-600">{{ $stats['pending_count'] ?? 0 }}</p></div>
    <div class="stat-card"><p class="text-xs text-gray-400 uppercase">Delivered</p><p class="text-xl font-bold text-blue-600">{{ $stats['delivered_count'] ?? 0 }}</p></div>
    <div class="stat-card"><p class="text-xs text-gray-400 uppercase">Paid</p><p class="text-xl font-bold text-green-600">KES {{ number_format($stats['paid_amount'] ?? 0) }}</p></div>
    <div class="stat-card"><p class="text-xs text-gray-400 uppercase">Outstanding</p><p class="text-xl font-bold text-red-600">KES {{ number_format($stats['outstanding'] ?? 0) }}</p></div>
</div>

<div class="bg-white rounded-xl border shadow-sm">
    <div class="cl-tabs">
        <button class="cl-tab active" onclick="clTab(this,'queue')">Claim Queue <span class="tc">{{ $stats['queue_count'] ?? 0 }}</span></button>
        <button class="cl-tab" onclick="clTab(this,'all')">View Claims</button>
        <button class="cl-tab" onclick="clTab(this,'delivered')">Delivered</button>
        <button class="cl-tab" onclick="clTab(this,'paid')">Paid</button>
        <button class="cl-tab" onclick="clTab(this,'rejected')">Rejected / Disputed</button>
    </div>

    {{-- Filters --}}
    <div class="px-5 py-3 border-b bg-gray-50/50">
        <form method="GET" class="flex flex-wrap gap-2 items-end">
            <select name="company" class="form-input text-xs w-40"><option value="">All Insurers</option>@foreach($companies as $c)<option value="{{ $c->id }}" {{ request('company')==$c->id?'selected':'' }}>{{ $c->name }}</option>@endforeach</select>
            <input type="date" name="from" value="{{ request('from') }}" class="form-input text-xs w-32 no-flatpickr" placeholder="From">
            <input type="date" name="to" value="{{ request('to') }}" class="form-input text-xs w-32 no-flatpickr" placeholder="To">
            <select name="status" class="form-input text-xs w-32"><option value="">All Status</option>@foreach(['draft','submitted','partially_paid','paid','rejected','disputed','closed'] as $s)<option value="{{ $s }}" {{ request('status')===$s?'selected':'' }}>{{ ucfirst($s) }}</option>@endforeach</select>
            <button class="btn-primary text-xs">Filter</button>
            @if(request()->hasAny(['company','from','to','status']))<a href="{{ route('insurance.index') }}" class="btn-secondary text-xs">Clear</a>@endif
        </form>
    </div>

    {{-- Claims Table (shared across all tabs, filtered by JS) --}}
    <div class="overflow-x-auto">
        <table class="w-full" id="claimsTable">
            <thead><tr class="bg-gray-50">
                <th class="table-header">Patient</th><th class="table-header">Insurer</th><th class="table-header">Scheme</th><th class="table-header text-right">Claim Amount</th><th class="table-header">Date Billed</th><th class="table-header text-center">Delivered</th><th class="table-header text-center">Paid</th>
            </tr></thead>
            <tbody>
            @forelse($claims as $cl)
            @php
                $isDelivered = $cl->delivered ?? false;
                $isPaid = $cl->paid ?? ($cl->status === 'paid');
                $tabGroup = 'all';
                if (in_array($cl->status, ['rejected','disputed'])) $tabGroup = 'rejected';
                elseif ($isPaid) $tabGroup = 'paid';
                elseif ($isDelivered) $tabGroup = 'delivered';
                else $tabGroup = 'queue';

                // Highlight rows that still have the placeholder insurer
                $isUnknownInsurer = ($cl->insuranceCompany?->code ?? '') === 'UNKNOWN';

                $isRejected = in_array($cl->status, ['rejected','disputed']);
                $isAdmin    = auth()->user()->hasAnyRole('Super Admin','Hospital Admin');
                $canAssign  = auth()->user()->hasAnyRole('Super Admin','Hospital Admin','Finance User');
            @endphp
            <tr class="border-b border-gray-50 claim-row {{ $isUnknownInsurer ? 'bg-amber-50' : '' }}" data-tab="{{ $tabGroup }}">
                <td class="table-cell font-medium text-xs">{{ $cl->patient->full_name ?? '' }}</td>
                <td class="table-cell text-xs">
                    @if($isUnknownInsurer)
                        @if($canAssign)
                            <button type="button"
                                    onclick="openReassignModal({{ $cl->id }}, '{{ addslashes($cl->claim_number) }}', {{ (int) ($cl->insurance_company_id ?? 0) }}, '{{ addslashes($cl->insuranceCompany->name ?? '') }}')"
                                    class="text-xs text-white bg-amber-600 hover:bg-amber-700 px-2 py-0.5 rounded font-semibold">Assign Insurer</button>
                        @else
                            <span class="inline-flex items-center gap-1 text-amber-700 font-semibold" title="This claim needs an insurer assigned">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                Unknown · Needs assignment
                            </span>
                        @endif
                    @else
                        {{ $cl->insuranceCompany->name ?? '' }}
                    @endif
                </td>
                <td class="table-cell text-xs">{{ $cl->scheme ?? $cl->member_number ?? '-' }}</td>
                <td class="table-cell text-right font-semibold text-xs">{{ number_format($cl->claim_amount) }}</td>
                <td class="table-cell text-xs text-gray-400">{{ $cl->submission_date?->format('d M Y') ?? $cl->created_at->format('d M Y') }}</td>
                <td class="table-cell text-center">
                    @if($isAdmin)
                        <div class="inline-flex gap-1">
                            <form method="POST" action="{{ route('insurance.claims.update', $cl) }}" class="inline">@csrf @method('PUT')
                                <input type="hidden" name="delivered" value="1">
                                <button title="Mark delivered" class="w-7 h-6 rounded text-xs font-bold {{ $isDelivered ? 'bg-green-600 text-white' : 'bg-gray-100 text-gray-400 hover:bg-gray-200' }}">&checkmark;</button>
                            </form>
                            <form method="POST" action="{{ route('insurance.claims.update', $cl) }}" class="inline">@csrf @method('PUT')
                                <input type="hidden" name="delivered" value="0">
                                <button title="Mark not delivered" class="w-7 h-6 rounded text-xs font-bold {{ !$isDelivered ? 'bg-red-600 text-white' : 'bg-gray-100 text-gray-400 hover:bg-gray-200' }}">&cross;</button>
                            </form>
                        </div>
                    @else
                        @if($isDelivered)<span class="badge badge-success">Yes</span>@else<span class="badge badge-gray">No</span>@endif
                    @endif
                </td>
                <td class="table-cell text-center">
                    @if($isAdmin)
                        <div class="inline-flex gap-1">
                            <form method="POST" action="{{ route('insurance.claims.update', $cl) }}" class="inline" onsubmit="return confirm('Mark this claim as PAID in full?')">@csrf @method('PUT')
                                <input type="hidden" name="paid" value="1">
                                <button title="Mark paid" class="w-7 h-6 rounded text-xs font-bold {{ $isPaid ? 'bg-green-600 text-white' : 'bg-gray-100 text-gray-400 hover:bg-gray-200' }}">&checkmark;</button>
                            </form>
                            <form method="POST" action="{{ route('insurance.claims.update', $cl) }}" class="inline" onsubmit="return confirm('Mark this claim as REJECTED?')">@csrf @method('PUT')
                                <input type="hidden" name="status" value="rejected">
                                <button title="Mark rejected" class="w-7 h-6 rounded text-xs font-bold {{ $isRejected ? 'bg-red-600 text-white' : 'bg-gray-100 text-gray-400 hover:bg-gray-200' }}">&cross;</button>
                            </form>
                        </div>
                    @else
                        @if($isPaid)<span class="badge badge-success">Paid</span>@elseif($isRejected)<span class="badge badge-danger">Rejected</span>@else<span class="badge badge-gray">—</span>@endif
                    @endif
                </td>
            </tr>
            @empty
            <tr><td colspan="7" class="table-cell text-center text-gray-400 py-8">No claims found.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($claims->hasPages())<div class="px-4 py-3 border-t">{{ $claims->links() }}</div>@endif
</div>

{{-- Reassign Insurer Modal --}}
<div id="reassignModal" 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-md mx-4 p-6">
        <h3 class="font-bold text-gray-900 mb-1">Reassign Insurer</h3>
        <p class="text-xs text-gray-500 mb-4">Claim <span id="reassignClaimNo" class="font-mono font-semibold"></span> · Currently with <span id="reassignCurrent" class="font-semibold"></span></p>

        <form method="POST" id="reassignForm">@csrf @method('PUT')
            <div class="space-y-3">
                <div>
                    <label class="form-label">New Insurer *</label>
                    <select name="insurance_company_id" id="reassignCompanySelect" required class="form-input">
                        <option value="">— Select an insurer —</option>
                        @foreach($companies as $c)
                            <option value="{{ $c->id }}">{{ $c->name }}{{ $c->code ? ' · ' . $c->code : '' }}</option>
                        @endforeach
                    </select>
                    <p class="text-[10px] text-gray-500 mt-1">Not in the list? Add it in <a href="{{ route('insurance.companies') }}" class="text-blue-600 underline">Insurance Companies</a> first.</p>
                </div>
                <div>
                    <label class="form-label">Reason (optional)</label>
                    <input type="text" name="reason" class="form-input" placeholder="e.g. Identified from member card / insurer portal">
                </div>
            </div>
            <div class="flex justify-end gap-2 mt-5">
                <button type="button" onclick="document.getElementById('reassignModal').classList.add('hidden')" class="btn-secondary text-xs">Cancel</button>
                <button type="submit" class="btn-primary text-xs">Save Reassignment</button>
            </div>
        </form>
    </div>
</div>

{{-- Pay Claim Modal --}}
<div id="payClaimModal" 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-sm mx-4 p-6">
        <h3 class="font-bold mb-3">Record Claim Payment</h3>
        <form method="POST" id="payClaimForm">@csrf @method('PUT')
            <input type="hidden" name="paid" value="1">
            <input type="hidden" name="status" value="paid">
            <div class="space-y-3">
                <div><label class="form-label">Amount Paid *</label><input type="number" step="0.01" name="paid_amount" id="payClaimAmt" required class="form-input"></div>
                <div><label class="form-label">Remittance Reference</label><input type="text" name="remittance_reference" class="form-input"></div>
                <div><label class="form-label">Payment Date</label><input type="date" name="payment_date" value="{{ date('Y-m-d') }}" class="form-input no-flatpickr"></div>
            </div>
            <div class="flex justify-end gap-2 mt-4"><button type="button" onclick="document.getElementById('payClaimModal').classList.add('hidden')" class="btn-secondary text-xs">Cancel</button><button type="submit" class="btn-success text-xs">Record Payment</button></div>
        </form>
    </div>
</div>
@endsection
@section('scripts')
<script>
function clTab(btn, tab) {
    document.querySelectorAll('.cl-tab').forEach(t => t.classList.remove('active'));
    btn.classList.add('active');
    document.querySelectorAll('.claim-row').forEach(r => {
        r.style.display = (tab === 'all' || r.dataset.tab === tab) ? '' : 'none';
    });
}
function openPayClaimModal(id, amt) {
    document.getElementById('payClaimForm').action = `${window.HMIS_BASE}/insurance/claims/${id}`;
    document.getElementById('payClaimAmt').value = amt;
    document.getElementById('payClaimModal').classList.remove('hidden');
}

function openReassignModal(claimId, claimNo, currentCompanyId, currentCompanyName) {
    const form = document.getElementById('reassignForm');
    form.action = `${window.HMIS_BASE}/insurance/claims/${claimId}/reassign`;

    document.getElementById('reassignClaimNo').textContent = claimNo;
    document.getElementById('reassignCurrent').textContent = currentCompanyName || '(no insurer set)';

    // Pre-select the current company in the dropdown (if it's a real insurer)
    const select = document.getElementById('reassignCompanySelect');
    if (currentCompanyId && currentCompanyId > 0) {
        // Don't pre-select if it's the Unknown placeholder — force user to pick a real one
        const opt = select.querySelector(`option[value="${currentCompanyId}"]`);
        if (opt && !currentCompanyName.includes('Unknown')) {
            select.value = currentCompanyId;
        } else {
            select.value = '';
        }
    } else {
        select.value = '';
    }

    document.getElementById('reassignModal').classList.remove('hidden');
    setTimeout(() => select.focus(), 50);
}
</script>
@endsection