@extends('template.desktop.app')

@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 Mitra</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-agen" placeholder="Cari Mitra: nama, kode"
                        aria-controls="agen-table" />
                </div>

                <select name="agen_table_length" id="dt-length-agen" 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('admin.mitras.create') }}" class="btn btn-primary btn-sm">
                    <i class="icon-base ti tabler-plus me-2"></i> Tambah Mitra
                </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_users">
                <thead class="bg-light text-muted">
                    <tr class="text-uppercase fw-semibold fs-7">
                        <th>Tanggal Dibuat</th>
                        <th>Nama Mitra</th>
                        <th>Kode Mitra</th>
                        <th>Pengiriman</th>
                        <th class="text-center">Total Stock</th>
                        <th class="text-center">LP View</th>
                        <th class="text-center">D-Trace</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody id="skeleton-loader" style="display: none;">
                    @for ($i = 0; $i < 10; $i++)
                        <tr>
                            @for ($j = 0; $j < 8; $j++)
                                <td><span class="placeholder col-12 placeholder-wave"></span></td>
                            @endfor
                        </tr>
                    @endfor
                </tbody>
                <tbody id="distributor-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>
    document.addEventListener("DOMContentLoaded", function () {
        const tableBody = document.getElementById("distributor-table-body");
        const skeletonLoader = document.getElementById("skeleton-loader");
        const searchInput = document.getElementById("dt-search-agen");
        const lengthSelect = document.getElementById("dt-length-agen");
        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 fetchDistributors(search = '', page = 1, length = 10) {
            toggleLoading(true);

            axios.get("{{ route('admin.mitras.data') }}", {
                params: {
                    search,
                    page,
                    length
                }
            }).then(response => {
                const users = response.data.data;
                const lastPage = response.data.last_page;

                tableBody.innerHTML = users.map(user => {
                    const distributor = user.distributor || {};
                    const statusData = distributor.distributor_status || {};

                    let isOnVacation = statusData.show_accordion ?? false;
                    let isStockEmpty = statusData.show_checkongkir ?? false;
                    let shipmentNames = (distributor.shipments || []).map(s => s.name).join(', ') || '-';
                    const totalStock = (distributor.stocks || []).reduce((acc, stock) => acc + (stock.quantity || 0), 0);

                    return `
                        <tr>
                            <td>${new Date(user.created_at).toLocaleDateString()}</td>
                            <td>${distributor.full_name || '-'}</td>
                            <td>${distributor.agent_code || '-'}</td>
                            <td>${shipmentNames}</td>
                            <td class="text-center">${totalStock}</td>
                            <td>
                                <div class="form-check form-switch d-flex justify-content-center mb-1">
                                    <input class="form-check-input" type="checkbox" ${isOnVacation ? 'checked' : ''} onchange="toggleShowAccordian(${distributor.id}, this)">
                                </div>
                            </td>
                            <td>
                                <div class="form-check form-switch d-flex justify-content-center">
                                    <input class="form-check-input" type="checkbox" ${isStockEmpty ? 'checked' : ''} onchange="toggleShowCheckOngkir(${distributor.id}, this)">
                                </div>
                            </td>
                            <td class="text-end">
                                <div class="d-flex flex-wrap justify-content-end gap-2">
                                    <a href="/admin/mitras/${user.id}/edit" class="btn btn-sm btn-warning" title="Edit">
                                        <i class="tf-icons icon-base ti tabler-pencil"></i>
                                    </a>
                                    <form action="/admin/mitras/${user.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="Delete">
                                            <i class="tf-icons icon-base ti tabler-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    `;
                }).join('');

                renderPagination(lastPage);
                toggleLoading(false);
            }).catch(() => {
                toggleLoading(false);
                alert('Gagal memuat data agen.');
            });
        }

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

            const pages = [];
            pages.push(1);

            let start = Math.max(2, currentPage - 2);
            let end = Math.min(lastPage - 1, currentPage + 2);

            if (start > 2) {
                pages.push('...');
            }

            for (let i = start; i <= end; i++) {
                pages.push(i);
            }

            if (end < lastPage - 1) {
                pages.push('...');
            }

            if (lastPage > 1) {
                pages.push(lastPage);
            }

            for (const p of pages) {
                if (p === '...') {
                    html += `<li class="page-item disabled"><span class="page-link">…</span></li>`;
                } else {
                    html += `<li class="page-item ${p === currentPage ? 'active' : ''}">
                                <button class="page-link" onclick="changePage(${p})">${p}</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;
            fetchDistributors(searchInput.value, currentPage, currentLength);
        };

        window.toggleShowAccordian = function (userId, checkbox) {
            axios.patch(`/admin/distributors/${userId}/show-accordian`, {
                show_accordion: checkbox.checked ? 1 : 0
            }, {
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            }).then(() => {
                fetchDistributors(searchInput.value, currentPage, currentLength);
                showToast("Status berhasil diperbarui.", "#28c76f");
            }).catch(() => {
                checkbox.checked = !checkbox.checked;
                showToast("Gagal memperbarui status.", "#ea5455");
            });
        };

        window.toggleShowCheckOngkir = function (userId, checkbox) {
            axios.patch(`/admin/distributors/${userId}/show-checkongkir`, {
                show_checkongkir: checkbox.checked ? 1 : 0
            }, {
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            }).then(() => {
                fetchDistributors(searchInput.value, currentPage, currentLength);
                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();
        }

        // Event listeners
        searchInput.addEventListener('input', function () {
            currentPage = 1;
            fetchDistributors(searchInput.value, currentPage, currentLength);
        });

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

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