@extends('frontEnd.layouts.master')

@if (Route::is('category'))
    @section('title', $category->meta_title ?? '')
@endif

@section('content')
    <script>
        window.dataLayer = window.dataLayer || [];

        @php
            // Professional priority logic for naming
            $listName = "General Shop";
            $listId = "all_products";

            if (isset($category) && $category) {
                $listName = $category->name;
                $listId = $category->slug;
            } elseif (request()->filled('childcategory')) {
                $listName = ucwords(str_replace(['-', '+'], ' ', request()->query('childcategory')));
                $listId = "child-" . request()->query('childcategory');
            } elseif (request()->filled('subcategory')) {
                $listName = ucwords(str_replace(['-', '+'], ' ', request()->query('subcategory')));
                $listId = "sub-" . request()->query('subcategory');
            } elseif (request()->filled('category')) {
                $listName = ucwords(str_replace(['-', '+'], ' ', request()->query('category')));
                $listId = "cat-" . request()->query('category');
            }
        @endphp

        // 1. Clear previous ecommerce object
        window.dataLayer.push({ ecommerce: null });

        // 2. Push View Item List Event
        window.dataLayer.push({
            'event': 'view_item_list',
            'ecommerce': {
                'item_list_id': '{{ $listId }}',
                'item_list_name': '{{ $listName }}',
                'items': [
                    @foreach ($products as $product)
                        {
                            'item_id': '{{ $product->id }}',
                            'item_name': '{{ $product->name }}',
                            'index': {{ $loop->index + 1 }},
                            'item_brand': '{{ $product->brand->name ?? "Premium Collection" }}',
                            'item_category': '{{ $listName }}',
                            'price': {{ (float) ($product->new_price ?? 0) }},
                            'quantity': 1
                        }@if(!$loop->last), @endif
                    @endforeach
                ]
            }
        });
    </script>
    <main class="bg-[#f9f9f9]">
        <!-- Common Banner Section -->
        <section class="relative w-full min-h-[200px] md:min-h-[300px] lg:min-h-[400px] bg-cover bg-center bg-no-repeat flex items-center"
            style="background-image: url('{{ $category?->banner ? asset($category->banner) : 'https://placehold.co/1900x400' }}');">
            <div class="container mx-auto px-[15px]">
                <div class="flex flex-wrap">
                    <div class="w-full">
                        <h4 class="hidden">view cart</h4>
                    </div>
                </div>
            </div>
            
            <!-- Breadcrumb (Hidden as per your code) -->
            <section class="absolute bottom-0 w-full mb-0 hidden">
                <div class="container mx-auto px-[15px]">
                    <div class="flex flex-wrap">
                        <div class="w-full">
                            <nav aria-label="breadcrumb">
                                <ol class="flex list-none p-0 m-0">
                                    <li class="text-white"><a href="/" class="hover:underline">Home</a></li>
                                    <li class="text-white before:content-['/'] before:mx-2"><a>view cart</a></li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </section>
        </section>

        <!-- Category Title Section -->
        <section class="py-[15px] bg-white border-b border-gray-100">
            <div class="w-full px-[15px] sm:px-[30px]">
                <div class="flex flex-wrap">
                    <div class="w-full">
                        <h4 class="my-[4px] text-[1.5rem] text-[#2B2D42]">
                            @if (Route::is('category'))
                                <strong class="font-bold">{{ $category->name }}</strong>
                            @endif
                        </h4>
                    </div>
                </div>
            </div>
        </section>

        <!-- Main Shop Layout -->
        <section class="py-[30px]">
            <div class="w-full px-[15px] sm:px-[30px]">
                
                <!-- Sorting & Filtering Bar -->
                <div class="mb-[20px]">
                    <div class="w-full">
                        <div class="flex flex-wrap gap-[15px] items-center justify-end">
                            <div class="shrink-0">
                                <label for="sort" class="text-[14px] text-[#2B2D42] capitalize font-medium">sort by</label>
                            </div>
                            <div class="shrink-0 min-w-[180px]">
                                <form class="sort-form m-0">
                                    <select name="sort" class="w-full border border-gray-300 rounded-[4px] px-[10px] py-[6px] text-[14px] focus:ring-1 focus:ring-[#2B2D42] outline-none sort">
                                        <option value="1" @if (request()->get('sort') == 1) selected @endif>Product: Latest</option>
                                        <option value="2" @if (request()->get('sort') == 2) selected @endif>Product: Oldest</option>
                                        <option value="3" @if (request()->get('sort') == 3) selected @endif>Price: High To Low</option>
                                        <option value="4" @if (request()->get('sort') == 4) selected @endif>Price: Low To High</option>
                                        <option value="5" @if (request()->get('sort') == 5) selected @endif>Name: A-Z</option>
                                        <option value="6" @if (request()->get('sort') == 6) selected @endif>Name: Z-A</option>
                                    </select>
                                    <input type="hidden" name="min_price" value="{{ request()->get('min_price') }}" />
                                    <input type="hidden" name="max_price" value="{{ request()->get('max_price') }}" />
                                </form>
                            </div>
                            <div class="shrink-0 lg:hidden">
                                <button class="filter-toggle-btn bg-[#2B2D42] text-white px-[15px] py-[7px] rounded-[4px] text-[14px] capitalize">
                                    <i class="fa-solid fa-filter mr-1"></i> filter
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex flex-wrap -mx-[15px]">
                    <!-- Left Side: Filter Sidebar -->
                    <div class="shop-sidebar-parent hidden lg:block lg:w-1/4 px-[15px]">
                        <div class="sticky top-[20px] bg-transparent border-none">
                            @include('frontEnd.layouts.ajax.filter_sidebar')
                        </div>
                    </div>

                    <!-- Right Side: Product Grid -->
                    <div class="w-full lg:w-3/4 px-[15px]">
                        <div id="product-area" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-[10px] md:gap-[20px]">
                            @forelse ($products as $product)
                                <x-product-card :product="$product" :favouriteIds="$favouriteIds" />
                            @empty
                                <div class="col-span-full py-[50px] text-center">
                                    <h4 class="text-[#EF233C] text-[18px] font-semibold">No products available in this category!</h4>
                                </div>
                            @endforelse
                        </div>

                        <!-- Pagination -->
                        <div class="mt-[40px] flex justify-center">
                            <div class="custom_paginate">
                                {{ $products->links('vendor.pagination.bootstrap-4') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection