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

@section('content')

<div class="card">

    {{-- HEADER --}}
    <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 Pengguna
            </h4>

            <div class="d-flex flex-wrap align-items-center gap-2">

                {{-- SEARCH --}}
                <div class="position-relative">
                    <input type="search" class="form-control ps-4" id="dt-search-user"
                        placeholder="Cari user: username, email, telepon..." aria-controls="users-table" />
                </div>

                {{-- LENGTH --}}
                <select id="dt-length-user" class="form-select w-auto">
                    <option value="10" selected>10</option>
                    <option value="100">100</option>
                    <option value="1000">1000</option>
                </select>

                {{-- ADD USER --}}
                <a href="{{ route('management_users.create') }}" class="btn btn-primary btn-sm">
                    <i class="icon-base ti tabler-plus me-2"></i> Tambah User
                </a>

            </div>

        </div>
    </div>

    <!-- BODY -->
    <div class="card-body pt-4">

        <div class="table-responsive">
            <table class="table table-hover table-rounded table-striped align-middle">
                <thead class="bg-light text-muted">
                    <tr class="text-uppercase fw-semibold fs-7 text-nowrap">
                        <th>Username</th>
                        <th>Email</th>
                        <th>No HP</th>
                        <th>Role</th>
                        <th>Dibuat</th>
                        <th class="text-center">Status</th>
                        <th class="text-end">Aksi</th>
                    </tr>
                </thead>

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

                {{-- DATA --}}
                <tbody id="users-table-body" class="text-gray-600 fw-semibold"></tbody>

            </table>
        </div>

        {{-- PAGINATION --}}
        <div class="d-flex justify-content-end align-items-center mt-4">
            <ul class="pagination pagination-sm" id="pagination-user"></ul>
        </div>

    </div>
</div>


{{-- AXIOS --}}
<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("users-table-body");
    const skeleton = document.getElementById("skeleton-loader");
    const searchInput = document.getElementById("dt-search-user");
    const lengthSelect = document.getElementById("dt-length-user");
    const pagination = document.getElementById("pagination-user");

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

    function toggleLoading(show) {
        tableBody.style.display = show ? 'none' : 'table-row-group';
        skeleton.style.display = show ? 'table-row-group' : 'none';
    }

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

    function fetchUsers(search = '', page = 1, length = 10) {

        toggleLoading(true);

        axios.get("{{ route('management_users.data') }}", {
            params: { search, page, length }
        })
        .then(res => {

            const items = res.data.data ?? [];
            const lastPage = res.data.last_page ?? 1;

            if (!items.length) {
                tableBody.innerHTML = `
                    <tr>
                        <td colspan="7" 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(user => `
                <tr>
                    <td>${user.username}</td>
                    <td>${user.email}</td>
                    <td>${user.phone_number || '-'}</td>
                    <td class="fw-bold text-primary">${user.role}</td>
                    <td>${formatDate(user.created_at)}</td>

                    <td class="text-center">
                        <div class="form-check form-switch d-flex justify-content-center">
                            <input class="form-check-input" type="checkbox"
                                ${user.status == 1 ? 'checked' : ''}
                                onchange="toggleUserStatus(${user.id}, this)">
                        </div>
                    </td>

                    <td class="text-end">
                        <div class="d-flex justify-content-end gap-2">
                            <a href="/management-users/${user.id}/edit"
                                class="btn btn-sm btn-warning" title="Edit">
                                <i class="ti tabler-pencil"></i>
                            </a>

                            <form action="/management-users/${user.id}/destroy"
                                  method="POST" class="m-0">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                    class="btn btn-sm btn-danger"
                                    onclick="return confirm('Hapus user?')">
                                    <i class="ti tabler-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
            `).join('');

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

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

        html += `
            <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                <button class="page-link" onclick="changePage(1)">
                    <i class="ti tabler-chevrons-left"></i>
                </button>
            </li>`;

        html += `
            <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                <button class="page-link" onclick="changePage(${currentPage - 1})">
                    <i class="ti tabler-chevron-left"></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="ti tabler-chevron-right"></i>
                </button>
            </li>`;

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

        pagination.innerHTML = html;
    }

    window.changePage = function(page) {
        currentPage = page;
        fetchUsers(searchInput.value, currentPage, currentLength);
    };

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

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

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

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

    fetchUsers(searchInput.value, currentPage, currentLength);

});
</script>

@endsection