{{-- Author By : zulfazdliabuas@gmail.com | Date : 2026 --}}
@push('styles')
<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/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">
<style>
    #invoicesTable th:nth-child(2),
    #invoicesTable td:nth-child(2) { min-width: 190px; white-space: nowrap; }
    .subs_link_copy_button { min-height: 15px !important; padding: 0 4px !important; font-size: 11px; line-height: 1; border-radius: 3px !important; }
    .subs_preview_button { min-height: 28px !important; padding: 0 10px !important; font-size: 11px; font-weight: 600; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; }
</style>
@endpush

<x-app-layout>
    <div class="py-4">
        <div class="container">
            @php
                $viewer = auth()->user();
                $canCreateInvoices = $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

            <div class="d-flex align-items-center justify-content-between mb-3">
                <h2 class="h5 mb-0">Invoices</h2>
            </div>
            <p class="text-muted small mb-3">All invoices — subscription-generated and manual.</p>

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            @if($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ $errors->first() }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <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($canCreateInvoices)
                            <a href="{{ route('admin.invoices.create') }}" class="btn btn-primary btn-sm">Create Invoice</a>
                        @endif
                        <form method="get" class="d-flex align-items-center gap-2">
                            <label class="text-muted small mb-0">Billing Period:</label>
                            <input type="month" name="invoice_cycle_month" class="form-control form-control-sm" style="width:160px"
                                   value="{{ request('invoice_cycle_month', Carbon\Carbon::now()->format('Y-m')) }}">
                            <button class="btn btn-outline-secondary btn-sm" type="submit">Filter</button>
                            @if(request('invoice_cycle_month'))
                                <a href="{{ route('admin.invoices.index') }}" class="btn btn-outline-danger btn-sm">Clear</a>
                            @endif
                        </form>
                        <a class="btn btn-outline-success btn-sm" data-no-ajax href="{{ route('admin.invoices.index', array_merge(request()->query(), ['invoice_cycle_month' => ''])) }}">View All</a>
                    </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',
                        ];
                    @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" data-width="190">Invoice No</th>
                                <th data-field="car_plate" style="width:100px">Car Plate</th>
                                <th data-field="customer">Customer</th>
                                <th data-field="cycle_month" style="width:90px; white-space: normal;">Billing<br>Period</th>
                                <th data-field="due_date" style="width:100px">Due Date</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="actions" style="width:200px">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($invoices as $invoice)
                                @php $einStatus = $invoice->status; @endphp
                                <tr>
                                    <td>{{ $invoices->firstItem() + $loop->index }}</td>
                                    <td>
                                        <div class="d-flex align-items-center gap-1">
                                            <div class="fw-semibold" style="font-size:0.95rem">{{ $invoice->invoice_no ?: '-' }}</div>
                                            @if($invoice->invoice_no && !in_array($einStatus, ['validated', 'einvoice_sent_to_customer', 'cancelled']) && $invoice->customer_requested_at === null)
                                                <button type="button" class="btn btn-sm btn-outline-info subs_link_copy_button js-copy-link-btn"
                                                        data-url="/request?invoice={{ urlencode($invoice->invoice_no) }}"
                                                        title="Copy e-Invoice Request Link">
                                                    <i class="bi bi-link-45deg"></i>
                                                </button>
                                            @endif
                                        </div>
                                        @if($invoice->generated_by_subscription)
                                            <div class="text-muted small">Subscription</div>
                                        @endif
                                    </td>
                                    <td><span class="fw-semibold">{{ $invoice->car_plate ?: '-' }}</span></td>
                                    <td>
                                        @if($invoice->customer_id)
                                            <a href="{{ route('admin.customers.index', ['edit_customer_id' => $invoice->customer_id]) }}" class="fw-semibold text-decoration-none" title="Edit customer details">
                                                {{ $invoice->name }}
                                            </a>
                                        @else
                                            <div class="fw-semibold">{{ $invoice->name }}</div>
                                        @endif
                                        <div class="text-muted small">{{ $invoice->email ?: '-' }}</div>
                                    </td>
                                    <td>{{ $invoice->invoice_cycle_month ? \Carbon\Carbon::parse($invoice->invoice_cycle_month)->format('M Y') : '-' }}</td>
                                    <td>{{ $invoice->due_date ? \Carbon\Carbon::parse($invoice->due_date)->format('d/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>
                                        @if($payStatus === 'paid')
                                            @if($invoice->payment_date)
                                                <div class="text-muted small">{{ \Carbon\Carbon::parse($invoice->payment_date)->format('d/m/Y') }}</div>
                                            @endif
                                            @if($invoice->receipt_no)
                                                <div class="text-muted small">{{ $invoice->receipt_no }}</div>
                                            @endif
                                        @endif
                                    </td>
                                    <td>
                                        @if($invoice->emailed_at)
                                            <span class="badge text-bg-success"><i class="bi bi-check-circle me-1"></i>Yes</span>
                                            <div class="text-muted small">{{ \Carbon\Carbon::parse($invoice->emailed_at)->format('d/m/Y H:i') }}</div>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($einStatus)
                                            @php
                                                $einLabel = str_replace('_', ' ', ucfirst($einStatus));
                                                $einLabelLines = implode('<br>', explode(' ', $einLabel));
                                            @endphp
                                            <span class="badge {{ $submissionStatusClasses[$einStatus] ?? 'text-bg-secondary' }}">
                                                {!! $einLabelLines !!}
                                            </span>
                                        @endif
                                    </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 }}"><i class="bi bi-check-circle me-1"></i>Mark Paid</button>
                                                @else
                                                    <form method="post" action="{{ route('admin.requests.sendCustomer', $invoice) }}" class="d-inline js-action-form" data-confirm="Send billing invoice to customer first? Mark Paid is only available after the invoice is emailed.">
                                                        @csrf
                                                        <button class="btn btn-sm btn-outline-warning js-action-btn" data-loading-text="Sending..."><i class="bi bi-envelope me-1"></i>Send First</button>
                                                    </form>
                                                @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..."><i class="bi bi-check2-all me-1"></i>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($einStatus !== 'cancelled')
                                                <a href="{{ route('invoices.pdf', $invoice) }}" target="_blank" class="btn btn-sm btn-outline-dark subs_preview_button">
                                                    <i class="bi bi-eye me-1"></i>Preview
                                                </a>
                                            @endif
                                            @if($canMarkPaid)
                                                @if(in_array($einStatus, ['validated', 'einvoice_sent_to_customer']))
                                                    <form method="post" action="{{ route('admin.requests.sendCustomer', $invoice) }}" class="d-inline js-action-form" data-confirm="Send e-invoice email to customer?">
                                                        @csrf
                                                        <button class="btn btn-sm btn-outline-primary js-action-btn" data-loading-text="Sending..."><i class="bi bi-envelope me-1"></i>Send E-Invoice</button>
                                                    </form>
                                                @endif
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="11" class="text-center text-muted py-4">No invoices found.</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-3">
                        {{ $invoices->withQueryString()->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header py-2">
                    <h6 class="modal-title fw-semibold">Invoice Preview</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-0">
                    <div class="text-center py-5" id="previewLoading">
                        <div class="spinner-border text-primary"></div>
                        <div class="mt-2 text-muted">Loading invoice...</div>
                    </div>
                    <iframe id="previewFrame" src="" style="width:100%;height:75vh;border:none;display:none;" onload="document.getElementById('previewLoading').style.display='none';this.style.display='block';"></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="linkModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title fw-semibold">e-Invoice Request Link</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted small mb-2">Send this link to the customer via WhatsApp or email:</p>
                    <div class="input-group">
                        <input type="text" id="linkUrlInput" class="form-control" readonly>
                        <button class="btn btn-primary" type="button" id="copyLinkBtn">Copy</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @foreach($invoices as $invoice)
        @php $payStatus = $invoice->invoice_status ?? 'unpaid'; @endphp
        @if($canMarkPaid && $payStatus === 'unpaid' && ($invoice->status ?? '') !== 'cancelled')
            <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>
        @endif
    @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 previewModal = new bootstrap.Modal(document.getElementById('previewModal'));
                document.querySelectorAll('.preview-btn').forEach((btn) => {
                    btn.addEventListener('click', () => {
                        const frame = document.getElementById('previewFrame');
                        const loading = document.getElementById('previewLoading');
                        frame.style.display = 'none';
                        loading.style.display = '';
                        frame.src = btn.dataset.url;
                        previewModal.show();
                    });
                });

                document.getElementById('previewModal').addEventListener('hidden.bs.modal', () => {
                    document.getElementById('previewFrame').src = '';
                    document.getElementById('previewFrame').style.display = 'none';
                    document.getElementById('previewLoading').style.display = '';
                });

                document.querySelectorAll('.js-copy-link-btn').forEach((btn) => {
                    btn.addEventListener('click', () => {
                        const url = btn.getAttribute('data-url');
                        if (!url) return;
                        const fullUrl = window.location.origin + url;
                        document.getElementById('linkUrlInput').value = fullUrl;
                        new bootstrap.Modal(document.getElementById('linkModal')).show();
                    });
                });

                document.getElementById('copyLinkBtn').addEventListener('click', () => {
                    const input = document.getElementById('linkUrlInput');
                    input.select();
                    input.setSelectionRange(0, 99999);
                    navigator.clipboard.writeText(input.value).then(() => {
                        const btn = document.getElementById('copyLinkBtn');
                        btn.textContent = 'Copied!';
                        btn.classList.add('btn-success');
                        btn.classList.remove('btn-primary');
                        setTimeout(() => {
                            btn.textContent = 'Copy';
                            btn.classList.remove('btn-success');
                            btn.classList.add('btn-primary');
                        }, 1500);
                    }).catch(() => {
                        document.execCommand('copy');
                        const btn = document.getElementById('copyLinkBtn');
                        btn.textContent = 'Copied!';
                        btn.classList.add('btn-success');
                        btn.classList.remove('btn-primary');
                        setTimeout(() => {
                            btn.textContent = 'Copy';
                            btn.classList.remove('btn-success');
                            btn.classList.add('btn-primary');
                        }, 1500);
                    });
                });
            });
        </script>
    @endpush
</x-app-layout>