@extends('layouts.app')
@section('title', 'Marketplace')
@section('content')
    <section class="relative about-banner">
        <div
            class="bannerInner bg-[url({{ asset($page->image) }})] bg-cover bg-center px-4 sm:px-8 md:px-20 py-12 sm:py-16 md:pt-32 md:pb-32 w-[95%] sm:w-[90%] md:w-[85%] lg:w-[75%] mx-auto rounded-3xl">
            <div class="container">
                <div class="flex items-center justify-center">
                    <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-white font-extrabold text-center leading-tight">
                        Marketplace
                    </h1>
                </div>
            </div>
        </div>
    </section>
    <section class="marketsection w-full sm:w-[95%] md:w-[90%] mx-auto py-12 sm:py-16 md:py-20 mb-8 sm:mb-12 md:mb-20">
        <div class="flex flex-wrap">
            {{-- <div class="w-1/4 px-4">
                <h3 class="text-2xl text-black font-bold relative">{{ $page->name }}
                    {{ $slug != null ? ' - ' . $selected_category->name : '' }}</h3>
                <div class="bg-[#CFDBBB] p-8 rounded-3xl my-5">
                    <div class="relative">
                        <div x-data="{ opentoggle: false }" class="relative">
                            <button @click="opentoggle = !opentoggle"
                                class="hover:text-white transition-all w-full focus:outline-none bg-secondary text-yellow-400 py-2 rounded-full">
                                {{ $selected_category->name ?? 'Change Category' }}

                            </button>
                            <div x-show="opentoggle" @click.away="opentoggle = false" x-transition
                                class="absolute left-0 bg-white border border-gray-200 rounded shadow-lg z-50 w-full">
                                @foreach (getParentCatrgories() as $item)
                                    <a href="{{ route('marketplace', ['parent' => $item->slug]) }}"
                                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">{{ $item->name }}</a>
                                @endforeach
                            </div>
                        </div>

                        <div class="absolute inset-y-0 end-0 flex items-center pe-3 pointer-events-none">
                            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 9l-7 7-7-7" />
                            </svg>
                        </div>
                    </div>
                    <p class="text-xl text-black font-bold mt-5">Shop By Categories</p>
                    @if ($selected_category)

                        <ul class="mt-5">

                            <div class="mb-2">
                                <a href="{{ route('marketplace', $selected_category->slug) }}"
                                    class="dropdown-btn flex justify-between items-center rounded-md pr-2"
                                    id="dropdown-home-btn">
                                    <div class="flex gap-3 items-center">
                                        <span class="capitalize font-semibold">{{ $selected_category->name }}</span>
                                    </div>
                                </a>
                                <ul class="ml-4 mt-1 list-none mx-auto space-y-2 overflow-visible max-h-100 opacity-1 transition-all duration-500 ease-in-out dropdown-content"
                                    id="dropdown-home">
                                    <form action="{{ route('marketplace', ['parent' => $selected_category->slug]) }}"
                                        id="categoryfilter">

                                        @foreach ($selected_category->childs as $inner_key => $inner_value)
                                            <li>
                                                <input id="{{ $inner_value->slug }}" name="category[]" type="checkbox"
                                                    value="{{ $inner_value->id }}"
                                                    {{ is_array(request()->get('category')) && in_array($inner_value->id, request()->get('category')) ? 'checked' : '' }}
                                                    class="accent-[#014C26] focus:ring-[#014C26] focus:ring-2">
                                                <label for="{{ $inner_value->slug }}">{{ $inner_value->name }}</label>
                                                <ul class="ml-4 mt-1">
                                                    @foreach ($inner_value->childs as $child_key => $child_value)
                                                        <li>
                                                            <input name="category[]" id="{{ $child_value->slug }}"
                                                                value="{{ $child_value->id }}" type="checkbox"
                                                                data-parent="{{ $inner_value->slug }}"
                                                                class="child accent-[#014C26] focus:ring-[#014C26] focus:ring-2"
                                                                {{ is_array(request()->get('category')) && in_array($child_value->id, request()->get('category')) ? 'checked' : '' }}>
                                                            <label
                                                                for="{{ $child_value->slug }}">{{ $child_value->name }}</label>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </li>
                                        @endforeach

                                        <button class="bg-white w-full rounded-full py-2 mt-2">Apply Filter</button>
                                    </form>
                                </ul>
                            </div>
                        </ul>
                    @endif
                </div>
                <div class="bg-[#FAFCF7] p-8 rounded-3xl my-5">
                    @if ($seller->isNotEmpty())
                        <h3 class="text-2xl text-black font-bold relative mb-5">Featured Sellers</h3>
                        @foreach ($seller as $key => $value)
                            <div class="flex gap-4 mb-5">
                                <figure>
                                    <a href="{{ route('get.seller', $value->getMeta('user_name')) }}">
                                        @if ($value->image != null)
                                            <img src="{{ asset($value->image) }}" alt="{{ $value->name }}">
                                        @else
                                            <img src="{{ asset('front/images/no-user.png') }}" alt="{{ $value->name }}">
                                        @endif
                                    </a>
                                </figure>
                                <div>
                                    <a href="{{ route('get.seller', $value->getMeta('user_name')) }}">
                                        <p class="text-base text-xl font-bold">{{ $value->name }}</p>
                                        @if ($value->store->exists())
                                            <div class="flex gap-2 my-1">
                                                <img src="{{ asset($value->store->image) }}" class="w-[18px] h-[18px]" />
                                                <p>{{ $value->store->name }}</p>
                                            </div>
                                        @endif


                                    </a>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div> --}}
            
            <div class="w-full">
                <div class="my-5 px-4 sm:px-6">
                    <form action="">
                        <div class="w-full sm:w-[90%] md:w-3/4 lg:w-1/2 mx-auto relative">
                            <div class="flex flex-col sm:flex-row gap-2 sm:gap-0">
                                <div class="relative w-full flex flex-col sm:flex-row items-stretch" x-data="{ open: false }">
                                    <input type="text" id="search" placeholder="Search"
                                        class="flex-grow border border-gray-300 text-sm rounded-3xl sm:rounded-l-3xl sm:rounded-r-none px-5 py-3 focus:outline-none focus:ring-2 focus:ring-secondary"
                                        required />

                                    <div class="relative">
                                        <button @click="open = !open" type="button"
                                            class="w-full sm:w-auto border border-t-0 sm:border-t border-l-0 sm:border-l-0 border-gray-300 bg-secondary text-white text-sm px-4 py-3 rounded-b-3xl sm:rounded-b-none sm:rounded-r-3xl whitespace-nowrap">
                                            <span class="hidden sm:inline">{{ $selected_category ? $selected_category->name : 'Select Category' }}</span>
                                            <span class="sm:hidden">{{ $selected_category ? $selected_category->name : 'Category' }}</span>
                                        </button>

                                        <div x-show="open" @click.away="open = false" x-transition
                                            class="absolute right-0 z-10 mt-2 w-full sm:w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5">
                                            <div class="py-1">
                                                @foreach (getParentCatrgories() as $item)
                                                    <a href="{{ route('marketplace', ['parent' => $item->slug]) }}"
                                                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">{{ $item->name }}</a>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    {{-- <div class="relative">
                                        <div x-data="{ opentoggle: false }" class="relative">
                                            <button @click="opentoggle = !opentoggle" type="button"
                                                class="rounded-r-3xl border border-l-0 border-gray-300 bg-secondary text-white text-sm px-4 py-3">
                                                @if (request()->has('category'))
                                                    {{ getNameCategory(request()->get('category')) }}
                                                @else
                                                    Filter
                                                @endif
                                            </button>
                                            @if($categories)
                                            <div x-show="opentoggle" @click.away="opentoggle = false" x-transition
                                                class="absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 w-[54rem]">
                                                 <div class="bg-white rounded-2xl p-8 w-full mx-auto shadow-lg">
                                                    
                                                        <div id="marketplaceli" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                                                            @foreach ($categories->chunk(ceil($categories->count() / 3)) as $columnIndex => $column)
                                                                <ul
                                                                    class="@if ($columnIndex === 0) border-r pr-4 @elseif ($columnIndex === 2) border-l pl-4 @endif space-y-3">
                                                                    @foreach ($column as $item)
                                                                        <li data-value="{{ $item->id }}"
                                                                            class="text-sm text-gray-700 hover:bg-gray-100 px-2 py-1 cursor-pointer">
                                                                            {{ $item->name }}
                                                                        </li>
                                                                    @endforeach
                                                                </ul>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                            </div>
                                            @endif
                                        </div>
                                    </div> --}}

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


                </div>
                {{-- <div>
                    <ul id="marketplaceli" class="leading-10 flex justify-center gap-1 flex-wrap">
                        @foreach ($categories as $inner_key => $inner_value)
                            <li data-value="{{ $inner_value->id }}"
                                class="bg-[#AABF8699] inline px-2 py-1 rounded-2xl cursor-pointer text-sm">
                                {{ $inner_value->name }}</li>
                        @endforeach

                    </ul>
                </div> --}}
                </form>
            </div>

        </div>
        <div class="w-full px-4 sm:px-6">
            <h3 class="text-black text-2xl sm:text-3xl mb-4">{{ $selected_category->name ?? '' }}</h3>
            @if ($products->isNotEmpty())
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 sm:gap-5 my-8 md:my-12">
                    @foreach ($products as $key => $value)
                        <div data-search="{{ $value->name }}" class="transition-all bg-white rounded-lg shadow-sm hover:shadow-md">
                            <a href="{{ route('product.detail', $value->slug) }}" class="product-box block p-3 sm:p-4">
                                <figure class="mb-3 relative">
                                    <img class="w-full h-48 sm:h-56 object-cover rounded-lg" src="{{ asset($value->image) }}"
                                        alt="{{ $value->name }}">
                                    <div class="absolute top-2 right-2">
                                        <p class="rounded-xl bg-white px-2 sm:px-3 py-1 text-xs font-bold text-black shadow-sm">
                                            ${{ $value->get_min_price() }} - ${{ $value->get_max_price() }}
                                        </p>
                                    </div>
                                </figure>
                                <div class="space-y-2">
                                    <div>
                                        <p class="text-sm sm:text-base font-medium line-clamp-2">
                                            {{ $value->name }}
                                        </p>
                                        <span class="inline-block mt-1 rounded-full bg-secondary text-primary px-2 py-1 text-xs">
                                            {{ $value->category->name }}
                                        </span>
                                    </div>
                                    @if ($value->user->store != null && $value->user->store->exists())
                                        <div class="flex gap-2 items-center mt-2">
                                            <figure class="w-6 h-6 rounded-full overflow-hidden">
                                                <img class="w-full h-full object-cover" 
                                                     src="{{ $value->user->store->image ? asset($value->user->store->image) : asset('front/images/marketplace.png') }}"
                                                     alt="{{ $value->user->name }}">
                                            </figure>
                                            <div class="flex-1 min-w-0">
                                                <p class="text-xs sm:text-sm font-medium truncate">
                                                    {{ $value->user->store->name }}
                                                </p>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            @endif
            @if ($products->isEmpty())
                <div class="bg-red-500 text-center py-3 sm:py-4 mt-6 sm:mt-8 rounded-lg mx-4 sm:mx-6">
                    <p class="text-white font-semibold text-sm sm:text-base">No Products Found</p>
                </div>
            @endif
        </div>
    </section>
@endsection
@push('js')
    <div id="marketmodal"
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 {{ Request::segment(2) ? 'hidden' : '' }}">
        <div class="bg-white p-4 sm:p-6 rounded-lg w-full max-w-4xl shadow-xl relative max-h-[90vh] overflow-y-auto">

            <h2 class="text-lg sm:text-xl font-semibold mb-4 sm:mb-6 text-center">Select Category</h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
                @foreach (getParentCatrgories() as $item)
                    <div class="flex flex-col text-center p-3 sm:p-4 lg:p-5 rounded-lg border-2 border-gray-200 hover:bg-secondary hover:text-white transition-all hover:border-secondary">
                        <a href="{{ route('marketplace', ['parent' => $item->slug]) }}" class="flex flex-col items-center space-y-2">
                            <div class="w-12 h-12 sm:w-16 sm:h-16 rounded-full overflow-hidden">
                                <img src="{{ asset($item->image) }}" alt="{{ $item->name }}" class="w-full h-full object-cover">
                            </div>
                            <p class="text-sm sm:text-base lg:text-lg font-bold text-center leading-tight">{{ $item->name }}</p>
                        </a>
                    </div>
                @endforeach
            </div>

            <button onclick="document.getElementById('marketmodal').classList.add('hidden')" 
                    class="absolute top-2 right-2 sm:top-4 sm:right-4 text-gray-500 hover:text-gray-700 text-xl sm:text-2xl">
                ×
            </button>

        </div>
    </div>
@endpush
@push('js')
    <script>
        function handleCategoryCheckboxes() {
            $('#categoryfilter [type="checkbox"]').each(function() {
                if ($(this).hasClass('child')) {
                    const parentSlug = $(this).data('parent');
                    let anyChecked = false;

                    $(`[data-parent="${parentSlug}"]`).each(function() {
                        if ($(this).is(':checked')) {
                            anyChecked = true;
                            return false; // break out of loop early
                        }
                    });

                    const parentCheckbox = $('#' + parentSlug);

                    if (anyChecked) {
                        parentCheckbox.prop('checked', false).prop('disabled', true);
                    } else {
                        parentCheckbox.prop('disabled', false);
                    }
                }
            });
        }

        $(document).ready(function() {
            handleCategoryCheckboxes();
            $('#categoryfilter').on('change', '[type="checkbox"]', function() {
                handleCategoryCheckboxes();
            });

            $('#marketplaceli li').click(function() {
                const params = new URLSearchParams();
                params.set('category', $(this).data('value'));

                window.location.href = window.location.origin + window.location.pathname + '?' + params
                    .toString()
            })

            $('#search').on('keyup', function() {
                const search = $(this).val().trim().toLowerCase();

                $('[data-search]').each(function() {
                    const text = $(this).data('search').toString().toLowerCase();
                    if (search === '' || text.includes(search)) {
                        $(this).removeClass('hidden');
                    } else {
                        $(this).addClass('hidden');
                    }
                });
                if ($('[data-search]').length == $('[data-search].hidden')) {

                }
            });
        });
    </script>
@endpush