@extends('layouts.status-orderan')
@push('style')
@endpush
@section('content')
    <section>
        <div class="">
            <div class="flex items-center gap-4 justify-between  flex-wrap">
                <div class="flex items-center gap-4 flex-wrap">
                    <div class="flex gap-3">
                        <label for="search" class="label font-bold">Cari : </label>
                        <input type="search" name="search" id="search" class="input bg-white max-w-xl w-full"
                            placeholder="Ketik disini...">
                    </div>
                    <div class="flex gap-3">
                        <label for="filter" class="label font-bold">Filter : </label>
                        <select class="select bg-white" id="container-filter">
                            <option value="">Semua</option>
                        </select>
                    </div>
                    <div class="flex gap-3">
                        <label for="count-total-data" class="label font-bold">Total : </label>
                        <span class="font-bold" id="count-total-data">0</span>
                    </div>
                </div>
                <div>
                    <div class="flex gap-3 w-full">
                        <label for="auto-refresh" class="label font-bold">Auto Refresh : </label>
                        <select class="select bg-white" id="auto-refresh">
                            <option selected>Non-Aktif</option>
                            <option>1 Seconds</option>
                            <option>5 Seconds</option>
                            <option>2 Menutes</option>
                        </select>
                    </div>
                    <div class="text-xs text-gray-400 mt-1" id="last-refresh-label"></div>
                </div>
            </div>
            <div class="mt-5 grid lg:grid-cols-3 md:grid-cols-2 grid-cols-2 gap-4" id="container-content">

            </div>
            <div class="mt-5 flex justify-center">
                <div class="join"></div>
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            let originalData = [];
            let currentPage = 1;
            const ITEMS_PER_PAGE = 9;
            let autoRefreshInterval = null;

            function paginate(data, page) {
                const start = (page - 1) * ITEMS_PER_PAGE;
                const end = start + ITEMS_PER_PAGE;
                return data.slice(start, end);
            }

            function renderPaginationButtons(dataLength) {
                const totalPages = Math.ceil(dataLength / ITEMS_PER_PAGE);
                const paginationContainer = $('.join');
                paginationContainer.empty();

                if (totalPages <= 1) return;

                paginationContainer.append(`
                    <button class="join-item btn-ghost btn" data-page="${currentPage - 1}" ${currentPage === 1 ? 'disabled' : ''}>
                        <i data-lucide="chevrons-left"></i> Prev
                    </button>
                `);

                let dotsAdded = false;
                for (let i = 1; i <= totalPages; i++) {
                    if (i === 1 || i === totalPages || (i >= currentPage - 1 && i <= currentPage + 1)) {
                        paginationContainer.append(`
                            <button class="join-item btn-ghost btn ${i === currentPage ? 'btn-active' : ''}" data-page="${i}">
                                ${i}
                            </button>
                        `);
                        dotsAdded = false;
                    } else if (!dotsAdded) {
                        paginationContainer.append(`<button class="join-item btn-ghost btn" disabled>...</button>`);
                        dotsAdded = true;
                    }
                }

                paginationContainer.append(`
                    <button class="join-item btn-ghost btn" data-page="${currentPage + 1}" ${currentPage === totalPages ? 'disabled' : ''}>
                        Next <i data-lucide="chevrons-right"></i>
                    </button>
                `);
            }

            function renderCards(data) {
                const container = $('#container-content');
                container.empty();
                if (data.length === 0) {
                    container.html('<p class="text-gray-500">Data tidak ditemukan.</p>');
                    $('.join').empty();
                    return;
                }

                const paginatedData = paginate(data, currentPage);
                paginatedData.forEach(item => {
                    const statusColor = item.status_color || "#000000";
                    const textColor = item.status_color ? "black" : "white";

                    const cardHtml = `
                        <div class="card card-border bg-white shadow">
                            <div class="card-body">
                                <div class="my-3">
                                    <div class="rounded p-4" style="background-color: ${statusColor}; color: ${textColor};">
                                        <span class="font-bold">#${item.order_id} | ${item.status_name}</span>
                                    </div>
                                    <div class="mt-4 space-y-2">
                                        <h4 class="font-bold">${item.cust_name}</h4>
                                        <h1 class="card-title font-bold">${item.jenama}</h1>
                                        <div class="flex items-center gap-2">
                                            <span>${item.jenis}</span> <span>${item.size}</span>
                                        </div>
                                    </div>
                                    <div class="mt-4">
                                        <div class="flex items-end gap-4">
                                            <div>
                                                <span>Diterima oleh :</span>
                                                <span class="block font-bold text-lg">${item.diterima_oleh}</span>
                                            </div>
                                            <div>
                                                <span>Tarikh Terima :</span>
                                                <span class="block font-bold text-lg">${item.date}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                    container.append(cardHtml);
                });

                renderPaginationButtons(data.length);
            }

            function filterData(keyword) {
                return originalData.filter(item =>
                    (item.order_id && item.order_id.toLowerCase().includes(keyword)) ||
                    (item.status_name && item.status_name.toLowerCase().includes(keyword)) ||
                    (item.jenama && item.jenama.toLowerCase().includes(keyword)) ||
                    (item.diterima_oleh && item.diterima_oleh.toLowerCase().includes(keyword)) ||
                    (item.jenis && item.jenis.toLowerCase().includes(keyword)) ||
                    (item.size && item.size.toLowerCase().includes(keyword)) ||
                    (item.date && item.date.toLowerCase().includes(keyword))
                );
            }

            async function refreshView() {
                const keyword = $('#search').val().toLowerCase();
                const idStatus = $('#container-filter').val();

                try {
                    const response = await $.ajax({
                        type: "GET",
                        url: "/api/status-order",
                        data: idStatus ? {
                            id_status: idStatus
                        } : {},
                        dataType: "JSON"
                    });
                    if (response.success && Array.isArray(response.data)) {
                        $("#count-total-data").text(response.total_data);
                        originalData = response.data;
                        const filtered = filterData(keyword);
                        renderCards(filtered);
                        const now = new Date();
                        $('#last-refresh-label').text('Terakhir diperbarui: ' + now.toLocaleTimeString('ms-MY'));
                    } else {
                        $('#container-content').html('<p class="text-red-500">Gagal memuat data.</p>');
                    }
                } catch (error) {
                    $('#container-content').html(
                        '<p class="text-red-500">Terjadi kesalahan saat mengambil data.</p>');
                }
            }

            $('#search').on('input', function() {
                currentPage = 1;
                refreshView();
            });

            $('#container-filter').on('change', function() {
                currentPage = 1;
                refreshView();
            });

            $(document).on('click', '.join .btn', function() {
                const page = parseInt($(this).attr('data-page'));
                const keyword = $('#search').val().toLowerCase();
                const filtered = filterData(keyword);
                const totalPages = Math.ceil(filtered.length / ITEMS_PER_PAGE);

                if (!isNaN(page) && page >= 1 && page <= totalPages) {
                    currentPage = page;
                    renderCards(filtered);
                }
            });

            // Fetch daftar status untuk dropdown filter
            $.ajax({
                type: "GET",
                url: "/api/status-product",
                dataType: "JSON",
                success: function(response) {
                    if (response.success && Array.isArray(response.data)) {
                        const filterSelect = $('#container-filter');
                        filterSelect.empty();
                        filterSelect.append(`<option value="">Semua</option>`);

                        response.data.forEach(status => {
                            filterSelect.append(
                                `<option value="${status.id}">${status.name}</option>`);
                        });
                    } else {
                        console.warn("Gagal memuat status produk.");
                    }
                },
                error: function() {
                    console.error("Terjadi kesalahan saat mengambil status produk.");
                }
            });

            // Load awal
            refreshView();

            function setAutoRefresh(value) {
                // Bersihkan interval sebelumnya jika ada
                if (autoRefreshInterval) {
                    clearInterval(autoRefreshInterval);
                    autoRefreshInterval = null;
                }

                // Atur interval baru jika bukan Non-Aktif
                if (value !== 'Non-Aktif') {
                    let delay;

                    switch (value) {
                        case '1 Seconds':
                            delay = 1000;
                            break;
                        case '5 Seconds':
                            delay = 5000;
                            break;
                        case '2 Menutes':
                            delay = 2 * 60 * 1000;
                            break;
                    }

                    if (delay) {
                        autoRefreshInterval = setInterval(() => {
                            refreshView();
                        }, delay);
                    }
                }
            }
            $('select#auto-refresh').on('change', function() {
                const selected = $(this).val();
                setAutoRefresh(selected);
            });
        });
    </script>
@endpush