{{-- 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/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush
@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>
    document.addEventListener('DOMContentLoaded', () => {
        $('.site-select').select2({ placeholder: '-- Select Location --', width: '100%' });
    });
</script>
@endpush

<x-app-layout>
    <div class="py-4">
        <div class="container">
            @php
                $invoiceStatusClasses = [
                    'unpaid' => 'text-bg-warning text-dark',
                    'paid' => 'text-bg-success',
                    'cancelled' => 'text-bg-secondary',
                ];
                $statusClasses = [
                    'new_request' => 'text-bg-secondary',
                    'approved' => 'text-bg-info',
                    'waiting_validation' => 'text-bg-warning',
                    'validated' => 'text-bg-success',
                    'failed' => 'text-bg-danger',
                    'einvoice_sent_to_customer' => 'text-bg-success',
                ];
            @endphp
            <div class="d-flex align-items-center justify-content-between mb-3">
                <h2 class="h5 mb-0">My Billing Invoices</h2>
                <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#requestModal">Submit Manual E-Invoice Request</button>
            </div>

            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if(session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif
            @if($errors->any())
                <div class="alert alert-danger">Please review the form details.</div>
            @endif

            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="table-light">
                            <tr>
                                <th>ID</th>
                                <th>Invoice No.</th>
                                <th>Car Plate</th>
                                <th>Location</th>
                                <th>Date</th>
                                <th>Billing Status</th>
                                <th>LHDN Status</th>
                                <th>E-Invoice Request Window</th>
                                <th>LHDN Submission</th>
                                <th>Document Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($requests as $item)
                                <tr>
                                    <td>{{ $item->id }}</td>
                                    <td>{{ $item->invoice_no }}</td>
                                    <td>{{ $item->car_plate ?? '-' }}</td>
                                    <td>{{ $item->site->name ?? '-' }}</td>
                                    <td>{{ optional($item->txn_date)->format('d/m/Y') }}</td>
                                    <td><span class="badge {{ $invoiceStatusClasses[$item->invoice_status ?? 'unpaid'] ?? 'text-bg-secondary' }}">{{ $item->invoice_status_label }}</span></td>
                                    <td><span class="badge {{ $statusClasses[$item->status] ?? 'text-bg-secondary' }}">{{ $item->status_label }}</span></td>
                                    <td>
                                        @if($item->customer_requested_at)
                                            <span class="badge text-bg-info">Requested</span>
                                            <div class="text-muted small">{{ $item->customer_requested_at->format('d/m/Y H:i') }}</div>
                                        @elseif($item->canCustomerRequestEinvoice())
                                            <span class="badge text-bg-success">Open</span>
                                            <div class="text-muted small">Until {{ optional($item->request_window_ends_at)->format('d/m/Y') }}</div>
                                        @elseif(($item->invoice_status ?? null) === 'paid')
                                            <span class="badge text-bg-secondary">Closed</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td><span class="badge text-bg-info text-dark">{{ $item->lhdn_status ?? 'N/A' }}</span></td>
                                    <td>
                                        @if(in_array($item->status, ['validated','einvoice_sent_to_customer']))
                                            <a class="btn btn-sm btn-outline-primary" target="_blank"
                                               href="{{ route('invoices.preview', ['invoice' => $item->id]) }}">
                                                View LHDN E-Invoice
                                            </a>
                                        @elseif($item->canCustomerRequestEinvoice())
                                            <form method="post" action="{{ route('user.requests.request-einvoice', ['invoice' => $item->id]) }}">
                                                @csrf
                                                <button class="btn btn-sm btn-primary">Request LHDN E-Invoice</button>
                                            </form>
                                        @elseif($item->customer_requested_at)
                                            <span class="text-muted small">E-invoice request pending review</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="10" class="text-center text-muted py-4">No records.</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
            </div>
            <div class="mt-3">
                <x-pagination-bar :paginator="$requests" />
            </div>
        </div>
            </div>
        </div>
    </div>

    <!-- Modal permohonan -->
    <div class="modal fade" id="requestModal" tabindex="-1" aria-labelledby="requestModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                        <h5 class="modal-title" id="requestModalLabel">Submit Manual E-Invoice Request</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="post" action="{{ url('/request') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">ID / Passport No. *</label>
                                <input name="ic_passport" class="form-control" value="{{ old('ic_passport') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Name *</label>
                                <input name="name" class="form-control" value="{{ old('name', auth()->user()->name) }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Email *</label>
                                <input name="email" type="email" class="form-control" value="{{ old('email', auth()->user()->email) }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Phone No.</label>
                                <input name="phone" class="form-control" value="{{ old('phone', auth()->user()->phone) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Billing Invoice / Receipt No. *</label>
                                <input name="invoice_no" class="form-control" value="{{ old('invoice_no') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Site / Location *</label>
                                <select name="site_id" class="form-select" required>
                                    <option value="">-- Select Location --</option>
                                    @foreach($sites as $site)
                                        <option value="{{ $site->id }}" @selected(old('site_id') == $site->id)>{{ $site->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Car Plate No. *</label>
                                <input name="car_plate" class="form-control" value="{{ old('car_plate') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Transaction Date</label>
                                <input name="txn_date" type="date" class="form-control" value="{{ old('txn_date') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Amount Paid (RM) *</label>
                                <input name="amount" type="number" step="0.01" min="0.01" class="form-control" value="{{ old('amount') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Upload Receipt</label>
                                <input name="receipt" type="file" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-app-layout>