@extends('template.desktop.app')

@section('title', 'Data Agen')

@push('styles')
    <style>
        th.sortable {
            cursor: pointer;
            user-select: none;
        }

        th.sortable:hover {
            color: #1d4ed8;
        }

        th.sortable.active {
            color: #1d4ed8;
            font-weight: bold;
        }

        th.sortable i {
            transition: 0.2s;
        }

        th.sortable.desc i {
            transform: rotate(180deg);
        }
    </style>
@endpush

@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 Agen</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 Agen: 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('distributors.create') }}" class="btn btn-primary">
                        <i class="icon-base ti tabler-plus me-2"></i> Tambah Agen
                    </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 class="sortable" data-sort="status">Status <i class="bi bi-arrow-down-up sort-icon"></i>
                            </th>
                            <th>Kota/Kabupaten</th>
                            <th class="sortable" data-sort="name">Nama<i class="bi bi-arrow-down-up sort-icon"></i></th>
                            <th class="sortable" data-sort="code">Kode<i class="bi bi-arrow-down-up sort-icon"></i></th>
                            <th>Pengiriman</th>
                            <th class="text-center sortable" data-sort="stock">Total Stock <i
                                    class="bi bi-arrow-down-up sort-icon"></i></th>
                            <th class="text-center sortable" data-sort="lpview">LP View <i
                                    class="bi bi-arrow-down-up sort-icon"></i></th>
                            <th class="text-center sortable" data-sort="dtrace">D-Trace <i
                                    class="bi bi-arrow-down-up sort-icon"></i></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");

            const baseUrl = window.baseUrl || window.location.origin;

            let currentSort = "";
            let currentSortDir = "asc";
            let currentPage = 1;
            let currentLength = parseInt(lengthSelect.value);

            // Sorting headers
            document.querySelectorAll("th.sortable").forEach(header => {
                header.addEventListener("click", function() {
                    const sortKey = this.dataset.sort;

                    // reset active classes
                    document.querySelectorAll("th.sortable").forEach(h => {
                        h.classList.remove("active", "asc", "desc");
                    });

                    if (currentSort === sortKey) {
                        currentSortDir = currentSortDir === "asc" ? "desc" : "asc";
                    } else {
                        currentSort = sortKey;
                        currentSortDir = "asc";
                    }

                    // reset page to 1 when sorting changes
                    currentPage = 1;

                    this.classList.add("active");
                    this.classList.add(currentSortDir);

                    fetchDistributors(searchInput.value, currentPage, currentLength, currentSort,
                        currentSortDir);
                });
            });

            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 safeName(obj) {
                return (obj && obj.name) ? obj.name : '-';
            }

            function fetchDistributors(search = '', page = 1, length = 10, sort = '', direction = 'asc') {
                toggleLoading(true);

                axios.get("{{ route('distributors.data') }}", {
                    params: {
                        search,
                        page,
                        length,
                        sort,
                        direction
                    }
                }).then(response => {
                    const users = response.data.data || [];
                    const lastPage = response.data.last_page || 1;

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

                        let isOnVacation = statusData.show_accordion ?? false;
                        let isStockEmpty = statusData.show_checkongkir ?? false;
                        let isUserStatus = user.status ?? false;
                        const currentDomain = window.location.origin;

                        const shipmentNames = (distributor.shipments || [])
                            .map(s =>
                                `<img src="${currentDomain}/storage/icons/${s.icon}" alt="" style="max-height:25px;">`
                                )
                            .join(' ') || '-';

                        // safe warehouse handling
                        let totalStock = 0;
                        if (Array.isArray(distributor.warehouse)) {
                            totalStock = distributor.warehouse.reduce((acc, w) => acc + (w.stock ||
                                0), 0);
                        } else if (distributor.warehouse && typeof distributor.warehouse ===
                            'object') {
                            totalStock = distributor.warehouse.stock || 0;
                        } else if (user.total_stock !== undefined) {
                            // jika backend mengirim total_stock dari withSum
                            totalStock = user.total_stock || 0;
                        }
console.log(distributor.area.city_name);
                        return `
                    <tr>
                        <td>
                            <div class="form-check form-switch d-flex justify-content-center">
                                <input class="form-check-input" type="checkbox" ${isUserStatus ? 'checked' : ''} onchange="toggleUserStatus(${user.id}, this)">
                            </div>    
                        </td>
                        <td>${distributor.area.city_name}</td>
                        <td>${distributor.name || '-'}</td>
                        <td>${distributor.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="/distributors/${user.id}/edit" class="btn btn-sm btn-warning" title="Edit">
                                    <i class="icon-base ti tabler-pencil"></i>
                                </a>
                                <form action="/distributors/${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="icon-base ti tabler-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                `;
                    }).join('');

                    renderPagination(lastPage);
                    toggleLoading(false);
                }).catch(error => {
                    console.error("Error fetching distributors:", error);
                    toggleLoading(false);
                });
            }

            // Pagination and helpers (tidak diubah signifikan, gunakan function yang sama)
            function renderPagination(lastPage) {
                // ... (copy dari kode Anda; tidak saya ubah untuk singkat)
                let html = '';

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

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

                function pageItem(i) {
                    return `<li class="page-item ${i === currentPage ? 'active' : ''}">
                <button class="page-link" aria-current="${i === currentPage ? 'page' : ''}" onclick="changePage(${i})">${i}</button>
            </li>`;
                }

                function ellipsis() {
                    return `<li class="page-item disabled"><span class="page-link">…</span></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('start-ellipsis');
                } else {
                    for (let i = 2; i < start; i++) pages.push(i);
                }

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

                if (end < lastPage - 1) {
                    pages.push('end-ellipsis');
                } else {
                    for (let i = end + 1; i < lastPage; i++) pages.push(i);
                }

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

                for (const p of pages) {
                    if (p === 'start-ellipsis' || p === 'end-ellipsis') {
                        html += ellipsis();
                    } else {
                        html += pageItem(p);
                    }
                }

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

                html += `<li class="page-item ${currentPage === lastPage ? 'disabled' : ''}">
            <button class="page-link" aria-label="Last" ${currentPage === lastPage ? 'disabled' : ''} onclick="changePage(${lastPage})">
                <i class="icon-base ti tabler-chevrons-right scaleX-n1-rtl" 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, currentSort, currentSortDir);
            };

            searchInput.addEventListener("input", () => {
                currentPage = 1;
                fetchDistributors(searchInput.value, currentPage, currentLength, currentSort,
                    currentSortDir);
            });

            lengthSelect.addEventListener("change", () => {
                currentLength = parseInt(lengthSelect.value);
                currentPage = 1;
                fetchDistributors(searchInput.value, currentPage, currentLength, currentSort,
                    currentSortDir);
            });

            // PATCH endpoints (pastikan routes di web.php sesuai). Saya menggunakan baseUrl agar tidak hardcode.
            window.toggleShowAccordian = function(actorId, checkbox) {
                axios.patch(`${baseUrl}/distributors/${actorId}/show-accordian`, {
                    show_accordion: checkbox.checked ? 1 : 0
                }, {
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                }).then(() => {
                    fetchDistributors(searchInput.value, currentPage, currentLength, currentSort,
                        currentSortDir);
                }).catch(() => {
                    alert('Gagal memperbarui status liburan.');
                    checkbox.checked = !checkbox.checked;
                });
            };

            window.toggleShowCheckOngkir = function(actorId, checkbox) {
                axios.patch(`${baseUrl}/distributors/${actorId}/show-checkongkir`, {
                    show_checkongkir: checkbox.checked ? 1 : 0
                }, {
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                }).then(() => {
                    fetchDistributors(searchInput.value, currentPage, currentLength, currentSort,
                        currentSortDir);
                }).catch(() => {
                    alert('Gagal memperbarui status stock habis.');
                    checkbox.checked = !checkbox.checked;
                });
            };

            window.toggleUserStatus = function(userId, checkbox) {
                axios.patch(`${baseUrl}/distributors/${userId}/status`, {
                    status: checkbox.checked ? 1 : 0
                }, {
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                }).then(() => {
                    fetchDistributors(searchInput.value, currentPage, currentLength, currentSort,
                        currentSortDir);
                }).catch(() => {
                    alert('Gagal memperbarui status user.');
                    checkbox.checked = !checkbox.checked;
                });
            };

            // initial load
            fetchDistributors();
        });
    </script>

@endsection