@extends('layouts.app')

@section('admin_content') 
    {{-- ================= HERO SLIDER ================= --}}
    <section id="hero" class="hero section   p-0">
        <div class="container-fluid p-0">
            <ul class="owl-carousel hero-slider p-0">
                @foreach ($banners as $banner)
                    <li class="item">
                        <img src="{{ asset('storage/' . $banner->banner_image) }}" alt="Banner" loading="lazy" class="w-100">
                    </li>
                @endforeach
            </ul>
        </div>
    </section>

    {{-- ================= PRODUCT RANGE ================= --}}
    <section id="category" class="section pt-3 pb-3">
        <div class="container">
            <h2 class="line section-title text-center mb-4 heading">Product Range</h2>

            <div class="row gy-4">
                @foreach ($categories as $category)
                    <div class="col-lg-3 col-md-4">
                        <a href="{{ url('/categorie/' . $category->slug) }}" class="text-decoration-none item-links">
                            <div class="card h-100 shadow-sm text-center item-box">
                                @if ($category->image)
                                    <div class="item-thumbnail">
                                        <img src="{{ asset($category->image) }}" class="img-fluid" loading="lazy">
                                    </div>
                                @endif
                                <div class="p-3">
                                    <h5 class="item-title">{{ $category->name }}</h5>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ================= ABOUT ================= --}}
    {{-- @if ($about)
        <section id="about" class="section pt-3 pb-3">
            <div class="container" data-aos="fade-up">
                <div class="row align-items-center gy-4">

                    <div class="col-xl-7">
                        <h2 class="section-title text-start pb-2 mb-0">{{ $about->title }}</h2>
                        <p>{!! nl2br(e($about->content)) !!}</p>

                        @if ($about->button1)
                            <a id="readMore" href="{{ $about->button1 }}" class="py-2 px-4 btnrin mt-3 read-more">
                                Read More <i class="bi bi-arrow-right"></i>
                            </a>
                        @endif
                    </div>

                    @if ($about->thumbnail)
                        <div class="col-xl-5 text-center">
                            <img src="{{ asset('' . $about->thumbnail) }}" class="img-fluid rounded" loading="lazy"
                                alt="About">
                        </div>
                    @endif
                </div> --}}

    {{-- About Sections --}}
    {{-- @if ($about->sections->count())
            <div class="row mt-5 gy-4">
                @foreach ($about->sections as $section)
                    <div class="col-md-4">
                        <div class="card h-100 shadow-sm">
                            @if ($section->thumbnail)
                                <img
                                    src="{{ asset('storage/'.$section->thumbnail) }}"
                                    class="card-img-top"
                                    loading="lazy"
                                >
                            @endif
                            <div class="card-body">
                                <h5>{{ $section->title }}</h5>
                                <p>{!! nl2br(e($section->content)) !!}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif --}}
    {{-- </div>
        </section>
    @endif --}}

    {{-- ================= NEW ARRIVALS ================= --}}
    <section id="product" class="section pt-3 pb-3 bg-light mt-3">
        <div class="container">
            <h2 class="line section-title text-center mb-4 heading">New Arrivals</h2>

            <div class="owl-carousel product-slider">
                @foreach ($products as $product)
                    <div class="item">
                        <a href="{{ url('product/' . $product->slug) }}" class="text-decoration-none item-links">
                            <div class="card shadow-sm h-100 item-box">
                                @if ($product->thumbnail)
                                    <div class="item-thumbnail">
                                        <img src="{{ asset($product->thumbnail) }}" class="img-fluid" loading="lazy">
                                    </div>
                                @endif
                                <div class="p-3 text-center">
                                    <h5 class="pt-2 item-title">{{ $product->name }}</h5>
                                    <small>{{ $product->category->name ?? '' }}</small>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ================= Wooden ================= --}}
    <section id="product" class="section pt-3 pb-3 mt-3">
        <div class="container">
            <h2 class="line section-title text-center mb-4 heading">Wooden Trophy</h2>

            <div class="owl-carousel product-slider">
                @foreach ($products as $product)
                    <div class="item">
                        <a href="{{ url('product/' . $product->slug) }}" class="text-decoration-none item-links">
                            <div class="card shadow-sm h-100 item-box">
                                @if ($product->thumbnail)
                                    <div class="item-thumbnail">
                                        <img src="{{ asset($product->thumbnail) }}" class="img-fluid" loading="lazy">
                                    </div>
                                @endif
                                <div class="p-3 text-center">
                                    <h5 class="pt-2 item-title">{{ $product->name }}</h5>
                                    <small>{{ $product->category->name ?? '' }}</small>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ================= TESTIMONIALS ================= --}}
    <section id="testimonial" class="section dark-background pt-3 pb-3">
        <div class="container">
            <h2 class="line section-title text-center mb-4 heading text-white">Testimonials</h2>

            <div class="owl-carousel testimonials-slider">
                {{-- @foreach ($reviews as $review)
                    <div class="text-center testimonial-box">
                        <h3 class="text-white">{{ $review->name }}</h3>
                        <h4 class="text-white">Most Generous Donor</h4>
                        <div class="text-white">
                            <div class="stars">
                                <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
                                    class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
                                    class="bi bi-star-fill"></i>
                            </div>
                            <p class="text-white">
                                <i class="bi bi-quote quote-icon-left"></i>
                                {{ $review->reviewcontent }}
                                <i class="bi bi-quote quote-icon-right"></i>
                            </p>
                        </div>
                    </div>
                @endforeach --}}
            </div>
        </div>
    </section>

    {{-- ================= Work Process ================= --}}
    <section id="workprocess" class="section pt-3 pb-3">
        <div class="container">
            <h2 class="line section-title text-center mb-4 heading">work Process Steps</h2>

            <div class="Thing-container">
                <div class="Thing-dash"></div>
                <div class="row">
                    <div class="col text-center">
                        <div class="Thing">
                            <div class="Thing-step">1</div>
                        </div>
                        <h4 class="font fs-5"> Imagine </h4>
                        <p> We bring your content to our trophy designs. Your Success, Our Trophy! </p>
                    </div>

                    <div class="col text-center">
                        <div class="Thing">
                            <div class="Thing-step">2</div>
                        </div>
                        <h4 class="font fs-5"> Design </h4>
                        <p> Your design is fully personalized to reflect your vision. </p>
                    </div>

                    <div class="col text-center">
                        <div class="Thing">
                            <div class="Thing-step">3</div>
                        </div>
                        <h4 class="font fs-5"> Approve </h4>
                        <p> Once you're satisfied with the design, we start the production process.</p>
                    </div>

                    <div class="col text-center">
                        <div class="Thing">
                            <div class="Thing-step">4</div>
                        </div>
                        <h4 class="font fs-5"> Print </h4>
                        <p> We bring your design to life with expert printing on the trophies. </p>
                    </div>

                    <div class="col text-center">
                        <div class="Thing">
                            <div class="Thing-step">5</div>
                        </div>
                        <h4 class="font fs-5"> Result </h4>
                        <p> Voila! Your trophy is ready to shine! </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ================= FAQ & CONTACT ================= --}}
    <section id="faq" class="section pt-3 pb-3">
        <div class="container">
            <div class="row gy-4">

                <div class="col-lg-8">
                    <h2 class="line section-title mb-4 heading">Customer FAQs</h2>

                    @foreach ($faqs as $faq)
                        <div class="faq-item faq mb-3">
                            <i class="faq-icon bi bi-question-circle"></i>

                            <h3 class="faq-question">
                                {{ $faq->question }}
                            </h3>

                            <div class="faq-content">
                                <p>{{ $faq->answer }}</p>
                            </div>

                            <i class="faq-toggle bi bi-chevron-right"></i>
                        </div>
                    @endforeach

                </div>

                <div class="col-lg-4">
                    <div class="contact-box">
                        <h2 class="line text-center mb-4 heading">Get in Touch</h2>

                        <form method="POST" action="{{ url('/contact') }}" id="contactForm">
                            @csrf

                            <div class="mb-3">
                                <input type="text" name="name" class="form-control" placeholder="Full Name"
                                    required>
                            </div>

                            <div class="mb-3">
                                <input type="email" name="email" class="form-control" placeholder="Email Address"
                                    required>
                            </div>

                            <div class="mb-3">
                                <input type="text" name="phone" class="form-control" placeholder="Phone Number"
                                    required>
                            </div>

                            <div class="mb-3">
                                <textarea name="message" class="form-control" rows="4" placeholder="Your Message" required></textarea>
                            </div>

                            <button type="submit" class="btn btnrin w-100">
                                Send Message
                            </button>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </section>

    {{-- ================= Flow ================= --}}
    <section id="flow" class="section pt-3 pb-3">
        <div class="container">
            <h2 class="line section-title text-center mb-4 heading"> Personalization </h2>

            <div class="row mg20 text-center" style="justify-content: center;">
                <div class="col-md-4 col-sm-6 col-xs-12 row">
                    <div class="col-sm-4">
                        <img src="./assets/img/icone/personalization.png" class="img-responsive ma" alt="icon"
                            loading="lazy" style="width:60%">
                    </div>
                    <div class="col-sm-8 m-auto">
                        <div class="text-center">
                            <h5 class="pt-2 item-title">Free Personalization</h5>
                            <p>We offer Standard Free Printing Engraving on all Products</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 row">
                    <div class="col-sm-4">
                        <img src="./assets/img/icone/delivery-truck.png" class="img-responsive ma" alt="icon"
                            loading="lazy" style="width:60%">
                    </div>
                    <div class="col-sm-8">
                        <div class="text-center">
                            <h5 class="pt-2 item-title">All India Delivery</h5>
                            <p>Delivery by Partners Reliable For Speed &amp; Safety</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 row">
                    <div class="col-sm-4">
                        <img src="./assets/img/icone/management-service.png" class="img-responsive ma" alt="icon"
                            loading="lazy" style="width:60%">
                    </div>
                    <div class="col-sm-8 m-auto">
                        <div class="text-center">
                            <h5 class="pt-2 item-title">Easy &amp; Multiple Payment Options</h5>
                            <p>We Have All Payment Options Available For Ease of Ordering </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 row">
                    <div class="col-sm-4">
                        <img src="./assets/img/icone/accountant.png" class="img-responsive ma" alt="icon"
                            loading="lazy" style="width:60%">
                    </div>
                    <div class="col-sm-8 m-auto">
                        <div class="text-center">
                            <h5 class="pt-2 item-title">Buy More Pay Less</h5>
                            <p>Get Discounts When You Purchase In Bulk</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 row">
                    <div class="col-sm-4">
                        <img src="./assets/img/icone/security-system.png" class="img-responsive ma" alt="icon"
                            loading="lazy" style="width:60%">
                    </div>
                    <div class="col-sm-8 m-auto" style="padding: 0px;">
                        <div class="text-center">
                            <h5 class="pt-2 item-title">Corporate Accounts</h5>
                            <p>Get Us Registered As Vendor With Your Organization &amp; Enjoy Benefits of Association</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 row">
                    <div class="col-sm-4">
                        <img src="./assets/img/icone/reseller.png" class="img-responsive ma" alt="icon"
                            loading="lazy" style="width:60%">
                    </div>
                    <div class="col-sm-8 m-auto">
                        <div class="text-center">
                            <h5 class="pt-2 item-title">Be a Reseller</h5>
                            <p>Planning to Start your own venture, We Are Here to Support</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ================= BLOG ================= --}}
    <section id="blog" class="section pt-3 pb-3 bg-light">
        <div class="container">
            <h2 class="line section-title text-center mb-4 heading">Latest Blogs</h2>

            <div class="row gy-4">
                @foreach ($blogs as $blog)
                    <div class="col-md-4">
                        <div class="card shadow-sm h-100">
                            <a href="blog/{{ $blog->slug }}">
                                @if ($blog->thumbnail)
                                    <img src="{{ asset('storage/' . $blog->thumbnail) }}" class="img-fluid"
                                        loading="lazy">
                                @endif
                                <div class="p-3 text-center">
                                    <h5>{{ $blog->title }}</h5>
                                </div>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ================= CLIENT LOGOS ================= --}}
    <section id="client" class="section pt-3 pb-3">
        <div class="container">
            <h2 class="line section-title text-center mb-4 heading">They Trust Us</h2>

            <div class="owl-carousel logo-slider">
                @foreach ($logos as $logo)
                    <div class="text-center logo-item">
                        <img src="{{ asset('storage/' . $logo->logo_filename) }}" loading="lazy" alt="Client Logo">
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection