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

@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 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('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 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="mitra-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("mitra-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 currentSort = "";
            let currentSortDir = "asc";

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

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

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

                    // Toggle ascend/descend
                    if (currentSort === sortKey) {
                        currentSortDir = currentSortDir === "asc" ? "desc" : "asc";
                    } else {
                        currentSort = sortKey;
                        currentSortDir = "asc"; // default
                    }

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

                    fetchMitras(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 fetchMitras(search = '', page = 1, length = 10, sort = '', direction = 'asc') {
                toggleLoading(true);

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

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

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

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


                        let totalStock = 0;
                        const warehouse = mitra.warehouse || mitra.warehouses || null;
                        if (Array.isArray(warehouse)) {
                            totalStock = warehouse.reduce((acc, w) => acc + (w.stock || 0), 0);
                        } else if (warehouse && typeof warehouse === 'object') {
                            totalStock = warehouse.stock || 0;
                        }

                        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(${mitra.id}, this)">
                                </div>    
                            </td>
                            <td>${mitra.area.city_name || '-'}</td>
                            <td>${mitra.name || '-'}</td>
                            <td>${mitra.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(${mitra.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(${mitra.id}, this)">
                                </div>
                            </td>
                            <td class="text-end">
                                <div class="d-flex flex-wrap justify-content-end gap-2">
                                    <a href="/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="/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 mitra.');
                });
            }

            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;
                fetchMitras(searchInput.value, currentPage, currentLength, currentSort, currentSortDir);
            };

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

            window.toggleUserStatus = function(userId, checkbox) {
                axios.patch(`/mitras/${userId}/status`, {
                    status: checkbox.checked ? 1 : 0
                }, {
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                }).then(() => {
                    fetchMitras(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();
            }

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

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

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