@php
    // Read permissions once so the invoice actions stay easy to follow.
    $canCreateInvoice = \App\Support\AdminAccess::canAction('invoices', 'create');
    $canViewInvoice = \App\Support\AdminAccess::canAction('invoices', 'view');
    $canEditInvoice = \App\Support\AdminAccess::canAction('invoices', 'edit');
    $canDeleteInvoice = \App\Support\AdminAccess::canAction('invoices', 'delete');
@endphp

<div class="container-xxl flex-grow-1 container-p-y">
    <style>
        .invoice-detail-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.45);
            z-index: 1200;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .invoice-detail-modal {
            width: 100%;
            max-width: 920px;
            max-height: 90vh;
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .invoice-detail-header {
            position: relative;
            padding-right: 64px !important;
            flex-shrink: 0;
        }

        .invoice-detail-body {
            padding: 24px;
            overflow-y: auto;
        }

        .invoice-detail-body::-webkit-scrollbar {
            width: 8px;
        }

        .invoice-detail-body::-webkit-scrollbar-thumb {
            background: #cfd8ea;
            border-radius: 999px;
        }

        .invoice-modal-close {
            position: absolute;
            top: 18px;
            right: 18px;
            margin: 0 !important;
        }

        .invoice-info-card {
            background: #f8fafc;
            border: 1px solid #e9eef5;
            border-radius: 14px;
            padding: 16px;
            height: 100%;
        }

        .invoice-summary-row {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 10px;
        }

        .invoice-summary-row.total {
            border-top: 1px solid #dde5ef;
            padding-top: 12px;
            margin-top: 12px;
            font-weight: 700;
        }

        .invoice-page-header {
            gap: 12px;
        }

        .invoice-page-actions {
            min-width: 0;
        }

        .invoice-search-input {
            width: 250px;
            max-width: 100%;
            min-width: 0;
        }

        @media (max-width: 767.98px) {
            .invoice-detail-backdrop {
                padding: 12px;
                align-items: flex-end;
            }

            .invoice-detail-modal {
                max-height: 94vh;
                border-radius: 18px 18px 0 0;
            }

            .invoice-detail-header {
                padding-right: 56px !important;
            }

            .invoice-detail-body {
                padding: 18px;
            }

            .invoice-page-header {
                flex-direction: column;
                align-items: stretch !important;
            }

            .invoice-page-actions {
                width: 100%;
            }

            .invoice-search-input {
                width: 100% !important;
            }

            .invoice-page-actions .btn {
                width: 100%;
            }

        }
    </style>

    <div class="card shadow-sm border-0" style="border-radius: 15px;">
        <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center invoice-page-header" style="border-radius: 15px 15px 0 0;">
            <h5 class="mb-0 fw-bold">
                <i class="fa-solid fa-file-invoice me-2 text-primary"></i> {{ __('Invoice Management') }}
            </h5>
            <div class="d-flex gap-2 invoice-page-actions flex-column flex-md-row align-items-stretch align-items-md-center w-100 w-md-auto">
                <input type="text" wire:model.live="search" class="form-control form-control-sm rounded-pill px-3 invoice-search-input" placeholder="{{ __('Search Invoice # or Customer...') }}">
                @if($canCreateInvoice)
                    <a href="{{ route('admin.pos') }}" class="btn btn-primary btn-sm rounded-pill shadow-sm text-nowrap">
                        <i class="fa-solid fa-plus me-1"></i> {{ __('New Sale') }}
                    </a>
                @endif
            </div>
        </div>

        <div class="table-responsive text-nowrap">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="fw-bold">{{ __('Invoice #') }}</th>
                        <th class="fw-bold">{{ __('Customer') }}</th>
                        <th class="fw-bold">{{ __('Date') }}</th>
                        <th class="fw-bold">{{ __('Total Amount') }}</th>
                        <th class="fw-bold">{{ __('Paid') }}</th>
                        <th class="fw-bold">{{ __('Status') }}</th>
                        <th class="text-center fw-bold">{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($invoices as $invoice)
                    <tr>
                        <td>
                            <span class="fw-bold text-primary">#{{ $invoice->invoice_number }}</span>
                            @if(! empty($invoice->is_exchange))
                                <span class="badge bg-info text-dark ms-1">{{ __('Exchange') }}</span>
                            @elseif(! empty($invoice->exchange_invoice_number))
                                <span class="badge bg-warning text-dark ms-1">{{ __('Exchange Sale') }}</span>
                            @endif
                        </td>
                        <td>{{ $invoice->customer->display_name ?? __('Walking Customer') }}</td>
                        <td>{{ $invoice->created_at->format('d M, Y') }}</td>
                        <td><span class="fw-bold">Rs. {{ number_format($invoice->total, 0) }}</span></td>
                        <td class="text-success fw-bold">Rs. {{ number_format($invoice->paid_amount, 0) }}</td>
                        <td>
                            @php
                                $invoiceDisplayStatus = $this->resolveInvoiceDisplayStatus($invoice);
                            @endphp
                            @if($invoiceDisplayStatus == 'paid')
                                <span class="badge bg-label-success rounded-pill">{{ __('Fully Paid') }}</span>
                            @elseif($invoiceDisplayStatus == 'unpaid')
                                <span class="badge bg-label-danger rounded-pill">{{ __('Unpaid') }}</span>
                            @else
                                <span class="badge rounded-pill" style="background: #fff4db; color: #8a5a00; border: 1px solid #f0d38a;">
                                    {{ __('Partial') }}
                                </span>
                            @endif
                            @if(! empty($invoice->is_exchange))
                                <div class="mt-1"><span class="badge bg-info text-dark">{{ __('Marked as exchanged') }}</span></div>
                            @elseif(! empty($invoice->exchange_invoice_number))
                                <div class="mt-1"><span class="badge bg-warning text-dark">{{ __('Created in exchange') }}</span></div>
                            @endif
                        </td>
                        <td class="text-center">
                            <div class="btn-group">
                                @if($canViewInvoice)
                                    <button class="btn btn-sm btn-icon btn-label-secondary shadow-none border-0 mx-1"
                                            title="{{ __('View Details') }}"
                                            wire:click="openViewModal({{ $invoice->id }})">
                                        <i class="fa-solid fa-eye text-info"></i>
                                    </button>
                                @endif
                                @if($canEditInvoice)
                                    <a href="{{ route('admin.pos', ['invoice' => $invoice->id]) }}"
                                       class="btn btn-sm btn-icon btn-label-secondary shadow-none border-0 mx-1"
                                       title="{{ __('Edit Invoice') }}">
                                        <i class="fa-solid fa-pen-to-square text-warning"></i>
                                    </a>
                                @endif
                                <a href="{{ route('admin.invoices.print', $invoice->id) }}"
                                   target="_blank"
                                   class="btn btn-sm btn-icon btn-label-secondary shadow-none border-0 mx-1"
                                   title="{{ __('Print Invoice') }}">
                                    <i class="fa-solid fa-print text-dark"></i>
                                </a>
                                @if($canDeleteInvoice)
                                    <button class="btn btn-sm btn-icon btn-label-secondary shadow-none border-0 mx-1 text-danger" title="{{ __('Delete') }}">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center py-5">
                            <img src="https://cdn-icons-png.flaticon.com/512/7486/7486744.png" style="width: 80px; opacity: 0.3;">
                            <p class="mt-3 text-muted small">Koi invoice nahi mili.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="card-footer bg-white border-0 py-3">
            {{ $invoices->links() }}
        </div>
    </div>

    @if($showViewModal && $selectedInvoice)
        @php
            $invoicePaidAmount = (float) ($selectedInvoice->paid_amount ?? 0);
            $invoiceChangeAmount = max((float) ($selectedInvoice->change_amount ?? 0), 0);
            $invoiceDueAdjustedAmount = max((float) ($selectedInvoice->due_adjusted_amount ?? 0), 0);
            $invoiceTenderedCash = $invoicePaidAmount + $invoiceChangeAmount + $invoiceDueAdjustedAmount;
            $invoiceRemainingBalance = max((float) $selectedInvoice->total - $invoicePaidAmount, 0);
            $selectedInvoiceStatus = $this->resolveInvoiceDisplayStatus($selectedInvoice);
        @endphp
        <div class="invoice-detail-backdrop">
            <div class="invoice-detail-modal">
                <div class="modal-header border-bottom px-4 py-3 invoice-detail-header">
                    <div>
                        <h4 class="mb-1">{{ __('Invoice Details') }}</h4>
                        <small class="text-muted">{{ __('Complete invoice information in one place.') }}</small>
                    </div>
                    <button type="button" class="btn-close invoice-modal-close" wire:click="closeViewModal"></button>
                </div>

                <div class="invoice-detail-body">
                    <div class="row g-3 mb-4">
                        <div class="col-md-4">
                            <div class="invoice-info-card">
                                <div class="text-muted small mb-1">{{ __('Invoice Number') }}</div>
                                <h5 class="mb-2">
                                    #{{ $selectedInvoice->invoice_number }}
                                    @if(! empty($selectedInvoice->is_exchange))
                                        <span class="badge bg-info text-dark ms-1">{{ __('Exchange') }}</span>
                                    @elseif(! empty($selectedInvoice->exchange_invoice_number))
                                        <span class="badge bg-warning text-dark ms-1">{{ __('Exchange Sale') }}</span>
                                    @endif
                                </h5>
                                <div class="text-muted">{{ __('Date:') }} {{ $selectedInvoice->created_at->format('d M, Y') }}</div>
                                <div class="text-muted">{{ __('Time:') }} {{ $selectedInvoice->created_at->format('h:i A') }}</div>
                                @if(! empty($selectedInvoice->exchange_invoice_number))
                                    <div class="text-muted mt-1">{{ __('Exchange Invoice:') }} #{{ $selectedInvoice->exchange_invoice_number }}</div>
                                @endif
                                @if((float) ($selectedInvoice->exchange_credit_amount ?? 0) > 0)
                                    <div class="text-muted mt-1">{{ __('Exchange Credit:') }} PKR {{ number_format((float) $selectedInvoice->exchange_credit_amount, 2) }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="invoice-info-card">
                                <div class="text-muted small mb-1">{{ __('Customer') }}</div>
                                <h6 class="mb-1">{{ $selectedInvoice->customer->display_name ?? __('Walk-in Customer') }}</h6>
                                <div class="text-muted">{{ $selectedInvoice->customer->phone ?? __('Phone not available') }}</div>
                                <div class="text-muted small mt-1">{{ $selectedInvoice->customer->address ?? __('Address not available') }}</div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="invoice-info-card">
                                <div class="text-muted small mb-1">{{ __('Payment Account') }}</div>
                                <h6 class="mb-1">{{ $selectedInvoice->account->account_name ?? __('No account selected') }}</h6>
                                <div class="text-muted">{{ $selectedInvoice->account->account_type ?? __('N/A') }}</div>
                                <div class="text-muted small mt-1">{{ __('Reference:') }} {{ $selectedInvoice->reference ?: __('N/A') }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive mb-4">
                        <table class="table table-bordered align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>{{ __('Product') }}</th>
                                    <th class="text-center" style="width: 110px;">{{ __('Qty') }}</th>
                                    <th class="text-end" style="width: 150px;">{{ __('Price') }}</th>
                                    <th class="text-end" style="width: 150px;">{{ __('Total') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($selectedInvoice->items as $item)
                                    <tr>
                                        <td>{{ $item->product_name }}</td>
                                        <td class="text-center">{{ number_format($item->qty, 2) }}</td>
                                        <td class="text-end">Rs. {{ number_format($item->price, 2) }}</td>
                                        <td class="text-end">Rs. {{ number_format($item->total, 2) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-4">{{ __('No invoice items found.') }}</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="row g-4">
                        <div class="col-lg-7">
                            <div class="invoice-info-card">
                                <div class="text-muted small mb-2">{{ __('Payment Status') }}</div>
                                @if($selectedInvoiceStatus === 'paid')
                                    <span class="badge bg-label-success rounded-pill">{{ __('Fully Paid') }}</span>
                                @elseif($selectedInvoiceStatus === 'unpaid')
                                    <span class="badge bg-label-danger rounded-pill">{{ __('Unpaid') }}</span>
                                @else
                                    <span class="badge rounded-pill" style="background: #fff4db; color: #8a5a00; border: 1px solid #f0d38a;">
                                        {{ __('Partial Payment') }}
                                    </span>
                                @endif

                                <div class="mt-3 text-muted small">{{ __('This invoice was generated from the POS checkout screen.') }}</div>
                            </div>
                        </div>

                        <div class="col-lg-5">
                            <div class="invoice-info-card">
                                <div class="invoice-summary-row">
                                    <span>{{ __('Sub Total') }}</span>
                                    <strong>Rs. {{ number_format($selectedInvoice->subtotal, 2) }}</strong>
                                </div>
                                <div class="invoice-summary-row">
                                    <span>{{ __('Discount') }}</span>
                                    <strong>Rs. {{ number_format($selectedInvoice->discount, 2) }}</strong>
                                </div>
                                <div class="invoice-summary-row">
                                    <span>{{ __('Other Charges') }}</span>
                                    <strong>Rs. {{ number_format((float) ($selectedInvoice->other_charges_total ?? 0), 2) }}</strong>
                                </div>
                                @foreach($selectedInvoice->charges as $charge)
                                    <div class="invoice-summary-row" style="padding-left: 16px;">
                                        <span>+ {{ $charge->name }}</span>
                                        <strong>Rs. {{ number_format((float) $charge->amount, 2) }}</strong>
                                    </div>
                                @endforeach
                                <div class="invoice-summary-row">
                                    <span>{{ __('Paid Amount') }}</span>
                                    <strong>Rs. {{ number_format($invoiceTenderedCash, 2) }}</strong>
                                </div>
                                @if($invoiceDueAdjustedAmount > 0)
                                    <div class="invoice-summary-row">
                                        <span>{{ __('Due Adjustment') }}</span>
                                        <strong class="text-dark">Rs. {{ number_format($invoiceDueAdjustedAmount, 2) }}</strong>
                                    </div>
                                @endif
                                @if($invoiceChangeAmount > 0)
                                    <div class="invoice-summary-row">
                                        <span>{{ __('Change') }}</span>
                                        <strong class="text-danger">Rs. {{ number_format($invoiceChangeAmount, 2) }}</strong>
                                    </div>
                                @endif
                                <div class="invoice-summary-row">
                                    <span>{{ __('Due') }}</span>
                                    <strong class="text-danger">Rs. {{ number_format($invoiceRemainingBalance, 2) }}</strong>
                                </div>
                                <div class="invoice-summary-row total">
                                    <span>{{ __('Grand Total') }}</span>
                                    <strong>Rs. {{ number_format($selectedInvoice->total, 2) }}</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer border-top px-4 py-3">
                    <button type="button" class="btn btn-light border" wire:click="closeViewModal">{{ __('Close') }}</button>
                    <a href="{{ route('admin.invoices.print', $selectedInvoice->id) }}"
                       target="_blank"
                       class="btn btn-primary">
                        <i class="fa-solid fa-print me-1"></i> {{ __('Print Invoice') }}
                    </a>
                </div>
            </div>
        </div>
    @endif

</div>