@extends('layouts.main-app')

@section('title', 'Dashboard')

@section('content')

    @include('layouts.navbar')
    <div>
        <!--BANNER SECTION-->
        <div class="bg-white w-full h-full">
            <div class="relative ">
                <!-- Image -->
                <div class="my-10 ">
                    <div class="swiper-container overflow-hidden     ">
                        <div class="swiper-wrapper">
                            @foreach ($banners as $banner)
                                <div class="swiper-slide ">
                                    <!-- Image -->
                                    <img src="{{ asset($banner->image) }}" alt="{{ $banner->title }}"
                                        class="absolute inset-0 h-full w-full object-fill ">
                                    <!-- Content positioned inside the image -->
                                    <div class="relative p-5 md:p-20 lg:p-30 xl:p-44 space-y-8 container mx-auto ">
                                        <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>



        {{-- Feature Component --}}
        <div class="">
            <div class="relative w-full">
                <img src="{{ asset('images/bg-features.jpg') }}" alt="" class="absolute inset-0 h-full w-full ">
                <div class="relative grid grid-cols-1 md:grid-cols-3 container mx-auto gap-6 md:gap-4 text-white">
                    <!-- Feature 1 -->
                    <div
                        class="flex flex-col sm:flex-row items-center text-center sm:text-left space-y-4 sm:space-y-0 sm:space-x-4 p-4">
                        <div class="flex-shrink-0">
                            <img src="{{ asset('images/icon-nationwide.webp') }}" alt="Free Delivery"
                                class="w-20 sm:w-24 md:w-28 lg:w-32 h-auto">
                        </div>
                        <div>
                            <h2 class="font-semibold text-lg sm:text-xl mb-2 text-white">Free Delivery Nationwide</h2>
                            <p class="text-sm sm:text-base text-white">
                                Enjoy free delivery on eligible orders, saving you time and money.
                            </p>
                        </div>
                    </div>

                    <!-- Feature 2 -->
                    <div
                        class="flex flex-col sm:flex-row items-center text-center sm:text-left space-y-4 sm:space-y-0 sm:space-x-4 p-4">
                        <div class="flex-shrink-0">
                            <img src="{{ asset('images/icon-personalized.webp') }}" alt="Personalized Customer Service"
                                class="w-20 sm:w-24 md:w-28 lg:w-32 h-auto">
                        </div>
                        <div>
                            <h2 class="font-semibold text-lg sm:text-xl mb-2 text-white">Personalized Customer Service</h2>
                            <p class="text-sm sm:text-base text-white">
                                Personalized attention from our friendly and knowledgeable staff, ensuring a positive and
                                hassle-free shopping experience.
                            </p>
                        </div>
                    </div>

                    <!-- Feature 3 -->
                    <div
                        class="flex flex-col sm:flex-row items-center text-center sm:text-left space-y-4 sm:space-y-0 sm:space-x-4 p-4">
                        <div class="flex-shrink-0">
                            <img src="{{ asset('images/icon-quality.webp') }}" alt="Quality Assurance"
                                class="w-20 sm:w-24 md:w-28 lg:w-32 h-auto">
                        </div>
                        <div>
                            <h2 class="font-semibold text-lg sm:text-xl mb-2 text-white">Quality Assurance</h2>
                            <p class="text-sm sm:text-base text-white">
                                Guaranteed quality steel products, rigorously tested for strength, durability, and
                                compliance with industry standards.
                            </p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        {{-- End Feature Component --}}

        <div class="container flex justify-center items-center mx-auto p-4 ">
            <h1 class="text-4xl font-bold"><span class="text-black">Featured</span> <span
                    class="text-[#b50000]">Promos</span></h1>
        </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> --}}


        {{-- Feature Promotional Banner --}}
        <div class="container mx-auto p-2 sm:p-4">
            <div x-data="{
                activeSlide: 0,
                slides: null,
                timer: null,
                shouldShowCarousel: {{ count($promotionalBanners) >= 3 ? 'true' : 'false' }},
                init() {
                    if (this.shouldShowCarousel) {
                        this.slides = $refs.slideContainer.children.length;
                        this.startAutoScroll();
                    }
                },
                startAutoScroll() {
                    this.timer = setInterval(() => this.nextSlide(), 3000);
                },
                nextSlide() {
                    this.activeSlide = (this.activeSlide + 1) % this.slides;
                }
            }" class="relative">
                <!-- Regular Grid for less than 3 items -->
                <div x-show="!shouldShowCarousel" class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
                    @foreach ($promotionalBanners as $promotionalBanner)
                        <div class="relative h-[200px] sm:h-[300px] md:h-[400px]">
                            <div class="absolute inset-0"></div>
                            <img src="{{ asset($promotionalBanner->image) }}" alt="Promotional Banner"
                                class="absolute inset-0 h-full w-full object-contain sm:scale-[92%]">
                            <div class="relative h-full flex flex-col justify-end p-4 sm:p-8">
                                <a href="{{ url('/shop') }}"
                                    class="inline-block bg-red-600 text-white px-6 sm:px-8 md:px-10 py-2 sm:py-3 mb-4 sm:mb-8 md:mb-10 ml-4 sm:ml-8 md:ml-10 rounded-full hover:bg-red-300 transition duration-300 ease-in-out transform hover:-translate-y-1 text-center w-fit text-sm sm:text-base">
                                    Shop Now
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Carousel for 3 or more items -->
                <div x-show="shouldShowCarousel" class="relative">
                    <div class="overflow-hidden">
                        <div class="flex transition-transform duration-500 ease-in-out" x-ref="slideContainer"
                            :style="'transform: translateX(-' + (activeSlide * 100) + '%)'">
                            @foreach ($promotionalBanners as $promotionalBanner)
                                <div class="w-full flex-shrink-0">
                                    <div class="relative h-[200px] sm:h-[300px] md:h-[400px]">
                                        <div class="absolute inset-0"></div>
                                        <img src="{{ asset($promotionalBanner->image) }}" alt="Promotional Banner"
                                            class="absolute inset-0 h-full w-full object-contain sm:scale-[92%]">
                                        <div class="relative h-full flex flex-col justify-end items-center p-4 sm:p-8">
                                            <a href="{{ url('/shop') }}"
                                                class="inline-block bg-red-600 text-white px-6 sm:px-8 md:px-10 py-2 sm:py-3 mb-4 sm:mb-8 md:mb-10 rounded-full hover:bg-red-300 transition duration-300 ease-in-out transform hover:-translate-y-1 text-center w-fit text-sm sm:text-base">
                                                Shop Now
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Navigation Dots -->
                    <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
                        <template x-for="(slide, index) in slides" :key="index">
                            <button class="w-3 h-3 rounded-full transition-colors duration-200"
                                :class="activeSlide === index ? 'bg-red-600' : 'bg-gray-300'" @click="activeSlide = index">
                            </button>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        {{-- End Feature Promotional Banner --}}




        <div class="grid grid-cols-1 md:grid-cols-3 container mx-auto">
            <div class="border-2 border-red-600 rounded-2xl col-span-1 md:col-span-2 order-2 md:order-1">
                <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-2 md:p-4" data-aos="zoom-in">
                            <div
                                class="bg-white border rounded-lg shadow-md p-3 md:p-4 h-full flex flex-col justify-between">
                                <!-- Product Content Grid -->
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3 md:gap-4">
                                    <!-- Image Container -->
                                    <div class="flex justify-center items-center">
                                        <a href="{{ route('shop.view', $product->id) }}" class="w-full">
                                            <img src="{{ asset($product->thumbnail_image) }}" alt="{{ $product->name }}"
                                                class="w-full h-48 sm:w-40 sm:h-40 md:w-48 md:h-48 lg:w-56 lg:h-56 object-contain mx-auto">
                                        </a>
                                    </div>
                                    <!-- Product Details -->
                                    <div class="flex flex-col justify-start space-y-1 sm:space-y-2">
                                        <h2
                                            class="text-gray-900 text-xs sm:text-sm font-semibold line-clamp-2 min-h-[2.5em]">
                                            {{ $product->name }}</h2>
                                        <!-- Price Section -->
                                        <div class="flex flex-wrap items-center gap-1">
                                            @if ($product->discounted_price)
                                                <span
                                                    class="text-gray-400 line-through text-xs sm:text-sm">₱{{ number_format($product->price, 2) }}</span>
                                            @endif
                                            <span
                                                class="text-red-500 font-bold text-sm sm:text-base">₱{{ number_format($product->discounted_price ?? $product->price, 2) }}</span>
                                        </div>
                                        <!-- Rating Stars -->
                                        <div class="flex items-center">
                                            <div class="flex">
                                                @for ($i = 0; $i < 5; $i++)
                                                    <svg class="w-3 h-3 sm:w-4 sm: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>

                                <!-- Bottom Section -->
                                <div class="flex flex-col sm:flex-row justify-between items-center gap-2 mt-3 md:mt-4">
                                    <!-- Stock Status -->
                                    <div class="flex items-center text-xs md:text-sm text-gray-500 w-full sm:w-auto">
                                        <img src="{{ asset('images/icon-instock.png') }}" alt="Stock Status"
                                            class="w-4 h-4 md:w-5 md:h-5">
                                        <span
                                            class="px-1 md:px-2">{{ $product->in_stock > 0 ? 'In Stock' : 'Out of Stock' }}</span>
                                    </div>
                                    <!-- Add to Cart Button -->
                                    <form action="{{ route('cart.add', $product->id) }}" method="POST"
                                        class="w-full sm:w-auto">
                                        @csrf
                                        <input type="hidden" name="quantity" value="1">
                                        <button
                                            class="bg-red-500 text-white font-bold py-1.5 md:py-2 px-3 md:px-4 rounded-full text-xs md:text-sm w-full">
                                            ADD TO CART
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <!--Pagination-->
                <div class="mt-4 flex justify-center items-center py-4">
                    <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="w-full md:px-4 order-1 md:order-2 mb-4 md:mb-0  ">
                <a href="{{ url('/shop') }}" class="block w-full h-full">
                    <img src="{{ asset('images/banner-promo3.png') }}" alt="Banner" class="w-full  object-contain ">
                </a>
            </div>
        </div>


        {{-- Featured Products --}}
        <div class="py-10  mt-4 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-2 lg:grid-cols-3 gap-4">
                @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">
                            <!-- Product Content -->
                            <div class="flex flex-col sm:flex-row md:flex-col lg:flex-row gap-4 flex-grow">
                                <!-- Image Container -->
                                <div class="flex-shrink-0 w-full sm:w-1/2 md:w-full lg:w-1/2">
                                    <a href="{{ route('shop.view', $product->id) }}" class="block">
                                        <img src="{{ asset($product->thumbnail_image) }}" alt="{{ $product->name }}"
                                            class="w-full h-40 object-contain mx-auto">
                                    </a>
                                </div>

                                <!-- Product Details -->
                                <div class="flex flex-col flex-grow">
                                    <h2 class="text-gray-900 text-sm font-semibold line-clamp-2">{{ $product->name }}</h2>
                                    <!-- Price Section -->
                                    <div class="flex items-center mt-2 flex-wrap gap-2">
                                        @if ($product->discounted_price)
                                            <span class="text-gray-400 line-through text-sm">
                                                ₱{{ 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>
                                    <!-- Rating Stars -->
                                    <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>

                            <!-- Bottom Section -->
                            <div class="flex flex-col sm:flex-row justify-between items-center gap-2 mt-4 pt-4 border-t">
                                <!-- Stock Status -->
                                <div class="flex items-center text-sm text-gray-500 w-full sm:w-auto">
                                    <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>
                                <!-- Add to Cart Button -->
                                <form action="{{ route('cart.add', $product->id) }}" method="POST"
                                    class="w-full sm:w-auto">
                                    @csrf
                                    <input type="hidden" name="quantity" value="1">
                                    <button
                                        class="w-full sm:w-auto bg-red-500 text-white font-bold py-2 px-4 rounded-full text-sm hover:bg-red-600 transition-colors">
                                        ADD TO CART
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Pagination remains unchanged -->
            <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>
        {{-- End Featured Products --}}
        <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')

    <!-- Add this script at the bottom of your file, before the closing </body> tag -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            new Swiper('.swiper-container', {
                loop: true,
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                // Sliding effect configuration
                effect: 'slide',
                slidesPerView: 1,
                spaceBetween: 30,
                speed: 900, // Transition speed in milliseconds
            });
        });
    </script>

@endsection