@extends('layouts.app')

@section('title', 'Invoice #' . $invoice->invoice_number)

@section('content')
<div class="max-w-5xl mx-auto space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center space-x-3">
                <h1 class="text-2xl font-bold text-slate-800">Invoice #{{ $invoice->invoice_number }}</h1>
                <span class="px-2.5 py-1 rounded-full text-xs font-bold uppercase {{ match($invoice->payment_status) {
                    'paid' => 'bg-emerald-100 text-emerald-800',
                    'partially_paid' => 'bg-amber-100 text-amber-800',
                    default => 'bg-rose-100 text-rose-800'
                } }}">
                    {{ str_replace('_', ' ', $invoice->payment_status) }}
                </span>
            </div>
            <p class="text-sm text-slate-500 mt-1">Generated on {{ $invoice->invoice_date->format('d M Y, h:i A') }} • Billing Category: {{ strtoupper($invoice->billing_type) }}</p>
        </div>

        <div class="flex items-center space-x-3">
            <a href="{{ route('billing.print', $invoice->id) }}" target="_blank" class="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white rounded-lg text-xs font-bold shadow-xs flex items-center">
                <i class="fa-solid fa-print mr-2"></i> Print Invoice
            </a>
            <a href="{{ route('billing.index') }}" class="px-3.5 py-2 bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 rounded-lg text-xs font-semibold shadow-xs">
                Back to Invoices
            </a>
        </div>
    </div>

    <!-- Patient Banner -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div class="flex items-center space-x-4">
            <div class="w-12 h-12 rounded-full bg-hospital-600 text-white font-bold text-lg flex items-center justify-center">
                {{ substr($invoice->patient->first_name, 0, 1) }}{{ substr($invoice->patient->last_name, 0, 1) }}
            </div>
            <div>
                <div class="flex items-center space-x-2">
                    <h2 class="text-base font-bold text-slate-900">{{ $invoice->patient->full_name }}</h2>
                    <span class="text-xs px-2 py-0.5 rounded bg-hospital-100 text-hospital-800 font-mono font-semibold">{{ $invoice->patient->patient_id }}</span>
                    <span class="text-xs px-2 py-0.5 rounded bg-slate-100 text-slate-700 font-semibold">UHID: {{ $invoice->patient->uhid }}</span>
                </div>
                <div class="text-xs text-slate-500 mt-0.5">
                    {{ $invoice->patient->age_formatted }} • {{ ucfirst($invoice->patient->gender) }} • Mobile: {{ $invoice->patient->mobile }}
                </div>
            </div>
        </div>

        <div>
            {!! $barcodeSvg !!}
        </div>
    </div>

    <!-- Invoice Items Table -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="bg-slate-50 px-5 py-3 border-b border-slate-200 font-bold text-xs uppercase tracking-wider text-slate-700">
            Itemized Services & Charges
        </div>

        <table class="w-full text-left text-xs">
            <thead class="bg-slate-100 text-slate-600 uppercase font-semibold border-b border-slate-200">
                <tr>
                    <th class="px-4 py-3">#</th>
                    <th class="px-4 py-3">Item Description</th>
                    <th class="px-4 py-3">Category</th>
                    <th class="px-4 py-3 text-center">Qty</th>
                    <th class="px-4 py-3 text-right">Unit Rate (₹)</th>
                    <th class="px-4 py-3 text-right">Tax (₹)</th>
                    <th class="px-4 py-3 text-right">Line Total (₹)</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @foreach($invoice->items as $idx => $item)
                    <tr class="hover:bg-slate-50/70">
                        <td class="px-4 py-3 text-slate-400">{{ $idx + 1 }}</td>
                        <td class="px-4 py-3 font-bold text-slate-900">{{ $item->item_name }}</td>
                        <td class="px-4 py-3">
                            <span class="px-2 py-0.5 rounded bg-slate-100 text-slate-700 text-[10px] uppercase font-semibold">
                                {{ $item->item_category }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-center font-bold">{{ $item->quantity }}</td>
                        <td class="px-4 py-3 text-right font-mono">₹{{ number_format($item->unit_price, 2) }}</td>
                        <td class="px-4 py-3 text-right font-mono text-slate-500">₹{{ number_format($item->tax_amount, 2) }}</td>
                        <td class="px-4 py-3 text-right font-mono font-bold text-slate-900">₹{{ number_format($item->total_amount, 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <!-- Totals Strip -->
        <div class="p-5 bg-slate-50 border-t border-slate-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div class="text-xs text-slate-500 max-w-sm">
                @if($invoice->notes)
                    <strong>Notes:</strong> {{ $invoice->notes }}
                @endif
            </div>

            <div class="w-full md:w-80 space-y-2 text-xs">
                <div class="flex justify-between text-slate-600">
                    <span>Subtotal:</span>
                    <span class="font-mono font-bold text-slate-900">₹{{ number_format($invoice->subtotal_amount, 2) }}</span>
                </div>
                @if($invoice->discount_amount > 0)
                <div class="flex justify-between text-emerald-600">
                    <span>Discount:</span>
                    <span class="font-mono font-bold">-₹{{ number_format($invoice->discount_amount, 2) }}</span>
                </div>
                @endif
                <div class="flex justify-between text-slate-600">
                    <span>Tax / GST:</span>
                    <span class="font-mono text-slate-800">₹{{ number_format($invoice->tax_amount, 2) }}</span>
                </div>
                <div class="border-t border-slate-200 pt-2 flex justify-between text-sm font-bold text-slate-900">
                    <span>Grand Total:</span>
                    <span class="font-mono text-lg font-black text-hospital-700">₹{{ number_format($invoice->grand_total, 2) }}</span>
                </div>
                <div class="flex justify-between text-xs text-emerald-700 font-semibold">
                    <span>Total Paid:</span>
                    <span class="font-mono">₹{{ number_format($invoice->paid_amount, 2) }}</span>
                </div>
                <div class="border-t border-slate-300 pt-2 flex justify-between text-sm font-black {{ $invoice->balance_due > 0 ? 'text-rose-600' : 'text-slate-500' }}">
                    <span>Balance Due:</span>
                    <span class="font-mono text-lg">₹{{ number_format($invoice->balance_due, 2) }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Payments Ledger & Collect Payment Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Collect Payment Form (if balance due > 0) -->
        @if($invoice->balance_due > 0)
            <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5 space-y-4">
                <div class="font-bold text-sm text-slate-800 flex items-center justify-between border-b border-slate-100 pb-3">
                    <span class="flex items-center">
                        <i class="fa-solid fa-hand-holding-dollar text-emerald-600 mr-2"></i> Collect Payment
                    </span>
                    <span class="text-xs text-rose-600 font-mono font-bold">Due: ₹{{ number_format($invoice->balance_due, 2) }}</span>
                </div>

                <form action="{{ route('billing.record-payment', $invoice->id) }}" method="POST" class="space-y-4">
                    @csrf

                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-1">Amount to Pay (₹) <span class="text-rose-500">*</span></label>
                        <input type="number" step="0.01" name="amount" min="0.01" max="{{ $invoice->balance_due }}" value="{{ $invoice->balance_due }}" required class="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded text-sm font-mono font-bold">
                    </div>

                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-1">Payment Method <span class="text-rose-500">*</span></label>
                        <select name="payment_method" required class="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded text-xs font-semibold">
                            <option value="cash">💵 Cash</option>
                            <option value="upi">📱 UPI / QR Code</option>
                            <option value="card">💳 Credit / Debit Card</option>
                            <option value="net_banking">🌐 Net Banking</option>
                            <option value="cheque">🏦 Bank Cheque</option>
                            <option value="swasthya_sathi">🏛️ Swasthya Sathi</option>
                            <option value="ayushman_bharat">🇮🇳 Ayushman Bharat (PM-JAY)</option>
                            <option value="insurance">📑 Private TPA Insurance</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-1">Transaction Ref / Cheque No / Claim ID</label>
                        <input type="text" name="transaction_reference" placeholder="e.g., UTR / Authorization Number..." class="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded text-xs">
                    </div>

                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-1">Cashier Remarks</label>
                        <input type="text" name="remarks" placeholder="Optional notes..." class="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded text-xs">
                    </div>

                    <button type="submit" class="w-full py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-xs font-bold shadow-xs flex items-center justify-center">
                        <i class="fa-solid fa-receipt mr-1.5"></i> Record Payment & Issue Receipt
                    </button>
                </form>
            </div>
        @else
            <div class="bg-emerald-50 border border-emerald-200 rounded-xl p-6 text-center flex flex-col items-center justify-center">
                <i class="fa-solid fa-circle-check text-4xl text-emerald-500 mb-2"></i>
                <h3 class="text-base font-bold text-emerald-900">Invoice Fully Settled</h3>
                <p class="text-xs text-emerald-700 mt-1">Zero balance remaining. All dues have been collected.</p>
            </div>
        @endif

        <!-- Payment History Ledger -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5">
            <div class="font-bold text-sm text-slate-800 mb-3 flex items-center justify-between border-b border-slate-100 pb-3">
                <span class="flex items-center">
                    <i class="fa-solid fa-clock-rotate-left text-hospital-600 mr-2"></i> Payment Receipts Ledger
                </span>
                <span class="text-xs text-slate-400 font-mono">{{ $invoice->payments->count() }} receipts</span>
            </div>

            <div class="divide-y divide-slate-100 text-xs">
                @forelse($invoice->payments as $pay)
                    <div class="py-3 flex items-center justify-between">
                        <div>
                            <div class="font-mono font-bold text-slate-900">{{ $pay->payment_number }}</div>
                            <div class="text-[10px] text-slate-500 mt-0.5">
                                {{ $pay->payment_date->format('d/m/Y h:i A') }} • Mode: <span class="uppercase font-semibold">{{ $pay->payment_method }}</span>
                            </div>
                            @if($pay->transaction_reference)
                                <div class="text-[10px] text-slate-400 font-mono">Ref: {{ $pay->transaction_reference }}</div>
                            @endif
                        </div>
                        <div class="text-right">
                            <div class="font-mono font-bold text-emerald-600 text-sm">₹{{ number_format($pay->amount, 2) }}</div>
                            <span class="text-[10px] text-slate-400">Cashier: {{ $pay->cashier->name ?? 'Staff' }}</span>
                        </div>
                    </div>
                @empty
                    <div class="py-6 text-center text-slate-400 text-xs">No payments recorded against this invoice yet.</div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection