@can('crm_lead_invoice-view')
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="card shadow-sm border-0 rounded-3 p-3">
                    <!-- Header with one title and one button -->
                    <div
                        class="card-header py-3 px-3 d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0 fw-semibold">Invoice</h5>
                        @can('crm_lead_invoice-create')
                            <button type="button"
                                class="btn btn-outline-primary btn-sm d-flex align-items-center gap-2"
                                data-bs-toggle="modal"
                                data-bs-target="@if (!is_null($lead->student_id) || !is_null($lead->parent_id)) #invoiceModal @else #invoiceModalHasNotStudent @endif">
                                <iconify-icon icon="ic:baseline-plus"></iconify-icon>
                                Add New Invoice
                            </button>
                        @endcan
                    </div>
                    <!-- Tabs inside card-body -->
                    <div class="card-body p-3">
                        <!-- Tab Navigation -->
                        <ul class="nav nav-tabs mb-3" id="studentTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="invoice-tab"
                                    data-bs-toggle="tab" data-bs-target="#invoiceModal"
                                    type="button" role="tab" aria-controls="invoice"
                                    aria-selected="true">
                                    Invoice
                                </button>
                            </li>
                        </ul>
                        <!-- Tab Content -->
                        <div class="tab-content" id="studentTabsContent">
                            <!-- Invoice Tab -->
                            <div class="tab-pane fade show active" id="invoice" role="tabpanel"
                                aria-labelledby="invoice-tab">
                                <div class="table-responsive">
                                    @if (!$lead->students?->finanaceStudentInvoices->count())
                                        <p>No invoice found for this lead.</p>
                                    @else
                                        <table
                                            class="text-center table table-bordered table-sm table bordered-table sm-table mb-0">
                                            <thead class="">
                                                <tr>
                                                    <th class="text-center">Number</th>
                                                    <th class="text-center">Type</th>
                                                    <th class="text-center">product</th>
                                                    <th class="text-center">Levels Count
                                                    </th>
                                                    <th class="text-center">Total Price
                                                    </th>
                                                    <th class="text-center">Discount
                                                        Price</th>
                                                    @if($allInvoices->contains(fn($invoice) => !is_null($invoice->promocode_id)))
                                                        <th class="text-center">Promocode
                                                        </th>
                                                    @endif
                                                    @if($allInvoices->contains(fn($invoice) => $invoice->referralActivity))
                                                        <th class="text-center">Referral
                                                            Discount Price</th>
                                                    @endif
                                                    <th class="text-center">Net Price
                                                    </th>
                                                    <th class="text-center">status</th>
                                                    <th class="text-center">Paid</th>
                                                    <th class="text-center">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($allInvoices as $invoice)
                                                    <tr>
                                                        <td class="text-center">
                                                            {{ $invoice->invoice_number }}
                                                        </td>
                                                        <td class="text-center">
                                                            {{ $invoice->type }}
                                                        </td>
                                                        <td class="text-center">
                                                            @if ($invoice->type == 'product')
                                                                {{ $invoice->productInvoice?->name_en }}
                                                            @else
                                                                {{ $invoice->trackInvoice?->name_en ?? 'Track' }}
                                                            @endif
                                                        </td>
                                                        </td>
                                                        <td class="text-center">
                                                            {{ $invoice->levels_count ?? 1 }}
                                                        </td>
                                                        <td class="text-center">
                                                            {{ $invoice->total_price }}
                                                        </td>
                                                        <td class="text-center">
                                                            {{ $invoice->discount_plan_price ?? 0}}
                                                            {{ $invoice->discount_plan_type == "percentage" ? '%' : '$' }}
                                                        </td>
                                                        @if($allInvoices->contains(fn($inv) => !is_null($inv->promocode_id)))
                                                            <td class="text-center">
                                                                {{ $invoice->promocode_price ?? 0 }}
                                                                {{ $invoice->promocode_type == "percentage" ? '%' : '$' }}
                                                            </td>
                                                        @endif
                                                        @if($allInvoices->contains(fn($inv) => $inv->referralActivity))
                                                            <td class="text-center">
                                                                {{ $invoice->referral_activity_price ?? 0 }}
                                                                {{ $invoice->referral_activity_type == "percentage" ? '%' : '$' }}
                                                            </td>
                                                        @endif
                                                        <td class="text-center">
                                                            {{ $invoice->net_price }}
                                                        </td>
                                                        <td class="text-center">
                                                            {{ $invoice->payment_status == 'not_paid' ? 'pending' : $invoice->payment_status }}
                                                        </td>
                                                        <td class="text-center">
                                                            {{ $invoice->lead_total_paid ?? 0 }}
                                                        </td>
                                                        <td style="padding: 8px; text-align: center;">
                                                            <div
                                                                class="d-flex justify-content-center gap-2">
                                                                <button type="button"
                                                                    class="btn btn-sm btn-primary"
                                                                    onclick="showTransactions({{ $invoice->id }})">
                                                                    Show Transactions
                                                                </button>
                                                                @if($invoice->payment_status != 'paid')
                                                                    <button type="button"
                                                                        class="btn btn-sm btn-success"
                                                                        onclick="openAddTransactionModal({{ $invoice->id }})">
                                                                        Add Transaction
                                                                    </button>
                                                                @endif
                                                            </div>
                                                        </td>
                                                        <div class="modal fade" id="addTransactionModal"
                                                            tabindex="-1"
                                                            aria-labelledby="addTransactionModalLabel"
                                                            aria-hidden="true">
                                                            <div class="modal-dialog">
                                                                <form id="addTransactionForm"
                                                                    action="{{ route('invoices.transactions.store') }}"
                                                                    method="POST"
                                                                    enctype="multipart/form-data">
                                                                    @csrf
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h5 class="modal-title"
                                                                                id="addTransactionModalLabel">
                                                                                Add New
                                                                                Transaction
                                                                            </h5>
                                                                            <button type="button"
                                                                                class="btn-close"
                                                                                data-bs-dismiss="modal"
                                                                                aria-label="Close"></button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <input type="hidden"
                                                                                name="invoice_id"
                                                                                id="transactionInvoiceId">
                                                                            <div class="mb-3">
                                                                                <label
                                                                                    class="form-label">Payment
                                                                                    Type</label>
                                                                                <select
                                                                                    name="payment_type"
                                                                                    id="paymentTypeSelect"
                                                                                    class="form-control"
                                                                                    required>
                                                                                    <option
                                                                                        value="online">
                                                                                        Online
                                                                                    </option>
                                                                                    <option
                                                                                        value="instapay">
                                                                                        Instapay
                                                                                    </option>
                                                                                </select>
                                                                            </div>
                                                                            <div class="mb-3 d-none"
                                                                                id="transactionImgWrapper">
                                                                                <label
                                                                                    class="form-label">Transaction
                                                                                    Image</label>
                                                                                <input type="file"
                                                                                    name="transaction_img"
                                                                                    id="transactionImgInput"
                                                                                    class="form-control"
                                                                                    accept="image/*">
                                                                            </div>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button"
                                                                                class="btn btn-outline-secondary"
                                                                                data-bs-dismiss="modal">Cancel</button>
                                                                            <button type="submit"
                                                                                class="btn btn-outline-success">Save
                                                                                Transaction</button>
                                                                        </div>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                        <div class="modal fade" id="transactionsModal"
                                                            tabindex="-1"
                                                            aria-labelledby="transactionsModalLabel"
                                                            aria-hidden="true">
                                                            <div class="modal-dialog modal-lg">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <h5 class="modal-title"
                                                                            id="transactionsModalLabel">
                                                                            Invoice
                                                                            Transactions
                                                                        </h5>
                                                                        <button type="button"
                                                                            class="btn-close"
                                                                            data-bs-dismiss="modal"
                                                                            aria-label="Close"></button>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        <div id="transactionsContent"
                                                                            class="table-responsive">
                                                                            <p class="text-muted">
                                                                                Loading
                                                                                transactions...
                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    @endif
                                </div>
                            </div>
                            <!-- Modal viewer -->
                            <div id="imageModal"
                                style="display: none; position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); justify-content:center; align-items:center; z-index:9999;">
                                <img id="modalImage" src=""
                                    style="max-width:90%; max-height:90%; border-radius: 10px;">
                            </div>
                            <!-- More Tab -->
                        </div>
                    </div> <!-- End card-body -->
                </div>
            </div>
        </div>
    </div>
@endcan