@extends('admin.layouts.app')

@section('title', 'Invoices - Admin Dashboard')

@push('styles')
<style>
    body { background-color: #f9fafb !important; }
    h2 { font-size: 1.25rem; font-weight: 600; }
    .card { border: none !important; border-radius: 12px; overflow: hidden; }
    .table-responsive { position: relative; min-height: 300px; overflow-x: auto; }

    .table th {
        background-color: #f3f4f6;
        text-transform: uppercase;
        font-size: 0.75rem;
        font-weight: 600;
        color: #6b7280;
        padding: 12px;
        white-space: nowrap;
    }

    .table td {
        padding: 12px;
        vertical-align: middle;
        font-size: 0.875rem;
        color: #374151;
        border-bottom: 1px solid #f3f4f6;
    }

    .table tbody tr:hover { background-color: #f9fafb; }
</style>
@endpush


@section('content')
<div class="container-fluid px-4">

    {{-- HEADER --}}
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 mt-3">
        <div class="mb-2 mb-md-0">
            <h2 class="mb-0">Manage Invoices</h2>
            <p class="text-muted small mb-0">Search, filter & manage all invoices.</p>
        </div>

        <a href="{{ route('admin.invoices.create') }}" class="btn btn-primary px-3 py-2">
            <i class="ri-add-line me-1"></i> Add Invoice
        </a>
    </div>


    {{-- FILTERS --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body py-3">
            <div class="row g-3 align-items-center">

                {{-- Search --}}
                <div class="col-12 col-md-6">
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0">
                            <i class="ri-search-line"></i>
                        </span>
                        <input type="text" id="searchInput" 
                               class="form-control border-start-0 ps-0" 
                               placeholder="Search Invoice / Customer / Bank...">
                    </div>
                </div>

                {{-- Customer Filter --}}
                <div class="col-12 col-md-6">
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0">
                            <i class="ri-filter-3-line"></i>
                        </span>

                        <select id="customerFilter" class="form-select border-start-0 ps-0">
                            <option value="">All Customers</option>

                            {{-- SAFE CHECK: only load if $customers exists --}}
                            @isset($customers)
                                @foreach ($customers as $c)
                                    <option value="{{ $c->id }}">{{ $c->brauser_name }}</option>
                                @endforeach
                            @endisset
                        </select>

                    </div>
                </div>

            </div>
        </div>
    </div>


    {{-- TABLE --}}
    <div class="card shadow-sm border-0">
        <div class="card-body p-0">

            <div class="table-responsive">

                <div class="table-loader d-none">
                    <div class="spinner-border text-primary"></div>
                </div>

                <table class="table mb-0">
                    <thead>
                        <tr>
                            <th class="text-center">#</th>
                            <th>Invoice No</th>
                            <th>Customer</th>
                            <th>Date</th>
                            <th class="text-center">Status</th>
                            <th class="text-end">Total</th>
                            <th class="text-end">Round Off</th>
                            <th>Bank</th>
                            <th>Created</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>

                    <tbody id="invoicesTableBody">
                        @include('admin.invoices.partials.table', ['invoices' => $invoices])
                    </tbody>

                </table>

            </div>

        </div>

        <div class="card-footer bg-white text-center">
            <div id="paginationWrapper">
                {{ $invoices->links('pagination::bootstrap-5') }}
            </div>
        </div>

    </div>

</div>
@endsection


@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
const CSRF_TOKEN = "{{ csrf_token() }}";

$(document).ready(function () {

    let searchTimeout;

    // AJAX Load
    function loadInvoices(page = 1) {
        $.ajax({
            url: "{{ route('admin.invoices.index') }}",
            method: "GET",
            data: {
                search: $('#searchInput').val(),
                customer: $('#customerFilter').val(),
                page: page
            },

            beforeSend: () => $('.table-loader').removeClass('d-none'),

            success: (res) => {

                // SUPPORT BOTH AJAX & NON-AJAX RESPONSE
                if (res.table_html) {
                    $('#invoicesTableBody').html(res.table_html);
                }
                if (res.pagination_html) {
                    $('#paginationWrapper').html(res.pagination_html);
                }
            },

            complete: () => $('.table-loader').addClass('d-none'),
        });
    }


    // Search
    $('#searchInput').on('keyup', function () {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => loadInvoices(1), 400);
    });

    // Filter
    $('#customerFilter').on('change', () => loadInvoices(1));


    // Pagination
    $(document).on('click', '#paginationWrapper .pagination a', function (e) {
        e.preventDefault();
        let page = new URL($(this).attr('href')).searchParams.get('page');
        loadInvoices(page);
    });


    // Delete
    $(document).on('click', '.delete-invoice-btn', function () {
        let id = $(this).data('id');
        let invoiceNo = $(this).data('invoice-no');

        let deleteUrl = "{{ route('admin.invoices.destroy', 'ID') }}".replace('ID', id);

        Swal.fire({
            title: "Are you sure?",
            text: `Invoice #${invoiceNo} will be deleted!`,
            icon: "warning",
            showCancelButton: true
        }).then((r) => {

            if (r.isConfirmed) {

                $.post(deleteUrl, {
                    _token: CSRF_TOKEN,
                    _method: 'DELETE'
                }, function () {

                    Swal.fire("Deleted!", "", "success");
                    loadInvoices(1);

                });

            }

        });

    });

});
</script>
@endpush