@extends('dashboard.layouts.app')

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

    <div class="container-fluid app-bg student-invoices-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Sales Invoices"
                    description="Manage sales invoices, payment status, discounts, invoice types, and invoice details.">
                    <a href="{{ route('invoices.index') }}" class="btn btn-outline-primary rounded-pill">
                        All Invoices
                    </a>
                </x-page-title>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap w-100">
                            <h6 class="mb-0 font-semibold text-gray-800 whitespace-nowrap" style="margin-right: auto;">
                                Filters
                            </h6>

                            <x-table-action
                                type="create"
                                target="#createSalesInvoiceModal"
                                label="Create Invoice"
                                class="d-flex align-items-center gap-2"
                            />

                            <x-table-controls
                                :action="route('student_invoices.index')"
                                searchName="search"
                                searchPlaceholder="search e.g. invoice no"
                                formId="student-invoices-table-controls"
                                :clearUrl="route('student_invoices.index')"
                            />
                        </div>
                    </div>

                    <div class="student-invoices-table-wrap">
                        <x-table :headers="[
                            'Index',
                            'Invoice Number',
                            'Discount Type',
                            'Discount',
                            'Discount Amount',
                            'Received / Invoice total',
                            'Deposit',
                            'Student Name',
                            'Payment Status',
                            'Completion Status',
                            'Invoice Type',
                            'Details'
                        ]">
                            @forelse ($studentInvoices as $invoice)
                                @php
                                    $student = $invoice->student;
                                    $studentName = trim(($student->first_name ?? '') . ' ' . ($student->last_name ?? ''));
                                    $partyName = $studentName ?: ($invoice->party_name ?? '');
                                    $discountAmount = $invoice->discount_amount ?? 0;

                                    $paymentStatusClass = match ($invoice->payment_status) {
                                        'paid' => 'ui-pill--success',
                                        'pending', 'partial', 'paid_deposite', 'deposite' => 'ui-pill--warn',
                                        'not_paid', 'unpaid' => 'ui-pill--danger',
                                        'rejected' => 'ui-pill--danger',
                                        default => 'ui-pill--neutral',
                                    };

                                    $completionStatusClass = !$invoice->display_completion_status
                                        ? 'ui-pill--neutral'
                                        : ($invoice->display_completion_status === 'complete'
                                        ? 'ui-pill--success'
                                        : 'ui-pill--warn');

                                    $discountTypeClass = match ($invoice->discount_plan_type) {
                                        'fixed' => 'ui-pill--info',
                                        'percentage' => 'ui-pill--primary',
                                        default => 'ui-pill--neutral',
                                    };
                                @endphp

                                <tr>
                                    <td class="text-center">
                                        <span class="invoice-index">
                                            {{ method_exists($studentInvoices, 'firstItem') ? $studentInvoices->firstItem() + $loop->index : $loop->iteration }}
                                        </span>
                                    </td>

                                    <td>
                                        <div class="invoice-number">
                                            {{ $invoice->invoice_number }}
                                        </div>
                                    </td>

                                    <td class="text-center">
                                        <span class="ui-pill {{ $discountTypeClass }}">
                                            {{ $invoice->discount_plan_type ? ucfirst($invoice->discount_plan_type) : 'No Discount' }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        @if ($invoice->discount_plan_type == 'percentage')
                                            {{ $invoice->discount_plan_price !== null ? number_format($invoice->discount_plan_price, 0) . '%' : '0%' }}
                                        @else
                                            {{ number_format($invoice->discount_plan_price ?? 0, 2) }}
                                        @endif
                                    </td>

                                    <td class="text-center">
                                        {{ number_format($discountAmount, 2) }}
                                    </td>

                                    <td class="text-center">
                                        @php
                                            $invoiceReceipts = app(\App\Services\InvoiceReceiptPresentationService::class)
                                                ->groups($invoice);
                                        @endphp
                                        <strong class="invoice-price">
                                            @if($invoiceReceipts)
                                                @include('dashboard.student_invoices._received_amounts', [
                                                    'receiptGroups' => $invoiceReceipts
                                                ])
                                                <small class="d-block text-muted">Received</small>
                                            @else
                                                {{ number_format($invoice->net_price ?? 0, 2) }}
                                                {{ $invoice->currency ?: 'EGP' }}
                                            @endif
                                        </strong>
                                    </td>

                                    <td class="text-center">
                                        @if(($invoice->deposit_amount ?? 0) > 0)
                                            <strong class="invoice-price">@include('dashboard.student_invoices._received_amounts', ['receiptGroups' => $invoiceReceipts, 'receiptFallbackAmount' => $invoice->deposit_amount, 'receiptFallbackCurrency' => $invoice->currency ?: 'EGP'])</strong>
                                        @else
                                            <span class="text-muted">--</span>
                                        @endif
                                    </td>

                                    <td>
                                        @if ($student)
                                            <a href="{{ rtrim(config('app.retention_url'), '/') . '/students/' . $student->id }}"
                                               target="_blank"
                                               class="student-link">
                                                <span class="student-avatar">
                                                    {{ strtoupper(substr($student->first_name ?? 'S', 0, 1) . substr($student->last_name ?? '', 0, 1)) }}
                                                </span>

                                                <span class="student-link__content">
                                                    <span class="student-link__name">
                                                        {{ $studentName ?: 'Student' }}
                                                    </span>
                                                    <span class="student-link__sub">
                                                        Open student profile
                                                    </span>
                                                </span>
                                            </a>
                                        @else
                                            <span class="text-muted">{{ $partyName ?: '-' }}</span>
                                        @endif
                                    </td>

                                    <td class="text-center">
                                        <span class="ui-pill {{ $paymentStatusClass }}">
                                            {{ $invoice->payment_status_label ?? ucfirst(str_replace('_', ' ', $invoice->payment_status ?? 'N/A')) }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <span class="ui-pill {{ $completionStatusClass }}">
                                            {{ $invoice->display_completion_status_label }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <span class="ui-pill ui-pill--neutral">
                                            {{ ucfirst($invoice->type ?? 'N/A') }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <x-table-action type="view" url="{{ $invoice->url }}" />
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="12">
                                        <div class="table-empty-state">
                                            <iconify-icon icon="ri:file-list-3-line"></iconify-icon>
                                            <h6>No sales invoices found.</h6>
                                            <p>Try changing filters or search keyword.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </x-table>
                    </div>

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

            </div>
        </div>
    </div>

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

                    <div class="modal-header">
                        <div>
                            <h5 class="modal-title fw-bold" id="createSalesInvoiceLabel">Create Sales Invoice</h5>
                            <div class="text-muted small">Choose an uninvoiced Sales 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="sales_invoice_order_id" class="form-label">Sales Order <span class="text-danger">*</span></label>
                                <select name="purchase_id" id="sales_invoice_order_id" class="form-select @error('purchase_id') is-invalid @enderror" required>
                                    <option value="">Choose sales order</option>
                                    @foreach($invoiceOrders as $order)
                                        @php
                                            $studentName = $order->student?->full_name ?: trim(($order->student->first_name ?? '') . ' ' . ($order->student->last_name ?? ''));
                                        @endphp
                                        <option
                                            value="{{ $order->id }}"
                                            data-number="{{ $order->purchase_number }}"
                                            data-party="{{ $studentName ?: '--' }}"
                                            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)>
                                            Sales Order | {{ $order->purchase_number }} | {{ $studentName ?: '--' }} | {{ 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 orders are available.</div>
                                @endif
                            </div>

                            <div class="col-md-6">
                                <label for="sales_invoice_reference" class="form-label">Invoice Reference</label>
                                <input type="text" name="vendor_invoice_number" id="sales_invoice_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="sales_invoice_date_modal" class="form-label">Invoice Date <span class="text-danger">*</span></label>
                                <input type="date" name="invoice_date" id="sales_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="sales_invoice_due_date_modal" class="form-label">Due Date</label>
                                <input type="date" name="due_date" id="sales_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="sales_invoice_cost_center_id_modal" class="form-label">Cost Center <span class="text-danger">*</span></label>
                                <select name="cost_center_id" id="sales_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="salesInvoicePreviewNumber">--</strong></div>
                            <div class="invoice-order-preview__row"><span>Student</span><strong id="salesInvoicePreviewParty">--</strong></div>
                            <div class="invoice-order-preview__row"><span>Subtotal / VAT</span><strong><span id="salesInvoicePreviewSubtotal">0.00</span> / <span id="salesInvoicePreviewVat">0.00</span></strong></div>
                            <div class="invoice-order-preview__row"><span>Total</span><strong id="salesInvoicePreviewTotal">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('styles')
    <style>
        .student-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;
        }

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

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

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

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

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

        .student-invoices-page table tbody tr {
            transition: 0.16s ease;
        }

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

        .invoice-index {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 30px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.78rem;
            font-weight: 850;
        }

        .invoice-number {
            color: #111827;
            font-weight: 850;
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .invoice-price {
            color: #111827;
            font-weight: 900;
        }

        .student-link {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            text-decoration: none;
            color: inherit;
            min-width: 210px;
        }

        .student-link:hover .student-link__name {
            color: #2563eb;
        }

        .student-avatar {
            width: 36px;
            height: 36px;
            border-radius: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #2563eb;
            font-size: 0.78rem;
            font-weight: 900;
            flex-shrink: 0;
        }

        .student-link__content {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .student-link__name {
            color: #111827;
            font-size: 0.9rem;
            font-weight: 850;
            line-height: 1.35;
            transition: 0.16s ease;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 180px;
        }

        .student-link__sub {
            color: #94a3b8;
            font-size: 0.76rem;
            font-weight: 650;
            margin-top: 0.1rem;
        }

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

        .ui-pill--primary {
            background: #eff6ff;
            color: #1d4ed8;
        }

        .ui-pill--info {
            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 iconify-icon {
            display: block;
            font-size: 2.3rem;
            color: #cbd5e1;
            margin-bottom: 0.75rem;
        }

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

        .table-empty-state p {
            margin: 0.35rem 0 0;
            font-size: 0.9rem;
        }

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

        .student-invoices-page .table-controls-form {
            max-width: 100%;
            overflow-x: auto;
            padding-bottom: 0.1rem;
        }

        .student-invoices-page .table-controls-form::-webkit-scrollbar {
            height: 6px;
        }

        .student-invoices-page .table-controls-form::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 999px;
        }

        .student-invoices-page .table-controls-form::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 999px;
        }

        @media (max-width: 991.98px) {
            .student-invoices-page .ui-card__header > .d-flex {
                align-items: flex-start !important;
            }

            .student-invoices-page .table-controls-form {
                width: 100%;
            }
        }

        @media (max-width: 575.98px) {
            .student-invoices-page .ui-card__header,
            .table-pagination {
                padding: 1rem;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const orderSelect = document.getElementById('sales_invoice_order_id');
            const dueDateInput = document.getElementById('sales_invoice_due_date_modal');
            const costCenterSelect = document.getElementById('sales_invoice_cost_center_id_modal');

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

                document.getElementById('salesInvoicePreviewNumber').textContent = hasOrder ? option.dataset.number : '--';
                document.getElementById('salesInvoicePreviewParty').textContent = hasOrder ? option.dataset.party : '--';
                document.getElementById('salesInvoicePreviewSubtotal').textContent = hasOrder ? option.dataset.subtotal : '0.00';
                document.getElementById('salesInvoicePreviewVat').textContent = hasOrder ? option.dataset.vat : '0.00';
                document.getElementById('salesInvoicePreviewTotal').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 () {
                    updateSalesInvoicePreview(true);
                });
                updateSalesInvoicePreview(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 createSalesInvoiceModal = document.getElementById('createSalesInvoiceModal');
                if (createSalesInvoiceModal && window.bootstrap) {
                    window.bootstrap.Modal.getOrCreateInstance(createSalesInvoiceModal).show();
                }
            @endif
        });
    </script>
@endpush