@extends('template.desktop.app')

@section('content')
    <div class="card">
        <!-- 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 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('admin.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>Tanggal Dibuat</th>
                            <th>Nama Agen</th>
                            <th>Kode Agen</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="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 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 fetchDistributors(search = '', page = 1, length = 10) {
                axios.get("{{ route('admin.distributors.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>  <!-- kolom stock baru -->
                                <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/distributors/${user.id}/edit" class="btn btn-sm btn-warning" title="Edit">
                                            <i class="icon-base ti tabler-pencil"></i>
                                        </a>
                                        <form action="/admin/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);
                });
            }

            function renderPagination(lastPage) {
                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) {
                currentPage = page;
                fetchDistributors(searchInput.value, currentPage, currentLength);
            };

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

            lengthSelect.addEventListener("change", () => {
                currentLength = parseInt(lengthSelect.value);
                currentPage = 1;
                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);
                }).catch(() => {
                    alert('Gagal memperbarui status liburan.');
                    checkbox.checked = !checkbox.checked;
                });
            };

            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);
                }).catch(() => {
                    alert('Gagal memperbarui status stock habis.');
                    checkbox.checked = !checkbox.checked;
                });
            };

            fetchDistributors();
        });
    </script>
@endsection