@extends('layouts.app')
@section('title', 'Invoice | ' . ($visit->invoice?->invoice_number ?? 'New'))
@section('content')
@php
    $isAdmin    = auth()->user()->hasAnyRole('Super Admin','Hospital Admin');
    $isCashier  = auth()->user()->hasAnyRole('Receptionist','Clinician','Nurse','Triage Nurse','Dental User','Super Admin','Hospital Admin');
    $invoice    = $visit->invoice;
    $isCompleted = in_array($visit->status, ['completed','discharged']);

    $invFreshBalance = 0;
    if ($invoice) {
        $invFreshTotal   = $invoice->items()->sum(\DB::raw('quantity * unit_price'));
        $invFreshPaid    = $invoice->payments()->where('status','completed')->sum('amount');
        $invFreshBalance = max(0, $invFreshTotal - $invFreshPaid);
    }
@endphp

@if($invoice)
<div class="crh-page-header">
    <div>
        <h1 class="crh-page-title">Invoice {{ $invoice->invoice_number }}</h1>
        <div class="crh-page-subtitle">{{ $visit->patient->full_name ?? '' }} · {{ $visit->visit_number }}</div>
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap">
        <a href="{{ route('billing.invoice.print', $invoice) }}" target="_blank" class="crh-btn crh-btn--secondary crh-btn--sm">Print Invoice</a>
        @if(($invFreshPaid ?? 0) > 0)
        <a href="{{ route('billing.final-receipt', $invoice) }}" target="_blank" class="crh-btn crh-btn--primary crh-btn--sm">Print Receipt</a>
        @endif
    </div>
</div>
@endif

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    {{-- ── LEFT: Line items ───────────────────────────────────────────────── --}}
    <div class="lg:col-span-2">

        {{-- Admin banner for completed visits --}}
        @if($isAdmin && $isCompleted)
        <div class="mb-4 bg-amber-50 border border-amber-200 rounded-xl p-4 flex flex-wrap items-center justify-between gap-3">
            <div class="flex items-center gap-2">
                <svg class="w-4 h-4 text-amber-500 flex-shrink-0" 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>
                <div>
                    <p class="text-xs font-bold text-amber-800">This visit is {{ $visit->status }} — bill is locked for regular users</p>
                    <p class="text-xs text-amber-600">As admin you can reopen it to make changes, or correct the payer type below.</p>
                </div>
            </div>
            <form method="POST" action="{{ route('billing.invoice.reopen', $invoice) }}"
                  onsubmit="return confirm('Reopen visit {{ $visit->visit_number }}? This will set it back to In Consultation so charges and payments can be modified. Continue?')">
                @csrf
                <button type="submit" class="crh-btn crh-btn--primary crh-btn--sm">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                    Reopen Visit / Unlock Bill
                </button>
            </form>
        </div>
        @endif

        {{-- ── GENERATE CLAIM BANNER (insurance/corporate invoices without a claim) ── --}}
        @php
            $isClaimWorthy  = $invoice && in_array($invoice->payment_mode, ['insurance', 'corporate']);
            $hasExistingClaim = $isClaimWorthy ? \App\Models\InsuranceClaim::where('invoice_id', $invoice->id)->exists() : false;
            $canGenerateClaim = $isClaimWorthy && !$hasExistingClaim && auth()->user()->hasAnyRole('Super Admin','Hospital Admin','Finance User','Receptionist');
        @endphp
        @if($canGenerateClaim)
        <div style="background:#eff6ff;border:1px solid #bfdbfe;border-left:4px solid #1d4ed8;border-radius:10px;padding:12px 14px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px">
            <div style="font-size:11.5px;color:#1e3a8a;flex:1;min-width:240px">
                <strong style="color:#1e3a8a">No claim record for this insurance invoice.</strong>
                Generate one to start tracking the claim through submission → delivered → paid. The claim starts as a draft.
            </div>
            <form method="POST" action="{{ route('billing.invoice.generate-claim', $invoice) }}">
                @csrf
                <button type="submit"
                        style="background:#1d4ed8;color:#fff;padding:8px 14px;font-size:11.5px;font-weight:700;border-radius:8px;border:none;cursor:pointer;box-shadow:0 1px 3px rgba(29,78,216,.3)">
                    Generate Claim
                </button>
            </form>
        </div>
        @elseif($isClaimWorthy && $hasExistingClaim)
        @php $existingClaim = \App\Models\InsuranceClaim::where('invoice_id', $invoice->id)->latest()->first(); @endphp
        <div style="background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;padding:10px 14px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px">
            <div style="font-size:11.5px;color:#0c4a6e;flex:1;min-width:240px">
                <strong style="color:#0c4a6e">Claim {{ $existingClaim->claim_number }}</strong>
                · Status: <span style="text-transform:capitalize;font-weight:700">{{ str_replace('_',' ',$existingClaim->status) }}</span>
                · Amount: KES {{ number_format((float) $existingClaim->claim_amount, 2) }}
                @if(($existingClaim->paid_amount ?? 0) > 0) · Paid: KES {{ number_format((float) $existingClaim->paid_amount, 2) }}@endif
            </div>
            <a href="{{ route('insurance.claims') }}?search={{ $existingClaim->claim_number }}"
               style="background:#0369a1;color:#fff;padding:6px 12px;font-size:11px;font-weight:700;border-radius:6px;text-decoration:none">
                View in Claims
            </a>
        </div>
        @endif

        {{-- Invoice card --}}
        <div class="crh-card mb-6">
            <div class="flex justify-between items-start mb-4">
                <div>
                    <h3 class="font-semibold">{{ $invoice?->invoice_number ?? '' }}</h3>
                    <p class="text-sm text-gray-500">{{ $visit->patient->full_name }} · {{ $visit->patient->mrn }}</p>
                    {{-- Show current payer clearly --}}
                    <p class="text-xs mt-1">
                        <span class="text-gray-400">Payer:</span>
                        <span class="font-semibold
                            {{ ($invoice?->payment_mode ?? '') === 'insurance' ? 'text-blue-700' : 'text-gray-700' }}">
                            @if(($invoice?->payment_mode ?? '') === 'insurance')
                                {{ $invoice->insuranceCompany->name ?? 'Insurance' }}
                            @else
                                {{ ucfirst($invoice?->payment_mode ?? 'cash') }}
                            @endif
                        </span>
                        @if($isAdmin && $invoice)
                        <button onclick="document.getElementById('fix-payer-panel').classList.toggle('hidden')"
                            class="ml-2 text-xs text-purple-600 hover:text-purple-800 underline">fix payer type</button>
                        @endif
                    </p>

                    {{-- ── SHA member block in the payer header ──────────────
                         Surfaces the patient's SHA identity right next to the
                         payer label, so anyone reviewing the invoice can see
                         it at a glance (not just on the receipt). Two sources,
                         in priority order: (1) the most-recent SHA-tagged
                         payment on this invoice — the values actually used
                         for THIS bill; (2) the patient's stored SHA cover on
                         file — useful when the invoice exists but no SHA
                         payment has been recorded yet (e.g. visit was
                         flagged SHA at registration). --}}
                    @php
                        $hdrShaCompany = \App\Models\InsuranceCompany::where('code', 'SHA')->first();
                        $hdrShaPay = null;
                        $hdrShaCover = null;
                        if ($hdrShaCompany) {
                            // Prefer a real SHA payment on this invoice — it
                            // reflects exactly what was captured and printed.
                            $hdrShaPay = $invoice?->payments
                                ?->whereNotNull('sha_number')
                                ?->sortByDesc('created_at')
                                ?->first();
                            // Fallback: patient's stored coverage. Renders
                            // when the invoice is SHA but no payment has
                            // been recorded yet.
                            if (!$hdrShaPay && ($invoice?->payment_mode ?? '') === 'insurance'
                                && $invoice?->insurance_company_id === $hdrShaCompany->id) {
                                $hdrShaCover = \App\Models\PatientInsurance::where('patient_id', $invoice->patient_id)
                                    ->where('insurance_company_id', $hdrShaCompany->id)
                                    ->where('is_active', true)
                                    ->latest()
                                    ->first();
                            }
                        }
                        $hdrShaNumber = $hdrShaPay->sha_number ?? $hdrShaCover->member_number ?? null;
                        $hdrShaMember = $hdrShaPay->sha_member_name ?? $hdrShaCover->principal_name ?? null;
                        $hdrShaRel    = $hdrShaPay->sha_relationship ?? $hdrShaCover->relationship ?? null;
                        $hdrShaAuth   = $hdrShaPay->sha_auth_reference ?? null;
                        $hdrShaSource = $hdrShaPay ? 'payment' : ($hdrShaCover ? 'file' : null);
                    @endphp
                    @if($hdrShaNumber)
                    <div style="margin-top:8px;padding:8px 12px;border:1px solid #fcd34d;background:#fffbeb;border-radius:8px;display:inline-block">
                        <div style="display:flex;align-items:center;gap:6px;margin-bottom:4px">
                            <span style="font-size:10px;font-weight:700;color:#92400e;text-transform:uppercase;letter-spacing:.04em">SHA Member</span>
                            @if($hdrShaSource === 'file')
                            <span title="From this patient's SHA cover on file — no SHA payment has been recorded against this invoice yet."
                                  style="font-size:9px;font-weight:600;color:#15803d;background:#dcfce7;border:1px solid #86efac;padding:0 5px;border-radius:4px;text-transform:uppercase;letter-spacing:.04em">on file</span>
                            @endif
                        </div>
                        <table style="font-size:11.5px;border-collapse:collapse">
                            <tr>
                                <td style="padding:1px 10px 1px 0;color:#78350f">SHA No.</td>
                                <td style="padding:1px 16px 1px 0;font-family:ui-monospace,monospace;font-weight:600">{{ $hdrShaNumber }}</td>
                                <td style="padding:1px 10px 1px 0;color:#78350f">Relationship</td>
                                <td style="padding:1px 0;font-weight:600">{{ $hdrShaRel ?? '—' }}</td>
                            </tr>
                            <tr>
                                <td style="padding:1px 10px 1px 0;color:#78350f">Member</td>
                                <td colspan="3" style="padding:1px 0;font-weight:600">{{ $hdrShaMember ?? '—' }}</td>
                            </tr>
                            @if($hdrShaAuth)
                            <tr>
                                <td style="padding:1px 10px 1px 0;color:#78350f">Auth Ref</td>
                                <td colspan="3" style="padding:1px 0;font-family:ui-monospace,monospace">{{ $hdrShaAuth }}</td>
                            </tr>
                            @endif
                        </table>
                    </div>
                    @endif
                </div>
                <span class="badge {{ ($invoice?->status ?? '') === 'paid' ? 'badge-success' : 'badge-warning' }}">
                    {{ ucfirst($invoice?->status ?? 'new') }}
                </span>
            </div>

            {{-- Fix Payer Panel (admin only, hidden by default) --}}
            @if($isAdmin && $invoice)
            <div id="fix-payer-panel" class="hidden mb-4 p-4 bg-purple-50 border border-purple-100 rounded-xl">
                <p class="text-xs font-bold text-purple-800 mb-3">Correct the payer type for this invoice</p>
                <form method="POST" action="{{ route('billing.invoice.fix-payer', $invoice) }}" class="flex flex-wrap gap-2 items-end">
                    @csrf
                    <div>
                        <label class="crh-label">Payer Type</label>
                        <select name="payment_mode" id="fix-payer-select" class="crh-select"
                            onchange="document.getElementById('fix-ins-wrap').style.display=this.value==='insurance'?'block':'none'">
                            @foreach(['cash'=>'Cash','mpesa'=>'M-Pesa','insurance'=>'Insurance','corporate'=>'Corporate','bank_transfer'=>'Bank Transfer','waiver'=>'Waiver'] as $val => $label)
                            <option value="{{ $val }}" {{ ($invoice->payment_mode ?? '') === $val ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div id="fix-ins-wrap" style="{{ ($invoice->payment_mode ?? '') === 'insurance' ? '' : 'display:none' }}">
                        <label class="crh-label">Insurance Company</label>
                        <select name="insurance_company_id" class="crh-select">
                            <option value="">Select insurer…</option>
                            @foreach($insuranceCompanies ?? [] as $ins)
                            <option value="{{ $ins->id }}" {{ $invoice->insurance_company_id == $ins->id ? 'selected' : '' }}>
                                {{ $ins->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="crh-btn crh-btn--primary crh-btn--sm">Save Payer</button>
                    <button type="button" onclick="document.getElementById('fix-payer-panel').classList.add('hidden')"
                        class="crh-btn crh-btn--ghost crh-btn--sm">Cancel</button>
                </form>
            </div>
            @endif

            @php
                $canEditItems = auth()->user()->hasAnyRole('Receptionist','Clinician','Nurse','Triage Nurse','Dental User','Hospital Admin','Super Admin');
            @endphp
            <div style="overflow-x:auto;-webkit-overflow-scrolling:touch">
            <table class="w-full mb-4">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="table-header">Item</th>
                        <th class="table-header">Category</th>
                        <th class="table-header text-center">Qty</th>
                        <th class="table-header text-right">Unit Price</th>
                        <th class="table-header text-right">Total</th>
                        <th class="table-header w-10"></th>
                    </tr>
                </thead>
                <tbody>
                @foreach($invoice?->items ?? [] as $item)
                <tr class="border-b border-gray-50 group" id="item-row-{{ $item->id }}">
                    <td class="table-cell font-medium">{{ $item->description }}</td>
                    <td class="table-cell text-xs text-gray-500">{{ $item->category }}</td>

                    {{-- Qty: editable inline --}}
                    <td class="table-cell text-center">
                        @if($canEditItems)
                        <input type="number" min="0"
                               class="w-16 text-center border border-transparent rounded px-1 py-0.5 text-xs font-semibold
                                      hover:border-gray-300 focus:border-blue-400 focus:outline-none focus:bg-blue-50 transition-all"
                               value="{{ $item->quantity }}"
                               onchange="saveItemChange({{ $item->id }}, this.value, null)"
                               title="Click to edit quantity">
                        @else
                        {{ $item->quantity }}
                        @endif
                    </td>

                    {{-- Unit Price: editable inline --}}
                    <td class="table-cell text-right">
                        @if($canEditItems)
                        <input type="number" min="0" step="0.01"
                               class="w-24 text-right border border-transparent rounded px-1 py-0.5 text-xs
                                      hover:border-gray-300 focus:border-blue-400 focus:outline-none focus:bg-blue-50 transition-all"
                               value="{{ $item->unit_price }}"
                               onchange="saveItemChange({{ $item->id }}, null, this.value)"
                               title="Click to edit price">
                        @else
                        {{ number_format($item->unit_price) }}
                        @endif
                    </td>

                    <td class="table-cell text-right font-semibold" id="item-total-{{ $item->id }}">
                        KES {{ number_format($item->total) }}
                    </td>
                    <td class="table-cell text-center">
                        @if($canEditItems)
                        <form method="POST" action="{{ route('billing.item.void', $item) }}"
                              onsubmit="return confirm('Remove {{ addslashes($item->description) }} from this invoice?');"
                              class="inline">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-gray-200 group-hover:text-red-400 hover:text-red-600 transition-colors" title="Remove item">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        </form>
                        @endif
                    </td>
                </tr>
                @endforeach
                </tbody>
                <tfoot>
                    <tr class="bg-gray-50">
                        <td colspan="4" class="table-cell font-semibold text-right">Total:</td>
                        <td class="table-cell font-bold text-lg text-right" id="invoice-grand-total">
                            KES {{ number_format($invoice?->total_amount ?? 0) }}
                        </td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
            </div>{{-- /items table scroll wrapper --}}
        </div>
    </div>

    {{-- ── RIGHT: Payments ─────────────────────────────────────────────────── --}}
    <div>
        @if($invFreshBalance > 0)
            @if($isCashier)
            <div class="crh-card mb-6">
                <h4 class="crh-card__title">Record Payment</h4>
                <form method="POST" action="{{ route('billing.payment') }}">@csrf
                    <input type="hidden" name="invoice_id" value="{{ $invoice?->id ?? '' }}">
                    <div class="crh-field">
                        <label class="crh-label">Amount (KES) <span class="crh-req">*</span></label>
                        <input type="number" name="amount" required class="crh-input" value="{{ $invoice?->balance ?? 0 }}">
                    </div>
                    <div class="crh-field">
                        <label class="crh-label">Method <span class="crh-req">*</span></label>
                        <select name="payment_method" required class="crh-select" onchange="toggleInvPaySub(this.value)">
                            <option value="cash">Cash</option>
                            <option value="mpesa">M-Pesa</option>
                            <option value="insurance" {{ ($invoice?->payment_mode ?? '') === 'insurance' ? 'selected' : '' }}>Insurance</option>
                            <option value="card">Card</option>
                            <option value="bank_transfer">Bank Transfer</option>
                        </select>
                    </div>
                    <div id="inv-pay-sub-mpesa" class="crh-field" style="display:none">
                        <label class="crh-label">M-Pesa Channel</label>
                        <select name="mpesa_channel" class="crh-select">
                            <option value="kcb">KCB Paybill</option>
                            <option value="bingwa_sacco">Bingwa Sacco</option>
                        </select>
                    </div>
                    <div id="inv-pay-sub-insurance" class="crh-field"
                         style="{{ ($invoice?->payment_mode ?? '') === 'insurance' ? '' : 'display:none' }}">
                        <label class="crh-label">Insurance Company</label>
                        @php
                            // SHA detection — same convention as the shared
                            // _payment-section partial: identify SHA by the
                            // canonical company code 'SHA', not by display
                            // name, so renaming the row never breaks the
                            // mandatory-fields trigger.
                            $invShaCompany = \App\Models\InsuranceCompany::where('code', 'SHA')->first();
                            $invShaName    = $invShaCompany?->name ?? 'SHA (Social Health Authority)';
                            // Whether the panel should be open on initial
                            // render (admin returning to a saved SHA invoice).
                            $invShaPreselected = ($invoice?->insuranceCompany?->name ?? null) === $invShaName
                                                 && ($invoice?->payment_mode ?? '') === 'insurance';

                            // Prefill from the patient's existing SHA cover
                            // (patient_insurances). Written on first SHA
                            // capture by BillingController, refreshed on
                            // every subsequent SHA payment. Auth reference
                            // is intentionally not prefilled — episode-specific.
                            $invShaCover = null;
                            if ($invShaCompany && ($invoice?->patient_id ?? null)) {
                                $invShaCover = \App\Models\PatientInsurance::where('patient_id', $invoice->patient_id)
                                    ->where('insurance_company_id', $invShaCompany->id)
                                    ->where('is_active', true)
                                    ->latest()
                                    ->first();
                            }
                        @endphp
                        <select name="insurance_provider" class="crh-select"
                                data-sha-name="{{ $invShaName }}"
                                onchange="toggleInvShaPanel(this.value, '{{ $invShaName }}')">
                            @foreach(\App\Models\InsuranceCompany::where('is_active',true)->orderBy('name')->get() as $ins)
                            <option value="{{ $ins->name }}"
                                {{ ($invoice?->insuranceCompany?->name ?? '') === $ins->name ? 'selected' : '' }}>
                                {{ $ins->name }} ({{ $ins->code }})
                            </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- SHA member-identity panel for the billing page form. --}}
                    {{-- Mirrors the inline panel in _payment-section.blade.php --}}
                    {{-- so SHA receipts captured from either screen carry the --}}
                    {{-- same fields. --}}
                    <div id="inv-sha-panel" class="mb-3"
                         style="{{ $invShaPreselected ? '' : 'display:none' }};padding:12px 14px;border:1px solid #fcd34d;background:#fffbeb;border-radius:8px">
                        <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
                            <svg style="width:14px;height:14px;color:#92400e" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                            <span style="font-size:11px;font-weight:700;color:#92400e;text-transform:uppercase;letter-spacing:.04em">
                                SHA Member Details (required)
                            </span>
                            @if($invShaCover)
                            <span title="Prefilled from this patient's SHA cover on file. Edit if anything has changed."
                                  style="font-size:9.5px;font-weight:600;color:#15803d;background:#dcfce7;border:1px solid #86efac;padding:1px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.04em">
                                ✓ From file
                            </span>
                            @endif
                        </div>
                        <div class="mb-2">
                            <label style="display:block;font-size:10.5px;font-weight:600;color:#78350f;margin-bottom:3px;text-transform:uppercase;letter-spacing:.3px">SHA Number *</label>
                            <input type="text" name="sha_number" class="crh-input" placeholder="e.g. 1234567890"
                                   value="{{ $invShaCover->member_number ?? '' }}"
                                   style="border:1px solid #fcd34d;background:#fff;font-family:ui-monospace,monospace">
                        </div>
                        <div class="mb-2">
                            <label style="display:block;font-size:10.5px;font-weight:600;color:#78350f;margin-bottom:3px;text-transform:uppercase;letter-spacing:.3px">Member Name *</label>
                            <input type="text" name="sha_member_name" class="crh-input" placeholder="Principal member's full name"
                                   value="{{ $invShaCover->principal_name ?? '' }}"
                                   style="border:1px solid #fcd34d;background:#fff">
                        </div>
                        <div class="mb-2">
                            <label style="display:block;font-size:10.5px;font-weight:600;color:#78350f;margin-bottom:3px;text-transform:uppercase;letter-spacing:.3px">Relationship *</label>
                            <select name="sha_relationship" class="crh-select"
                                    style="border:1px solid #fcd34d;background:#fff">
                                <option value="">— Select —</option>
                                @foreach(['Self','Spouse','Child','Parent','Other'] as $rel)
                                <option value="{{ $rel }}" {{ ($invShaCover->relationship ?? '') === $rel ? 'selected' : '' }}>{{ $rel }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label style="display:block;font-size:10.5px;font-weight:600;color:#78350f;margin-bottom:3px;text-transform:uppercase;letter-spacing:.3px">Auth Reference</label>
                            <input type="text" name="sha_auth_reference" class="crh-input" placeholder="Optional pre-auth ref"
                                   style="border:1px solid #fcd34d;background:#fff;font-family:ui-monospace,monospace">
                        </div>
                    </div>
                    <div class="crh-field">
                        <label class="crh-label">M-Pesa / Ref Code</label>
                        <input type="text" name="mpesa_code" class="crh-input">
                    </div>
                    <button type="submit" class="crh-btn crh-btn--success crh-btn--block">Record Payment</button>
                </form>
            </div>
            @else
            <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-5 mb-6 text-center">
                <p class="text-sm font-semibold text-yellow-800">Payments are recorded by the Cashier.</p>
                <p class="text-xs text-yellow-600 mt-1">Outstanding balance: KES {{ number_format($invFreshBalance) }}</p>
            </div>
            @endif
        @else
        <div class="bg-green-50 border border-green-200 rounded-xl p-6 mb-6 text-center">
            <svg class="w-8 h-8 text-green-500 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <p class="text-sm font-semibold text-green-800">Bill Fully Paid</p>
            <p class="text-xs text-green-600 mt-1">No outstanding balance</p>
        </div>
        @endif

        <div class="bg-white rounded-xl border p-6">
            <h4 class="font-semibold mb-3">Payments</h4>
            @forelse($invoice?->payments ?? [] as $pay)
            <div class="flex justify-between py-2 border-b border-gray-50 text-sm">
                <div>
                    <p class="font-medium capitalize">
                        {{ $pay->description ?? ucfirst($pay->payment_method) }}
                    </p>
                    <p class="text-xs text-gray-400">{{ $pay->created_at->format('d M H:i') }}</p>
                </div>
                <p class="font-semibold text-green-600">KES {{ number_format($pay->amount) }}</p>
            </div>
            @empty
            <p class="text-sm text-gray-400">No payments yet.</p>
            @endforelse
        </div>
    </div>
</div>

@endsection
@section('scripts')
<script>
function toggleInvPaySub(method) {
    document.getElementById('inv-pay-sub-mpesa').style.display = method === 'mpesa' ? '' : 'none';
    document.getElementById('inv-pay-sub-insurance').style.display = method === 'insurance' ? '' : 'none';
    // When moving away from Insurance, the SHA panel must also collapse —
    // its fields are only relevant for SHA, and leaving stale values
    // submitted as hidden inputs would corrupt the payment row.
    const shaPanel = document.getElementById('inv-sha-panel');
    if (shaPanel && method !== 'insurance') {
        shaPanel.style.display = 'none';
    } else if (shaPanel && method === 'insurance') {
        // Re-evaluate against the currently-selected insurer. The SHA
        // name comes from the select's data-sha-name attribute, which
        // is rendered server-side from the InsuranceCompany row, so it
        // always matches what the server expects.
        const insSel = document.querySelector('select[name="insurance_provider"]');
        const shaName = insSel?.getAttribute('data-sha-name') || '';
        // toggleInvShaPanel is the single source of truth for show/hide.
        toggleInvShaPanel(insSel?.value || '', shaName);
    }
}

// Show/hide the SHA member-details panel based on whether the chosen
// insurance company is SHA. We compare by the exact NAME stored in the
// option value because that's what gets POSTed to the server; the server
// then resolves the name back to the InsuranceCompany row and checks its
// code. Identical convention to the shared _payment-section partial.
function toggleInvShaPanel(selectedInsurerName, shaName) {
    const panel = document.getElementById('inv-sha-panel');
    if (!panel) return;
    panel.style.display = selectedInsurerName === shaName ? '' : 'none';
}

document.addEventListener('DOMContentLoaded', () => {
    const sel = document.querySelector('select[name="payment_method"]');
    if (sel) toggleInvPaySub(sel.value);
});

// Inline item editing — save qty/price change via PATCH
function saveItemChange(itemId, qty, price) {
    const row = document.getElementById('item-row-' + itemId);
    const qtyInput  = row.querySelector('input[type="number"]:nth-of-type(1)');
    const priceInput = row.querySelector('input[type="number"]:nth-of-type(2)');
    const currentQty   = qty   !== null ? parseFloat(qty)   : parseFloat(qtyInput?.value   || 0);
    const currentPrice = price !== null ? parseFloat(price) : parseFloat(priceInput?.value || 0);

    const totalEl = document.getElementById('item-total-' + itemId);
    const newTotal = currentQty * currentPrice;
    if (totalEl) totalEl.textContent = 'KES ' + newTotal.toLocaleString('en-KE', {minimumFractionDigits:0,maximumFractionDigits:2});

    fetch('{{ url("billing/item") }}/' + itemId, {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
        },
        body: JSON.stringify({ quantity: currentQty, unit_price: currentPrice })
    })
    .then(r => r.json().catch(() => ({})))
    .then(() => {
        // Recalc grand total from all item totals
        let grand = 0;
        document.querySelectorAll('[id^="item-total-"]').forEach(el => {
            grand += parseFloat(el.textContent.replace(/[^0-9.]/g,'')) || 0;
        });
        const grandEl = document.getElementById('invoice-grand-total');
        if (grandEl) grandEl.textContent = 'KES ' + grand.toLocaleString('en-KE', {minimumFractionDigits:0,maximumFractionDigits:2});
    })
    .catch(() => {});
}
</script>

@endsection