{{-- ═══ ANC BILLING — mirrors the OPD encounter's Products/Services table + Payments.
     Plus an ANC-specific "Package Status" banner at the top for package patients.

     Expects:
       $registration  AncRegistration
       $backingVisit  Visit (has invoice with items/payments loaded)
       $coverage      array from AncPackage::coverage()
       $invoice       shortcut = $backingVisit->invoice

     Element IDs (billingItems, billingTable, grandTotal, bill-row-*,
     bill-total-*) are deliberately the same as the OPD view so the shared
     OPD billing JS (addBillingRow, updateBillItem, selectService) binds.
--}}
@php
    $user = auth()->user();
    $canEditBilling = $user && ($user->hasRole('Super Admin') || $user->hasRole('Hospital Admin') || $user->hasRole('Receptionist') || $user->hasRole('Clinician') || $user->hasRole('Nurse'));
    $visit    = $backingVisit;
    $hasPkg   = ($coverage['mode'] ?? 'per_visit') === 'package';
    $pkg      = $coverage['package'] ?? null;
@endphp

{{-- ═══ PACKAGE STATUS (only for package patients) ═══
     Round 10 single-invoice model. The package line lives on the visit
     invoice below; this panel is a status banner only. There is no
     Pay Package form here — payments flow through the standard
     Payments panel at the bottom (same as every other module).
--}}
@if($hasPkg && $pkg)
<div class="enc-section">
    <div class="enc-section-head">
        <h3>Package Status</h3>
        <div class="enc-head-actions">
            @if($coverage['fully_paid'])
                <span class="enc-status-pill pill-done">Fully paid</span>
            @else
                <span class="enc-status-pill" style="background:#fef3c7;color:#92400e">Balance owed</span>
                {{-- Round 12: package balance lives on the original         --}}
                {{-- "package invoice" (the one carrying the anc_package    --}}
                {{-- line). We open a modal that submits a payment against  --}}
                {{-- THAT invoice's id, not the current visit's invoice,    --}}
                {{-- so the package debt actually decreases. Only show when --}}
                {{-- there's a balance owed AND a package invoice exists    --}}
                {{-- (defensive — shouldn't be possible to have a balance   --}}
                {{-- without an invoice, but UI shouldn't crash if it is).  --}}
                @if(($packageInvoice ?? null) && $canEditBilling)
                    <button type="button"
                            onclick="openCollectPackageModal()"
                            class="enc-btn-success"
                            style="padding:6px 14px;font-size:12px;font-weight:600">
                        Collect Package Payment
                    </button>
                @endif
            @endif
        </div>
    </div>
    <div class="enc-section-body">
        <div style="display:flex;justify-content:space-between;align-items:start;gap:10px;flex-wrap:wrap">
            <div style="flex:1;min-width:260px">
                <p style="font-size:13px;margin:0;font-weight:600;color:#3b1054">{{ $pkg['label'] }}</p>
                <p style="font-size:11.5px;color:#6b7280;margin:3px 0">{{ $pkg['description'] }}</p>
                <p style="font-size:12.5px;margin:6px 0 0">
                    Paid <strong>KES {{ number_format($coverage['paid']) }}</strong>
                    of {{ number_format($pkg['price']) }}
                    @if($coverage['balance'] > 0)
                        &nbsp;·&nbsp; Balance: <strong style="color:#dc2626">KES {{ number_format($coverage['balance']) }}</strong>
                    @endif
                </p>
                <p style="font-size:11.5px;margin:4px 0 0;color:#4b5563">
                    Consultations: <strong>{{ $coverage['consultations_used'] }} of {{ $coverage['consultations_quota'] }}</strong>
                    @if(($coverage['full_profile_quota'] ?? 0) > 0)
                        &nbsp;·&nbsp; Full ANC Profile:
                        <strong>{{ $coverage['full_profile_used'] >= $coverage['full_profile_quota'] ? 'used' : 'available' }}</strong>
                    @endif
                    @if(($coverage['ultrasounds_quota'] ?? 0) > 0)
                        &nbsp;·&nbsp; Ultrasounds: <strong>{{ $coverage['ultrasounds_used'] }} of {{ $coverage['ultrasounds_quota'] }}</strong>
                    @endif
                </p>
                @if($coverage['balance'] > 0)
                    <p style="font-size:11.5px;margin:6px 0 0;color:#92400e">
                        Each visit must collect at least 50% of the current package balance before close.
                        Use the <strong>Collect Package Payment</strong> button above — payments allocate to the
                        package's original invoice, not to this visit.
                    </p>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- ─── Collect Package Payment Modal (round 12) ──────────────────── --}}
{{-- Renders only when there's an unpaid balance + a package invoice.   --}}
{{-- Submits to the standard billing.payment route with the PACKAGE     --}}
{{-- INVOICE'S id, not the current visit's invoice — that's the whole   --}}
{{-- point: payment lands where the debt is, not where the form lives.  --}}
@if(($packageInvoice ?? null) && $coverage['balance'] > 0 && $canEditBilling)
<div id="collectPackageOverlay" class="hidden"
     style="position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000"
     onclick="closeCollectPackageModal()"></div>
<div id="collectPackageModal" class="hidden"
     style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;
            border-radius:12px;padding:0;width:480px;max-width:92vw;z-index:1001;
            box-shadow:0 20px 50px rgba(0,0,0,.25)">
    <div style="padding:14px 18px;border-bottom:1px solid #e6d0f3;background:linear-gradient(180deg,#faf5fc,#f3e8f9);border-radius:12px 12px 0 0;display:flex;justify-content:space-between;align-items:center">
        <div>
            <h3 style="margin:0;font-size:15px;font-weight:700;color:#3b1054">Collect Package Payment</h3>
            <p style="margin:3px 0 0;font-size:11.5px;color:#6b7280">
                Allocates to invoice <strong>{{ $packageInvoice->invoice_number }}</strong>
                ({{ $pkg['label'] }})
            </p>
        </div>
        <button type="button" onclick="closeCollectPackageModal()"
                style="font-size:22px;color:#6b7280;background:none;border:none;cursor:pointer;line-height:1">&times;</button>
    </div>

    <form method="POST" action="{{ route('billing.payment') }}" style="padding:18px">
        @csrf
        <input type="hidden" name="invoice_id" value="{{ $packageInvoice->id }}">

        <div style="background:#fef3c7;border:1px solid #fde68a;border-radius:8px;padding:10px 12px;margin-bottom:14px">
            <p style="margin:0;font-size:12px;color:#92400e">
                Outstanding: <strong>KES {{ number_format($coverage['balance']) }}</strong> ·
                50% minimum before close: <strong>KES {{ number_format($coverage['balance'] * 0.5) }}</strong>
            </p>
        </div>

        <div style="display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end">
            <div>
                <label style="display:block;font-size:10.5px;font-weight:600;color:#5c1269;margin-bottom:3px;text-transform:uppercase;letter-spacing:.3px">Method</label>
                <select name="payment_method" required
                        style="width:140px;padding:7px 10px;border:1px solid #d4a9e8;border-radius:6px;font-size:12.5px;background:#fff"
                        onchange="togglePkgPaySub(this.value)">
                    <option value="cash">Cash</option>
                    <option value="mpesa">M-Pesa</option>
                    <option value="card">Card</option>
                    <option value="bank_transfer">Bank</option>
                </select>
                <div id="pkg-pay-sub-mpesa" style="display:none;margin-top:5px">
                    <select name="mpesa_channel" style="width:140px;padding:7px 10px;border:1px solid #d4a9e8;border-radius:6px;font-size:12.5px;background:#fff">
                        <option value="kcb">KCB Paybill</option>
                        <option value="bingwa_sacco">Bingwa Sacco</option>
                    </select>
                </div>
            </div>
            <div>
                <label style="display:block;font-size:10.5px;font-weight:600;color:#5c1269;margin-bottom:3px;text-transform:uppercase;letter-spacing:.3px">Amount (KES)</label>
                <input type="number" name="amount" step="0.01" min="1" required
                       value="{{ $coverage['balance'] }}"
                       style="width:120px;padding:7px 10px;border:1px solid #d4a9e8;border-radius:6px;font-size:12.5px;background:#fff;text-align:right;font-weight:700">
            </div>
            <div style="flex:1;min-width:160px">
                <label style="display:block;font-size:10.5px;font-weight:600;color:#5c1269;margin-bottom:3px;text-transform:uppercase;letter-spacing:.3px">Reference / M-Pesa Code</label>
                <input type="text" name="mpesa_code" placeholder="Ref / M-Pesa code"
                       style="width:100%;padding:7px 10px;border:1px solid #d4a9e8;border-radius:6px;font-size:12.5px;background:#fff">
            </div>
        </div>

        <div style="display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid #f3e8f9">
            <button type="button" onclick="closeCollectPackageModal()"
                    style="padding:8px 14px;font-size:12px;font-weight:600;color:#6b7280;background:#fff;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer">Cancel</button>
            <button type="submit" class="enc-btn-success" style="padding:8px 22px;font-weight:700">Record Payment</button>
        </div>
    </form>
</div>

<script>
function openCollectPackageModal() {
    document.getElementById('collectPackageOverlay').classList.remove('hidden');
    document.getElementById('collectPackageModal').classList.remove('hidden');
}
function closeCollectPackageModal() {
    document.getElementById('collectPackageOverlay').classList.add('hidden');
    document.getElementById('collectPackageModal').classList.add('hidden');
}
function togglePkgPaySub(method) {
    var mpesa = document.getElementById('pkg-pay-sub-mpesa');
    if (mpesa) mpesa.style.display = method === 'mpesa' ? 'block' : 'none';
}
</script>
@endif
@endif

{{-- ═══ PRODUCTS / SERVICES (visit extras) ═══ --}}
<div class="enc-section">
    <div class="enc-section-head">
        <h3>Products / Services</h3>
        <div class="enc-head-actions">
            @if($canEditBilling)<button type="button" onclick="addBillingRow()" class="enc-btn-teal">+ Add Row</button>@endif
        </div>
    </div>
    <div class="enc-section-body" style="padding:0">
        <table class="enc-table" id="billingTable">
            <thead>
                <tr>
                    <th class="enc-th-left" style="min-width:200px">Product or Service</th>
                    <th class="enc-th-left">Instructions</th>
                    <th style="width:70px">Existing Qty</th>
                    <th style="width:60px">Qty</th>
                    <th style="width:100px">Unit Selling Price</th>
                    <th style="width:100px">Total</th>
                    @if($canEditBilling)<th style="width:50px">Delete</th>@endif
                </tr>
            </thead>
            <tbody id="billingItems">
                @if($visit->invoice && $visit->invoice?->items->count())
                    @foreach($visit->invoice?->items as $item)
                    @php
                        // Pharmacy items are managed from the Prescriptions section (same as OPD).
                        // anc_consultation, anc_package, anc_package_carry, anc_full_profile,
                        // anc_ultrasound lines are system-owned — never editable here.
                        $systemOwned = in_array($item->source_type, [
                            'prescription',
                            'anc_consultation',
                            'anc_package',
                            'anc_package_carry',
                            'anc_full_profile',
                            'anc_ultrasound',
                        ], true);
                        $isEditable = $canEditBilling && ! $systemOwned;
                        $isCovered  = (float) $item->total === 0.0 && str_contains(strtolower($item->description), 'covered');
                    @endphp
                    <tr class="existing-row" id="bill-row-{{ $item->id }}">
                        <td class="enc-td-left">
                            {{ $item->description }}
                            @if($isCovered)
                                <span style="display:inline-block;margin-left:6px;background:#dcfce7;color:#166534;font-size:10px;padding:1px 6px;border-radius:4px;font-weight:600">PACKAGE</span>
                            @endif
                        </td>
                        <td class="enc-td-left" style="color:#6b7280">{{ $item->notes ?? '—' }}</td>
                        <td style="color:#9ca3af">—</td>
                        <td>
                            @if($isEditable)
                                <input type="number" class="bill-qty-input" min="1" step="1"
                                    value="{{ $item->quantity }}" data-item-id="{{ $item->id }}" data-field="quantity"
                                    onchange="updateBillItem({{ $item->id }}, this)">
                            @else
                                {{ $item->quantity }}
                            @endif
                        </td>
                        <td class="enc-td-right">
                            @if($isEditable)
                                <input type="number" class="bill-price-input" min="0" step="0.01"
                                    value="{{ $item->unit_price }}" data-item-id="{{ $item->id }}" data-field="unit_price"
                                    onchange="updateBillItem({{ $item->id }}, this)">
                            @else
                                {{ number_format($item->unit_price) }}
                            @endif
                        </td>
                        <td class="enc-td-right" id="bill-total-{{ $item->id }}" style="font-weight:700">{{ number_format($item->total) }}</td>
                        @if($canEditBilling)
                        <td>
                            @if($item->source_type === 'prescription')
                                <span title="Pharmacy item — edit from Prescriptions section" style="color:#d1d5db;font-size:11px">🔒</span>
                            @elseif($systemOwned)
                                <span title="System-managed line — change package or visit type instead of editing this directly" style="color:#d1d5db;font-size:11px">🔒</span>
                            @else
                                <form method="POST" action="{{ route('billing.item.void', $item) }}" onsubmit="return confirm('Remove {{ addslashes($item->description) }} (KES {{ number_format($item->total) }}) from this invoice?');" class="inline">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="enc-del-btn" title="Void 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>
                        @endif
                    </tr>
                    @endforeach
                @endif
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="{{ $canEditBilling ? 5 : 4 }}" style="text-align:right;font-weight:700">Total</td>
                    <td class="enc-td-right" id="grandTotal" style="font-weight:700">{{ number_format($visit->invoice?->total_amount ?? 0) }}</td>
                    @if($canEditBilling)<td></td>@endif
                </tr>
            </tfoot>
        </table>
    </div>
</div>

{{-- ═══ PAYMENTS (shared partial, same as OPD / Dental / IPD) ═══ --}}
<div class="enc-section">
    <div class="enc-section-head">
        <h3>Payments</h3>
    </div>
    <div class="enc-section-body">
        @include('partials._payment-section', ['visit' => $visit])
    </div>
</div>