@extends('template.desktop.app')
@section('title', 'Data Customer Services')

@section('content')
    <div class="card">
        <div class="card-header border-0 pt-4 pb-0">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center">
                <h4 class="card-title text-dark fw-bold mb-3 mb-md-0">Data Customer Services</h4>

                <div class="d-flex flex-wrap align-items-center gap-2">
                    <div class="position-relative">
                        <input type="search" class="form-control ps-4" id="dt-search-cs"
                            placeholder="Cari CS: nama, email, telepon..." aria-controls="cs-table" />
                    </div>

                    <select name="cs_table_length" id="dt-length-cs" class="form-select w-auto">
                        <option value="10" selected>10</option>
                        <option value="100">100</option>
                        <option value="1000">1000</option>
                    </select>

                    <a href="{{ route('customer-services.create') }}" class="btn btn-primary btn-sm">
                        <i class="icon-base ti tabler-plus me-2"></i> Tambah CS
                    </a>
                </div>
            </div>
        </div>

        <div class="card-body pt-4">
            <div class="table-responsive">
                <table class="table table-hover table-rounded table-striped align-middle" id="kt_table_cs">
                    <thead class="bg-light text-muted">
                        <tr class="text-uppercase fw-semibold fs-7 text-nowrap">
                            <th>Status</th>
                            <th>Nama Lengkap</th>
                            <th>Username</th>
                            <th>Email</th>
                            <th>Telepon</th>
                            <th>Gaji</th>
                            <th>Target Box</th>
                            <th>Bergabung</th>
                            <th>Login Terakhir</th>
                            <th class="text-end">Aksi</th>
                        </tr>
                    </thead>

                    <tbody id="skeleton-loader" style="display: none;">
                        @for ($i = 0; $i < 10; $i++)
                            <tr>
                                @for ($j = 0; $j < 10; $j++)
                                    <td><span class="placeholder col-12 placeholder-wave"></span></td>
                                @endfor
                            </tr>
                        @endfor
                    </tbody>

                    <tbody id="cs-table-body" class="text-gray-600 fw-semibold"></tbody>
                </table>
            </div>

            <div class="d-flex justify-content-end align-items-center 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 src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const tableBody = document.getElementById("cs-table-body");
            const skeletonLoader = document.getElementById("skeleton-loader");
            const searchInput = document.getElementById("dt-search-cs");
            const lengthSelect = document.getElementById("dt-length-cs");
            const paginationContainer = document.getElementById("pagination");

            let currentPage = 1;
            let currentLength = parseInt(lengthSelect.value);

            function toggleLoading(show) {
                if (show) {
                    tableBody.style.display = 'none';
                    skeletonLoader.style.display = 'table-row-group';
                } else {
                    skeletonLoader.style.display = 'none';
                    tableBody.style.display = 'table-row-group';
                }
            }

            function fetchCustomerServices(search = '', page = 1, length = 10) {
                toggleLoading(true);

                axios.get("{{ route('customer-services.data') }}", {
                        params: {
                            search,
                            page,
                            length
                        }
                    })
                    .then(response => {
                        const items = response.data.data;
                        const lastPage = response.data.last_page || 1;

                        if (!items.length) {
                            tableBody.innerHTML = `
                    <tr>
                        <td colspan="10" class="text-center py-4 text-muted">
                            <i class="ti tabler-database-off me-1"></i> Tidak ada data ditemukan
                        </td>
                    </tr>`;
                            toggleLoading(false);
                            return;
                        }

                        tableBody.innerHTML = items.map(cs => `
                <tr>
                    <td>
                        <div class="form-check form-switch d-flex justify-content-center">
                            <input class="form-check-input" type="checkbox" ${cs.status ? 'checked' : ''} onchange="toggleCSStatus(${cs.id}, this)">
                        </div>    
                    </td>
                    <td>${cs.name || '-'}</td>
                    <td>${cs.user?.username || '-'}</td>
                    <td>${cs.user?.email || '-'}</td>
                    <td>${cs.phone || '-'}</td>
                    <td>Rp ${new Intl.NumberFormat('id-ID').format(cs.salary || 0)}</td>
                    <td class="text-center">${cs.target_boxes || 0}</td>
                    <td>${formatDate(cs.created_at)}</td>
                    <td>${cs.user?.last_login ? formatDate(cs.user.last_login) : '-'}</td>
                    <td class="text-end">
                        <div class="d-flex flex-wrap justify-content-end gap-2">
                            <a href="/customer-services/${cs.id}/edit" class="btn btn-sm btn-warning" title="Edit">
                                <i class="tf-icons icon-base ti tabler-pencil"></i>
                            </a>
                            <form action="/customer-services/${cs.id}/destroy" method="POST" class="m-0">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Yakin ingin menghapus data ini?')" title="Hapus">
                                    <i class="tf-icons icon-base ti tabler-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
            `).join('');

                        renderPagination(lastPage);
                        toggleLoading(false);
                    })
                    .catch(() => {
                        toggleLoading(false);
                        tableBody.innerHTML =
                            `<tr><td colspan="10" class="text-center text-danger py-4">Gagal memuat data.</td></tr>`;
                    });
            }

            function formatDate(dateString) {
                if (!dateString) return '-';
                const d = new Date(dateString);
                return d.toLocaleDateString('id-ID', {
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric'
                });
            }

            function renderPagination(lastPage) {
                let html = '';
                html += `<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                    <button class="page-link" onclick="changePage(1)">
                        <i class="icon-base ti tabler-chevrons-left" style="font-size: 12px;"></i>
                    </button>
                 </li>`;

                html += `<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                    <button class="page-link" onclick="changePage(${currentPage - 1})">
                        <i class="icon-base ti tabler-chevron-left" style="font-size: 12px;"></i>
                    </button>
                 </li>`;

                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>`;
                }

                html += `<li class="page-item ${currentPage === lastPage ? 'disabled' : ''}">
                    <button class="page-link" onclick="changePage(${currentPage + 1})">
                        <i class="icon-base ti tabler-chevron-right" style="font-size: 12px;"></i>
                    </button>
                 </li>`;

                html += `<li class="page-item ${currentPage === lastPage ? 'disabled' : ''}">
                    <button class="page-link" onclick="changePage(${lastPage})">
                        <i class="icon-base ti tabler-chevrons-right" style="font-size: 12px;"></i>
                    </button>
                 </li>`;

                paginationContainer.innerHTML = html;
            }

            window.changePage = function(page) {
                if (page < 1) return;
                currentPage = page;
                fetchCustomerServices(searchInput.value, currentPage, currentLength);
            };

            window.toggleCSStatus = function(csId, checkbox) {
                axios.patch(`/customer-services/${csId}/status`, {
                        status: checkbox.checked ? 1 : 0
                    }, {
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    })
                    .then(() => showToast("Status berhasil diperbarui.", "#28c76f"))
                    .catch(() => {
                        checkbox.checked = !checkbox.checked;
                        showToast("Gagal memperbarui status.", "#ea5455");
                    });
            };

            function showToast(message, backgroundColor) {
                Toastify({
                    text: message,
                    duration: 3000,
                    close: true,
                    gravity: "top",
                    position: "right",
                    backgroundColor,
                    stopOnFocus: true
                }).showToast();
            }

            searchInput.addEventListener('input', function() {
                currentPage = 1;
                fetchCustomerServices(searchInput.value, currentPage, currentLength);
            });

            lengthSelect.addEventListener('change', function() {
                currentLength = parseInt(this.value);
                currentPage = 1;
                fetchCustomerServices(searchInput.value, currentPage, currentLength);
            });

            fetchCustomerServices(searchInput.value, currentPage, currentLength);
        });
    </script>
@endsection