@extends('layouts.main-app')

@section('title', 'Dashboard')

@section('content')

    @include('layouts.navbar')
    <div>
        <!--BANNER SECTION-->
        <div class="bg-gray-100 w-full h-full">
            <div class="relative p-4 md:p-10  ">

                <!-- Image -->
                <div class="my-14">
                    <div class="swiper-container overflow-hidden">
                        <div class="swiper-wrapper">
                            @foreach ($banners as $banner)
                                <div class="swiper-slide relative">
                                    <!-- Image -->
                                    <img src="{{ asset($banner->image) }}" alt="{{ $banner->title }}"
                                        class="absolute inset-0 h-full w-full">

                                    <!-- Content positioned inside the image -->
                                    <div class="relative p-5 md:p-20 lg:p-30 xl:p-44 space-y-8">
                                        <div>
                                            <h1 class="text-white text-xl md:text-3xl lg:text-6xl xl:text-9xl font-bold">
                                                {{ $banner->title }}<br>
                                            </h1>
                                            <p class="text-red-600 md:text-sm xl:text-2xl py-2">{{ $banner->subtitle }}</p>
                                        </div>
                                        <div>
                                            <a href="{{ url('/shop') }}"
                                                class="bg-white text-red-500 py-1 px-1 lg:py-2 lg:px-6 rounded-lg inline-block">
                                                SHOP NOW
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>


            </div>
        </div>

        <div class="">
            <div class="relative  bg-gray-800 w-full h-full md:h-56">
                <img src="{{ asset('images/bg-features.jpg') }}" alt="Banner"
                    class="object-cover w-full h-full absolute inset-0 opacity-25">
                <!-- Adjust opacity as needed -->
                <div class="grid grid-rows-3 md:grid-cols-3 container mx-auto relative z-10">
                    <!-- Added z-10 for layering -->
                    <div class="flex  md:flex-row md:items-center w-full h-full gap-5 md:justify-center p-5">
                        <div class="flex-shrink-0">
                            <img src="{{ asset('images/icon-freedelivery.png') }}" alt="Free Delivery"
                                class="object-contain w-24 md:w-32 lg:w-40">
                        </div>
                        <div class="grid gap-1  md:text-left">
                            <h1 class="text-white font-semibold text-sm md:text-xl">Free Delivery Nationwide</h1>
                            <h1 class="text-white font-base text-sm md:text-base">
                                Enjoy free delivery on eligible orders, <br> saving you time and money.
                            </h1>
                        </div>
                    </div>
                    <div class="flex  md:flex-row md:items-center w-full h-full gap-5 md:justify-center p-5">
                        <div class="flex-shrink-0">
                            <img src="{{ asset('images/icon-cs.png') }}" alt="Free Delivery"
                                class="object-contain w-24 md:w-32 lg:w-40">
                        </div>
                        <div class="grid gap-1  md:text-left">
                            <h1 class="text-white font-semibold text-sm md:text-xl">Free Delivery Nationwide</h1>
                            <h1 class="text-white font-base text-sm md:text-base">
                                Enjoy free delivery on eligible orders, <br> saving you time and money.
                            </h1>
                        </div>
                    </div>
                    <div class="flex  md:flex-row md:items-center w-full h-full gap-5 md:justify-center p-5">
                        <div class="flex-shrink-0">
                            <img src="{{ asset('images/icon-qa.png') }}" alt="Free Delivery"
                                class="object-contain w-24 md:w-32 lg:w-40">
                        </div>
                        <div class="grid gap-1  md:text-left">
                            <h1 class="text-white font-semibold text-sm md:text-xl">Free Delivery Nationwide</h1>
                            <h1 class="text-white font-base text-sm md:text-base">
                                Enjoy free delivery on eligible orders, <br> saving you time and money.
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="my-24">
            <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="relative h-full flex items-center">
                            <img src="{{ asset($product->thumbnail_image) }}" alt="{{ $product->name }}"
                                class="relative w-full h-auto">
                            <a href="{{ url('/shop') }}"
                                class="absolute bottom-4 left-14 lg:bottom-14 lg:left-32 transform -translate-x-1/2 bg-[#f2f2f2b2] py-1 px-2 text-sm lg:py-2 lg:px-4 lg:text-2xl rounded-lg  uppercase z-10 text-white">Shop
                                now</a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>


        <div class="grid grid-cols-3 container mx-auto">
            <div class="border-2 border-red-600 rounded-2xl col-span-3 md:col-span-2">
                <div class="border-b border-red-600">
                    <h1 class="p-5 text-2xl font-bold"><span class="text-black">Best Deals</span><span
                            class="text-red-600 px-2">of the week</span> </h1>
                </div>
                <!--PRODUCT CARDS-->
                <div class="grid grid-cols-1 md:grid-cols-2 p-4">
                    @foreach ($bestDealProducts as $product)
                        <div class="p-4" data-aos="zoom-in">
                            <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">
                                                @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="Stock Status"
                                            class="w-5 h-5">
                                        <span
                                            class="px-2">{{ $product->in_stock > 0 ? 'In Stock' : 'Out of 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>
                <!--Pagination-->
                <div class="mt-4 flex justify-center items-center">
                    <ul class="flex space-x-2 items-center">
                        @if ($bestDealProducts->onFirstPage())
                            <li class="bg-gray-300 text-gray-500 px-4 py-2 rounded-lg cursor-not-allowed">Previous</li>
                        @else
                            <li>
                                <a href="{{ $bestDealProducts->previousPageUrl() }}"
                                    class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-700">Previous</a>
                            </li>
                        @endif

                        @foreach ($bestDealProducts->links()->elements[0] as $page => $url)
                            @if ($page == $bestDealProducts->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 ($bestDealProducts->hasMorePages())
                            <li>
                                <a href="{{ $bestDealProducts->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="flex justify-end hidden md:block px-4">
                <a href="{{ url('/shop') }}"><img src="{{ asset('images/banner-promo3.png') }}" alt="Banner"
                        class="object-cover "></a>


            </div>
        </div>

        <div class="py-10 w-full flex justify-center">
            <div class="flex gap-4 text-center md:text-start">
                <h1><span class="text-black text-xl md:text-4xl font-semibold px-2 md:px-4">FEATURED</span><span
                        class="text-red-500 text-xl md:text-4xl font-semibold">PRODUCTS</span></h1>
            </div>
        </div>
        <div class="container mx-auto">
            <div class="grid grid-cols-1 md:grid-cols-3 ">
                @foreach ($featuredProducts as $product)
                    <div class="p-4 " data-aos="zoom-in">
                        <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">
                                            @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">
                                        {{ $product->in_stock > 0 ? 'In Stock' : 'Out of 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 class="mt-4 flex justify-center items-center py-4">
                <ul class="flex space-x-2 items-center">
                    @if ($featuredProducts->onFirstPage())
                        <li class="bg-gray-300 text-gray-500 px-4 py-2 rounded-lg cursor-not-allowed">Previous</li>
                    @else
                        <li>
                            <a href="{{ $featuredProducts->previousPageUrl() }}"
                                class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-700">Previous</a>
                        </li>
                    @endif

                    @foreach ($featuredProducts->links()->elements[0] as $page => $url)
                        @if ($page == $featuredProducts->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 ($featuredProducts->hasMorePages())
                        <li>
                            <a href="{{ $featuredProducts->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=" w-full h-full">
            <div class="relative flex justify-center">
                <!-- Image -->
                <img src="{{ asset('images/img-bg-about.png') }}" alt="Banner" class="object-cover">
            </div>
            <div class="relative flex justify-center">
                <!-- Image -->
                <img src="{{ asset('images/banner-promo4.jpg') }}" alt="Banner" class="object-cover">
            </div>
        </div>

        <div class="container mx-auto py-0 md:py-24">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 bg-cover p-6 lg:rounded-lg lg:h-[38rem]"
                style="background-image: url('{{ asset('images/bg-contact.png') }}');">

                <!-- Left Section (Contact Information) -->
                <div class="flex flex-col justify-center space-y-6 text-start md:text-left">
                    <h2 class="text-white text-3xl lg:text-4xl font-bold">NEED HELP?</h2>
                    <div class="flex flex-row md:flex-row items-center space-y-32 md:space-y-0 md:space-x-3">
                        <img src="{{ asset('images/icon-contact.png') }}" alt="Call Us Icon"
                            class="w-12 h-12 rounded-full hidden lg:block">
                        <div>
                            <p class="text-white text-xl">Call Us</p>
                            <p class="text-white">(02) 8831 – 0000 / (02) 8230 – 2906</p>
                            <p class="text-white">0932 888 7777</p>
                        </div>
                    </div>
                </div>

                <!-- Center Section (Form) -->
                <div class="flex justify-center items-end mt-8 md:mt-0">
                    <form class="bg-white p-8 rounded-lg shadow-lg space-y-6 w-[40rem]">
                        <input type="text" placeholder="Your Name"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                        <input type="email" placeholder="Your Email"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                        <input type="text" placeholder="Your Contact No."
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                        <textarea placeholder="Message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></textarea>
                        <button type="submit"
                            class="w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700">SUBMIT</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="container mx-auto">
            <div class="flex justify-center">
                <h1 class="text-6xl font-bold uppercase"><span class="text-gray-600">Latest</span> <span
                        class="text-[#ff0000]">Blogs</span></h1>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 py-10 gap-10">
                @foreach ($moreBlogs as $blog)
                    <div>
                        <div class="p-4 border rounded-lg shadow-md flex flex-col md:flex-row bg-white">
                            <!-- Image Section -->
                            <div class="md:w-1/3">
                                <img src="{{ asset($blog->image) }}" alt="{{ $blog->title }}"
                                    class="object-cover w-full h-full">
                            </div>

                            <!-- Content Section -->
                            <div class="md:w-2/3 md:pl-4 flex flex-col justify-between">
                                <!-- Tags -->
                                <div class="flex space-x-2 mt-4 md:mt-0">
                                    @foreach ($blog->categories as $category)
                                        <span
                                            class="bg-gray-200 text-gray-800 text-xs font-semibold px-2 py-1 rounded">{{ $category->name }}</span>
                                    @endforeach
                                </div>

                                <!-- Title -->
                                <h2 class="mt-2 text-lg font-bold">{{ $blog->title }}</h2>

                                <!-- Description -->
                                <p class="mt-1 text-sm text-gray-600">
                                    {{ Str::limit($blog->content, 100) }} <!-- Limit content to 100 characters -->
                                </p>

                                <!-- Read More Link -->
                                <a href="{{ route('blog.view', $blog->id) }}"
                                    class="text-red-500 font-semibold mt-2 inline-block">
                                    READ MORE <span class="text-red-500">&rarr;</span>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    </div>
    @include('layouts.footer')


@endsection