{{-- resources/views/accounting/invoices/index.blade.php --}}
@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">
    <!-- Breadcrumb -->
    <div class="page-breadcrumb d-flex flex-column flex-sm-row align-items-center justify-content-between mb-3 p-3 bg-primary text-white rounded shadow-sm">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 p-0">
                <li class="breadcrumb-item">
                    <a href="{{ route('admin.dashboard') }}" class="text-white">
                        <i class="bx bx-home-alt"></i>
                    </a>
                </li>
                <li class="breadcrumb-item active text-white" aria-current="page">Customer Invoices</li>
            </ol>
        </nav>
        @can('invoices.add')
        <a href="{{ route('invoices.create') }}" class="btn btn-light d-flex align-items-center">
            <i class="bx bx-plus-circle me-2"></i> New Invoice
        </a>
        @endcan
    </div>

    <!-- Invoices Table -->
    @can('invoices.view')
    <div class="card shadow border-0 rounded">
        <div class="card-body p-4">
            <div class="table-responsive">
                <table id="example" class="table table-hover table-striped table-bordered align-middle">
                    <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>Date</th>
                            <th>Ref</th>
                            <th>Customer/Buyer</th>
                            <th class="text-end">Total</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($invoices as $key => $inv)
                        <tr>
                            <td class="fw-bold text-center">
                                {{ $key + 1 + ($invoices->currentPage() - 1) * $invoices->perPage() }}
                            </td>
                            <td>{{ \Carbon\Carbon::parse($inv->invoice_date)->format('Y-m-d') }}</td>
                            <td>{{ $inv->reference }}</td>
                            <td>
                              {{ optional($inv->buyer)->name 
                                 ?? optional($inv->customer)->name 
                                 ?? '—' }}
                            </td>
                            <td class="text-end">{{ number_format($inv->grand_total, 2) }}</td>
                            <td class="text-center">
                                <div class="dropdown">
                                    <a href="#" class="btn btn-light btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                                        <i class="bx bx-dots-vertical-rounded"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        @can('invoices.view')
                                        <li>
                                            <a class="dropdown-item" href="{{ route('invoices.show', $inv->id) }}">
                                                <i class="bx bx-show me-2"></i> View
                                            </a>
                                        </li>
                                        @endcan
                                        @can('invoices.edit')
                                        <li>
                                            <a class="dropdown-item" href="{{ route('invoices.edit', $inv->id) }}">
                                                <i class="bx bx-edit-alt me-2"></i> Edit
                                            </a>
                                        </li>
                                        @endcan
                                        @can('invoices.delete')
                                        <li>
                                            <a class="dropdown-item text-danger delete-invoice" href="{{ route('invoices.destroy', $inv->id) }}">
                                                <i class="bx bx-trash me-2"></i> Delete
                                            </a>
                                        </li>
                                        @endcan
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="mt-3">
                {{ $invoices->links('vendor.pagination.bootstrap-5') }}
            </div>
        </div>
    </div>
    @endcan
</div>

{{-- SweetAlert2 for delete confirmation --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.delete-invoice').forEach(function(el) {
        el.addEventListener('click', function(e) {
            e.preventDefault();
            const url = this.getAttribute('href');
            const row = this.closest('tr');
            const ref = row.cells[2].textContent.trim();
            Swal.fire({
                title: `Delete invoice "${ref}"?`,
                text: "This action cannot be undone!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it'
            }).then((result) => {
                if (result.isConfirmed) {
                    // submit via POST form to respect RESTful delete
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = url;
                    form.innerHTML = `
                      @csrf
                      @method('DELETE')
                    `;
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        });
    });
});
</script>
@endsection