@extends('dashboard.layouts.app')

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

    <style>
        .all-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;
        }

        .all-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;
        }

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

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

        .all-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;
        }

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

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

        .invoice-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--student { background: #eff6ff; color: #1d4ed8; }
        .ui-pill--purchase { background: #eef2ff; color: #4338ca; }
        .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: 16px;
            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 all-invoices-page">
        <div class="page-shell">
            <div class="space-y-4">
                <x-page-title
                    title="All Invoices"
                    description="Unified list for sales invoices and purchase invoices.">
                    <div class="d-flex gap-2 flex-wrap">
                        <button type="button" class="btn btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#createInvoiceModal">
                            <i class="fas fa-plus me-1"></i>
                            Create Invoice
                        </button>
                        <a href="{{ route('student_invoices.index') }}" class="btn btn-outline-primary rounded-pill">Sales Invoices</a>
                        <a href="{{ route('purchase.invoice.index') }}" class="btn btn-outline-primary rounded-pill">Purchase Invoices</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('invoices.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, party, order...">
                            </div>

                            <div>
                                <label for="type" class="form-label mb-1">Type</label>
                                <select name="type" id="type" class="form-select">
                                    <option value="">All types</option>
                                    <option value="student" @selected(request('type') === 'student')>Student</option>
                                    <option value="purchase" @selected(request('type') === 'purchase')>Purchase</option>
                                </select>
                            </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="not_paid" @selected(request('status') === 'not_paid')>Student Not Paid</option>
                                    <option value="paid_deposite" @selected(request('status') === 'paid_deposite')>Student Partial</option>
                                    <option value="paid" @selected(request('status') === 'paid')>Paid</option>
                                    <option value="unpaid" @selected(request('status') === 'unpaid')>Purchase Unpaid</option>
                                    <option value="partial" @selected(request('status') === 'partial')>Purchase Partial</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('invoices.index') }}" class="btn btn-outline-secondary rounded-pill">Clear</a>
                        </form>
                    </div>

                    <div class="all-invoices-table-wrap">
                        <x-table :headers="['#', 'Type', 'Invoice', 'Party', 'Reference', 'Date', 'Status', 'Completion', 'Total', 'Paid', 'Deposit', 'Remaining', 'Actions']">
                            @forelse($invoices as $invoice)
                                @php
                                    $statusClass = match ($invoice['status']) {
                                        'paid' => 'ui-pill--success',
                                        'partial', 'paid_deposite', 'deposite' => 'ui-pill--warn',
                                        'not_paid', 'unpaid', 'rejected', 'cancelled' => 'ui-pill--danger',
                                        default => 'ui-pill--neutral',
                                    };
                                    $completionStatus = $invoice['completion_status'] ?? null;
                                    $completionStatusClass = $completionStatus === 'complete' ? 'ui-pill--success' : 'ui-pill--warn';
                                @endphp

                                <tr>
                                    <td class="text-center">
                                        {{ method_exists($invoices, 'firstItem') ? $invoices->firstItem() + $loop->index : $loop->iteration }}
                                    </td>
                                    <td class="text-center">
                                        <span class="ui-pill {{ $invoice['type'] === 'student' ? 'ui-pill--student' : 'ui-pill--purchase' }}">
                                            {{ $invoice['type_label'] }}
                                        </span>
                                    </td>
                                    <td>
                                        <a href="{{ $invoice['url'] }}" class="invoice-number-link">
                                            {{ $invoice['invoice_number'] }}
                                        </a>
                                    </td>
                                    <td>{{ $invoice['party_name'] }}</td>
                                    <td>
                                        @if(!empty($invoice['reference_url']))
                                            <a href="{{ $invoice['reference_url'] }}" class="invoice-number-link">
                                                {{ $invoice['reference'] }}
                                            </a>
                                        @else
                                            {{ $invoice['reference'] }}
                                        @endif
                                    </td>
                                    <td>{{ optional($invoice['date'])->format('M d, Y') ?: '--' }}</td>
                                    <td class="text-center">
                                        <span class="ui-pill {{ $statusClass }}">
                                            {{ $invoice['status_label'] ?? ucwords(str_replace('_', ' ', $invoice['status'])) }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        @if($invoice['type'] === 'student' && $completionStatus)
                                            <span class="ui-pill {{ $completionStatusClass }}">
                                                {{ $invoice['completion_status_label'] ?? ucwords(str_replace('_', ' ', $completionStatus)) }}
                                            </span>
                                        @else
                                            <span class="text-muted">--</span>
                                        @endif
                                    </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">@include('dashboard.student_invoices._received_amounts', ['receiptGroups' => $invoice['received_amounts'] ?? [], 'receiptFallbackAmount' => $invoice['paid']])</span></td>
                                    <td class="text-center">
                                        @if(($invoice['deposit'] ?? 0) > 0)
                                            <span class="money-cell">{{ number_format((float) $invoice['deposit'], 2) }}</span>
                                        @else
                                            <span class="text-muted">--</span>
                                        @endif
                                    </td>
                                    <td class="text-center"><span class="money-cell money-cell--remain">{{ number_format((float) $invoice['remaining'], 2) }}</span></td>
                                    <td class="text-center">
                                        <x-table-action type="view" :url="$invoice['url']" />
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="13">
                                        <div class="table-empty-state">
                                            <i class="fas fa-file-invoice-dollar"></i>
                                            <h6>No 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="createInvoiceModal" tabindex="-1" aria-labelledby="createInvoiceLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('invoices.store') }}" method="POST" id="createInvoiceForm">
                    @csrf

                    <div class="modal-header">
                        <div>
                            <h5 class="modal-title fw-bold" id="createInvoiceLabel">Create Invoice</h5>
                            <div class="text-muted small">Choose a Sales Order or Purchase Order to link this invoice.</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="invoice_purchase_id" class="form-label">Sales / Purchase Order <span class="text-danger">*</span></label>
                                <select name="purchase_id" id="invoice_purchase_id" class="form-select @error('purchase_id') is-invalid @enderror" required>
                                    <option value="">Choose order</option>
                                    @foreach($invoiceOrders as $order)
                                        @php
                                            $isSale = ($order->invoice_type ?? null) === 'sale';
                                            $isStudentSale = $isSale && ($order->party_type ?? null) === 'student';
                                            $orderTypeLabel = $isStudentSale ? 'Student Sales Order' : ($isSale ? 'Sales Order' : 'Purchase Order');
                                            $partyName = $isStudentSale
                                                ? ($order->student?->full_name ?: trim(($order->student->first_name ?? '') . ' ' . ($order->student->last_name ?? '')))
                                                : ($order->name ?: $order->vendors->pluck('name')->filter()->join(', '));
                                        @endphp
                                        <option
                                            value="{{ $order->id }}"
                                            data-type="{{ $orderTypeLabel }}"
                                            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)>
                                            {{ $orderTypeLabel }} | {{ $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 sales or purchase orders are available.</div>
                                @endif
                            </div>

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

                            <div class="col-md-6">
                                <label for="invoice_date" class="form-label">Invoice Date <span class="text-danger">*</span></label>
                                <input type="date" name="invoice_date" id="invoice_date" 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="invoice_due_date" class="form-label">Due Date</label>
                                <input type="date" name="due_date" id="invoice_due_date" 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="invoice_cost_center_id" class="form-label">Cost Center</label>
                                <select name="cost_center_id" id="invoice_cost_center_id" class="form-select @error('cost_center_id') is-invalid @enderror">
                                    <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 Type</span>
                                <strong id="invoicePreviewType">--</strong>
                            </div>
                            <div class="invoice-order-preview__row">
                                <span>Order Number</span>
                                <strong id="invoicePreviewNumber">--</strong>
                            </div>
                            <div class="invoice-order-preview__row">
                                <span>Party</span>
                                <strong id="invoicePreviewParty">--</strong>
                            </div>
                            <div class="invoice-order-preview__row">
                                <span>Subtotal / VAT</span>
                                <strong><span id="invoicePreviewSubtotal">0.00</span> / <span id="invoicePreviewVat">0.00</span></strong>
                            </div>
                            <div class="invoice-order-preview__row">
                                <span>Total</span>
                                <strong id="invoicePreviewTotal">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('invoice_purchase_id');
            const dueDateInput = document.getElementById('invoice_due_date');
            const costCenterSelect = document.getElementById('invoice_cost_center_id');

            function selectedOption() {
                return orderSelect ? orderSelect.options[orderSelect.selectedIndex] : null;
            }

            function updateInvoicePreview(syncDefaults = false) {
                const option = selectedOption();
                const hasOrder = option && option.value;

                document.getElementById('invoicePreviewType').textContent = hasOrder ? option.dataset.type : '--';
                document.getElementById('invoicePreviewNumber').textContent = hasOrder ? option.dataset.number : '--';
                document.getElementById('invoicePreviewParty').textContent = hasOrder ? option.dataset.party : '--';
                document.getElementById('invoicePreviewSubtotal').textContent = hasOrder ? option.dataset.subtotal : '0.00';
                document.getElementById('invoicePreviewVat').textContent = hasOrder ? option.dataset.vat : '0.00';
                document.getElementById('invoicePreviewTotal').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 () {
                    updateInvoicePreview(true);
                });
                updateInvoicePreview(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 createInvoiceModal = document.getElementById('createInvoiceModal');
                if (createInvoiceModal && window.bootstrap) {
                    window.bootstrap.Modal.getOrCreateInstance(createInvoiceModal).show();
                }
            @endif
        });
    </script>
@endpush