@extends('layout.layout')

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

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

                <x-page-title
                    title="Invoices"
                    description="Browse your invoices, filter by payment status, search invoice records, and open payment or invoice details.">
                </x-page-title>

                <div class="ui-card invoice-filter-card" style="margin-bottom: 7px;">
                    <div class="invoice-filter-head">
                        <div class="invoice-filter-head__main">
                            <div class="invoice-filter-head__icon">
                                <iconify-icon icon="ri:filter-3-line"></iconify-icon>
                            </div>

                            <div>
                                <div class="invoice-filter-head__title mb-0">Invoice Filters</div>
                                <p class="invoice-filter-head__sub mb-0">
                                    Control how many records appear, filter by payment status, or search by invoice data.
                                </p>
                            </div>
                        </div>

                        @if (request('status') || request('search') || request('per_page'))
                            <a href="{{ route('invoice') }}" class="asset-btn asset-btn--secondary">
                                <iconify-icon icon="ri:restart-line"></iconify-icon>
                                Reset
                            </a>
                        @endif
                    </div>

                    <div class="invoice-filter-grid">
                        <form action="{{ route('invoice') }}" method="GET" class="invoice-filter-item">
                            <input type="hidden" name="status" value="{{ request('status') }}">
                            <input type="hidden" name="search" value="{{ request('search') }}">

                            <label for="per_page" class="asset-label">Show Records</label>
                            <select name="per_page" id="per_page" class="asset-select" onchange="this.form.submit()">
                                @foreach ([5, 10, 25, 50, 100, 150] as $count)
                                    <option value="{{ $count }}" {{ request('per_page', 10) == $count ? 'selected' : '' }}>
                                        {{ $count }}
                                    </option>
                                @endforeach
                            </select>
                        </form>

                        <form action="{{ route('invoice') }}" method="GET" class="invoice-filter-item">
                            <input type="hidden" name="per_page" value="{{ request('per_page', 10) }}">
                            <input type="hidden" name="search" value="{{ request('search') }}">

                            <label for="status" class="asset-label">Payment Status</label>
                            <select name="status" id="status" class="asset-select" onchange="this.form.submit()">
                                <option value="">All Statuses</option>
                                <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>Paid</option>
                                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                            </select>
                        </form>

                        <form action="{{ route('invoice') }}" method="GET" class="invoice-search-form">
                            <input type="hidden" name="per_page" value="{{ request('per_page', 10) }}">
                            <input type="hidden" name="status" value="{{ request('status') }}">

                            <label for="invoice_search" class="asset-label">Search</label>
                            <div class="invoice-search">
                                <input type="text"
                                       id="invoice_search"
                                       class="invoice-search__input"
                                       name="search"
                                       placeholder="Search invoices..."
                                       value="{{ request('search') }}">

                                <button class="invoice-search__button" type="submit" aria-label="Search">
                                    <iconify-icon icon="ion:search-outline"></iconify-icon>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="ui-card invoice-table-card">
                    <div class="invoice-table-head">
                        <div>
                            <div class="invoice-table-title mb-0">Invoice Records</div>
                            <p class="invoice-table-sub mb-0">
                                Invoice numbers, discounts, total prices, payment status, and detail actions.
                            </p>
                        </div>

                        <span class="ui-pill ui-pill--info">
                            {{ $invoices->total() ?? $invoices->count() }} Invoice(s)
                        </span>
                    </div>

                    <div class="invoice-table-wrap">
                        <table class="table invoice-table mb-0">
                            <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    @if(isset($hasMultipleChildren) && $hasMultipleChildren)
                                        <th class="text-center">Student</th>
                                    @endif
                                    <th class="text-center">Invoice Number</th>
                                    <th class="text-center">Original Price</th>
                                    <th class="text-center">Discounts</th>
                                    <th class="text-center">Discount Amount</th>
                                    <th class="text-center">Final Total</th>
                                    <th class="text-center">Invoice Type</th>
                                    <th class="text-center">Payment Status</th>
                                    <th class="text-center">Details</th>
                                </tr>
                            </thead>

                            <tbody>
                                @forelse ($invoices as $invoice)
                                    @php
                                        $transaction = $invoice->transaction->sortByDesc('created_at')->first();
                                        $originalPrice = (float) ($invoice->original_amount ?: $invoice->total_price ?: $invoice->net_price ?: 0);
                                        $invoiceTotal = (float) ($invoice->final_amount ?: $invoice->net_price ?: $invoice->total_price ?: 0);
                                        $discountAmount = (float) ($invoice->discount_amount ?? max(0, round($originalPrice - $invoiceTotal, 2)));
                                        $discountLines = collect();
                                        if (filled($invoice->discount_plan_type) || (float) ($invoice->discount_plan_price ?? 0) > 0) {
                                            $discountLines->push('Plan: ' . ($invoice->discount_plan_type === 'percentage'
                                                ? number_format((float) $invoice->discount_plan_price, 0) . '%'
                                                : number_format((float) $invoice->discount_plan_price, 2)));
                                        }
                                        if (filled($invoice->referral_activity_type) || (float) ($invoice->referral_activity_price ?? 0) > 0) {
                                            $discountLines->push('Referral: ' . ($invoice->referral_activity_type === 'percentage'
                                                ? number_format((float) $invoice->referral_activity_price, 0) . '%'
                                                : number_format((float) $invoice->referral_activity_price, 2)));
                                        }
                                        if (filled($invoice->promocode_type) || (float) ($invoice->promocode_price ?? 0) > 0) {
                                            $discountLines->push('Promo: ' . ($invoice->promocode_type === 'percentage'
                                                ? number_format((float) $invoice->promocode_price, 0) . '%'
                                                : number_format((float) $invoice->promocode_price, 2)));
                                        }
                                        $paidAmount = (float) $invoice->transaction
                                            ->whereIn('status', ['paid', 'approved'])
                                            ->sum('amount');
                                        $remainingAmount = max(0, round($invoiceTotal - $paidAmount, 2));
                                        $isDepositInvoice = in_array($invoice->payment_status, ['deposite', 'paid_deposite'], true)
                                            || (float) ($invoice->deposite ?? 0) > 0;
                                    @endphp

                                    <tr>
                                        <td class="text-center">
                                            <span class="invoice-id">
                                                {{ $loop->iteration }}
                                            </span>
                                        </td>

                                        @if(isset($hasMultipleChildren) && $hasMultipleChildren)
                                            <td class="text-center">
                                                @if($invoice->student)
                                                    <span class="ui-pill ui-pill--info" style="font-size:.76rem;">{{ $invoice->student->full_name }}</span>
                                                @else
                                                    -
                                                @endif
                                            </td>
                                        @endif

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

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

                                        <td class="text-center">
                                            <div class="invoice-discount-stack">
                                                @forelse ($discountLines as $discountLine)
                                                    <span>{{ $discountLine }}</span>
                                                @empty
                                                    <span class="text-muted">No discount</span>
                                                @endforelse
                                            </div>
                                        </td>

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

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

                                        <td class="text-center">
                                            <div class="invoice-type-stack">
                                                @if ($isDepositInvoice)
                                                    <span class="ui-pill ui-pill--warn">Deposit invoice</span>
                                                    <small>Paid {{ number_format($paidAmount, 2) }}</small>
                                                    <small>Remaining {{ number_format($remainingAmount, 2) }}</small>
                                                @else
                                                    <span class="ui-pill ui-pill--neutral">Full invoice</span>
                                                @endif
                                            </div>
                                        </td>

                                        <td class="text-center align-middle">
                                            @if ($transaction)
                                                @if ($transaction->status == 'paid')
                                                    <span class="ui-pill ui-pill--success">
                                                        Paid
                                                    </span>
                                                @elseif ($transaction->status == 'pending')
                                                    <span class="ui-pill ui-pill--warn">
                                                        Pending
                                                    </span>
                                                @elseif ($transaction->status == 'rejected')
                                                    <div class="invoice-status-stack">
                                                        <span class="ui-pill ui-pill--danger">
                                                            Rejected
                                                        </span>

                                                        @if (!empty($transaction->reason))
                                                            <div class="invoice-reject-reason">
                                                                {{ $transaction->reason ?? '' }}
                                                            </div>
                                                        @endif
                                                    </div>
                                                @else
                                                    <span class="ui-pill ui-pill--neutral">
                                                        {{ $transaction->status }}
                                                    </span>
                                                @endif
                                            @else
                                                <span class="ui-pill ui-pill--neutral">
                                                    N/A
                                                </span>
                                            @endif
                                        </td>

                                        <td class="text-center">
                                            <div class="invoice-actions">
                                                @if ($invoice->payment_status == 'paid')
                                                    <a href="{{ route('showInvoice', $invoice->id) }}"
                                                       class="invoice-action-btn"
                                                       title="View invoice">
                                                        <iconify-icon icon="lucide:eye"></iconify-icon>
                                                    </a>
                                                @else
                                                    @if (
                                                        $invoice->payment_status != 'paid' &&
                                                        $transaction &&
                                                        $transaction->payment_url != null
                                                    )
                                                        <a target="_blank"
                                                           href="{{ $transaction->payment_url }}"
                                                           class="invoice-action-btn invoice-action-btn--pay"
                                                           title="Open payment">
                                                            <iconify-icon icon="tabler:receipt"></iconify-icon>
                                                        </a>
                                                    @else
                                                        <a href="{{ route('showInvoice', $invoice->id) }}"
                                                           class="invoice-action-btn"
                                                           title="View invoice">
                                                            <iconify-icon icon="lucide:eye"></iconify-icon>
                                                        </a>
                                                    @endif
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="{{ isset($hasMultipleChildren) && $hasMultipleChildren ? 10 : 9 }}">
                                            <div class="invoice-empty">
                                                <iconify-icon icon="ri:file-list-3-line"></iconify-icon>
                                                <div>No student invoices found.</div>
                                                <p>Try changing your filters or search keyword.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

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

            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .invoices-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
            padding: 1.25rem;
            overflow: hidden;
        }

        .invoice-filter-card {
            min-width: 0;
        }

        .invoice-filter-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #eef2f7;
            flex-wrap: wrap;
        }

        .invoice-filter-head__main {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            min-width: 0;
        }

        .invoice-filter-head__icon {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #071b3d;
            font-size: 1.45rem;
            flex-shrink: 0;
        }

        .invoice-filter-head__title {
            font-size: 1.05rem !important;
            font-weight: 900;
            color: #111827;
        }

        .invoice-filter-head__sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin-top: 0.2rem;
        }

        .invoice-filter-grid {
            display: grid;
            grid-template-columns: 180px 220px minmax(260px, 1fr);
            gap: 1rem;
            align-items: end;
        }

        .invoice-filter-item,
        .invoice-search-form {
            min-width: 0;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 750;
            color: #374151;
            font-size: 0.9rem;
        }

        .asset-select {
            width: 100% !important;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 14px !important;
            padding: 0.68rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
            box-shadow: none !important;
        }

        .asset-select:focus {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .invoice-search {
            position: relative;
            width: 100%;
        }

        .invoice-search__input {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 14px;
            padding: 0.68rem 3rem 0.68rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
            box-shadow: none;
        }

        .invoice-search__input:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .invoice-search__button {
            position: absolute;
            right: 0.4rem;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            border: 0;
            border-radius: 12px;
            background: #111827;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: 0.2s ease;
        }

        .invoice-search__button:hover {
            background: #071b3d;
        }

        .invoice-table-card {
            padding: 0 !important;
        }

        .invoice-table-head {
            padding: 1.25rem;
            border-bottom: 1px solid #eef2f7;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            background: #fff;
        }

        .invoice-table-title {
            font-size: 1.05rem !important;
            font-weight: 900;
            color: #111827;
        }

        .invoice-table-sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin-top: 0.2rem;
        }

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

        .invoice-table {
            min-width: 980px;
            width: 100%;
            vertical-align: middle;
        }

        .invoice-table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-bottom: 1px solid #e5e7eb;
            padding: 0.9rem 1rem;
            white-space: nowrap;
        }

        .invoice-table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 650;
            border-color: #eef2f7;
            padding: 0.95rem 1rem;
            vertical-align: middle;
            white-space: nowrap;
        }

        .invoice-table tbody tr {
            transition: 0.16s ease;
        }

        .invoice-table tbody tr:hover {
            background: #f8fafc;
        }

        .invoice-id {
            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: 900;
        }

        .invoice-number {
            color: #111827;
            font-weight: 850;
        }

        .invoice-status-stack {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 0.35rem;
        }

        .invoice-type-stack {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 0.28rem;
        }

        .invoice-type-stack small {
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 750;
        }

        .invoice-discount-stack {
            display: grid;
            justify-items: center;
            gap: 0.2rem;
            color: #475569;
            font-size: 0.76rem;
            font-weight: 750;
            line-height: 1.35;
        }

        .invoice-reject-reason {
            max-width: 220px;
            color: #b91c1c;
            font-size: 0.78rem;
            font-weight: 700;
            white-space: normal;
            line-height: 1.45;
        }

        .invoice-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
        }

        .invoice-action-btn {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            border: 1px solid #dbeafe;
            background: #eff6ff;
            color: #0f1724;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            transition: 0.18s ease;
            text-decoration: none;
        }

        .invoice-action-btn:hover {
            background: #071b3d;
            border-color: #071b3d;
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
        }

        .invoice-action-btn--pay {
            border-color: #fed7aa;
            background: #fff7ed;
            color: #c2410c;
        }

        .invoice-action-btn--pay:hover {
            background: #f97316;
            border-color: #f97316;
            color: #fff;
            box-shadow: 0 10px 22px rgba(249, 115, 22, 0.18);
        }

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

        .invoice-empty iconify-icon {
            display: block;
            font-size: 2.25rem;
            color: #cbd5e1;
            margin-bottom: 0.7rem;
        }

        .invoice-empty div {
            margin: 0;
            color: #475569;
            font-weight: 850;
        }

        .invoice-empty p {
            margin: 0.25rem 0 0;
            font-size: 0.88rem;
        }

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

        .asset-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.38rem 0.78rem;
            font-size: 0.76rem;
            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--info { background: #eef2ff; color: #4338ca; }
        .ui-pill--neutral { background: #f3f4f6; color: #374151; }

        @media (max-width: 991.98px) {
            .invoice-filter-grid {
                grid-template-columns: 1fr;
            }

            .invoice-filter-head__main {
                align-items: flex-start;
            }
        }

        @media (max-width: 575.98px) {
            .invoices-page .ui-card {
                padding: 1rem;
            }

            .invoice-table-head,
            .invoice-pagination {
                padding: 1rem;
            }

            .invoice-filter-head {
                align-items: flex-start;
            }
        }
    </style>
@endpush