@extends('template.desktop.app')

@section('content')
    <div class="card">
        <div class="card-header border-0 pt-4 pb-0">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title text-dark fw-bold">Data Customer Service</h5>
                <a href="{{ route('admin.customer_services.create') }}" class="btn btn-sm btn-primary">
                    <i class="icon-base ti tabler-plus me-2"></i> Tambah Customer Service
                </a>
            </div>
        </div>

        <div class="card-body pt-4">
            <div class="table-responsive">
                <table class="table table-hover" id="cs-table">
                    <thead class="bg-light text-muted">
                        <tr class="text-uppercase fw-semibold fs-7">
                            <th>Tanggal Dibuat</th>
                            <th>Nama</th>
                            <th>Email</th>
                            <th>Telepon</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="cs-table-body"></tbody>
                </table>
            </div>
            <div class="d-flex justify-content-end mt-4">
                <ul class="pagination pagination-sm" id="pagination"></ul>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const tableBody = document.getElementById("cs-table-body");
            const paginationContainer = document.getElementById("pagination");

            let currentPage = 1;

            function fetchCustomerServices(page = 1) {
                axios.get("{{ route('admin.customer_services.data') }}", {
                    params: {
                        page
                    }
                }).then(response => {
                    const users = response.data.data;
                    const lastPage = response.data.last_page;

                    tableBody.innerHTML = users.map(user => `
                    <tr>
                        <td>${new Date(user.created_at).toLocaleDateString()}</td>
                        <td>${user.customer_service?.full_name || '-'}</td>
                        <td>${user.email}</td>
                        <td>${user.phone_number}</td>
                        <td>${user.status ? 'Aktif' : 'Nonaktif'}</td>
                        <td class="text-end">
                            <a href="/admin/customer-services/${user.id}/edit" class="btn btn-sm btn-warning"><i class="icon-base ti tabler-pencil"></i></a>
                        </td>
                    </tr>
                `).join('');

                    renderPagination(lastPage);
                });
            }

            function renderPagination(lastPage) {
                let html = '';
                for (let i = 1; i <= lastPage; i++) {
                    html += `<li class="page-item ${i === currentPage ? 'active' : ''}">
                    <button class="page-link" onclick="changePage(${i})">${i}</button>
                </li>`;
                }
                paginationContainer.innerHTML = html;
            }

            window.changePage = function(page) {
                currentPage = page;
                fetchCustomerServices(currentPage);
            };

            fetchCustomerServices();
        });
    </script>
@endsection