{{-- 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-table@1.23.5/dist/bootstrap-table.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<style>
    @keyframes spin { 100% { transform: rotate(360deg); } }
    .spin { animation: spin 0.8s linear infinite; }
</style>
@endpush

<x-app-layout>
    <div class="py-4">
        <div class="container">
            <div class="d-flex align-items-center justify-content-between mb-3">
                <div>
                    <h2 class="h5 mb-0">Subscription #{{ $subscription->id }}</h2>
                    <p class="text-muted mb-0">{{ $subscription->name }} — {{ $subscription->site?->name ?? '-' }}</p>
                </div>
                <a href="{{ route('admin.customer-subscriptions.index') }}" class="btn btn-outline-secondary btn-sm">Back to List</a>
            </div>

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

            @php
                $viewer = auth()->user();
                $canGenerateInvoice = $viewer?->hasAnyRole(['root', 'admin', 'ao', 'spv']) ?? false;
                $canMarkPaid = $viewer?->hasAnyRole(['root', 'admin', 'ao', 'spv']) ?? false;
                $canApprovePaid = $viewer?->hasAnyRole(['root', 'admin', 'ao']) ?? false;
                $canSubmitLhdn = $viewer?->hasAnyRole(['root', 'admin', 'ao']) ?? false;
            @endphp

            @php
                $customer = $subscription->customer;
                $stateOptions = [
                    'Johor', 'Kedah', 'Kelantan', 'Melaka', 'Negeri Sembilan',
                    'Pahang', 'Pulau Pinang', 'Perak', 'Perlis', 'Selangor',
                    'Terengganu', 'Sabah', 'Sarawak', 'Kuala Lumpur', 'Labuan',
                    'Putrajaya', 'Not Applicable',
                ];
                $editableFields = [
                    ['key' => 'customer_type', 'label' => 'Customer Type', 'type' => 'select', 'options' => ['individual' => 'Individual', 'company' => 'Company']],
                    ['key' => 'name', 'label' => 'Name', 'type' => 'text'],
                    ['key' => 'email', 'label' => 'Email', 'type' => 'email'],
                    ['key' => 'phone', 'label' => 'Phone', 'type' => 'text'],
                    ['key' => 'ic_passport', 'label' => $customer?->customer_type === 'company' ? 'BRN' : 'IC / Passport', 'type' => 'text'],
                    ['key' => 'tin_no', 'label' => 'TIN', 'type' => 'text'],
                    ['key' => 'address_line1', 'label' => 'Address Line 1', 'type' => 'text'],
                    ['key' => 'address_line2', 'label' => 'Address Line 2', 'type' => 'text'],
                    ['key' => 'city', 'label' => 'City', 'type' => 'text'],
                    ['key' => 'state', 'label' => 'State', 'type' => 'select', 'options' => array_combine($stateOptions, $stateOptions)],
                    ['key' => 'postcode', 'label' => 'Postcode', 'type' => 'text'],
                    ['key' => 'country', 'label' => 'Country', 'type' => 'text'],
                ];
            @endphp

            <ul class="nav nav-tabs mb-3" id="subscriptionTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="subscription-tab" data-bs-toggle="tab" data-bs-target="#subscription-tab-pane" type="button" role="tab" aria-controls="subscription-tab-pane" aria-selected="true">
                        Subscription Details
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="customer-tab" data-bs-toggle="tab" data-bs-target="#customer-tab-pane" type="button" role="tab" aria-controls="customer-tab-pane" aria-selected="false">
                        Customer Details (LHDN)
                    </button>
                </li>
            </ul>

            <div class="tab-content mb-4" id="subscriptionTabsContent">
                <div class="tab-pane fade show active" id="subscription-tab-pane" role="tabpanel" aria-labelledby="subscription-tab" tabindex="0">
                    <div class="row g-3">
                        <div class="col-12 col-lg-6">
                            <div class="card shadow-sm border-0 h-100">
                                <div class="card-body">
                                    <div class="d-flex align-items-center justify-content-between mb-3">
                                        <h6 class="card-title text-muted small mb-0">Subscription Details</h6>
                                    </div>
                                    <div class="row g-2">
                                        <div class="col-6">
                                            <div class="text-muted small">Customer</div>
                                            <div class="fw-semibold">{{ $subscription->name }}</div>
                                            <div class="text-muted small">{{ $subscription->email ?: '-' }}</div>
                                            <div class="text-muted small">{{ $subscription->phone ?: '-' }}</div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-muted small">Site</div>
                                            <div class="fw-semibold">{{ $subscription->site?->name ?? '-' }}</div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-muted small">Package</div>
                                            <div class="fw-semibold">{{ $subscription->seasonPassPackage?->name ?? '-' }}</div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-muted small">Monthly Amount</div>
                                            <div class="fw-semibold">RM {{ number_format((float) $subscription->monthly_amount, 2) }}</div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-muted small">Status</div>
                                            <div>
                                        @php
                                            $subStatusClasses = [
                                                'pending' => 'text-bg-warning text-dark',
                                                'approved' => 'text-bg-info',
                                                'active' => 'text-bg-success',
                                                'expired' => 'text-bg-dark',
                                                'cancelled' => 'text-bg-secondary',
                                            ];
                                        @endphp
                                                <span class="badge {{ $subStatusClasses[$subscription->status] ?? 'text-bg-secondary' }}">
                                                    {{ ucfirst($subscription->status) }}
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-muted small">Car Plate</div>
                                            <div class="fw-semibold">{{ $subscription->car_plate ?: '-' }}</div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-muted small">Commencement</div>
                                            <div class="fw-semibold">{{ $subscription->commencement_month ? \Carbon\Carbon::parse($subscription->commencement_month)->format('M Y') : '-' }}</div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-muted small">Duration</div>
                                            <div class="fw-semibold">{{ $subscription->duration_months ?? 1 }} month(s)</div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-muted small">End Month</div>
                                            <div class="fw-semibold">{{ $subscription->end_month ? \Carbon\Carbon::parse($subscription->end_month)->format('M Y') : '-' }}</div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-muted small">Next Invoice</div>
                                            <div class="fw-semibold">{{ $subscription->next_invoice_date ? \Carbon\Carbon::parse($subscription->next_invoice_date)->format('d/m/Y') : '-' }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-lg-6">
                            <div class="card shadow-sm border-0 h-100">
                                <div class="card-body">
                                    <h6 class="card-title text-muted small mb-3">Parking Allocation</h6>
                                    @php
                                        $activeUsages = $subscription->parkingLotUsages->where('status', 'active');
                                    @endphp
                                    @if($activeUsages->isNotEmpty())
                                        @foreach($activeUsages as $usage)
                                            @php
                                                $lot = $usage->parkingLot;
                                                $parts = array_filter([
                                                    $lot?->line,
                                                    $lot?->lot_no,
                                                    $lot?->slot,
                                                    $lot?->bay_count ? ('Bay ' . $lot->bay_count) : null,
                                                ]);
                                            @endphp
                                            <div class="mb-1">{{ implode(' / ', $parts) ?: '-' }}</div>
                                        @endforeach
                                    @else
                                        <div class="text-muted">No active parking allocation.</div>
                                    @endif

                                    @if($subscription->notes)
                                        <hr>
                                        <h6 class="card-title text-muted small mb-2">Notes</h6>
                                        <div>{{ $subscription->notes }}</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="customer-tab-pane" role="tabpanel" aria-labelledby="customer-tab" tabindex="0">
                    <div class="card shadow-sm border-0">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between mb-3">
                                <h6 class="card-title text-muted small mb-0">Customer Details (LHDN)</h6>
                            </div>
                            <div class="row g-3">
                                @foreach($editableFields as $field)
                                    @php
                                        $value = $customer?->{$field['key']};
                                        $displayValue = $value ?: '-';
                                        if ($field['key'] === 'customer_type') {
                                            $displayValue = ucfirst($displayValue);
                                        }
                                    @endphp
                                    <div class="col-12 col-md-6 col-lg-4">
                                        <div class="text-muted small">{{ $field['label'] }}</div>
                                        <div class="d-flex align-items-center gap-2 editable-field" data-field="{{ $field['key'] }}">
                                            <div class="fw-semibold field-value flex-grow-1">{{ $displayValue }}</div>
                                            @if($canApprovePaid)
                                                <button type="button" class="btn btn-sm btn-link text-primary p-0 ms-auto field-edit-btn" title="Edit {{ $field['label'] }}">
                                                    <i class="bi bi-pencil-square"></i>
                                                </button>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div id="customerFieldFeedback" class="mt-3 small" style="display:none;"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="invoices" class="card shadow-sm border-0 subs_table_card">
                <div class="card-body subs_table_card_body">
                    @php
                        $endMonth = $subscription->end_month ? \Carbon\Carbon::parse($subscription->end_month) : null;
                        if ($subscription->next_invoice_date && $endMonth) {
                            $canGenerateNextInvoice = !\Carbon\Carbon::parse($subscription->next_invoice_date)->greaterThan($endMonth);
                        } elseif ($subscription->next_invoice_date && !$endMonth) {
                            $canGenerateNextInvoice = true;
                        } else {
                            $canGenerateNextInvoice = false;
                        }
                    @endphp
                    <div id="tableToolbar" class="d-flex align-items-center gap-2 mb-3">
                        <h6 class="mb-0">Invoices ({{ $subscription->invoices->count() }})</h6>
                        <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(in_array($subscription->status, ['approved', 'active'], true) && $canGenerateInvoice && $canGenerateNextInvoice)
                            <form method="post" action="{{ route('admin.customer-subscriptions.generateFirstInvoice', $subscription) }}" class="d-inline">
                                @csrf
                                <button class="btn btn-sm btn-primary" onclick="return confirm('Generate invoice for this subscription?')">Generate Invoice</button>
                            </form>
                        @elseif(in_array($subscription->status, ['active', 'expired'], true) && !$canGenerateNextInvoice && $canApprovePaid)
                            <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#extendModal">
                                Extend
                            </button>
                        @endif
                    </div>

                    @php
                        $paymentStatusClasses = [
                            'unpaid' => 'text-bg-warning text-dark',
                            'paid' => 'text-bg-success',
                            'cancelled' => 'text-bg-secondary',
                        ];
                        $submissionStatusClasses = [
                            'pending' => 'text-bg-secondary',
                            'new_request' => 'text-bg-info',
                            'approved' => 'text-bg-info',
                            'waiting_validation' => 'text-bg-warning text-dark',
                            'validated' => 'text-bg-success',
                            'failed' => 'text-bg-danger',
                            'einvoice_sent_to_customer' => 'text-bg-success',
                            'cancelled' => 'text-bg-secondary',
                        ];
                        $canMarkPaid = $viewer?->hasAnyRole(['root', 'admin', 'ao', 'spv']) ?? false;
                        $canApprovePaid = $viewer?->hasAnyRole(['root', 'admin', 'ao']) ?? false;
                    @endphp

                    <div class="table-responsive">
                        <table id="invoicesTable" class="table table-hover align-middle">
                            <thead class="table-light">
                            <tr>
                                <th data-field="no" style="width:50px">No</th>
                                <th data-field="invoice_no">Invoice No</th>
                                <th data-field="cycle">Cycle Month</th>
                                <th data-field="amount" style="width:100px">Amount</th>
                                <th data-field="payment_status" style="width:120px">Payment</th>
                                <th data-field="emailed" style="width:100px">Emailed</th>
                                <th data-field="einvoice_status" style="width:130px">E-Invoice</th>
                                <th data-field="due_date" style="width:100px">Due Date</th>
                                <th data-field="actions" style="width:200px">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($subscription->invoices->sortByDesc('invoice_cycle_month') as $invoice)
                                <tr>
                                    <td>{{ $loop->index + 1 }}</td>
                                    <td>
                                        <div class="fw-semibold">{{ $invoice->invoice_no ?: '-' }}</div>
                                    </td>
                                    <td>
                                        {{ $invoice->invoice_cycle_month ? \Carbon\Carbon::parse($invoice->invoice_cycle_month)->format('M Y') : '-' }}
                                    </td>
                                    <td class="fw-semibold">RM {{ number_format((float) $invoice->amount, 2) }}</td>
                                    <td>
                                        @php $payStatus = $invoice->invoice_status ?? 'unpaid'; @endphp
                                        <span class="badge {{ $paymentStatusClasses[$payStatus] ?? 'text-bg-secondary' }}">
                                            {{ ucfirst($payStatus) }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($invoice->emailed_at)
                                            <span class="badge text-bg-success"><i class="bi bi-check-circle me-1"></i>Yes</span>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td>
                                        @php $einStatus = $invoice->status; @endphp
                                        @if($einStatus)
                                            @php
                                                $einLabel = str_replace('_', ' ', ucfirst($einStatus));
                                                $einLabelLines = implode('<br>', explode(' ', $einLabel));
                                            @endphp
                                            @if($einStatus === 'failed' && ($invoice->lhdn_error || $invoice->lhdn_error_details))
                                                @php
                                                    $errorTooltip = $invoice->lhdn_error ?: '';
                                                    if (!empty($invoice->lhdn_error_details) && is_array($invoice->lhdn_error_details)) {
                                                        $detailMessages = collect($invoice->lhdn_error_details)
                                                            ->map(fn($d) => is_string($d) ? $d : ($d['message'] ?? null))
                                                            ->filter()
                                                            ->unique()
                                                            ->implode(' | ');
                                                        if ($detailMessages) {
                                                            $errorTooltip .= ($errorTooltip ? ' | ' : '') . $detailMessages;
                                                        }
                                                    }
                                                    $errorTooltip = trim($errorTooltip) ?: 'Submission failed';
                                                @endphp
                                                <span class="badge {{ $submissionStatusClasses[$einStatus] ?? 'text-bg-secondary' }}"
                                                      data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ $errorTooltip }}">
                                                    {!! $einLabelLines !!}
                                                </span>
                                            @else
                                                <span class="badge {{ $submissionStatusClasses[$einStatus] ?? 'text-bg-secondary' }}">
                                                    {!! $einLabelLines !!}
                                                </span>
                                            @endif
                                        @endif
                                    </td>
                                    <td>{{ $invoice->due_date ? \Carbon\Carbon::parse($invoice->due_date)->format('d/m/Y') : '-' }}</td>
                                    <td>
                                        @php
                                            $payStatus = $invoice->invoice_status ?? 'unpaid';
                                            $einStatus = $invoice->status;
                                        @endphp
                                        <div class="d-flex flex-wrap gap-1 justify-content-end">
                                            @if($canMarkPaid && $payStatus === 'unpaid' && $einStatus !== 'cancelled')
                                                @if($invoice->emailed_at)
                                                    <button type="button" class="btn btn-sm btn-outline-success" data-bs-toggle="modal" data-bs-target="#markPaidModal-{{ $invoice->id }}">Mark Paid</button>
                                                @else
                                                    <a href="{{ route('invoices.preview', $invoice) }}" target="_blank" class="btn btn-sm btn-outline-warning">Send First</a>
                                                @endif
                                            @endif
                                            @if($canApprovePaid && $payStatus === 'paid' && !$invoice->payment_approved_at)
                                                <form method="post" action="{{ route('admin.requests.approvePaid', $invoice) }}" class="d-inline js-action-form" data-confirm="Approve this payment? Receipt will be emailed to customer.">
                                                    @csrf
                                                    <button class="btn btn-sm btn-success js-action-btn" data-loading-text="Approving...">Approve</button>
                                                </form>
                                            @endif
                                            @if($canSubmitLhdn && $payStatus === 'paid' && $invoice->payment_approved_at && $invoice->customer_requested_at && in_array($einStatus, ['new_request', 'failed']))
                                                <form method="post" action="{{ route('admin.requests.approve', $invoice) }}" class="d-inline js-action-form" data-confirm="Submit this invoice to LHDN?">
                                                    @csrf
                                                    <button class="btn btn-sm btn-primary js-action-btn" data-loading-text="Submitting..."><i class="bi bi-send me-1"></i>Submit LHDN</button>
                                                </form>
                                            @endif
                                            @if($canSubmitLhdn && $invoice->lhdn_uuid && in_array($einStatus, ['waiting_validation', 'submitted']))
                                                <form method="post" action="{{ route('admin.submissions.checkStatus', $invoice) }}" class="d-inline js-action-form" data-confirm="Check LHDN validation status now?">
                                                    @csrf
                                                    <button class="btn btn-sm btn-outline-info js-action-btn" data-loading-text="Checking..."><i class="bi bi-arrow-clockwise me-1"></i>Check Status</button>
                                                </form>
                                            @endif
                                            @if($payStatus === 'paid')
                                                <a href="{{ route('invoices.preview', $invoice) }}" target="_blank" class="btn btn-sm btn-outline-dark">Preview</a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="text-center text-muted py-4">No invoices yet.</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if(in_array($subscription->status, ['active', 'expired']) && $canApprovePaid)
        <div class="modal fade" id="extendModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-sm modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title">Extend Subscription</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="post" action="{{ route('admin.customer-subscriptions.extend', $subscription) }}">
                        @csrf
                        <div class="modal-body">
                            <div class="mb-2 text-muted small">{{ $subscription->seasonPassPackage?->name ?? '-' }} — RM {{ number_format((float) $subscription->monthly_amount, 2) }}/month</div>
                            <div class="mb-2 text-muted small">Current lot: {{ $subscription->parkingLotUsages->where('status', 'active')->pluck('parkingLot.lot_no')->filter()->implode(', ') ?: '-' }}</div>
                            <label class="form-label">Add Months</label>
                            <select name="extend_months" class="form-select" id="extendMonths" required>
                                @foreach(range(1, 12) as $m)
                                    <option value="{{ $m }}">{{ $m }} month(s)</option>
                                @endforeach
                            </select>
                            <div class="mt-2">
                                <div class="text-muted small">New End Month</div>
                                <div class="fw-semibold" id="extendEndMonth">-</div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary btn-sm">Extend Subscription</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    @foreach($subscription->invoices as $invoice)
        <div class="modal fade" id="markPaidModal-{{ $invoice->id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-sm modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title">Mark as Paid</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="post" action="{{ route('admin.requests.markPaid', $invoice) }}">
                        @csrf
                        <div class="modal-body">
                            <div class="mb-2 text-muted small">{{ $invoice->invoice_no }}</div>
                            <label class="form-label">Payment Date</label>
                            <input type="date" name="payment_date" class="form-control" value="{{ now()->format('Y-m-d') }}" required>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-success btn-sm">Mark Paid</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endforeach

    @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/bootstrap-table@1.23.5/dist/bootstrap-table.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                $('#invoicesTable').bootstrapTable({
                    toolbar: '#tableToolbar',
                    search: true,
                    searchAlign: 'right',
                    pagination: true,
                    pageSize: 20,
                    pageList: [10, 20, 50],
                    sortable: true
                });

                document.querySelectorAll('.js-action-form').forEach((form) => {
                    form.addEventListener('submit', (event) => {
                        const confirmMsg = form.dataset.confirm;
                        if (confirmMsg && !confirm(confirmMsg)) {
                            event.preventDefault();
                            return;
                        }
                        const btn = form.querySelector('.js-action-btn');
                        if (btn) {
                            const loadingText = btn.dataset.loadingText || 'Processing...';
                            btn.disabled = true;
                            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>' + loadingText;
                        }
                    });
                });

                const extendMonths = document.getElementById('extendMonths');
                const extendEndMonth = document.getElementById('extendEndMonth');
                if (extendMonths && extendEndMonth) {
                    const currentEndMonth = '{{ $subscription->end_month ? \Carbon\Carbon::parse($subscription->end_month)->format("Y-m") : ($subscription->commencement_month ? \Carbon\Carbon::parse($subscription->commencement_month)->format("Y-m") : "") }}';
                    const calcExtendEnd = () => {
                        if (!currentEndMonth) { extendEndMonth.textContent = '-'; return; }
                        const parts = currentEndMonth.split('-');
                        const d = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1 + parseInt(extendMonths.value), 1);
                        extendEndMonth.textContent = d.toLocaleString('en', { month: 'short', year: 'numeric' });
                    };
                    extendMonths.addEventListener('change', calcExtendEnd);
                    calcExtendEnd();
                }

                const initTooltips = () => {
                    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((el) => {
                        const existing = bootstrap.Tooltip.getInstance(el);
                        if (existing) existing.dispose();
                        new bootstrap.Tooltip(el);
                    });
                };
                initTooltips();

                // Inline customer field editing
                const editableOptions = {
                    customer_type: `<select class="form-select form-select-sm field-input"><option value="individual">Individual</option><option value="company">Company</option></select>`,
                    state: `<select class="form-select form-select-sm field-input">@foreach($stateOptions as $stateOption)<option value="{{ $stateOption }}">{{ $stateOption }}</option>@endforeach</select>`,
                };

                const showFieldFeedback = (message, type = 'success') => {
                    const fb = document.getElementById('customerFieldFeedback');
                    if (!fb) return;
                    fb.textContent = message;
                    fb.className = `mt-3 small alert ${type === 'success' ? 'alert-success' : 'alert-danger'} py-2 px-3`;
                    fb.style.display = 'block';
                    setTimeout(() => { fb.style.display = 'none'; }, 3000);
                };

                const restoreEditableField = (wrapper, value) => {
                    const field = wrapper.dataset.field;
                    const displayValue = value || '-';
                    const label = wrapper.closest('.col-12, .col-md-6, .col-lg-4')?.querySelector('.text-muted')?.textContent || field;
                    wrapper.innerHTML = `
                        <div class="fw-semibold field-value flex-grow-1">${displayValue}</div>
                        <button type="button" class="btn btn-sm btn-link text-primary p-0 ms-auto field-edit-btn" title="Edit ${label}">
                            <i class="bi bi-pencil-square"></i>
                        </button>
                    `;
                };

                document.querySelectorAll('.editable-field').forEach((wrapper) => {
                    wrapper.addEventListener('click', (event) => {
                        const editBtn = event.target.closest('.field-edit-btn');
                        if (!editBtn) return;

                        const field = wrapper.dataset.field;
                        const valueEl = wrapper.querySelector('.field-value');
                        const currentValue = valueEl ? valueEl.textContent.trim() : '';
                        const cleanValue = currentValue === '-' ? '' : currentValue;

                        let inputHtml = editableOptions[field];
                        if (!inputHtml) {
                            const type = field === 'email' ? 'email' : 'text';
                            inputHtml = `<input type="${type}" class="form-control form-control-sm field-input" value="${cleanValue}">`;
                        }

                        wrapper.innerHTML = `
                            <div class="flex-grow-1">${inputHtml}</div>
                            <button type="button" class="btn btn-sm btn-success p-0 px-2 field-save-btn" title="Save"><i class="bi bi-check"></i></button>
                            <button type="button" class="btn btn-sm btn-outline-secondary p-0 px-2 field-cancel-btn" title="Cancel"><i class="bi bi-x"></i></button>
                        `;

                        const input = wrapper.querySelector('.field-input');
                        if (input) {
                            if (input.tagName === 'SELECT') {
                                const options = Array.from(input.options);
                                const match = options.find((opt) => opt.textContent.trim().toLowerCase() === cleanValue.toLowerCase());
                                input.value = match ? match.value : cleanValue;
                            } else {
                                input.value = cleanValue;
                            }
                            input.focus();
                        }

                        const saveBtn = wrapper.querySelector('.field-save-btn');
                        const cancelBtn = wrapper.querySelector('.field-cancel-btn');

                        cancelBtn.addEventListener('click', () => restoreEditableField(wrapper, currentValue));

                        saveBtn.addEventListener('click', () => {
                            const newValue = input ? (input.tagName === 'SELECT' ? input.value : input.value.trim()) : '';
                            saveBtn.disabled = true;
                            saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';

                            fetch('{{ route('admin.customer-subscriptions.update-customer-field', $subscription) }}', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
                                    'Accept': 'application/json',
                                },
                                body: JSON.stringify({ field, value: newValue }),
                            })
                                .then((response) => response.json())
                                .then((data) => {
                                    if (data.ok) {
                                        showFieldFeedback(data.message || 'Updated.');
                                        restoreEditableField(wrapper, data.value || newValue);
                                        setTimeout(() => window.location.reload(), 800);
                                    } else {
                                        showFieldFeedback(data.message || 'Update failed.', 'error');
                                        restoreEditableField(wrapper, currentValue);
                                    }
                                })
                                .catch(() => {
                                    showFieldFeedback('Network error. Please try again.', 'error');
                                    restoreEditableField(wrapper, currentValue);
                                });
                        });
                    });
                });

                document.querySelectorAll('.js-refresh-invoices').forEach((btn) => {
                    btn.addEventListener('click', () => {
                        const icon = btn.querySelector('i');
                        if (icon) icon.classList.add('spin');
                        btn.disabled = true;

                        // Destroy existing bootstrap-table before refresh
                        try { $('#invoicesTable').bootstrapTable('destroy'); } catch(e) {}

                        fetch(btn.dataset.url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                            .then((response) => response.text())
                            .then((html) => {
                                const parser = new DOMParser();
                                const doc = parser.parseFromString(html, 'text/html');
                                const newCard = doc.getElementById('invoices');
                                const currentCard = document.getElementById('invoices');
                                if (newCard && currentCard) {
                                    currentCard.innerHTML = newCard.innerHTML;
                                    // Re-init bootstrap-table after content replacement
                                    setTimeout(() => {
                                        $('#invoicesTable').bootstrapTable({
                                            toolbar: '#tableToolbar',
                                            search: true,
                                            searchAlign: 'right',
                                            pagination: true,
                                            pageSize: 20,
                                            pageList: [10, 20, 50],
                                            sortable: true
                                        });
                                        initTooltips();
                                    }, 100);
                                }
                            })
                            .catch(() => alert('Failed to refresh invoices.'))
                            .finally(() => {
                                if (icon) icon.classList.remove('spin');
                                btn.disabled = false;
                            });
                    });
                });
            });
        </script>
    @endpush
</x-app-layout>