@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <style>
        .purchase-invoices-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .purchase-invoices-page .ui-card__header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

        .invoice-stats {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .invoice-stat {
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #fff;
            padding: 1rem;
        }

        .invoice-stat span {
            display: block;
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 850;
            text-transform: uppercase;
            margin-bottom: 0.35rem;
        }

        .invoice-stat strong {
            color: #111827;
            font-size: 1.25rem;
            font-weight: 950;
        }

        .purchase-invoices-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .purchase-invoices-page table {
            min-width: 1180px;
            width: 100%;
            vertical-align: middle;
        }

        .purchase-invoices-page table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.035em;
            border-bottom: 1px solid #e5e7eb;
            white-space: nowrap;
        }

        .purchase-invoices-page table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 650;
            border-color: #eef2f7;
            vertical-align: middle;
            white-space: nowrap;
        }

        .purchase-invoices-page table tbody tr:hover {
            background: #f8fafc;
        }

        .invoice-number-link,
        .purchase-number-link {
            color: #111827;
            font-weight: 900;
            text-decoration: none;
        }

        .invoice-number-link:hover,
        .purchase-number-link:hover {
            color: #2563eb;
            text-decoration: underline;
        }

        .invoice-muted {
            color: #94a3b8;
            font-size: 0.76rem;
            font-weight: 700;
            margin-top: 0.1rem;
        }

        .money-cell {
            font-weight: 950;
            font-variant-numeric: tabular-nums;
        }

        .money-cell--paid { color: #047857; }
        .money-cell--remain { color: #dc2626; }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 0.36rem 0.72rem;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--success { background: #f0fdf4; color: #166534; }
        .ui-pill--warn { background: #fffbeb; color: #92400e; }
        .ui-pill--danger { background: #fef2f2; color: #b91c1c; }
        .ui-pill--neutral { background: #f3f4f6; color: #374151; }

        .table-empty-state {
            padding: 3rem 1rem;
            text-align: center;
            color: #94a3b8;
            background: #fff;
        }

        .table-empty-state i {
            display: block;
            font-size: 2.3rem;
            color: #cbd5e1;
            margin-bottom: 0.75rem;
        }

        .table-empty-state h6 {
            margin: 0;
            color: #475569;
            font-weight: 850;
        }

        .table-pagination {
            padding: 1rem 1.25rem;
            border-top: 1px solid #eef2f7;
            background: #fff;
        }

        .invoice-order-preview {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: #f8fafc;
            padding: 1rem;
        }

        .invoice-order-preview__row {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.55rem 0;
            border-bottom: 1px solid #e5e7eb;
            color: #334155;
            font-weight: 750;
        }

        .invoice-order-preview__row:last-child {
            border-bottom: 0;
        }

        @media (max-width: 991.98px) {
            .invoice-stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 575.98px) {
            .invoice-stats {
                grid-template-columns: 1fr;
            }
        }
    </style>

    <div class="container-fluid app-bg purchase-invoices-page">
        <div class="page-shell">
            <div class="space-y-4">
                <x-page-title
                    title="Purchase Invoices"
                    description="Track vendor bills, payment progress, linked purchase orders, and remaining balances.">
                    <div class="d-flex gap-2 flex-wrap">
                        <button type="button" class="btn btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#createPurchaseInvoiceModal">
                            Add Invoice
                        </button>
                        <a href="{{ route('invoices.index') }}" class="btn btn-outline-primary rounded-pill">All Invoices</a>
                        <a href="{{ route('purchase.orders.index') }}" class="btn btn-outline-secondary rounded-pill">Back to Orders</a>
                    </div>
                </x-page-title>

                <div class="invoice-stats">
                    <div class="invoice-stat">
                        <span>Invoices</span>
                        <strong>{{ number_format((float) $summary['count'], 0) }}</strong>
                    </div>
                    <div class="invoice-stat">
                        <span>Total</span>
                        <strong>{{ number_format((float) $summary['total'], 2) }}</strong>
                    </div>
                    <div class="invoice-stat">
                        <span>Paid</span>
                        <strong>{{ number_format((float) $summary['paid'], 2) }}</strong>
                    </div>
                    <div class="invoice-stat">
                        <span>Remaining</span>
                        <strong>{{ number_format((float) $summary['remaining'], 2) }}</strong>
                    </div>
                </div>

                <div class="ui-card">
                    <div class="ui-card__header">
                        <form action="{{ route('purchase.invoice.index') }}" method="GET" class="d-flex align-items-end gap-3 flex-wrap">
                            <div>
                                <label for="search" class="form-label mb-1">Search</label>
                                <input type="text" name="search" id="search" class="form-control" value="{{ request('search') }}" placeholder="Invoice, order, vendor...">
                            </div>

                            <div>
                                <label for="status" class="form-label mb-1">Status</label>
                                <select name="status" id="status" class="form-select">
                                    <option value="">All statuses</option>
                                    <option value="unpaid" @selected(request('status') === 'unpaid')>Unpaid</option>
                                    <option value="partial" @selected(request('status') === 'partial')>Partial</option>
                                    <option value="paid" @selected(request('status') === 'paid')>Paid</option>
                                    <option value="cancelled" @selected(request('status') === 'cancelled')>Cancelled</option>
                                </select>
                            </div>

                            <div>
                                <label for="per_page" class="form-label mb-1">Rows</label>
                                <select name="per_page" id="per_page" class="form-select">
                                    @foreach([10, 25, 50, 100] as $size)
                                        <option value="{{ $size }}" @selected((int) request('per_page', 10) === $size)>{{ $size }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <button type="submit" class="btn btn-primary rounded-pill">Filter</button>
                            <a href="{{ route('purchase.invoice.index') }}" class="btn btn-outline-secondary rounded-pill">Clear</a>
                        </form>
                    </div>

                    <div class="purchase-invoices-table-wrap">
                        <x-table :headers="['#', 'Invoice', 'Purchase Order', 'Vendor', 'Dates', 'Status', 'Total', 'Paid', 'Remaining', 'Actions']">
                            @forelse($invoices as $invoice)
                                @php
                                    $statusClass = match ($invoice->status) {
                                        'paid' => 'ui-pill--success',
                                        'partial' => 'ui-pill--warn',
                                        'cancelled' => 'ui-pill--danger',
                                        default => 'ui-pill--neutral',
                                    };
                                @endphp

                                <tr>
                                    <td class="text-center">
                                        {{ method_exists($invoices, 'firstItem') ? $invoices->firstItem() + $loop->index : $loop->iteration }}
                                    </td>
                                    <td>
                                        <a href="{{ route('purchase.invoice.show', $invoice->id) }}" class="invoice-number-link">
                                            {{ $invoice->invoice_number }}
                                        </a>
                                        <div class="invoice-muted">
                                            Vendor ref: {{ $invoice->vendor_invoice_number ?: '--' }}
                                        </div>
                                    </td>
                                    <td>
                                        @if($invoice->purchase)
                                            <a href="{{ route('purchase.show', $invoice->purchase->id) }}" class="purchase-number-link">
                                                {{ $invoice->purchase->purchase_number }}
                                            </a>
                                            <div class="invoice-muted">{{ $invoice->purchase->name ?: '--' }}</div>
                                        @else
                                            --
                                        @endif
                                    </td>
                                    <td>{{ $invoice->vendor?->name ?? '--' }}</td>
                                    <td>
                                        <div>Invoice: {{ optional($invoice->invoice_date)->format('M d, Y') ?: '--' }}</div>
                                        <div class="invoice-muted">Due: {{ optional($invoice->due_date)->format('M d, Y') ?: '--' }}</div>
                                    </td>
                                    <td class="text-center">
                                        <span class="ui-pill {{ $statusClass }}">{{ ucwords(str_replace('_', ' ', $invoice->status)) }}</span>
                                    </td>
                                    <td class="text-center"><span class="money-cell">{{ number_format((float) $invoice->total, 2) }}</span></td>
                                    <td class="text-center"><span class="money-cell money-cell--paid">{{ number_format((float) $invoice->paid_amount, 2) }}</span></td>
                                    <td class="text-center"><span class="money-cell money-cell--remain">{{ number_format((float) $invoice->remaining_amount, 2) }}</span></td>
                                    <td class="text-center">
                                        <x-table-action type="view" :url="route('purchase.invoice.show', $invoice->id)" />
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="10">
                                        <div class="table-empty-state">
                                            <i class="fas fa-file-invoice-dollar"></i>
                                            <h6>No purchase invoices found.</h6>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </x-table>
                    </div>

                    @if($invoices->hasPages())
                        <div class="table-pagination">
                            {{ $invoices->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="createPurchaseInvoiceModal" tabindex="-1" aria-labelledby="createPurchaseInvoiceLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('invoices.store') }}" method="POST" id="createPurchaseInvoiceForm">
                    @csrf

                    <div class="modal-header">
                        <div>
                            <h5 class="modal-title fw-bold" id="createPurchaseInvoiceLabel">Create Purchase Invoice</h5>
                            <div class="text-muted small">Choose an uninvoiced Purchase Order.</div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        @if($errors->has('purchase_id') || $errors->has('invoice_date') || $errors->has('due_date') || $errors->has('vendor_invoice_number') || $errors->has('cost_center_id') || $errors->has('status') || $errors->has('purchase') || $errors->has('posting_account'))
                            <div class="alert alert-danger">
                                {{ $errors->first('purchase_id') ?: $errors->first('invoice_date') ?: $errors->first('due_date') ?: $errors->first('vendor_invoice_number') ?: $errors->first('cost_center_id') ?: $errors->first('status') ?: $errors->first('purchase') ?: $errors->first('posting_account') }}
                            </div>
                        @endif

                        <div class="row g-3">
                            <div class="col-md-12">
                                <label for="purchase_invoice_order_id" class="form-label">Purchase Order <span class="text-danger">*</span></label>
                                <select name="purchase_id" id="purchase_invoice_order_id" class="form-select @error('purchase_id') is-invalid @enderror" required>
                                    <option value="">Choose purchase order</option>
                                    @foreach($invoiceOrders as $order)
                                        @php
                                            $partyName = $order->name ?: $order->vendors->pluck('name')->filter()->join(', ');
                                        @endphp
                                        <option
                                            value="{{ $order->id }}"
                                            data-type="Purchase Order"
                                            data-number="{{ $order->purchase_number }}"
                                            data-party="{{ $partyName ?: '--' }}"
                                            data-total="{{ number_format((float) $order->total, 2) }}"
                                            data-subtotal="{{ number_format((float) $order->sub_total, 2) }}"
                                            data-vat="{{ number_format((float) ($order->vat_amount ?? 0), 2) }}"
                                            data-due="{{ $order->due_date ?: $order->required_by }}"
                                            data-cost-center="{{ $order->cost_center_id }}"
                                            @selected((string) old('purchase_id') === (string) $order->id)>
                                            Purchase Order | {{ $order->purchase_number }} | {{ $partyName ?: '--' }} | {{ number_format((float) $order->total, 2) }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('purchase_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                @if($invoiceOrders->isEmpty())
                                    <div class="form-text text-warning fw-semibold">No uninvoiced purchase orders are available.</div>
                                @endif
                            </div>

                            <div class="col-md-6">
                                <label for="purchase_invoice_vendor_reference" class="form-label">Vendor Invoice Reference</label>
                                <input type="text" name="vendor_invoice_number" id="purchase_invoice_vendor_reference" class="form-control @error('vendor_invoice_number') is-invalid @enderror" value="{{ old('vendor_invoice_number') }}" placeholder="Optional vendor invoice number">
                                @error('vendor_invoice_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-6">
                                <label for="purchase_invoice_date_modal" class="form-label">Invoice Date <span class="text-danger">*</span></label>
                                <input type="date" name="invoice_date" id="purchase_invoice_date_modal" class="form-control @error('invoice_date') is-invalid @enderror" value="{{ old('invoice_date', now()->toDateString()) }}" required>
                                @error('invoice_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-6">
                                <label for="purchase_invoice_due_date_modal" class="form-label">Due Date</label>
                                <input type="date" name="due_date" id="purchase_invoice_due_date_modal" class="form-control @error('due_date') is-invalid @enderror" value="{{ old('due_date') }}">
                                @error('due_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-6">
                                <label for="purchase_invoice_cost_center_id_modal" class="form-label">Cost Center <span class="text-danger">*</span></label>
                                <select name="cost_center_id" id="purchase_invoice_cost_center_id_modal" class="form-select @error('cost_center_id') is-invalid @enderror" required>
                                    <option value="">Choose cost center</option>
                                    @foreach($costCenters as $costCenter)
                                        <option value="{{ $costCenter->id }}" @selected((string) old('cost_center_id') === (string) $costCenter->id)>
                                            {{ $costCenter->title }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('cost_center_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>

                        <div class="invoice-order-preview mt-3">
                            <div class="invoice-order-preview__row"><span>Order Number</span><strong id="purchaseInvoicePreviewNumber">--</strong></div>
                            <div class="invoice-order-preview__row"><span>Vendor / Party</span><strong id="purchaseInvoicePreviewParty">--</strong></div>
                            <div class="invoice-order-preview__row"><span>Subtotal / VAT</span><strong><span id="purchaseInvoicePreviewSubtotal">0.00</span> / <span id="purchaseInvoicePreviewVat">0.00</span></strong></div>
                            <div class="invoice-order-preview__row"><span>Total</span><strong id="purchaseInvoicePreviewTotal">0.00</strong></div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary rounded-pill" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary rounded-pill" @disabled($invoiceOrders->isEmpty())>
                            Create Invoice
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const orderSelect = document.getElementById('purchase_invoice_order_id');
            const dueDateInput = document.getElementById('purchase_invoice_due_date_modal');
            const costCenterSelect = document.getElementById('purchase_invoice_cost_center_id_modal');

            function updatePurchaseInvoicePreview(syncDefaults = false) {
                const option = orderSelect ? orderSelect.options[orderSelect.selectedIndex] : null;
                const hasOrder = option && option.value;

                document.getElementById('purchaseInvoicePreviewNumber').textContent = hasOrder ? option.dataset.number : '--';
                document.getElementById('purchaseInvoicePreviewParty').textContent = hasOrder ? option.dataset.party : '--';
                document.getElementById('purchaseInvoicePreviewSubtotal').textContent = hasOrder ? option.dataset.subtotal : '0.00';
                document.getElementById('purchaseInvoicePreviewVat').textContent = hasOrder ? option.dataset.vat : '0.00';
                document.getElementById('purchaseInvoicePreviewTotal').textContent = hasOrder ? option.dataset.total : '0.00';

                if (hasOrder && syncDefaults) {
                    if (dueDateInput && !dueDateInput.value && option.dataset.due) {
                        dueDateInput.value = option.dataset.due;
                    }

                    if (costCenterSelect && !costCenterSelect.value && option.dataset.costCenter) {
                        costCenterSelect.value = option.dataset.costCenter;
                    }
                }
            }

            if (orderSelect) {
                orderSelect.addEventListener('change', function () {
                    updatePurchaseInvoicePreview(true);
                });
                updatePurchaseInvoicePreview(true);
            }

            @if(old('purchase_id') || $errors->has('purchase_id') || $errors->has('invoice_date') || $errors->has('due_date') || $errors->has('vendor_invoice_number') || $errors->has('cost_center_id') || $errors->has('status') || $errors->has('purchase') || $errors->has('posting_account'))
                const createPurchaseInvoiceModal = document.getElementById('createPurchaseInvoiceModal');
                if (createPurchaseInvoiceModal && window.bootstrap) {
                    window.bootstrap.Modal.getOrCreateInstance(createPurchaseInvoiceModal).show();
                }
            @endif
        });
    </script>
@endpush