@extends('front.layout.app')
@section('content')

    @php
    $data = json_decode($index->content);
    $about_decode = json_decode($about->content);

    @endphp

    <div class="preLoader black">
        <img src="{{asset('images/logo.png')}}" class="img-fluid" alt="img">
    </div>
    <div class="preLoader white"></div>

    <div class="mouse-cursor cursor-outer"></div>
    <div class="mouse-cursor cursor-inner"></div>

    <section class="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="slide-inner bg-image" style="background-image: url('{{ $index->getFirstMediaUrl('slider_background_image_1') }}');">
                    <div class="container">
                            <div class="row align-items-center justify-content-between">
                                <div class="col-md-6">
                                    <div class="slideContent slideOne">
                                        <h2>{{$data->slider_title_1 ?? ''}}</h2>
                                        <h3>{{$data->slider_sub_title_1 ?? ''}}</h3>
                                        <p>{{$data->slider_des_1 ?? ''}}</p>
                                        <a href="{{route('front.shop')}}" class="themeBtn">Shop Now <span><i class="fal fa-long-arrow-right"></i></span></a>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <figure>
                                        <img src="{{$index->getFirstMediaUrl('slider_image_1_1')}}" class="img-fluid" alt="img">
                                        <img src="{{$index->getFirstMediaUrl('slider_image_1_2')}}" class="img-fluid" alt="img">
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-inner bg-image" style="background-image: url('{{ $index->getFirstMediaUrl('slider_background_image_2') }}');">
                        <div class="container">
                            <div class="row align-items-center justify-content-between">
                                <div class="col-md-6">
                                    <div class="slideContent slideOne">
                                        <h2>{{$data->slider_title_2 ?? ''}}</h2>
                                        <h3>{{$data->slider_sub_title_2 ?? ''}}</h3>
                                        <p>{{$data->slider_des_2 ?? ''}}</p>
                                        <a href="{{route('front.shop')}}" class="themeBtn">Shop Now <span><i class="fal fa-long-arrow-right"></i></span></a>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <figure>
                                        <img src="{{$index->getFirstMediaUrl('slider_image_2_1')}}" class="img-fluid" alt="img">
                                        <img src="{{$index->getFirstMediaUrl('slider_image_2_2')}}" class="img-fluid" alt="img">
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-inner bg-image" style="background-image: url('{{ $index->getFirstMediaUrl('slider_background_image_3') }}');">
                        <div class="container">
                            <div class="row align-items-center justify-content-between">
                                <div class="col-md-6">
                                    <div class="slideContent slideOne">
                                        <h2>{{$data->slider_title_3 ?? ''}}</h2>
                                        <h3>{{$data->slider_sub_title_3 ?? ''}}</h3>
                                        <p>{{$data->slider_des_3 ?? ''}}</p>
                                        <a href="{{route('front.shop')}}" class="themeBtn">Shop Now <span><i class="fal fa-long-arrow-right"></i></span></a>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <figure>
                                        <img src="{{$index->getFirstMediaUrl('slider_image_3_1')}}" class="img-fluid" alt="img">
                                        <img src="{{$index->getFirstMediaUrl('slider_image_3_2')}}" class="img-fluid" alt="img">
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end swiper-wrapper -->
        </div>
    </section>


    <section class="aboutMain">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="abtImg">
                        <figure>
                            <span><img src="{{$about->getFirstMediaUrl('section_image_1')}}" class="img-fluid" data-aos="fade-right" alt="img"></span>
                            <img src="{{$about->getFirstMediaUrl('section_image_2')}}" class="img-fluid" alt="img">
                        </figure>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="title">
                        <h2 class="subheading" data-aos="fade-up"> {{$about_decode->name ??  ''}}</h2>
                        <h3 class="heading" data-aos="fade-up"> {{$about_decode->title ??  ''}}</h3>
                        <h5 data-aos="fade-up"> {{$about_decode->heading ??  ''}}</h5>
                        <p data-aos="fade-up">
                            {{$about_decode->description ??  ''}}
                        </p>

                        <div data-aos="fade-up">
                            <a href="{{route('front.about')}}" class="themeBtn blackBtn">Read More <span><i class="fal fa-long-arrow-right"></i></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="shopMain">
        <div class="container">
            <div class="tophead">
                <a href="#">Filter by<i class="fal fa-sliders-h"></i></a>
                <h2 class="heading" data-aos="fade-up">Shop By Category</h2>
            </div>
            <div class="row">
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="50">
                    <a href=" " class="shopBox">
                        <figure><img src="{{asset('images/shop1.jpg')}}" class="w-100" alt="img"></figure>
                        <div class="shopContent">
                            <h5>Jeep Life Tumbler</h5>
                            <h3>Price$35.00</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="150">
                    <a href=" " class="shopBox">
                        <figure><img src="{{asset('images/shop2.jpg')}}" class="w-100" alt="img"></figure>
                        <div class="shopContent">
                            <h5>Dolphins Tumbler</h5>
                            <h3>Price$35.00</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="250">
                    <a href=" " class="shopBox">
                        <figure><img src="{{asset('images/shop3.jpg')}}" class="w-100" alt="img"></figure>
                        <div class="shopContent">
                            <h5>Bengals Tumbler</h5>
                            <h3>Price$35.00</h3>
                        </div>
                    </a>
                </div>

                <div class="col-md-4" data-aos="fade-up" data-aos-delay="50">
                    <a href=" " class="shopBox">
                        <figure><img src="{{asset('images/shop4.jpg')}}" class="w-100" alt="img"></figure>
                        <div class="shopContent">
                            <h5>Black Panther Inspired Tumbler</h5>
                            <h3>Price$35.00</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="150">
                    <a href=" " class="shopBox">
                        <figure><img src="{{asset('images/shop5.jpg')}}" class="w-100" alt="img"></figure>
                        <div class="shopContent">
                            <h5>LV Drip Inspired Tumbler</h5>
                            <h3>Price$35.00</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="250">
                    <a href=" " class="shopBox">
                        <figure><img src="{{asset('images/shop6.jpg')}}" class="w-100" alt="img"></figure>
                        <div class="shopContent">
                            <h5>UTSA Inspired Tumblers</h5>
                            <h3>Price$35.00</h3>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>


    <section class="workMain">
        <div class="container-fluid">
            <h2 class="heading text-center mb-4" data-aos="fade-up">Our Work</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="swiper workSlider" data-aos="fade-up">
                        <div class="swiper-wrapper">
                             @forelse($our_works as $our_work)
                            <div class="swiper-slide">
                                <a href="{{ asset('storage/' . $our_work->image) }}" data-fancybox="work">
                                    <figure>
                                        <img src="{{ asset('storage/' . $our_work->image) }}" class="w-100" alt="img">
                                    </figure>
                                </a>
                            </div>
                            @empty
                        <div class="text-center">
                            <h5>Our Work Not Found</h5>
                        </div>
                            @endforelse

                        </div>
                        <div class="swiper-button-prev"><i class="fal fa-long-arrow-left"></i></div>
                        <div class="swiper-button-next"><i class="fal fa-long-arrow-right"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="shopMain customRequest">
        <div class="container">
            <div class="tophead" data-aos="fade-up">
                <h2 class="heading">CUSTOM REQUESTS</h2>
            </div>
            <div class="row">
                <div class="col-md-3" data-aos="fade-up" data-aos-delay="50">
                    <a href=" " class="shopBox">
                        <figure><img src="{{asset('images/custom1.jpg')}}" class="w-100" alt="img"></figure>
                        <div class="shopContent">
                            <h5>Custom Hoodie Request</h5>
                            <h3>$25.00</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-3" data-aos="fade-up" data-aos-delay="150">
                    <a href=" " class="shopBox">
                        <figure><img src="{{asset('images/custom2.jpg')}}" class="w-100" alt="img"></figure>
                        <div class="shopContent">
                            <h5>Kids Custom Cup Request</h5>
                            <h3>$27.00</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-3" data-aos="fade-up" data-aos-delay="250">
                    <a href=" " class="shopBox">
                        <figure><img src="{{asset('images/custom3.jpg')}}" class="w-100" alt="img"></figure>
                        <div class="shopContent">
                            <h5>Custom Cup Request</h5>
                            <h3>Price$35.00</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-3" data-aos="fade-up" data-aos-delay="350">
                    <a href=" " class="shopBox">
                        <figure><img src="{{asset('images/custom4.jpg')}}" class="w-100" alt="img"></figure>
                        <div class="shopContent">
                            <h5>Glitter Custom Request</h5>
                            <h3>$18.50</h3>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="customOrder">
        <div class="container">
            <div class="row">
                <div class="col-md-7">
                    <div class="orderContent" data-aos="fade-up">
                        <h2>Place a
                            Custom Order</h2>
                        <a href="#"><img src="{{asset('images/placeimg.png')}}" class="img-fluid" alt="img"></a>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="shirtRequest">
                        <h5 class="sectionHeading">Custom  Request</h5>
                        <h6>$15.50</h6>
                        <form action="{{ route('front.custom-request.form') }}" method="post">
                            @csrf
                            <label>Category</label>
                            <select name="category">
                                <option value="">Select Category</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name ?? '' }}</option>
                                @endforeach
                            </select>

                            <label>List of Sizes</label>
                            <select name="size">
                                <option value="">Select Size</option>
                                @foreach($variations->where('type', 'size') as $variation)
                                    <option value="{{ $variation->id }}">{{ $variation->name ?? '' }}</option>
                                @endforeach
                            </select>

                            <label>List of Styles</label>
                            <select name="style">
                                <option value="">Select Style</option>
                                @foreach($variations->where('type', 'style') as $variation)
                                    <option value="{{ $variation->id }}">{{ $variation->name ?? '' }}</option>
                                @endforeach
                            </select>

                            <label>Any other Customizing Requests, you can email us or chat us. (optional)</label>
                            <textarea name="custom_request" cols="61" rows="4"></textarea>

                            <label>Quantity</label>
                            <input type="number" name="quantity" value="0">

                            <div class="d-flex">
                                <button type="submit" class="themeBtn blackBtn">Make A Request <span><i class="fal fa-long-arrow-right"></i></span></button>
                                <a href="#" class="heart"><i class="fal fa-heart"></i></a>
                            </div>
                        </form>

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



    <!-- FAQ SECTION -->

{{--    <section class="faq-section">--}}
{{--        <div class="container">--}}
{{--            <div class="text-center">--}}

{{--                <h2 class="heading  mx-auto " data-aos="fade-up">frequently asked questions</h2>--}}
{{--                <div class="col-lg-9 col-md-11 mx-auto">--}}
{{--                    <div class="accordion" id="faqModule">--}}
{{--                        <div class="accordion-item" data-aos="fade-up">--}}
{{--                            <div class="card-header" id="faqOne">--}}
{{--                                <button class="btn" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">--}}
{{--                                    ​How do I place an order?--}}
{{--                                </button>--}}
{{--                            </div>--}}

{{--                            <div id="collapseOne" class="collapse show" aria-labelledby="faqOne" data-parent="#faqModule">--}}
{{--                                <div class="card-body">--}}
{{--                                    <p>Orders can be placed on this website. We’ve done our best to make the site work--}}
{{--                                        and feel like a normal online shopping experience. Read on to see how we do this--}}
{{--                                        around custom orders!</p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="accordion-item" data-aos="fade-up">--}}
{{--                            <div class="card-header" id="faqTwo">--}}
{{--                                <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">--}}
{{--                                    Not seeing what you want?--}}
{{--                                </button>--}}
{{--                            </div>--}}
{{--                            <div id="collapseTwo" class="collapse" aria-labelledby="faqTwo" data-parent="#faqModule">--}}
{{--                                <div class="card-body">--}}
{{--                                    <p>Orders can be placed on this website. We’ve done our best to make the site work--}}
{{--                                        and feel like a normal online shopping experience. Read on to see how we do this--}}
{{--                                        around custom orders! </p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="accordion-item" data-aos="fade-up">--}}
{{--                            <div class="card-header" id="faqThree">--}}
{{--                                <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">--}}
{{--                                    How long does a custom order take?--}}
{{--                                </button>--}}
{{--                            </div>--}}
{{--                            <div id="collapseThree" class="collapse" aria-labelledby="faqThree" data-parent="#faqModule">--}}
{{--                                <div class="card-body">--}}
{{--                                    <p>Orders can be placed on this website. We’ve done our best to make the site work--}}
{{--                                        and feel like a normal online shopping experience. Read on to see how we do this--}}
{{--                                        around custom orders!.</p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="accordion-item" data-aos="fade-up">--}}
{{--                            <div class="card-header" id="faqfour">--}}
{{--                                <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">--}}
{{--                                    There is an item on sale. Can it be customized?--}}
{{--                                </button>--}}
{{--                            </div>--}}
{{--                            <div id="collapseFour" class="collapse" aria-labelledby="faqfour" data-parent="#faqModule">--}}
{{--                                <div class="card-body">--}}
{{--                                    <p>Orders can be placed on this website. We’ve done our best to make the site work--}}
{{--                                        and feel like a normal online shopping experience. Read on to see how we do this--}}
{{--                                        around custom orders!</p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div data-aos="fade-up text-center ">--}}
{{--                    <a href="{{route('front.faqs')}}" class="themeBtn blackBtn mx-auto">View All <span><i class="fal fa-long-arrow-right"></i></span></a>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </section>--}}

    <!-- !@FAQ SECTION -->

    <section class="testimonialSec">
        <div class="container">


            <div class="row">
                <div class="col-md-12" data-aos="fade-up">
                    <div class="swiper testimonialSlider">
                        <div class="swiper-wrapper">
                            @forelse($testimonials as $testimonial)
                            <div class="swiper-slide">
                                <div class="testimonial-card">
                                    <div class="content">
                                        <i class="fas fa-quote-right"></i>

                                        <p>{{$testimonial->description ? : ''}}</p>
                                        <div class="testimonial-info">

                                            <a href="#" tabindex="0">{{$testimonial->title ? : ''}}</a>
                                            <ul class="star">
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star"></i></li>
                                                <li><i class="fa fa-star"></i></li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            @empty
                                <div class="text-center">
                                    <h5>Testimonial Not Found</h5>
                                </div>
                            @endforelse
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>

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

    <section class="bottelsSection">
        <div class="container">
            <h2 class="heading mb-5 text-center" data-aos="fade-up">Trending Drinkware</h2>
            <div class="row align-items-center">
                <div class="col-md-3" data-aos="fade-up" data-aos-delay="50">
                    <a href=" " class="bottelwrap">
                        <figure>
                            <img src="{{asset('images/bottel1.png')}}" class="img-flud" alt="">
                        </figure>
                        <div class="bottelcntnt">
                            <h3>YETI</h3>
                            <h2>Rambler | 20 oz Tumbler</h2>
                            <ul class="star">
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                            </ul>
                            <h4>$39.00</h4>
                        </div>
                    </a>
                </div>
                <div class="col-md-3" data-aos="fade-up" data-aos-delay="150">
                    <a href=" " class="bottelwrap">
                        <figure class="purple">
                            <img src="{{asset('images/bottel2.png')}}" class="img-flud" alt="">
                        </figure>
                        <div class="bottelcntnt">
                            <h3>owala</h3>
                            <h2>Freesip | 24 oz</h2>
                            <ul class="star">
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                            </ul>
                            <h4>$39.00</h4>
                        </div>
                    </a>
                </div>
                <div class="col-md-3" data-aos="fade-up" data-aos-delay="250">
                    <a href=" " class="bottelwrap">
                        <figure class="pink">
                            <img src="{{asset('images/bottel3.png')}}" class="img-flud" alt="">
                        </figure>
                        <div class="bottelcntnt">
                            <h3>RTIC</h3>
                            <h2>Tumbler | 30 oz</h2>
                            <ul class="star">
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                            </ul>
                            <h4>$39.00</h4>
                        </div>
                    </a>
                </div>
                <div class="col-md-3" data-aos="fade-up" data-aos-delay="350">
                    <a href=" " class="bottelwrap">
                        <figure class="black">
                            <img src="{{asset('images/bottel4.png')}}" class="img-flud" alt="">
                        </figure>
                        <div class="bottelcntnt">
                            <h3>BLENDERBOTTLE</h3>
                            <h2>Strada | 24 oz Protein Shaker Bottle</h2>
                            <ul class="star">
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                            </ul>
                            <h4>$39.00</h4>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
    @include('front.layout.contact-form')
@endsection