@extends('layouts.master_layout')
@section('include_css')
<link rel="stylesheet" href="{{ asset('assets/css/list_products.css') }}" />
@endsection
@section('content')
<div class="wrapper-bg">
    <div class="page-container">
        <div class="content-wrapper">
            <div class="filter-container">
                <form method="GET" action="{{ route('member.data') }}" id="filterForm">
                    <div class="filter-box border-b">
                        <div class="filter-header">
                            <span class="filter-icon">=</span>
                            <span class="header-label">Hide Filters</span>
                        </div>
                        <div class="filter-header" id="clear-filters">
                            <img src="./assets/images/close.png" class="close-icon" />
                            <label class="item-label">Clear all</label>
                        </div>
                        <div class="filter-header flex-between"
                            style="display: flex;
                                        justify-content: flex-start;
                                        align-items: center;">
                            <input type="radio" name="sale" value="free" class="checkbox"
                                {{ request('sale') == 'free' ? 'checked' : '' }} />
                            <span class="custom-checkbox"></span>
                            <label class="item-label">Miễn phí</label>
                        </div>
                        <div class="filter-header flex-between"
                            style="display: flex;
                            justify-content: flex-start;
                            align-items: center;">
                            <input type="radio" name="sale" value="supper_sale" class="checkbox"
                                {{ request('sale') == 'supper_sale' ? 'checked' : '' }} />
                            <span class="custom-checkbox"></span>
                            <label class="item-label">Siêu rẻ</label>
                        </div>
                    </div>
                    <div class="filter-box border-b">
                        <div class="filter-header">
                            <span class="header-label">Categories</span>
                        </div>
                        {{-- ----------------------- --}}

                        @if (!empty($MenuCategorys))
                        <input type="hidden" name="title" value="{{ $title }}">

                        @foreach ($menus as $menu)
                        @php
                        $menuCategoryItems = $MenuCategorys->where('menu_id', $menu->id);
                        $dem = $menuCategoryItems->count();
                        @endphp

                        <div class="item-label item-label-menu">
                            <p>{{ $menu->name }}
                                @if ($dem > 0)
                                <i
                                    class="fa-solid fa-chevron-down {{ $menu_id == $menu->id ? '' : 'show' }}"></i>
                                <i
                                    class="fa-solid fa-chevron-up {{ $menu_id == $menu->id ? 'show' : '' }}"></i>
                                @endif
                            </p>

                            <ul class="{{ $menu_id == $menu->id ? 'active' : '' }}">
                                @foreach ($menuCategoryItems as $MenuCategory)
                                @php
                                $categoryType = $category_types->firstWhere(
                                'id',
                                $MenuCategory->category_type_id,
                                );
                                $checked =
                                request('category_type') == $categoryType->type &&
                                $menu_id == $menu->id
                                ? 'checked'
                                : '';
                                @endphp

                                @if ($categoryType)
                                <li>
                                    <div class="flex-between">
                                        <div class="filter-header">
                                            <input type="radio" name="category_type"
                                                data-menu="{{ $menu->id }}"
                                                data-name="{{ $menu->type }}"
                                                value="{{ $categoryType->type }}"
                                                class="checkbox"
                                                {{ $checked }} />
                                            <span class="custom-checkbox"></span>
                                            <label
                                                class="item-label">{{ $categoryType->name }}</label>
                                        </div>
                                        <span class="count">
                                            {{ number_format($categoryType->menus->where('id', $menu->id)->first()->data_count ?? 0) }}
                                        </span>
                                    </div>
                                </li>
                                @endif
                                @endforeach
                            </ul>
                        </div>
                        @endforeach
                        @else
                        @foreach ($category_types as $category_type)
                        <div class="flex-between">
                            <div class="filter-header">
                                <input type="radio" name="category_type" value="{{ $category_type->type }}"
                                    class="checkbox"
                                    {{ request('category_type') == $category_type->type ? 'checked' : '' }} />
                                <span class="custom-checkbox"></span>
                                <label class="item-label">{{ $category_type->name }}</label>
                            </div>
                            <span class="count">{{ number_format($category_type->data_count) }}</span>
                        </div>
                        @endforeach
                        @endif

                        {{-- ----------------------- --}}

                    </div>
                    <div class="filter-box">
                        <div class="filter-header">
                            <span class="header-label">Applications Supported</span>
                        </div>
                        @foreach ($menu_types as $menu_type)
                        <div class="flex-between">
                            <div class="filter-header">
                                <input type="radio" name="type_menu" value="{{ $menu_type->type }}"
                                    class="checkbox"
                                    {{ request('type_menu') == $menu_type->type ? 'checked' : '' }} />
                                <span class="custom-checkbox"></span>
                                <label class="item-label">{{ $menu_type->name }}</label>
                            </div>
                            <span class="count">{{ number_format($menu_type->data_count) }}</span>
                        </div>
                        @endforeach
                    </div>
                </form>
            </div>
            {{-- <div class="content-container">
                    <div class="resource-grid 2">
                        @foreach ($items as $data)
                            @include('/member/data/item_data')
                        @endforeach
                    </div>
                    <div class="paginator-container">
                        {{ $items->links('vendor.pagination.custom') }}
        </div>
    </div> --}}
    <div class="content-container">
        <div id="product-list" class="resource-grid 2">
            @foreach ($items->slice(0, 12) as $data)
            @include('/member/data/item_data')
            @endforeach
        </div>
        <div class="paginator-container text-center">
            <button id="load-more" class="btn btn-primary" style="display: none">Load More</button>
        </div>
        @if ($items->total() > 36)
        <div class="paginator-container text-center mt">
            {{ $items->links('vendor.pagination.custom') }}
        </div>
        @endif

    </div>
</div>
</div>
</div>

{{-- ---------------- --}}
<script>
    $(document).ready(function() {
        let currentBatch = 1;
        let loading = false;
        let totalItemsPerPage = 36;
        let batchSize = 12;
        let itemsLoaded = $('.resource-card').length;

        // Load thêm khi người dùng cuộn
        $(window).scroll(function() {
            if ($(window).scrollTop() + $(window).height() > $(document).height() - 700) {
                loadNextBatch();
            }
        });

        function loadNextBatch() {
            if (loading) return;
            if (itemsLoaded >= totalItemsPerPage) {
                $('#end-of-content').show();
                return;
            }

            loading = true;
            currentBatch++;

            $('#load-more').show();

            let url = window.location.pathname;
            let searchParams = new URLSearchParams(window.location.search);
            searchParams.set('load_batch', '1');
            searchParams.set('batch', currentBatch);
            url += '?' + searchParams.toString();

            $.ajax({
                url: url,
                type: 'GET',
                success: function(response) {
                    $('#load-more').hide();

                    if (response.html.trim() === '') {
                        $('#end-of-content').show();
                    } else {
                        $('#product-list').append(response.html);
                        itemsLoaded = $('.resource-card').length;
                        hoverPlay(); // Tái kích hoạt sự kiện hover khi thêm sản phẩm
                        if (!response.canLoadMore) {
                            $('#end-of-content').show();
                        }
                    }

                    loading = false;
                },
                error: function() {
                    $('#load-more').hide();
                    console.error('Failed to load more products');
                    loading = false;
                }
            });
        }



        $('#load-more').click(loadNextBatch);
    });
</script>
{{-- ---------------- --}}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Lấy tất cả các radio và div chứa chúng
        var radios = document.querySelectorAll('input[type=radio]');
        var flexDivs = document.querySelectorAll('.flex-between');
        var flexDivs = document.querySelectorAll('.flex-between');
        var menuParam = new URLSearchParams(window.location.search).get('menu');
        var title = new URLSearchParams(window.location.search).get('title');

        // Hàm xử lý khi chọn một radio hoặc click vào div
        function handleRadioClick(radio) {
            var form = document.getElementById('filterForm');

            // Xóa các input hidden cũ để tránh trùng lặp
            form.querySelectorAll('input[name="menu_id"], input[name="menu"]').forEach(function(input) {
                input.remove();
            });
            var check = 0;
            var Categories = document.querySelectorAll('input[name="category_type"]');
            Categories.forEach(function(category) {
                if (category.checked) {
                    const menuID = category.getAttribute('data-menu');
                    if (menuID) {
                        check = 1;
                        var menuIDInput = document.createElement('input');
                        menuIDInput.type = 'hidden';
                        menuIDInput.name = 'menu_id';
                        menuIDInput.value = menuID;
                        form.appendChild(menuIDInput);
                    }
                }
            });

            // Thêm tham số 'menu_id' nếu chưa tồn tại
            if (check == 0) {
                const menuID = radio.getAttribute('data-menu');
                if (menuID) {
                    var menuIDInput = document.createElement('input');
                    menuIDInput.type = 'hidden';
                    menuIDInput.name = 'menu_id';
                    menuIDInput.value = menuID;
                    form.appendChild(menuIDInput);
                }
            }

            // Thêm tham số 'menu' từ URL nếu có
            var menuInput = document.createElement('input');
            menuInput.type = 'hidden';
            menuInput.name = 'menu';

            if (menuParam && (!title && title == null)) {
                menuInput.value = menuParam;

            } else {
                const menuName = radio.getAttribute('data-name');
                menuInput.value = menuName;
                if (!menuName) menuInput.value = menuParam;

            }
            form.appendChild(menuInput);
            form.submit();
        }

        // Gắn sự kiện click cho từng div
        flexDivs.forEach(function(div) {
            div.addEventListener('click', function() {
                var radio = div.querySelector('input[type=radio]');
                if (radio) {
                    radio.checked = true; // Chọn radio button tương ứng
                    handleRadioClick(radio); // Thực hiện hành động
                }

            });

        });

        // Không tự động submit khi radio đã được chọn
        window.addEventListener('load', function() {
            radios.forEach(function(radio) {
                if (radio.checked) {
                    // Chỉ thêm trạng thái `checked` nhưng không submit form
                    radio.closest('.flex-between').classList.add('active');
                }
            });
        });


        // Thêm sự kiện click cho nút Clear All
        document.getElementById('clear-filters').addEventListener('click', function() {
            var form = document.getElementById('filterForm');
            var inputs = form.querySelectorAll('input[type=radio]');

            // Bỏ chọn tất cả các radio button
            inputs.forEach(function(input) {
                input.checked = false;
            });

            // Gửi form với các params rỗng và thêm tham số 'menu' nếu có
            if (menuParam) {
                var menuInput = document.createElement('input');
                menuInput.type = 'hidden';
                menuInput.name = 'menu';
                menuInput.value = menuParam;
                form.appendChild(menuInput);
            }

            form.submit();
        });
    });
    //Menu Drop Down
    document.addEventListener('DOMContentLoaded', function() {
        const itemLabels = document.querySelectorAll('.item-label-menu');
        itemLabels.forEach(function(item) {
            item.addEventListener('click', function() {
                const ul = item.querySelector('ul');
                const up = item.querySelector('.fa-chevron-up');
                const down = item.querySelector('.fa-chevron-down');
                ul.classList.toggle('active');
                up.classList.toggle('show');
                down.classList.toggle('show');
            });
        });
    });
</script>
@php
$popupKey = auth('member')->check() ? 'popup_announcement_shown_loggedin' : 'popup_announcement_shown_guest';
@endphp
@if (session('gift_month_popup'))
    @include('member._popup_gift_month')
@elseif(!session($popupKey))
    @include('member._popup_announcement')
@php session()->put($popupKey, true); @endphp
@endif
@endsection