{{-- Author By : zulfazdliabuas@gmail.com | Date : 2026 --}}
@php
    use Illuminate\Support\Facades\Storage;
    use Illuminate\Support\Str;
@endphp
@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>
    .requests-page .container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
</style>
@endpush

<x-app-layout>
    <div class="py-4 requests-page">
        <div class="container">
            @php
                $viewer = auth()->user();
                $canCreateRequests = $viewer?->hasAnyRole(['admin', 'ao', 'spv']) ?? false;
                $canAmendRequests = $viewer?->hasAnyRole(['admin', 'ao']) ?? false;
                $canSubmitToLhdn = $viewer?->hasAnyRole(['admin', 'ao']) ?? false;
                $canMarkPaid = $viewer?->hasAnyRole(['admin', 'ao', 'spv']) ?? false;
                $invoiceStatusClasses = [
                    'unpaid' => 'text-bg-warning text-dark',
                    'paid' => 'text-bg-success',
                    'cancelled' => 'text-bg-secondary',
                ];
                $statusClasses = [
                            'pending' => 'text-bg-secondary',
                            'new_request' => 'text-bg-info',
                            'approved' => 'text-bg-info',
                    'waiting_validation' => 'text-bg-warning',
                    'validated' => 'text-bg-success',
                    'failed' => 'text-bg-danger',
                    'einvoice_sent_to_customer' => 'text-bg-success',
                    'cancelled' => 'text-bg-secondary',
                ];
            @endphp
            <div class="d-flex align-items-center justify-content-between mb-3">
                <h2 class="h5 mb-0">e-Invoice Requests</h2>
            </div>

            {{-- 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.requests.index') }}" class="row g-3 align-items-end js-requests-filter subs_list_filter_form">
                        <div class="col-12 col-lg-5">
                            <label class="form-label">Keyword</label>
                            <input name="q" class="form-control" placeholder="Name, email, phone, invoice, car plate"
                                   value="{{ request('q') }}">
                        </div>
                        <div class="col-12 col-md-4 col-lg-4">
                            <label class="form-label">Site</label>
                            <select name="site_id" class="form-select">
                                <option value="">All</option>
                                @foreach($sites as $site)
                                    <option value="{{ $site->id }}" @selected((string) request('site_id') === (string) $site->id)>{{ $site->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-4 col-lg-3">
                            <label class="form-label">From Date</label>
                            <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}">
                        </div>
                        <div class="col-12 col-md-4 col-lg-3">
                            <label class="form-label">To Date</label>
                            <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}">
                        </div>
                        <div class="col-12 col-md-4 col-lg-3 d-flex gap-2">
                            <button class="btn btn-primary w-100 subs_list_filter_submit">Search</button>
                            <a class="btn btn-outline-secondary w-100 subs_list_filter_reset" href="{{ route('admin.requests.index') }}">Reset</a>
                        </div>
                    </form>
                </div>
            </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

            <div id="requests-results">
                <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>
                        <a class="btn btn-outline-success btn-sm" href="{{ route('admin.requests.export', request()->query()) }}">Export Excel</a>
                    </div>
                    <div class="table-responsive">
                        <table id="requestsTable" class="table table-hover align-middle requests-table">
                            <thead class="table-light">
                            <tr>
                                <th data-field="no" style="width:40px">No</th>
                                <th data-field="name" style="width:140px">Name</th>
                                <th data-field="email_phone" style="width:170px">Email/Phone</th>
                                <th data-field="invoice" style="width:140px">Billing Invoice</th>
                                <th data-field="car_plate" style="width:90px">Car Plate</th>
                                <th data-field="location" style="width:100px">Location</th>
                                <th data-field="amount" style="width:90px">Amount (RM)</th>
                                <th data-field="billing_status" style="width:130px">Billing Status</th>
                                <th data-field="lhdn_status" style="width:130px">LHDN Status</th>
                                <th data-field="receipt" style="width:65px">Receipt</th>
                                <th data-field="actions">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($requests as $item)
                                <tr>
                                    <td>{{ $loop->index + 1 }}</td>
                                    <td>
                                        @if($canAmendRequests)
                                            <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#editRequestModal-{{ $item->id }}">{{ $item->name }}</a>
                                        @else
                                            {{ $item->name }}
                                        @endif
                                    </td>
                                    <td>
                                        <div>{{ $item->email ?? '-' }}</div>
                                        <div class="text-muted small">{{ $item->phone ?? '' }}</div>
                                    </td>
                                    <td>
                                        <div>{{ $item->invoice_no }}</div>
                                        <div class="text-muted small">{{ optional($item->txn_date)->format('d/m/Y H:i') ?? '-' }}</div>
                                    </td>
                                    <td>{{ $item->car_plate ?? '-' }}</td>
                                    <td>{{ $item->site->name ?? '-' }}</td>
                                    <td>
                                        {{ $item->amount !== null ? number_format($item->amount, 2) : '-' }}
                                    </td>
                                    <td>
                                        <span class="badge {{ $invoiceStatusClasses[$item->invoice_status ?? 'unpaid'] ?? 'text-bg-secondary' }}">{{ $item->invoice_status_label }}</span>
                                        @if($item->payment_date)
                                            <div class="text-muted small">{{ optional($item->payment_date)->format('d/m/Y') }}</div>
                                        @endif
                                        <div class="text-muted small mt-1">{{ $item->payment_stage_label }}</div>
                                    </td>
                                    <td>
                                        @if($item->status)
                                            <span class="badge {{ $statusClasses[$item->status] ?? 'text-bg-secondary' }}">{!! implode('<br>', explode(' ', $item->status_label)) !!}</span>
                                        @endif
                                        <div class="text-muted small mt-1">{{ $item->lhdn_status ?: 'Not submitted' }}</div>
                                    </td>
                                    <td>
                                        @php
                                            $receiptUrl = $item->receipt_path ? Storage::url($item->receipt_path) : '';
                                            if ($receiptUrl) {
                                                $host = parse_url($receiptUrl, PHP_URL_HOST);
                                                $path = parse_url($receiptUrl, PHP_URL_PATH) ?: $receiptUrl;
                                                if (!$host || $host === 'localhost') {
                                                    $receiptUrl = request()->getSchemeAndHttpHost() . $path;
                                                }
                                            }
                                        @endphp
                                        @if($receiptUrl)
                                            <a class="link-primary" href="{{ $receiptUrl }}" target="_blank">View</a>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td class="text-end">
                                        @php
                                            $hasActions = ($canSubmitToLhdn && (
                                                (($item->invoice_status ?? 'unpaid') === 'paid' && !$item->payment_approved_at) ||
                                                ($item->payment_approved_at && $item->customer_requested_at) ||
                                                (($item->invoice_status ?? 'unpaid') === 'paid' && $item->payment_approved_at && !$item->customer_requested_at) ||
                                                (($item->invoice_status ?? 'unpaid') === 'paid' && $item->customer_requested_at && !($item->payment_approved_at && $item->customer_requested_at))
                                            )) || $canAmendRequests;
                                        @endphp
                                        @if($hasActions)
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                Actions
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li>
                                                    @if($item->subscription_id)
                                                        <a class="dropdown-item" href="{{ route('admin.customer-subscriptions.show', ['customerSubscription' => $item->subscription_id]) }}">
                                                    @else
                                                        <a class="dropdown-item" href="{{ route('admin.invoices.index') }}">
                                                    @endif
                                                        View Invoice
                                                    </a>
                                                </li>
                                                <li><hr class="dropdown-divider"></li>
                                                {{-- Mark Paid hidden --}}
                                                {{-- @if($canMarkPaid && ($item->invoice_status ?? 'unpaid') === 'unpaid')
                                                    <li>
                                                        <form method="post" action="{{ route('admin.requests.markPaid', ['invoice' => $item->id]) }}">
                                                            @csrf
                                                            <button class="dropdown-item text-success" onclick="return confirm('Mark this invoice as paid?')">
                                                                Mark Paid
                                                            </button>
                                                        </form>
                                                    </li>
                                                @endif --}}
                                                @if($canSubmitToLhdn)
                                                    @if(($item->invoice_status ?? 'unpaid') === 'paid' && !$item->payment_approved_at)
                                                        <li>
                                                            <form method="post" action="{{ route('admin.requests.approvePaid', ['invoice' => $item->id]) }}">
                                                                @csrf
                                                                <button class="dropdown-item text-success" onclick="return confirm('Approve this paid invoice and release payment receipt flow?')">
                                                                    AO Approve Paid
                                                                </button>
                                                            </form>
                                                        </li>
                                                        <li>
                                                            <form method="post" action="{{ route('admin.requests.resendInvoice', ['invoice' => $item->id]) }}">
                                                                @csrf
                                                                <button class="dropdown-item text-warning" onclick="return confirm('Return this invoice to unpaid and resend billing invoice to customer?')">
                                                                    Resend Invoice
                                                                </button>
                                                            </form>
                                                        </li>
                                                    @elseif($item->payment_approved_at && $item->customer_requested_at)
                                                        <li>
                                                            <form method="post" action="{{ route('admin.requests.approve', ['invoice' => $item->id]) }}" class="js-req-submit-form" data-tin="{{ $item->tin_no ?? '' }}">
                                                                @csrf
                                                                <button class="dropdown-item text-success">
                                                                    Submit LHDN
                                                                </button>
                                                            </form>
                                                        </li>
                                                    @elseif(($item->invoice_status ?? 'unpaid') === 'paid' && $item->payment_approved_at && !$item->customer_requested_at)
                                                        <li>
                                                            <button class="dropdown-item text-muted" disabled>
                                                                Waiting Customer Request
                                                            </button>
                                                        </li>
                                                    @elseif(($item->invoice_status ?? 'unpaid') === 'paid' && $item->customer_requested_at)
                                                        <li>
                                                            <form method="post" action="{{ route('admin.requests.approve', ['invoice' => $item->id]) }}" class="js-approve-form" data-tin="{{ $item->tin_no ?? '' }}">
                                                                @csrf
                                                                <button class="dropdown-item text-success js-approve-btn" type="submit">
                                                                    <span class="js-approve-text">Approve & Submit LHDN</span>
                                                                    <span class="js-approve-loading d-none">
                                                                        <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                                                                        Submitting...
                                                                    </span>
                                                                </button>
                                                            </form>
                                                        </li>
                                                    @endif
                                                @endif
                                                @if($canAmendRequests)
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li>
                                                        <button type="button"
                                                                class="dropdown-item"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#editRequestModal-{{ $item->id }}">
                                                            Edit
                                                        </button>
                                                    </li>
                                                    <li>
                                                        <form method="post" action="{{ route('admin.requests.destroy', ['invoice' => $item->id]) }}">
                                                            @csrf
                                                            @method('delete')
                                                            <button class="dropdown-item text-danger" onclick="return confirm('Delete?')">
                                                                Delete
                                                            </button>
                                                        </form>
                                                    </li>
                                                @endif
                                            </ul>
                                        </div>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="11" class="text-center text-muted py-4">No records.</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                </div>
            </div>
            </div>

    <!-- Modal Create Invoice Record -->
    @if($canCreateRequests)
        <div class="modal fade" id="requestModal" tabindex="-1" aria-labelledby="requestModalLabel" 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="requestModalLabel">Create Invoice Record</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="post" action="{{ route('admin.requests.store') }}" class="row g-3" enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body">
                            @include('admin.requests.partials.form', ['requestItem' => null, 'sites' => $sites])
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    <!-- Edit modals -->
    @if($canAmendRequests)
    @foreach($requests as $item)
        <div class="modal fade js-edit-modal" id="editRequestModal-{{ $item->id }}" tabindex="-1" aria-labelledby="editRequestModalLabel-{{ $item->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="editRequestModalLabel-{{ $item->id }}">Edit Invoice Record #{{ $item->id }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="post" action="{{ route('admin.requests.update', ['invoice' => $item->id]) }}" class="row g-3 js-request-edit-form" enctype="multipart/form-data" data-request-id="{{ $item->id }}">
                        @csrf
                        @method('put')
                        <div class="modal-body">
                            @include('admin.requests.partials.form', ['requestItem' => $item, 'sites' => $sites])
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary js-edit-save-btn">Save</button>
                            @if($canSubmitToLhdn && ($item->invoice_status ?? 'unpaid') === 'paid' && $item->payment_approved_at && $item->customer_requested_at)
                                <button type="button"
                                        class="btn btn-success js-modal-submit-btn"
                                        data-submit-url="{{ route('admin.requests.approve', ['invoice' => $item->id]) }}">
                                    Submit LHDN
                                </button>
                            @endif
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endforeach
    @endif
            </div>
        </div>
    </div>

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.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>
        <style>
            .toast-float {
                position: fixed;
                top: 16px;
                right: 16px;
                z-index: 1055;
                min-width: 260px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            }
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                $('#requestsTable').bootstrapTable({
                    toolbar: '#tableToolbar',
                    search: true,
                    searchAlign: 'right',
                    pagination: true,
                    pageSize: 20,
                    pageList: [10, 20, 50],
                    sortable: true
                });

                const flashSuccess = @json(session('success'));
                const flashError = @json($errors->first() ?? null);

                const showToast = (message, type = 'success') => {
                    if (window.notify) {
                        window.notify(message, type);
                        return;
                    }

                    const toast = document.createElement('div');
                    toast.className = 'toast-float alert alert-' + (type === 'success' ? 'success' : 'danger');
                    toast.textContent = message;
                    document.body.appendChild(toast);
                    setTimeout(() => toast.remove(), 3000);
                };

                document.addEventListener('shown.bs.modal', (event) => {
                    const modal = event.target;
                    const selects = modal.querySelectorAll('.site-select');

                    selects.forEach((select) => {
                        if ($(select).data('select2')) {
                            return;
                        }

                        $(select).select2({
                            placeholder: '-- Select Location --',
                            width: '100%',
                            dropdownParent: $(modal),
                        });
                    });
                });

                if (flashSuccess) showToast(flashSuccess, 'success');
                if (flashError) showToast(flashError, 'danger');

                const refreshRequests = (url) => { window.location.href = url || window.location.href; };

                const requireTin = (form) => {
                    const tin = (form.dataset.tin || '').trim();
                    if (tin) {
                        return true;
                    }
                    showToast('Buyer TIN is missing. System will try to fetch TIN on submit.', 'info');
                    return true;
                };

                const isFailedResponse = (payload) => {
                    const data = payload?.data || {};
                    const status = String(data.status || '').toLowerCase();
                    const lhdnStatus = String(data.lhdn_status || '').toUpperCase();
                    if (status === 'failed' || lhdnStatus === 'FAILED') {
                        return true;
                    }
                    const message = String(payload?.message || '');
                    return message.includes('FAILED') || message.includes('Failed');
                };

                const attachApproveHandlers = () => {
                    document.querySelectorAll('.js-approve-form').forEach((form) => {
                        if (form.dataset.bound === '1') {
                            return;
                        }
                        form.dataset.bound = '1';

                        form.addEventListener('submit', async (event) => {
                            event.preventDefault();
                            const button = form.querySelector('.js-approve-btn');
                            if (!button) return;
                            if (!requireTin(form)) return;
                            button.disabled = true;
                            button.querySelector('.js-approve-text')?.classList.add('d-none');
                            button.querySelector('.js-approve-loading')?.classList.remove('d-none');

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

                                const payload = await response.json().catch(() => ({}));
                                if (!response.ok) {
                                    throw new Error(payload.message || 'Failed to submit to LHDN.');
                                }

                                await refreshRequests(window.location.href);
                                showToast(payload.message || 'Submitted to LHDN successfully.', isFailedResponse(payload) ? 'error' : 'success');
                            } catch (error) {
                                button.disabled = false;
                                button.querySelector('.js-approve-text')?.classList.remove('d-none');
                                button.querySelector('.js-approve-loading')?.classList.add('d-none');
                                showToast(error.message || 'Failed to submit to LHDN.', 'error');
                            }
                        });
                    });
                };

                attachApproveHandlers();

                const attachEditHandlers = () => {
                    document.querySelectorAll('.js-request-edit-form').forEach((form) => {
                        if (form.dataset.bound === '1') {
                            return;
                        }
                        form.dataset.bound = '1';

                        form.addEventListener('submit', async (event) => {
                            event.preventDefault();
                            const button = form.querySelector('.js-edit-save-btn');
                            if (!button) {
                                return;
                            }

                            const originalLabel = button.innerHTML;
                            button.disabled = true;
                            button.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Saving...';
                            let didSave = false;

                            const token = form.querySelector('input[name="_token"]')?.value || '';

                            try {
                                const response = await fetch(form.action, {
                                    method: 'POST',
                                    headers: {
                                        'X-CSRF-TOKEN': token,
                                        'Accept': 'application/json',
                                    },
                                    body: new FormData(form),
                                });

                                const payload = await response.json().catch(() => ({}));
                                if (response.status === 422) {
                                    const firstError = payload.errors
                                        ? Object.values(payload.errors).flat()[0]
                                        : null;
                                    throw new Error(firstError || payload.message || 'Validation failed.');
                                }
                                if (!response.ok) {
                                    throw new Error(payload.message || 'Failed to update request.');
                                }

                                const modal = form.closest('.modal');
                                if (modal) {
                                    modal.dataset.needsRefresh = '1';
                                }
                                didSave = true;
                                if (payload.data?.pdf_url) {
                                    const pdfSlot = form.querySelector('.js-existing-pdf');
                                    if (pdfSlot) {
                                        pdfSlot.innerHTML = `<a class="link-primary" target="_blank" href="${payload.data.pdf_url}">View existing PDF</a>`;
                                    }
                                }
                                if (payload.data?.receipt_url) {
                                    const receiptSlot = form.querySelector('.js-existing-receipt');
                                    if (receiptSlot) {
                                        receiptSlot.innerHTML = `<a class="link-primary" target="_blank" href="${payload.data.receipt_url}">View Receipt</a>`;
                                    }
                                }
                                showToast(payload.message || 'Request updated.', 'success');
                            } catch (error) {
                                showToast(error.message || 'Failed to update request.', 'error');
                            } finally {
                                button.disabled = false;
                                button.innerHTML = originalLabel;
                                if (didSave) {
                                    button.classList.add('btn-success');
                                    setTimeout(() => button.classList.remove('btn-success'), 1200);
                                }
                            }
                        });
                    });
                };

                attachEditHandlers();

                const attachEditModalRefresh = () => {
                    document.querySelectorAll('.js-edit-modal').forEach((modal) => {
                        if (modal.dataset.bound === '1') {
                            return;
                        }
                        modal.dataset.bound = '1';

                        modal.addEventListener('hidden.bs.modal', () => {
                            if (modal.dataset.needsRefresh !== '1') {
                                return;
                            }
                            delete modal.dataset.needsRefresh;
                        });
                    });
                };

                const attachSubmitHandlers = () => {
                    document.querySelectorAll('.js-req-submit-form').forEach((form) => {
                        if (form.dataset.bound === '1') {
                            return;
                        }
                        form.dataset.bound = '1';

                        form.addEventListener('submit', async (event) => {
                            event.preventDefault();
                            const button = form.querySelector('button');
                            if (!button || button.disabled) {
                                return;
                            }
                            if (!requireTin(form)) {
                                return;
                            }

                            const originalLabel = button.textContent.trim();
                            button.disabled = true;
                            button.textContent = 'Submitting...';

                            const token = form.querySelector('input[name="_token"]')?.value || '';

                            try {
                                const response = await fetch(form.action, {
                                    method: 'POST',
                                    headers: {
                                        'X-CSRF-TOKEN': token,
                                        'Accept': 'application/json',
                                    },
                                    body: new FormData(form),
                                });

                                const payload = await response.json().catch(() => ({}));
                                if (!response.ok) {
                                    throw new Error(payload.message || 'Failed to submit to LHDN.');
                                }

                                await refreshRequests(window.location.href);
                                showToast(payload.message || 'Submitted to LHDN successfully.', isFailedResponse(payload) ? 'error' : 'success');
                            } catch (error) {
                                button.disabled = false;
                                button.textContent = originalLabel;
                                showToast(error.message || 'Failed to submit to LHDN.', 'error');
                            }
                        });
                    });
                };

                attachSubmitHandlers();
                attachEditModalRefresh();

                const attachModalSubmitHandlers = () => {
                    document.querySelectorAll('.js-modal-submit-btn').forEach((button) => {
                        if (button.dataset.bound === '1') {
                            return;
                        }
                        button.dataset.bound = '1';

                        const cleanupBackdrops = () => {
                            if (document.querySelector('.modal.show')) {
                                return;
                            }
                            document.querySelectorAll('.modal-backdrop').forEach((backdrop) => backdrop.remove());
                            document.body.classList.remove('modal-open');
                        };

                        const closeModal = () => {
                            const modal = button.closest('.modal');
                            if (!modal) {
                                cleanupBackdrops();
                                return;
                            }
                            if (window.bootstrap?.Modal) {
                                const instance = window.bootstrap.Modal.getInstance(modal);
                                if (instance) {
                                    instance.hide();
                                }
                            }
                            modal.classList.remove('show');
                            modal.style.display = 'none';
                            modal.setAttribute('aria-hidden', 'true');
                            cleanupBackdrops();
                        };

                        button.addEventListener('click', async () => {
                            if (button.disabled) {
                                return;
                            }

                            const url = button.dataset.submitUrl;
                            if (!url) {
                                showToast('Submit URL is missing.', 'error');
                                return;
                            }

                            const originalLabel = button.innerHTML;
                            button.disabled = true;
                            button.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Submitting...';

                            const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

                            try {
                                const response = await fetch(url, {
                                    method: 'POST',
                                    headers: {
                                        'X-CSRF-TOKEN': token,
                                        'Accept': 'application/json',
                                    },
                                });

                                const payload = await response.json().catch(() => ({}));
                                if (!response.ok) {
                                    throw new Error(payload.message || 'Failed to submit to LHDN.');
                                }

                                showToast(payload.message || 'Submitted to LHDN successfully.', isFailedResponse(payload) ? 'error' : 'success');
                                closeModal();
                                await refreshRequests(window.location.href);
                            } catch (error) {
                                showToast(error.message || 'Failed to submit to LHDN.', 'error');
                            } finally {
                                button.disabled = false;
                                button.innerHTML = originalLabel;
                            }
                        });
                    });
                };

                attachModalSubmitHandlers();

                const attachTinHandlers = () => {
                    document.querySelectorAll('.js-find-tin-btn').forEach((button) => {
                        if (button.dataset.bound === '1') {
                            return;
                        }
                        button.dataset.bound = '1';

                        button.addEventListener('click', async () => {
                            if (button.disabled) {
                                return;
                            }

                            const input = button.closest('.input-group')?.querySelector('input[name="tin_no"]');
                            const form = button.closest('form');
                            const token = form?.querySelector('input[name="_token"]')?.value || '';
                            const url = button.dataset.searchUrl;
                            if (!url) {
                                showToast('TIN search URL is missing.', 'error');
                                return;
                            }

                            const originalLabel = button.textContent;
                            button.disabled = true;
                            button.textContent = 'Searching...';

                            try {
                                const response = await fetch(url, {
                                    method: 'POST',
                                    headers: {
                                        'X-CSRF-TOKEN': token,
                                        'Accept': 'application/json',
                                    },
                                });

                                const payload = await response.json().catch(() => ({}));
                                if (!response.ok) {
                                    let message = payload.message || 'Failed to find TIN.';
                                    if (response.status === 404) {
                                        message = 'TIN tidak dijumpai. Sila semak No. IC/Passport dan cuba semula.';
                                    } else if (response.status === 400) {
                                        message = 'Maklumat IC/Passport tidak sah. Sila semak dan cuba semula.';
                                    }
                                    throw new Error(message);
                                }

                                if (input) {
                                    input.value = payload.tin || '';
                                }
                                showToast(payload.message || 'TIN found.', 'success');
                            } catch (error) {
                                showToast(error.message || 'Failed to find TIN.', 'error');
                            } finally {
                                button.disabled = false;
                                button.textContent = originalLabel;
                            }
                        });
                    });
                };

                attachTinHandlers();

            });
        </script>
    @endpush
</x-app-layout>