@extends('frontEnd.layouts.master')
{{-- @section('title', $category->meta_title) --}}
@if (Route::is('search'))
@section('title', $generalsetting->name ?? '')
@endif
@section('content')
        <script>
            window.dataLayer = window.dataLayer || [];

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

            // 2. Single Proffasinal Push for Search Results
            window.dataLayer.push({
                'event': 'view_item_list',
                'search_term': '{{ $search_value }}', {{-- GA4 Search Term Tracking--}}
                'ecommerce': {
                'item_list_id': 'search_results',
                'item_list_name': 'Search Results',
                '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': '{{ $product->category->name ?? "General" }}',
                            'price': {{ (float) $product->new_price }},
                            'quantity': 1
                        }@if(!$loop->last), @endif
                    @endforeach
                ]
            }
        });
        </script>

    <main>
        <section class="shop-layout-main">
            <div class="container-fluid">

                <div class="row mb-tweenty sort-by-selection d-flex">
                    <div class="col-12">
                        <div class="row g-3 align-items-center justify-content-between">
                            <div class="col-auto">
                                <h5 class="col-form-label">Search by "{{ $search_value }}"</h5>
                            </div>
                            <div class="col-auto row g-3 align-items-center justify-content-end">



                                <div class="col-auto">
                                    <label for="inputPassword6" class="col-form-label">sort by</label>
                                </div>
                                <div class="page-sort col-auto">
                                    <form class="sort-form">
                                        <select name="sort" class="form-control form-select 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="col-auto"><button class="filter-toggle-btn">filter</button></div>




                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3 d-none d-lg-block shop-sidebar-parent"
                        style="background-color: transparent">
                        <div class="sidebar-main" style="border: none; background: transparent;">
                            <!-- Left Side: Filter Sidebar Only -->
                            @include('frontEnd.layouts.ajax.search_filter_sidebar')
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-9 col-xl-9">
                        <div class="shop-grid-main" id="product-area">
                            @forelse ($products as $product)
                                <div class="single-product">
                                    <div class="image-box">
                                        <a href="{{ route('product', $product->slug) }}">

                                            @php
                                                $oldPrice = $product->old_price;
                                                $newPrice = $product->new_price;

                                                if ($oldPrice > 0) {
                                                    $discount = (($oldPrice - $newPrice) / $oldPrice) * 100;
                                                    $discount = round($discount); // round kore integer %
                                                } else {
                                                    $discount = 0;
                                                }
                                                $images = $product->images; // সব images
                                                // main image (প্রথম)
                                                $firstImage =
                                                    $images->first()->image ??
                                                    'https://placehold.co/400x400/f8bbd0/ffffff?text=Product';

                                                // secondary image (random, first বাদ দিয়ে)
                                                if ($images->count() > 1) {
                                                    $secondImage = $images->skip(1)->random()->image;
                                                } else {
                                                    $secondImage = $firstImage; // না থাকলে main image দেখাবে
                                                }
                                            @endphp

                                            <img src="{{ asset($firstImage) }}">
                                            <img src="{{ asset($secondImage ?? 'https://placehold.co/400x400/f8bbd0/ffffff?text=Prduct') }}"
                                                alt="" class="img-fluid secondary-image">


                                            @if ($discount > 0)
                                                <div class="flashsale-tag">
                                                    <span class="value">{{ $discount }}</span>
                                                    <span class="percent"> %</span>
                                                    <span class="off">off</span>
                                                </div>
                                            @endif

                                        </a>
                                        <a class="btn add-towish-btn ">
                                            <i class="fa-regular fa-heart"></i>
                                        </a>
                                        <div class="product-view-sets">
                                            <ul class="nav">
                                                <li class="nav-item">
                                                    <a class="nav-link" href="{{ route('product', $product->slug) }}">
                                                        <i class="icofont-cart-alt"></i>
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a href="javascript:void(0)" class="nav-link quick-view-btn"
                                                        data-id="{{ $product->id }}">
                                                        <i class="icofont-eye-alt "></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="product-description">
                                        <h4 class="product-name">
                                            <a href="{{ route('product', $product->slug) }}">{{ $product->name }}</a>
                                        </h4>
                                        <p class="price">৳ <span class="mr-2">{{ $product->new_price }}</span>
                                            <del>{{ $product->old_price }}</del>
                                        </p>
                                    </div>
                                    <div class="sailor-club-discount d-none">
                                        <div class="sailor-club-discount-logo"></div>
                                        <div class="discount">
                                            <div>50</div>
                                        </div>
                                    </div>
                                    <div class="product-level-tag-flex">
                                        <div class="Sailor-label">Panjabi</div>
                                    </div>
                                </div>
                            @empty
                                <h4 class="text-danger">No products available in this category!</h4>
                            @endforelse
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="custom_paginate">
                                    {{ $products->links('vendor.pagination.bootstrap-4') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection