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

@push('styles')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --cs-primary: #A52019;
            --cs-primary-soft: #fef2f1;
            --cs-bg: #f8f9fb;
            --cs-surface: #ffffff;
            --cs-border: #e5e7eb;
            --cs-border-light: #f3f4f6;
            --cs-text: #111827;
            --cs-text-sec: #6b7280;
            --cs-text-muted: #9ca3af;
            --cs-radius: 12px;
            --cs-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
            --cs-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.07);
        }

        .cs-wrapper {
            font-family: 'Inter', -apple-system, system-ui, sans-serif;
            color: var(--cs-text);
            -webkit-font-smoothing: antialiased;
        }

        /* ─── Header ──────── */
        .cs-header {
            background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 30%, #b91c1c 60%, #dc2626 100%);
            border-radius: 16px;
            padding: 1.75rem 2rem;
            color: #fff;
            position: relative;
            overflow: hidden;
            margin-bottom: 1.5rem;
        }

        .cs-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        .cs-header h2 {
            font-size: 1.4rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            margin: 0;
            color: #fff;
        }

        .cs-header p {
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.8rem;
            margin: 3px 0 0;
        }

        .cs-btn-add {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0.5rem 1.15rem;
            border-radius: 10px;
            font-weight: 700;
            font-size: 0.78rem;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            cursor: pointer;
            transition: all 0.15s;
            text-decoration: none;
        }

        .cs-btn-add:hover {
            background: rgba(255, 255, 255, 0.22);
            color: #fff;
        }

        .cs-btn-add svg {
            width: 15px;
            height: 15px;
        }

        /* ─── Filter Bar ──────── */
        .cs-filters {
            background: var(--cs-surface);
            border: 1px solid var(--cs-border);
            border-radius: var(--cs-radius);
            padding: 0.85rem 1.25rem;
            margin-bottom: 1rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
            align-items: center;
        }

        .cs-filter-search {
            position: relative;
            flex: 1;
            min-width: 200px;
        }

        .cs-filter-search input {
            width: 100%;
            padding: 0.5rem 0.85rem 0.5rem 2.4rem;
            border: 1px solid var(--cs-border);
            border-radius: 10px;
            font-size: 0.8rem;
            font-weight: 500;
            background: var(--cs-bg);
            outline: none;
            transition: all 0.15s;
            font-family: inherit;
        }

        .cs-filter-search input:focus {
            border-color: var(--cs-primary);
            box-shadow: 0 0 0 3px rgba(165, 32, 25, 0.1);
            background: #fff;
        }

        .cs-filter-search svg {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            color: var(--cs-text-muted);
            pointer-events: none;
        }

        .cs-select {
            padding: 0.5rem 2rem 0.5rem 0.75rem;
            border: 1px solid var(--cs-border);
            border-radius: 10px;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--cs-text);
            background: var(--cs-bg) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") no-repeat right 0.5rem center/16px;
            appearance: none;
            outline: none;
            cursor: pointer;
            transition: all 0.15s;
            font-family: inherit;
        }

        .cs-select:focus {
            border-color: var(--cs-primary);
            box-shadow: 0 0 0 3px rgba(165, 32, 25, 0.1);
            background-color: #fff;
        }

        /* ─── Table ──────── */
        .cs-table-card {
            background: var(--cs-surface);
            border: 1px solid var(--cs-border);
            border-radius: var(--cs-radius);
            overflow: hidden;
        }

        .cs-table {
            width: 100%;
            border-collapse: collapse;
        }

        .cs-table thead th {
            background: #f9fafb;
            padding: 0.65rem 0.85rem;
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--cs-text-sec);
            border-bottom: 1px solid var(--cs-border);
            white-space: nowrap;
        }

        .cs-table tbody td {
            padding: 0.65rem 0.85rem;
            font-size: 0.78rem;
            color: var(--cs-text);
            border-bottom: 1px solid var(--cs-border-light);
            vertical-align: middle;
        }

        .cs-table tbody tr {
            transition: background 0.1s;
        }

        .cs-table tbody tr:hover {
            background: #fafbff;
        }

        .cs-table tbody tr:last-child td {
            border-bottom: none;
        }

        /* ─── Badges ──────── */
        .cs-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 0.6rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .cs-badge-green {
            background: #dcfce7;
            color: #166534;
        }

        .cs-badge-red {
            background: #fee2e2;
            color: #991b1b;
        }

        /* ─── Toggle Switch ──────── */
        .cs-toggle {
            position: relative;
            width: 36px;
            height: 20px;
            cursor: pointer;
        }

        .cs-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .cs-toggle-slider {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #d1d5db;
            border-radius: 20px;
            transition: all 0.2s;
        }

        .cs-toggle-slider::before {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            top: 2px;
            left: 2px;
            transition: all 0.2s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        }

        .cs-toggle input:checked+.cs-toggle-slider {
            background: #22c55e;
        }

        .cs-toggle input:checked+.cs-toggle-slider::before {
            transform: translateX(16px);
        }

        /* ─── Action Buttons ──────── */
        .cs-action-btn {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            border: 1px solid var(--cs-border);
            background: var(--cs-surface);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s;
            text-decoration: none;
        }

        .cs-action-btn svg {
            width: 14px;
            height: 14px;
        }

        .cs-action-btn.view {
            color: #6366f1;
        }

        .cs-action-btn.view:hover {
            background: #eef2ff;
            border-color: #6366f1;
        }

        .cs-action-btn.edit {
            color: #f59e0b;
        }

        .cs-action-btn.edit:hover {
            background: #fffbeb;
            border-color: #f59e0b;
        }

        .cs-action-btn.delete {
            color: #ef4444;
        }

        .cs-action-btn.delete:hover {
            background: #fef2f2;
            border-color: #ef4444;
        }

        /* ─── Pagination ──────── */
        .cs-pagination {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1.25rem;
            border-top: 1px solid var(--cs-border-light);
            background: #fafbfc;
        }

        .cs-pagination .info {
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--cs-text-sec);
        }

        .cs-page-controls {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .cs-page-btn {
            min-width: 30px;
            height: 30px;
            border: 1px solid var(--cs-border);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--cs-text-sec);
            background: var(--cs-surface);
            cursor: pointer;
            transition: all 0.15s;
            padding: 0 6px;
        }

        .cs-page-btn:hover {
            background: var(--cs-primary-soft);
            color: var(--cs-primary);
            border-color: var(--cs-primary);
        }

        .cs-page-btn.active {
            background: var(--cs-primary);
            color: #fff;
            border-color: var(--cs-primary);
        }

        .cs-page-btn:disabled {
            opacity: 0.35;
            cursor: default;
            pointer-events: none;
        }

        .cs-page-btn svg {
            width: 14px;
            height: 14px;
        }

        .cs-page-dots {
            font-size: 0.72rem;
            color: var(--cs-text-muted);
            padding: 0 2px;
        }

        /* ─── Name Cell ──────── */
        .cs-name-cell {
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }

        .cs-name-avatar {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: linear-gradient(135deg, #7c3aed, #a78bfa);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 800;
            flex-shrink: 0;
        }

        .cs-name-text {
            font-weight: 600;
            color: var(--cs-text);
            font-size: 0.8rem;
        }

        /* ─── Empty ──────── */
        .cs-empty {
            text-align: center;
            padding: 3rem 1.5rem;
            color: var(--cs-text-muted);
        }

        .cs-empty svg {
            width: 42px;
            height: 42px;
            margin-bottom: 10px;
            color: var(--cs-border);
        }

        .cs-empty h6 {
            font-weight: 700;
            color: var(--cs-text-sec);
            font-size: 0.85rem;
        }

        /* ─── Skeleton ──────── */
        .cs-skeleton {
            height: 14px;
            background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
            background-size: 200% 100%;
            animation: cs-shimmer 1.5s infinite;
            border-radius: 4px;
        }

        @keyframes cs-shimmer {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }
    </style>
@endpush

@section('content')
    <div class="cs-wrapper px-3 py-3 px-lg-4">

        {{-- Header --}}
        <header class="cs-header">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="d-flex align-items-center justify-content-center rounded-3"
                        style="width:42px;height:42px;background:rgba(255,255,255,0.1);">
                        <i data-lucide="users" style="width:22px;color:#fbbf24;"></i>
                    </div>
                    <div>
                        <h2>Data Customer Service</h2>
                        <p>Kelola data dan akun Customer Service</p>
                    </div>
                </div>
                <a href="{{ route('customer-services.create') }}" class="cs-btn-add">
                    <i data-lucide="user-plus"></i> Tambah CS
                </a>
            </div>
        </header>

        {{-- Filter Bar --}}
        <div class="cs-filters">
            <div class="cs-filter-search">
                <i data-lucide="search"></i>
                <input type="text" id="dt-search-cs" placeholder="Cari nama, email, telepon...">
            </div>
            <select id="dt-length-cs" class="cs-select">
                <option value="10" selected>10 baris</option>
                <option value="50">50 baris</option>
                <option value="100">100 baris</option>
            </select>
        </div>

        {{-- Table --}}
        <div class="cs-table-card">
            <div class="table-responsive">
                <table class="cs-table">
                    <thead>
                        <tr>
                            <th>Status</th>
                            <th>Nama</th>
                            <th>Username</th>
                            <th>Email</th>
                            <th>Telepon</th>
                            <th class="text-end">Gaji</th>
                            <th class="text-center">Target Box</th>
                            <th>Bergabung</th>
                            <th class="text-end">Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="cs-table-body">
                        <tr>
                            <td colspan="9" class="cs-empty">
                                <div class="spinner-border text-secondary spinner-border-sm"></div>
                                <p class="mt-2 mb-0">Memuat data...</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="cs-pagination">
                <span class="info" id="pagination-info"></span>
                <div class="cs-page-controls" id="pagination"></div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
    <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() {
            lucide.createIcons();

            const tableBody = document.getElementById("cs-table-body");
            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);
            const fmt = (n) => new Intl.NumberFormat('id-ID').format(n || 0);

            function renderSkeleton() {
                let html = '';
                for (let i = 0; i < 5; i++) {
                    html += '<tr>';
                    for (let j = 0; j < 9; j++) {
                        html +=
                            `<td><div class="cs-skeleton" style="width:${60 + Math.random() * 40}%;"></div></td>`;
                    }
                    html += '</tr>';
                }
                tableBody.innerHTML = html;
            }

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

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

                        if (!items.length) {
                            tableBody.innerHTML = `
                                <tr><td colspan="9">
                                    <div class="cs-empty">
                                        <i data-lucide="users-x"></i>
                                        <h6>Tidak ada data ditemukan</h6>
                                    </div>
                                </td></tr>`;
                            lucide.createIcons();
                            paginationContainer.innerHTML = '';
                            document.getElementById('pagination-info').textContent = '';
                            return;
                        }

                        tableBody.innerHTML = items.map(cs => {
                            const initials = cs.name ? cs.name.split(' ').map(w => w[0]).join('')
                                .substring(0, 2).toUpperCase() : '??';
                            const statusBadge = cs.status ?
                                '<span class="cs-badge cs-badge-green">Aktif</span>' :
                                '<span class="cs-badge cs-badge-red">Nonaktif</span>';

                            return `<tr>
                                <td>
                                    <label class="cs-toggle">
                                        <input type="checkbox" ${cs.status ? 'checked' : ''} onchange="window.__toggleCS(${cs.id}, this)">
                                        <span class="cs-toggle-slider"></span>
                                    </label>
                                </td>
                                <td>
                                    <div class="cs-name-cell">
                                        <div class="cs-name-avatar">${initials}</div>
                                        <span class="cs-name-text">${cs.name || '-'}</span>
                                    </div>
                                </td>
                                <td><code style="font-size:0.72rem;background:#f3f4f6;padding:2px 6px;border-radius:4px;">${cs.user?.username || '-'}</code></td>
                                <td style="font-size:0.75rem;color:var(--cs-text-sec);">${cs.user?.email || '-'}</td>
                                <td style="font-size:0.75rem;">${cs.phone || '-'}</td>
                                <td class="text-end" style="font-weight:600;">Rp ${fmt(cs.salary)}</td>
                                <td class="text-center"><span class="cs-badge" style="background:#ede9fe;color:#5b21b6;">${cs.target_boxes || 0} box</span></td>
                                <td style="font-size:0.72rem;color:var(--cs-text-muted);">${formatDate(cs.created_at)}</td>
                                <td class="text-end">
                                    <div class="d-flex justify-content-end gap-1">
                                        <a href="/customer-services/${cs.id}/detail" class="cs-action-btn view" title="Lihat Detail">
                                            <i data-lucide="eye"></i>
                                        </a>
                                        <a href="/customer-services/${cs.id}/edit" class="cs-action-btn edit" title="Edit">
                                            <i data-lucide="pencil"></i>
                                        </a>
                                        <form action="/customer-services/${cs.id}/destroy" method="POST" class="m-0" onsubmit="return confirm('Yakin ingin menghapus data ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="cs-action-btn delete" title="Hapus">
                                                <i data-lucide="trash-2"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>`;
                        }).join('');

                        lucide.createIcons();

                        // Pagination info
                        const from = (currentPage - 1) * currentLength + 1;
                        const to = Math.min(currentPage * currentLength, total);
                        document.getElementById('pagination-info').textContent =
                            `Menampilkan ${from}–${to} dari ${total}`;

                        // Pagination buttons
                        renderPagination(lastPage);
                    })
                    .catch(() => {
                        tableBody.innerHTML = `<tr><td colspan="9">
                            <div class="cs-empty" style="color:#ef4444;">
                                <i data-lucide="alert-circle"></i>
                                <h6>Gagal memuat data</h6>
                            </div>
                        </td></tr>`;
                        lucide.createIcons();
                    });
            }

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

            function renderPagination(lastPage) {
                let html = '';

                html += `<button class="cs-page-btn" onclick="window.__changePage(${currentPage - 1})" ${currentPage <= 1 ? 'disabled' : ''}>
                    <i data-lucide="chevron-left"></i>
                </button>`;

                const pages = [];
                if (lastPage <= 7) {
                    for (let i = 1; i <= lastPage; i++) pages.push(i);
                } else {
                    pages.push(1);
                    if (currentPage > 3) pages.push('...');
                    for (let i = Math.max(2, currentPage - 1); i <= Math.min(lastPage - 1, currentPage + 1); i++)
                        pages.push(i);
                    if (currentPage < lastPage - 2) pages.push('...');
                    pages.push(lastPage);
                }

                pages.forEach(p => {
                    if (p === '...') {
                        html += `<span class="cs-page-dots">…</span>`;
                    } else {
                        html +=
                            `<button class="cs-page-btn ${p === currentPage ? 'active' : ''}" onclick="window.__changePage(${p})">${p}</button>`;
                    }
                });

                html += `<button class="cs-page-btn" onclick="window.__changePage(${currentPage + 1})" ${currentPage >= lastPage ? 'disabled' : ''}>
                    <i data-lucide="chevron-right"></i>
                </button>`;

                paginationContainer.innerHTML = html;
                lucide.createIcons();
            }

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

            window.__toggleCS = 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.", "#22c55e"))
                    .catch(() => {
                        checkbox.checked = !checkbox.checked;
                        showToast("Gagal memperbarui status.", "#ef4444");
                    });
            };

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

            let debounceTimer;
            searchInput.addEventListener('input', function() {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => {
                    currentPage = 1;
                    fetchCustomerServices(searchInput.value, currentPage, currentLength);
                }, 400);
            });

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

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