{{-- 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/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.5/dist/bootstrap-table.min.css" rel="stylesheet">
@endpush

<x-app-layout>
    <div class="py-4">
        <div class="container">
            @php
                $viewer = auth()->user();
                $canManageCustomers = $viewer?->hasAnyRole(['admin', 'ao', 'spv']) ?? false;
            @endphp

            <div class="d-flex align-items-center justify-content-between mb-3">
                <h2 class="h5 mb-0">Customers</h2>
            </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">{{ $errors->first() }}</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($canManageCustomers)
                            <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#customerModal">Add Customer</button>
                        @endif
                        <a class="btn btn-outline-success btn-sm" data-no-ajax href="{{ route('admin.customers.export', request()->query()) }}">Export Excel</a>
                    </div>
                    <div class="table-responsive">
                        <table id="customersTable" class="table table-hover align-middle">
                            <thead class="table-light">
                            <tr>
                                <th data-field="no" style="width:50px">No</th>
                                <th data-field="name">Customer</th>
                                <th data-field="type">Type</th>
                                <th data-field="id_tin">ID / TIN</th>
                                <th data-field="contact">Contact</th>
                                <th data-field="usage">Usage</th>
                                <th data-field="actions" class="text-end" style="width:150px">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($customers as $customer)
                                <tr>
                                    <td>{{ $loop->index + 1 }}</td>
                                    <td>
                                        @if($canManageCustomers)
                                            <a href="#" class="text-decoration-none fw-semibold" data-bs-toggle="modal" data-bs-target="#editCustomerModal-{{ $customer->id }}">{{ $customer->name }}</a>
                                        @else
                                            <div class="fw-semibold">{{ $customer->name }}</div>
                                        @endif
                                        @if($customer->attention_to)
                                            <div class="text-muted small">Attention: {{ $customer->attention_to }}</div>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge text-bg-secondary">{{ ucfirst($customer->customer_type) }}</span>
                                    </td>
                                    <td>
                                        <div>{{ $customer->ic_passport ?: '-' }}</div>
                                        <div class="text-muted small">TIN: {{ $customer->tin_no ?: '-' }}</div>
                                    </td>
                                    <td>
                                        <div>{{ $customer->email ?: '-' }}</div>
                                        <div class="text-muted small">{{ $customer->phone ?: '-' }}</div>
                                        @if($customer->fax_no)
                                            <div class="text-muted small">Fax: {{ $customer->fax_no }}</div>
                                        @endif
                                    </td>
                                    <td>
                                        <a href="{{ route('admin.customer-subscriptions.index', ['customer_id' => $customer->id]) }}" class="text-decoration-none">{{ $customer->subscriptions_count }} subscription(s)</a>
                                        <div class="text-muted small">
                                            <a href="{{ route('admin.invoices.index', ['customer_id' => $customer->id]) }}" class="text-decoration-none">{{ $customer->invoices_count }} invoice(s)</a>
                                        </div>
                                    </td>
                                    <td class="text-end">
                                        <div class="d-flex gap-2 justify-content-end">
                                            @if($canManageCustomers)
                                                <button type="button"
                                                        class="btn btn-sm btn-outline-secondary"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#editCustomerModal-{{ $customer->id }}">
                                                    Edit
                                                </button>
                                                <form method="post" action="{{ route('admin.customers.destroy', $customer) }}">
                                                    @csrf
                                                    @method('delete')
                                                    <button class="btn btn-sm btn-outline-danger" onclick="return confirm('Delete this customer?')">Delete</button>
                                                </form>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">No customers.</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if($canManageCustomers)
        <div class="modal fade" id="customerModal" tabindex="-1" aria-labelledby="customerModalLabel" 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="customerModalLabel">Add Customer</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="post" action="{{ route('admin.customers.store') }}" class="row g-3 px-3 pb-3">
                        @csrf
                        @include('admin.customers.partials.form', ['customer' => null])
                        <div class="d-flex justify-content-end gap-2">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        @foreach($customers as $customer)
            <div class="modal fade" id="editCustomerModal-{{ $customer->id }}" tabindex="-1" aria-labelledby="editCustomerModalLabel-{{ $customer->id }}" 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="editCustomerModalLabel-{{ $customer->id }}">Edit Customer #{{ $customer->id }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <form method="post" action="{{ route('admin.customers.update', $customer) }}" class="row g-3 px-3 pb-3">
                            @csrf
                            @method('put')
                            @include('admin.customers.partials.form', ['customer' => $customer])
                            <div class="d-flex justify-content-end gap-2">
                                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-primary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endforeach
    @endif

    @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', () => {
                $('#customersTable').bootstrapTable({
                    toolbar: '#tableToolbar',
                    search: true,
                    searchAlign: 'right',
                    pagination: true,
                    pageSize: 20,
                    pageList: [10, 20, 50],
                    sortable: true
                });

                @if(request('edit_customer_id'))
                    const editModalEl = document.getElementById('editCustomerModal-{{ request('edit_customer_id') }}');
                    if (editModalEl) {
                        const editModal = new bootstrap.Modal(editModalEl);
                        editModal.show();
                    }
                @endif
            });
        </script>
    @endpush
</x-app-layout>