@extends('website.layouts.app')
@section('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
        .main_search form.example {
            margin: auto;
            max-width: 600px;
            border: 2px solid #2e2828;
            border-radius: 30px;
        }
        
        .main_search .banner-search form.example button {
            float: left;
            width: 20%;
            padding: 13px 0px 9px 9px;
            background: #2196f300;
            color: #212020;
            font-size: 17px;
            border: none;
            border-left: none;
            cursor: pointer;
        }
    </style>
@endsection
@section('content')
    <!-- Slider Section Strat -->
    <div class="slider-banner">

        <div class="slider-section slider-active overflow-hidden">
            <div class="swiper">
                <div class="swiper-wrapper">

                    <!-- Single Slider Start -->
                    <div class="swiper-slide single-slider-05 animation-style-05"
                        style="background-image: url({{ asset('uploads/banner_images/'. $data['banner']->banner_image) }});">
                        {{-- style="background-image: url({{ asset('frontend/images/slider/slider-new.jpg') }});"> --}}
                        <!-- Slider Content Start -->
                        <div class="container">
                            <div class="row">
                                <div class="col-lg-12">
                                    <!--<div class="slider-content-05">-->
                                    <!--    <h1 class="slider-content-05__title">Better when it's on you!</h1>-->

                                    <!--    <img class="img-marke " src="{{ asset('frontend/images/banner-mark - Copy.png') }}"-->
                                    <!--        alt="">-->


                                    <!--</div>-->
                                    <!--<div class="banner-search">-->
                                    <!--    <form class="example" method="get" action="{{ route('product.search')}}">-->
                                    <!--        @csrf-->
                                    <!--        <input type="text" placeholder="Search.." name="search" id="search" required minlength="1">-->
                                    <!--        <button type="submit"><i class="fa fa-search"></i></button>-->
                                    <!--    </form>-->
                                    <!--</div>-->

                                </div>
                            </div>

                        </div>



                    </div>

                </div>
            </div>

        </div>
    </div>
    <!-- Slider Section End -->


    <div class=" main_search" style="padding: 35px;">
        <div class="container">
            <div class="row">

                <div class="banner-search">
                    <form class="example" method="get" action="{{ route('product.search')}}">
                        @csrf
                        <input type="text" placeholder="Search.." name="search" id="search" required minlength="1">
                        <button type="submit"><i class="fa fa-search"></i></button>
                    </form>
                </div>

            </div>
        </div>

    </div>
    

    <section class="trending-category">

        <div class="container">
            <div class="section-title">
                <h2><span>Trending</span> Category
                </h2>
                <hr>

            </div>
           
            <div class="row justify-content-center">
                @foreach ($data['categories']->take(2) as $category)
                <div class="col-lg-6 col-12">
                    <div class="category-item">
                        <div class="categort-image">
                            {{-- <img src="{{ asset('frontend/images/category-1.jpg') }}" alt=""> --}}
                            <img src="{{ $category->category_image ? '/uploads/category_images/' . $category->category_image : asset('frontend/images/collection-2023.jpg') }}"
                            alt="{{ $category->category_name }}">
                        </div>
                        <div class="category-title">
                            <!--<h2>{{ $category->category_name }}</h2>-->
                            <a href="{{route('collection.show', $category->category_link)}}" class="shop-btn">Shop now</a>
                        </div>
                    </div>
                </div>
                @endforeach
                
            </div>
        </div>
    </section>

    <section class="new-arival">
        <div class="container">
            <div class="section-title section-title-new-arrival ">
                <h2><span>New</span> Arrival
                </h2>
                <hr>

            </div>
            <div class="row align-items-center justify-content-center">
                @foreach ($data['latest_products']->take(1) as $product)

               
                <div class="col-lg-6 padding-0">
                    <div class="arival-content">
                        <h1>{{ $product->product_name_en }}</h1>
                        <p>{{ $product->product_desc_en }}</p>
                        <a href="{{ route('product.show', $product->product_permalink ?? '') }}" class="shop-btn">Shop now</a>
                    </div>
                </div>
                <div class="col-lg-6 padding-0">
                    <div class="arival-img">
                        <img src="{{asset('frontend/images/starsabaya.jpg') }}" alt=""> 
                        <!--<img src="{{ $product->product_title_img ? '/uploads/product_img/' . $product->product_title_img : asset('frontend/images/shope-2.jpg') }}" alt="">-->
                        
                    </div>

                </div>
                @endforeach
    </section>
    <div class="benfits mb-0">
        {{-- <div class="container">
            <div class="row">
                <div class="col-lg-6">

                    <div class="section-title ">
                        <h2><span>Benefits</span> of choosing our services
                        </h2>


                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="benfit-content">
                        <h5>We Provide free shipping anywhere as long as <br>you spend more than 200 QAR</h5>
                    </div>

                </div>
            </div>

        </div> --}}

        <section class="offer-container w-100 float-left">

            <div class="container">
                <div class="row mt-4 ">
                    {{-- <div class="col-lg-4 mb-4">
                        <div class="main-child benfit-content-items">
                            <img src="{{ asset('frontend/images/Gift.png') }}" alt="" width="64">
                            <h2>Gift Voucher</h2>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                                been the industry's standard dummy text </p>
                        </div>

                    </div>
                    <div class="col-lg-4 mb-4">
                        <div class="fst-child benfit-content-items">
                            <img src="{{ asset('frontend/images/truck.png') }}" alt="" width="64">
                            <h2>Free Shipping</h2>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                                been the industry's standard dummy text</p>
                        </div>

                    </div> --}}
                    <div class="col-lg-4 mb-4">
                        <div class="snd-child benfit-content-items">
                            <img src="{{ asset('frontend/images/secure.png') }}" alt="" width="64">
                            <h2>Good Quality</h2>
                            <p>Buthaina offers superb and high-quality scarves and abayas that are manufactured in Qatar using premium quality materials and delicately stitched to give them a polished appearance.</p>
                        </div>

                    </div>
                </div>



            </div>



        </section>

    </div>
@endsection