@extends('layouts.pelanggan')
@section('title', 'Menu')

@push('style')
<style>
    #list-order {
        table-layout: fixed;
        width: 100%;
    }

    #list-order td,
    #list-order th {
        word-break: break-word;
        /* Memaksa kata panjang agar turun ke bawah */
        white-space: normal;
        /* Izinkan spasi agar bisa turun ke baris berikutnya */
        vertical-align: top;
        /* Supaya teks tetap rapi di atas */
    }

</style>
<style>
    /* Sembunyikan scrollbar untuk semua browser */
    .hide-scrollbar {
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* Internet Explorer & Edge */
        overflow-x: auto;
        overflow-y: hidden;
        /* Hanya scroll horizontal */
        white-space: nowrap;
    }

    .hide-scrollbar::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera */
    }

    .nav-tabs {
        min-width: max-content;
    }

    .nav-tabs .nav-link {
        border: none;
        border-bottom: 3px solid transparent;
        margin-right: 1rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
        color: #333;
        transition: all 0.2s ease;
        background: none;
        white-space: nowrap;
        outline: none;
        box-shadow: none;
    }

    .nav-tabs .nav-link.active {
        font-weight: bold;
        border-bottom: 3px solid #ff6600;
        color: #ff6600;
    }

    .category-item.active {
        background-color: #ff6600;
        color: white;
        font-weight: bold;
    }

    .page-item.active .page-link {
        background-color: #f7941d !important; 
        border-color: #f7941d !important;     
        color: #fff !important;               
    }

    .page-link:hover {
        color: #d67a0c; 
    }
</style>
@endpush

@section('main')
@include('pelanggan.menu.allFood', [
'category' => $category,
'menus' => $menus
])
@endsection

@push('script')
<script>
    $(document).ready(function() {
        // Buka modal saat tombol kategori diklik
        $('#categoryMenuToggle').on('click', function() {
            $('#categoryModal').modal('show');
        });

        // Saat modal dibuka, tandai kategori yang aktif
        $('#categoryModal').on('show.bs.modal', function() {
            const activeCategory = $('.category-tab.active').data('category');
            $('.category-item').removeClass('active');
            $(`.category-item[data-category="${activeCategory}"]`).addClass('active');
        });

        // Fungsi untuk scroll horizontal ke kategori aktif
        function scrollToActiveCategoryTab() {
            const $activeTab = $('.category-tab.active');
            const $tabWrapper = $('#categoryTabs').closest('.hide-scrollbar');

            if ($activeTab.length && $tabWrapper.length) {
                const tabLeft = $activeTab.position().left + $tabWrapper.scrollLeft();
                const tabWidth = $activeTab.outerWidth(true);
                const wrapperWidth = $tabWrapper.width();

                const scrollOffset = 60;
                const scrollPosition = tabLeft - (wrapperWidth / 2) + (tabWidth / 2) - scrollOffset;
                $tabWrapper.animate({
                    scrollLeft: scrollPosition
                }, 300);
            }
        }

        // Klik kategori di dalam modal
        $(document).on('click', '.category-item', function() {
            const selectedCategory = $(this).data('category');

            // Ubah tab utama
            $('.category-tab').removeClass('active text-orange').addClass('text-dark');
            $(`.category-tab[data-category="${selectedCategory}"]`).addClass('active text-orange').removeClass('text-dark');

            // Tandai item di modal
            $('.category-item').removeClass('active');
            $(this).addClass('active');

            // Tutup modal
            $('#categoryModal').modal('hide');

            // Scroll ke tab kategori aktif
            scrollToActiveCategoryTab();

            // Muat ulang menu
            getMenus(1, "ada");
        });

        // Klik kategori di tab utama
        $('.category-tab').on('click', function() {
            $('.category-tab').removeClass('active text-orange').addClass('text-dark');
            $(this).addClass('active text-orange').removeClass('text-dark');

            getMenus(1, "ada");
        });

        $('#search').on('input change', function() {
            getMenus(1, "ada");
        })
    });

    $(document).on('click', '.pagination a', function(e) {
        e.preventDefault();
        let page = $(this).attr('href').split('page=')[1];
        getMenus(page, "ada");
    });

</script>
@endpush