@extends('layouts.main-app')

@section('title', 'Home')

@section('content')

    @include('layouts.navbar')
    <div>
        <div class="relative">
            <div class="container mx-auto h-full relative">
                <!-- Background Image -->
                <img src="{{ asset('images/bg-banner.png') }}" alt="Banner"
                    class="object-cover w-full h-[40vh] md:h-[200px]">

                <!-- Text inside the background image -->
                <div class="absolute inset-0 flex flex-col justify-center items-center text-white">
                    <h1 class="text-2xl md:text-4xl font-bold jost-export">SHOP</h1>
                    <h4 class="text-sm md:text-lg mt-2 jost-export">Home &gt; SHOP</h4>
                </div>
            </div>
        </div>
        <div>
            <div class="container mx-auto py-4 ">
                <h1 class="text-3xl font-bold"><span class="text-black">Featured</span> <span
                        class="text-[#b50000]">Promos</span></h1>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 container mx-auto">
                @foreach ($featuredPromoProducts as $product)
                    <div class="p-4" data-aos="zoom-in">
                        <div class=" h-full flex justify-center items-center">
                            <img src="{{ asset($product->thumbnail_image) }}" alt="{{ $product->name }}"
                                class="w-full h-full object-contain">
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        <div>
            <div class="flex flex-col lg:justify-between container mx-auto px-5 gap-4">
                <div class="flex flex-col lg:flex-row justify-between">
                    {{-- <img src="{{ asset('images/icon-burger.png') }}" alt="Banner" class="object-fit"> --}}
                    {{-- <h1 class="px-8 text-xl flex items-center">Filters</h1> --}}

                    <!-- Category Select Dropdown -->
                    <form method="GET" action="{{ route('shop.show') }}">
                        <select name="category"
                            class="appearance-none w-44 bg-white border border-gray-300 rounded-md pl-10 pr-8 py-3 focus:outline-none focus:ring-2 focus:ring-red-500 font-semibold "
                            onchange="this.form.submit()">
                            <option value="" {{ request('category') == '' ? 'selected' : '' }}>Filter</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}"
                                    {{ request('category') == $category->id ? 'selected' : '' }}>{{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </form>
                    <div class="flex lg:justify-end">
                        <form action="{{ route('search.products') }}" method="GET" class="flex space-x-4">
                            <div class="flex flex-col lg:flex-row">
                                <div class="flex items-center">
                                    <h1 class="flex items-center lg:px-4">Sort By:</h1>
                                </div>
                                <select name="sort"
                                    class="appearance-none w-44 bg-white border border-gray-300 rounded-md pl-10 pr-8 py-3 focus:outline-none focus:ring-2 focus:ring-red-500 font-semibold"
                                    onchange="this.form.submit()">
                                    <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Latest
                                    </option>
                                    <option value="oldest" {{ request('sort') == 'oldest' ? 'selected' : '' }}>Oldest
                                    </option>
                                </select>
                                <!-- Hidden input to preserve the search query -->
                                <input type="hidden" name="query" value="{{ request('query') }}">
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <div>
                <div class="container mx-auto px-4">
                    {{-- <h1 class="font-base text-lg">
                        {{ $products->firstItem() }} - {{ $products->lastItem() }} Products of {{ $products->total() }}
                    </h1> --}}
                </div>
                @if (isset($products) && count($products) > 0)
                    <div class="container mx-auto">
                        <div class="grid grid-cols-1 lg:grid-cols-3 w-full gap-6">
                            @foreach ($products as $product)
                                <div class="p-4">
                                    <div
                                        class="bg-white border rounded-lg shadow-md p-4 h-full flex flex-col justify-between">
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <div class="flex justify-center items-center">
                                                <a href="{{ route('shop.view', $product->id) }}">
                                                    <img src="{{ asset($product->thumbnail_image) }}"
                                                        alt="{{ $product->name }}" class="w-48 h-48 object-contain">
                                                </a>
                                            </div>
                                            <div>
                                                <h2 class="text-gray-900 text-sm font-semibold">{{ $product->name }}</h2>
                                                <div class="flex items-center mt-2">
                                                    @if ($product->discounted_price)
                                                        <span class="text-gray-400 line-through text-sm mr-2">
                                                            ₱{{ number_format($product->price, 2) }}
                                                        </span>
                                                    @endif
                                                    <span class="text-red-500 font-bold text-lg">
                                                        ₱{{ number_format($product->discounted_price ?? $product->price, 2) }}
                                                    </span>
                                                </div>
                                                <div class="flex items-center mt-2">
                                                    <div class="flex items-center">
                        <svg class="w-4 h-4 text-yellow-300 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                            fill="currentColor" viewBox="0 0 22 20">
                            <path
                                d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
                        </svg>
                        <svg class="w-4 h-4 text-yellow-300 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                            fill="currentColor" viewBox="0 0 22 20">
                            <path
                                d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
                        </svg>
                        <svg class="w-4 h-4 text-yellow-300 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                            fill="currentColor" viewBox="0 0 22 20">
                            <path
                                d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
                        </svg>
                        <svg class="w-4 h-4 text-yellow-300 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                            fill="currentColor" viewBox="0 0 22 20">
                            <path
                                d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
                        </svg>
                        <svg class="w-4 h-4 ms-1 text-gray-300 dark:text-gray-500" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
                            <path
                                d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
                        </svg>
                    </div>
                                                    <!--<div class="flex">-->
                                                    <!--    @for ($i = 0; $i < 5; $i++)-->
                                                    <!--        <svg class="w-4 h-4 {{ $i < $product->rating ? 'text-yellow-400' : 'text-gray-300' }}"-->
                                                    <!--            fill="currentColor" viewBox="0 0 24 24">-->
                                                    <!--            <path-->
                                                    <!--                d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z">-->
                                                    <!--            </path>-->
                                                    <!--        </svg>-->
                                                    <!--    @endfor-->
                                                    <!--</div>-->
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex justify-between items-center mt-4">
                                            <div class="flex items-center text-sm text-gray-500">
                                                <img src="{{ asset('images/icon-instock.png') }}" alt="In Stock"
                                                    class="w-5 h-5">
                                                <span class="px-2">In Stock</span>
                                            </div>
                                            <form action="{{ route('cart.add', $product->id) }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="quantity" value="1">
                                                <!-- Always default to 1 -->
                                                <button
                                                    class="bg-red-500 text-white font-bold py-2 px-4 rounded-full text-sm md:text-lg">
                                                    ADD TO CART
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @else
                    <p class="text-center py-4 text-lg">No products found for your search.</p>
                @endif
            </div>
            <div class="mt-4 flex justify-center items-center">
                <ul class="flex space-x-2 items-center">
                    @if ($products->onFirstPage())
                        <li class="bg-gray-300 text-gray-500 px-4 py-2 rounded-lg cursor-not-allowed">Previous</li>
                    @else
                        <li>
                            <a href="{{ $products->previousPageUrl() }}"
                                class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-700">Previous</a>
                        </li>
                    @endif

                    @foreach ($products->links()->elements[0] as $page => $url)
                        @if ($page == $products->currentPage())
                            <li class="bg-red-500 text-white px-4 py-2 rounded-lg">{{ $page }}</li>
                        @else
                            <li>
                                <a href="{{ $url }}"
                                    class="bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400">{{ $page }}</a>
                            </li>
                        @endif
                    @endforeach

                    @if ($products->hasMorePages())
                        <li>
                            <a href="{{ $products->nextPageUrl() }}"
                                class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-700">Next</a>
                        </li>
                    @else
                        <li class="bg-gray-300 text-gray-500 px-4 py-2 rounded-lg cursor-not-allowed">Next</li>
                    @endif
                </ul>
            </div>
        </div>
        <div class="relative flex justify-center py-4">
            <!-- Image -->
            <img src="{{ asset('images/banner-promo4.jpg') }}" alt="Banner" class="object-cover">
        </div>
        @include('layouts.footer')
    </div>

@endsection