{{-- Author By : zulfazdliabuas@gmail.com | Date : 2026 --}}
@push('styles')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.5/dist/bootstrap-table.min.css" rel="stylesheet">
<style>
    .subs_customer_select_wrap .select2-container {
        width: 100% !important;
    }

    .subs_customer_select_wrap .select2-container--default .select2-selection--single {
        min-height: 48px;
        border-radius: 16px;
        border: 1px solid rgba(223, 226, 236, 0.96);
        background: rgba(255, 255, 255, 0.98);
        padding: 9px 42px 9px 14px;
        display: flex;
        align-items: center;
    }

    .subs_customer_select_wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--title);
        line-height: 1.35;
        padding-left: 0;
        padding-right: 0;
    }

    .subs_customer_select_wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 46px;
        right: 10px;
    }

    .subs_customer_select_wrap .select2-container--default.select2-container--focus .select2-selection--single,
    .subs_customer_select_wrap .select2-container--default.select2-container--open .select2-selection--single {
        border-color: rgba(115, 103, 240, 0.45);
        box-shadow: 0 0 0 0.22rem rgba(115, 103, 240, 0.12);
    }

    .subs_customer_option_name {
        font-weight: 700;
        color: var(--title);
    }

    .subs_customer_option_meta {
        margin-top: 2px;
        font-size: 0.76rem;
        color: #7b778c;
    }

    #quickAddCustomerModal .subs_modal_errors:empty {
        display: none;
    }
</style>
@endpush

<x-app-layout>
    <div class="py-4">
        <div class="container">
            @php
                $viewer = auth()->user();
                $canCreateSubscriptions = $viewer?->hasAnyRole(['admin', 'ao', 'spv']) ?? false;
                $canApproveSubscriptions = $viewer?->hasAnyRole(['admin', 'ao']) ?? false;
                $canApprovePaid = $viewer?->hasAnyRole(['root', 'admin', 'ao']) ?? false;
                $statusClasses = [
                    'pending' => 'text-bg-warning text-dark',
                    'approved' => 'text-bg-info',
                    'active' => 'text-bg-success',
                    'expired' => 'text-bg-dark',
                    'cancelled' => 'text-bg-secondary',
                ];
            @endphp
            <div class="d-flex align-items-center justify-content-between mb-3">
                <h2 class="h5 mb-0">Customer Subscriptions</h2>
            </div>
            <p class="text-muted small mb-3">SPV registers subscription details. AO approves and generates the first invoice.</p>

            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if(session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif
            @if($errors->any())
                <div class="alert alert-danger">{{ $errors->first() }}</div>
            @endif

            {{-- Filter card hidden --}}
            {{-- <div class="card shadow-sm border-0 mb-3 subs_list_filter_card">
                <div class="card-body subs_list_filter_body">
                    <form method="get" action="{{ route('admin.customer-subscriptions.index') }}" class="row g-3 align-items-end subs_list_filter_form">
                        <div class="col-12 col-md-6 col-lg-3">
                            <label class="form-label">Keyword</label>
                            <input name="q" class="form-control" placeholder="Name, email, phone, car plate" value="{{ request('q') }}">
                        </div>
                        @unless(config('subs.single_site_mode'))
                            <div class="col-12 col-md-6 col-lg-2">
                                <label class="form-label">Site</label>
                                <select name="site_id" class="form-select">
                                    <option value="">All Sites</option>
                                    @foreach($sites as $site)
                                        <option value="{{ $site->id }}" @selected((string) request('site_id') === (string) $site->id)>{{ $site->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endunless
                        <div class="col-12 col-md-6 col-lg-2">
                            <label class="form-label">Status</label>
                            <select name="status" class="form-select">
                                <option value="">All</option>
                                @foreach(['pending', 'approved', 'active', 'cancelled'] as $status)
                                    <option value="{{ $status }}" @selected(request('status') === $status)>{{ ucfirst($status) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-lg-3">
                            <label class="form-label">Package</label>
                            <select name="season_pass_package_id" class="form-select">
                                <option value="">All Packages</option>
                                @foreach($packages as $package)
                                    <option value="{{ $package->id }}" @selected((string) request('season_pass_package_id') === (string) $package->id)>{{ $package->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-lg-2">
                            <label class="form-label">Line</label>
                            <select name="line" class="form-select">
                                <option value="">All Lines</option>
                                @foreach(\App\Models\ParkingLot::LINE_OPTIONS as $lineOption)
                                    <option value="{{ $lineOption }}" @selected(request('line') === $lineOption)>{{ $lineOption }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6 col-lg-2">
                            <label class="form-label">Commencement</label>
                            <input type="month" name="commencement_month" class="form-control" value="{{ request('commencement_month') }}">
                        </div>
                        <div class="col-12 d-flex gap-2 justify-content-end">
                            <button class="btn btn-primary subs_list_filter_submit">Search</button>
                            <a class="btn btn-outline-secondary subs_list_filter_reset" href="{{ route('admin.customer-subscriptions.index') }}">Reset</a>
                        </div>
                    </form>
                </div>
            </div> --}}

            <div class="card shadow-sm border-0 subs_table_card">
                <div class="card-body subs_table_card_body">
                    <div id="tableToolbar" class="d-flex align-items-center gap-2 mb-3">
                        <button type="button" class="btn btn-sm btn-outline-secondary js-refresh-list" title="Refresh list">
                            <i class="bi bi-arrow-clockwise"></i> Refresh List
                        </button>
                        @if($canCreateSubscriptions)
                            <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createSubscriptionModal">
                                Add Subscription
                            </button>
                        @endif
                        <a class="btn btn-outline-success btn-sm" data-no-ajax href="{{ route('admin.customer-subscriptions.export', request()->query()) }}">Export Excel</a>
                    </div>
                    <div class="table-responsive">
                        <table id="subscriptionsTable" class="table table-hover align-middle">
                            <thead class="table-light">
                            <tr>
                                <th data-field="no" style="width:50px">No</th>
                                <th data-field="customer">Customer</th>
                                <th data-field="car_plate">Car Plate</th>
                                <th data-field="package">Package</th>
                                <th data-field="commencement">Commencement</th>
                                <th data-field="duration">Duration</th>
                                <th data-field="end_month">End Month</th>
                                <th data-field="next_invoice">Next Invoice</th>
                                <th data-field="status" style="width:100px">Status</th>
                                <th data-field="actions" class="text-end" style="width:200px">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($subscriptions as $customerSubscription)
                                <tr>
                                    <td>{{ $loop->index + 1 }}</td>
                                    <td>
                                        <a href="{{ route('admin.customer-subscriptions.show', $customerSubscription) }}" class="text-decoration-none">
                                            <strong>{{ $customerSubscription->name }}</strong>
                                        </a>
                                        <div class="text-muted small">{{ $customerSubscription->email ?: '-' }} / {{ $customerSubscription->phone ?: '-' }}</div>
                                        @if(!empty($customerSubscription->attention_to))
                                            <div class="text-muted small">Attention: {{ $customerSubscription->attention_to }}</div>
                                        @endif
                                        @if($customerSubscription->parkingLotUsages->where('status', 'active')->isNotEmpty())
                                            <div class="text-muted small">
                                                Parking Allocation:
                                                {{ $customerSubscription->parkingLotUsages->where('status', 'active')->map(fn ($usage) => trim(implode(' / ', array_filter([
                                                    $usage->parkingLot?->line,
                                                    $usage->parkingLot?->lot_no,
                                                    $usage->parkingLot?->slot,
                                                    $usage->parkingLot?->bay_count ? ('Bay ' . $usage->parkingLot->bay_count) : null,
                                                ]))))->filter()->implode(', ') }}
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="fw-semibold">{{ $customerSubscription->car_plate ?: '-' }}</div>
                                    </td>
                                    <td>
                                        <div>{{ $customerSubscription->seasonPassPackage?->name ?? '-' }}</div>
                                        <div class="text-muted small">RM {{ number_format((float) $customerSubscription->monthly_amount, 2) }}</div>
                                    </td>
                                    <td>{{ optional($customerSubscription->commencement_month)->format('M Y') }}</td>
                                    <td>{{ $customerSubscription->duration_months ?? 1 }} month(s)</td>
                                    <td>{{ optional($customerSubscription->end_month)->format('M Y') ?: '-' }}</td>
                                    <td>{{ optional($customerSubscription->next_invoice_date)->format('d/m/Y') ?: '-' }}</td>
                                    <td>
                                        <span class="badge {{ $statusClasses[$customerSubscription->status] ?? 'text-bg-secondary' }}">{{ ucfirst($customerSubscription->status) }}</span>
                                        @if($customerSubscription->status === 'pending')
                                            <div class="text-muted small mt-1">Waiting AO approval</div>
                                        @elseif($customerSubscription->status === 'approved')
                                            <div class="text-muted small mt-1">Waiting generate invoice</div>
                                        @elseif($customerSubscription->status === 'active')
                                            <div class="text-muted small mt-1">Billing in progress</div>
                                        @elseif($customerSubscription->status === 'expired')
                                            <div class="text-muted small mt-1">Subscription ended</div>
                                        @endif
                                    </td>
                                    <td class="text-end">
                                        <div class="d-flex flex-wrap gap-2 justify-content-end">
                                            @if($canApproveSubscriptions && $customerSubscription->status === 'pending')
                                                <form method="post" action="{{ route('admin.customer-subscriptions.approve', $customerSubscription) }}">
                                                    @csrf
                                                    <button class="btn btn-sm btn-success" onclick="return confirm('Approve this subscription?')">Approve</button>
                                                </form>
                                            @endif
                                            @php
                                                $endMonth = $customerSubscription->end_month ? \Carbon\Carbon::parse($customerSubscription->end_month) : null;
                                                if ($customerSubscription->next_invoice_date && $endMonth) {
                                                    $canGenerateNextInvoice = !\Carbon\Carbon::parse($customerSubscription->next_invoice_date)->greaterThan($endMonth);
                                                } elseif ($customerSubscription->next_invoice_date && !$endMonth) {
                                                    $canGenerateNextInvoice = true;
                                                } else {
                                                    $canGenerateNextInvoice = false;
                                                }
                                            @endphp
                                            @if($canApproveSubscriptions && in_array($customerSubscription->status, ['approved', 'active'], true) && $canGenerateNextInvoice)
                                                <form method="post" action="{{ route('admin.customer-subscriptions.generateFirstInvoice', $customerSubscription) }}">
                                                    @csrf
                                                    <button class="btn btn-sm btn-outline-primary">Generate Invoice</button>
                                                </form>
                                            @elseif($canApprovePaid && in_array($customerSubscription->status, ['active', 'expired'], true) && !$canGenerateNextInvoice)
                                                <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#extendModal-{{ $customerSubscription->id }}">
                                                    Extend
                                                </button>
                                            @endif
                                            @if($customerSubscription->latestInvoice)
                                                <a href="{{ route('admin.customer-subscriptions.show', $customerSubscription) }}#invoices"
                                                   class="btn btn-sm btn-outline-dark">
                                                    View Invoice
                                                </a>
                                            @endif
                                            @if($canApproveSubscriptions)
                                                <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#editSubscriptionModal-{{ $customerSubscription->id }}">
                                                    Edit
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center text-muted py-4">No subscriptions.</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if($canCreateSubscriptions)
        <div class="modal fade" id="createSubscriptionModal" tabindex="-1" aria-labelledby="createSubscriptionModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="createSubscriptionModalLabel">Add Customer Subscription</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="px-3 pt-3">
                        <div class="alert alert-warning py-2 px-3 mb-0 small">
                            <i class="bi bi-info-circle"></i> New subscription will be set to <strong>Pending</strong> — waiting for AO approval.
                        </div>
                    </div>
                    <form method="post" action="{{ route('admin.customer-subscriptions.store') }}" class="row g-3 px-3 pb-3 js-subscription-form">
                        @csrf
                        @include('admin.customer-subscriptions.partials.form', ['customerSubscription' => null, 'customers' => $customers, 'sites' => $sites, 'packages' => $packages, 'parkingLots' => $parkingLots])
                        <div class="d-flex justify-content-end gap-2">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary js-subscription-submit">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    @if($canCreateSubscriptions)
        <div class="modal fade" id="quickAddCustomerModal" tabindex="-1" aria-labelledby="quickAddCustomerModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="quickAddCustomerModalLabel">Add Customer</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="post" action="{{ route('admin.customers.store') }}" class="row g-3 px-3 pb-3" id="quickAddCustomerForm">
                        @csrf
                        <div class="col-12">
                            <div class="alert alert-danger subs_modal_errors mb-0" data-subs-customer-errors></div>
                        </div>
                        @include('admin.customers.partials.form', ['customer' => null])
                        <div class="d-flex justify-content-end gap-2">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary" data-subs-customer-submit>Save Customer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    @if($canApproveSubscriptions)
        @foreach($subscriptions as $customerSubscription)
            <div class="modal fade" id="editSubscriptionModal-{{ $customerSubscription->id }}" tabindex="-1" aria-labelledby="editSubscriptionModalLabel-{{ $customerSubscription->id }}" aria-hidden="true">
                <div class="modal-dialog modal-xl modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="editSubscriptionModalLabel-{{ $customerSubscription->id }}">Edit Subscription #{{ $customerSubscription->id }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        @php
                            $statusNotes = [
                                'pending' => ['text' => 'Waiting for AO approval', 'class' => 'alert-warning', 'icon' => 'bi-clock'],
                                'approved' => ['text' => 'Waiting for first invoice generation', 'class' => 'alert-info', 'icon' => 'bi-receipt'],
                                'active' => ['text' => 'Subscription active — billing in progress', 'class' => 'alert-success', 'icon' => 'bi-check-circle'],
                                'cancelled' => ['text' => 'Subscription cancelled', 'class' => 'alert-secondary', 'icon' => 'bi-x-circle'],
                            ];
                            $note = $statusNotes[$customerSubscription->status] ?? null;
                            $modalEndMonth = $customerSubscription->end_month ? \Carbon\Carbon::parse($customerSubscription->end_month) : null;
                            if ($customerSubscription->next_invoice_date && $modalEndMonth) {
                                $modalCanGenerateNextInvoice = !\Carbon\Carbon::parse($customerSubscription->next_invoice_date)->greaterThan($modalEndMonth);
                            } elseif ($customerSubscription->next_invoice_date && !$modalEndMonth) {
                                $modalCanGenerateNextInvoice = true;
                            } else {
                                $modalCanGenerateNextInvoice = false;
                            }
                        @endphp
                        @if($note)
                            <div class="px-3 pt-3">
                                <div class="alert {{ $note['class'] }} py-2 px-3 mb-0 small d-flex align-items-center justify-content-between">
                                    <span><i class="bi {{ $note['icon'] }}"></i> {{ $note['text'] }}.</span>
                                    @if($customerSubscription->status === 'pending' && $canApproveSubscriptions)
                                        <form method="post" action="{{ route('admin.customer-subscriptions.approve', $customerSubscription) }}" class="d-inline">
                                            @csrf
                                            <button class="btn btn-sm btn-success" onclick="return confirm('Approve this subscription?')">Approve</button>
                                        </form>
                                    @elseif($customerSubscription->status === 'approved' && $canApproveSubscriptions && $modalCanGenerateNextInvoice)
                                        <form method="post" action="{{ route('admin.customer-subscriptions.generateFirstInvoice', $customerSubscription) }}" class="d-inline">
                                            @csrf
                                            <button class="btn btn-sm btn-primary">Generate Invoice</button>
                                        </form>
                                    @elseif(in_array($customerSubscription->status, ['active', 'expired'], true) && $canApprovePaid && !$modalCanGenerateNextInvoice)
                                        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#extendModal-{{ $customerSubscription->id }}">
                                            Extend
                                        </button>
                                    @endif
                                </div>
                            </div>
                        @endif
                        <form method="post" action="{{ route('admin.customer-subscriptions.update', $customerSubscription) }}" class="row g-3 px-3 pb-3 js-subscription-form">
                            @csrf
                            @method('put')
                            @include('admin.customer-subscriptions.partials.form', ['customerSubscription' => $customerSubscription, 'customers' => $customers, 'sites' => $sites, 'packages' => $packages, 'parkingLots' => $parkingLots])
                            <div class="d-flex justify-content-end gap-2">
                                <button type="button" class="btn btn-outline-danger" onclick="if(confirm('Delete this subscription?')) document.getElementById('deleteSubscriptionForm-{{ $customerSubscription->id }}').submit();">Delete</button>
                                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-primary js-subscription-submit">Save</button>
                            </div>
                        </form>
                        <form id="deleteSubscriptionForm-{{ $customerSubscription->id }}" method="post" action="{{ route('admin.customer-subscriptions.destroy', $customerSubscription) }}" class="d-none">
                            @csrf
                            @method('delete')
                        </form>
                    </div>
                </div>
            </div>
        @endforeach
    @endif

    @push('scripts')
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.5/dist/bootstrap-table.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                $('#subscriptionsTable').bootstrapTable({
                    toolbar: '#tableToolbar',
                    search: true,
                    searchAlign: 'right',
                    pagination: true,
                    pageSize: 20,
                    pageList: [10, 20, 50],
                    sortable: true
                });

                const quickAddModalEl = document.getElementById('quickAddCustomerModal');
                const quickAddForm = document.getElementById('quickAddCustomerForm');
                const errorBox = quickAddForm?.querySelector('[data-subs-customer-errors]');
                const submitButton = quickAddForm?.querySelector('[data-subs-customer-submit]');
                let activeCustomerSelect = null;
                let activeSubscriptionModalEl = null;

                const formatCustomerOption = (state) => {
                    if (!state.id) {
                        return state.text;
                    }

                    const element = state.element;
                    if (!element) {
                        return state.text;
                    }

                    const name = element.dataset.name || state.text || '-';
                    const meta = [element.dataset.email, element.dataset.phone].filter(Boolean).join(' | ');
                    return $(
                        `<div><div class="subs_customer_option_name"></div><div class="subs_customer_option_meta"></div></div>`
                    ).find('.subs_customer_option_name').text(name).end()
                        .find('.subs_customer_option_meta').text(meta || 'No email / phone').end();
                };

                const initCustomerSelect = (select) => {
                    if (!select || !window.jQuery || !window.jQuery.fn.select2) return;
                    if (select.dataset.select2Ready === '1') return;

                    const $select = window.jQuery(select);
                    const parentModal = select.closest('.modal');
                    const wrapper = document.createElement('div');
                    wrapper.className = 'subs_customer_select_wrap flex-grow-1';
                    select.parentNode.insertBefore(wrapper, select);
                    wrapper.appendChild(select);

                    $select.select2({
                        width: '100%',
                        placeholder: '-- Select Customer --',
                        allowClear: true,
                        dropdownParent: parentModal ? window.jQuery(parentModal) : window.jQuery(document.body),
                        templateResult: formatCustomerOption,
                        templateSelection: formatCustomerOption,
                    });

                    $select.on('select2:open', () => {
                        const input = document.querySelector('.select2-container--open .select2-search__field');
                        if (input) {
                            input.placeholder = 'Search customer name, email, or phone';
                        }
                    });

                    $select.on('change select2:select select2:clear', () => {
                        const form = select.closest('form');
                        if (form?.__subsSyncCustomerFields) {
                            form.__subsSyncCustomerFields();
                        }
                    });

                    select.dataset.select2Ready = '1';
                };

                document.querySelectorAll('[data-subs-customer-select]').forEach(initCustomerSelect);

                document.querySelectorAll('[data-subs-add-customer-trigger]').forEach((button) => {
                    button.addEventListener('click', () => {
                        const form = button.closest('form');
                        activeCustomerSelect = form?.__subsCustomerSelect ?? null;
                        activeSubscriptionModalEl = button.closest('.modal');
                        if (quickAddForm) {
                            quickAddForm.reset();
                        }
                        if (errorBox) {
                            errorBox.innerHTML = '';
                        }
                        if (quickAddModalEl && window.bootstrap) {
                            bootstrap.Modal.getOrCreateInstance(quickAddModalEl).show();
                        }
                    });
                });

                if (quickAddModalEl) {
                    quickAddModalEl.addEventListener('hidden.bs.modal', () => {
                        if (!activeSubscriptionModalEl || !window.bootstrap) {
                            return;
                        }

                        const parentInstance = bootstrap.Modal.getOrCreateInstance(activeSubscriptionModalEl);
                        if (!activeSubscriptionModalEl.classList.contains('show')) {
                            parentInstance.show();
                        }
                    });
                }

                if (quickAddForm) {
                    quickAddForm.addEventListener('submit', async (event) => {
                        event.preventDefault();
                        if (!submitButton) return;

                        submitButton.disabled = true;
                        submitButton.textContent = 'Saving...';
                        if (errorBox) {
                            errorBox.innerHTML = '';
                        }

                        try {
                            const response = await fetch(quickAddForm.action, {
                                method: 'POST',
                                headers: {
                                    'Accept': 'application/json',
                                    'X-Requested-With': 'XMLHttpRequest',
                                    'X-CSRF-TOKEN': quickAddForm.querySelector('input[name="_token"]').value,
                                },
                                body: new FormData(quickAddForm),
                            });

                            const payload = await response.json();

                            if (!response.ok) {
                                const errors = payload.errors || {};
                                const messages = Object.values(errors).flat();
                                throw new Error(messages.length ? messages.join('<br>') : (payload.message || 'Failed to create customer.'));
                            }

                            const customer = payload.customer;
                            if (!activeCustomerSelect || !customer) {
                                throw new Error('Customer was created but the subscription form was not found.');
                            }

                            const option = new Option(
                                [customer.name, customer.email, customer.phone].filter(Boolean).join(' | '),
                                customer.id,
                                true,
                                true
                            );

                            option.setAttribute('data-customer-type', customer.customer_type || '');
                            option.setAttribute('data-ic-passport', customer.ic_passport || '');
                            option.setAttribute('data-tin-no', customer.tin_no || '');
                            option.setAttribute('data-name', customer.name || '');
                            option.setAttribute('data-email', customer.email || '');
                            option.setAttribute('data-phone', customer.phone || '');
                            option.setAttribute('data-attention-to', customer.attention_to || '');
                            option.setAttribute('data-fax-no', customer.fax_no || '');

                            activeCustomerSelect.add(option);
                            if (window.jQuery && window.jQuery.fn.select2) {
                                window.jQuery(activeCustomerSelect).trigger('change');
                            } else {
                                activeCustomerSelect.dispatchEvent(new Event('change', { bubbles: true }));
                            }

                            const parentForm = activeCustomerSelect.closest('form');
                            if (parentForm?.__subsSyncCustomerFields) {
                                parentForm.__subsSyncCustomerFields(true);
                            }

                            bootstrap.Modal.getOrCreateInstance(quickAddModalEl).hide();
                            quickAddForm.reset();
                        } catch (error) {
                            if (errorBox) {
                                errorBox.innerHTML = error.message || 'Failed to create customer.';
                            }
                        } finally {
                            submitButton.disabled = false;
                            submitButton.textContent = 'Save Customer';
                        }
                    });
                }

                // Disable subscription save buttons while submitting to prevent duplicate entries
                document.querySelectorAll('.js-subscription-form').forEach((form) => {
                    form.addEventListener('submit', () => {
                        const submitBtn = form.querySelector('.js-subscription-submit');
                        if (!submitBtn) return;

                        submitBtn.disabled = true;
                        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Saving...';
                    });
                });
            });
        </script>
    @endpush
</x-app-layout>