@extends('website.layout.master')

@section('title')
    Home
@endsection

@section('content')

    <!-- Start Search Overlay -->
    <div class="search-overlay">
        <div class="d-table">
            <div class="d-table-cell">
                <div class="search-overlay-layer"></div>
                <div class="search-overlay-layer"></div>
                <div class="search-overlay-layer"></div>

                <div class="search-overlay-close">
                    <span class="search-overlay-close-line"></span>
                    <span class="search-overlay-close-line"></span>
                </div>

                <div class="search-overlay-form">
                    <form>
                        <input type="text" class="input-search" placeholder="Search here...">
                        <button type="submit"><i class='bx bx-search-alt'></i></button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- End Search Overlay -->

    <!-- Start Main Banner Area -->
    <div class="home-slides-two owl-carousel owl-theme">

        @forelse($banners as $banner)
            <div class="main-banner"
                 style="background-image: url({{ URL::asset('admin/assets/uploads/'.$banner->image)}})">
                <div class="d-table">
                    <div class="d-table-cell">
                        <div class="container-fluid">
                            <div class="row justify-content-center">
                                <div class="col-lg-6 col-md-12">
                                    <div class="banner-content text-white">
                                        <div class="line"></div>
                                        <h1>{{ $banner->heading }}</h1>
                                        <div class="btn-box">
                                            <a href="{{ route('shop') }}" class="default-btn">View Shop</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @empty
        @endforelse

    </div>
    <!-- End Main Banner Area -->

    <!-- Start Categories Banner Area -->
    <section class="categories-banner-area pt-100 pb-70">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-12">
                    <div class="categories-box">
                        <img src="{{ URL::asset('website/images/categories/img5.jpg')}}" alt="image">

                        <div class="content">
                            <h3>New Collections!</h3>
                        </div>

                        <a href="{{route('shop')}}" class="link-btn"></a>
                    </div>
                </div>

                <div class="col-lg-6 col-md-12">
                    <div class="row justify-content-center">
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="categories-box">
                                <img src="{{ URL::asset('website/images/categories/img6.jpg')}}" alt="image">

                                <div class="content">
                                    <h3>Our Popular Products</h3>
                                </div>

                                <a href="{{route('shop')}}" class="link-btn"></a>
                            </div>
                        </div>

                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <div class="categories-box">
                                <img src="{{ URL::asset('website/images/categories/img7.jpg')}} " alt="image">

                                <div class="content">
                                    <h3>Hot Trending Products</h3>
                                </div>

                                <a href="{{route('shop')}}" class="link-btn"></a>
                            </div>
                        </div>

                        <div class="col-lg-12 col-md-12">
                            <div class="categories-box">
                                <img src="{{ URL::asset('website/images/categories/img8.jpg')}} " alt="image">

                                <div class="content">
                                    <h3>Best Selling!</h3>
                                </div>

                                <a href="{{route('shop')}}" class="link-btn"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Categories Banner Area -->

    <!-- Start Products Area -->
    <section class="products-area pb-70">
        <div class="container">
            <div class="section-title">
                <span class="sub-title">See Our Collection</span>
                <h2>Recent Products</h2>
            </div>

            <div class="row justify-content-center">
                @forelse($products as $product)

                    <div class="col-lg-4 col-md-6 col-sm-6 products-col-item">
                        <div class="products-box">
                            <div class="products-image">
                                <a href="{{route('details',[$product->slug])}}">
                                    <img src="{{ URL::asset('admin/assets/uploads/'.$product->image) }}"
                                         class="main-image"
                                         alt="image" style="width: 100%;min-height: 430px;max-height: 430px">
                                    <img src="{{ URL::asset('admin/assets/uploads/'.$product->image) }}"
                                         class="hover-image" alt="image"
                                         style="width: 100%;min-height: 430px;max-height: 430px">
                                </a>

                                <div class="products-button">
                                    <ul>
                                        <li>
                                            <div class="quick-view-btn">
                                                <a href="{{route('details',[$product->slug])}}">
                                                    <i class='bx bx-search-alt'></i>
                                                    <span class="tooltip-label">View Detail</span>
                                                </a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="products-content">
                                <span class="category">{{ $product->category->name }}</span>
                                <h3><a href="{{route('details',[$product->slug])}}">{{ $product->name }}</a></h3>

                                <div class="price">
                                    @if(!empty($product->cut_price))
                                        <span class="old-price">{{ "$".$product->cut_price }}</span>
                                    @endif
                                    <span class="new-price">{{ "$".$product->price }}</span>
                                </div>
                                <a href="{{route('details',[$product->slug])}}" class="add-to-cart">View Details</a>
                            </div>
                        </div>
                    </div>

                @empty
                    <center><h1 style="color: red">No Products Added.</h1></center>
                @endforelse
            </div>
        </div>
    </section>
    <!-- End Products Area -->

    <!-- Start Offer Area -->
    <section class="offer-area bg-image2 ptb-100 jarallax" data-jarallax='{"speed": 0.3}' style="background-color: #a58f66;background-image: none !important;">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-5 col-md-6 offset-lg-7 ">
                    <div class="offer-content-box">
                        <span class="sub-title">Rent Moroccan Dresses!</span>
                        <h2>"Effortless Moroccan Elegance"</h2>
                        <p>Timeless Style, Effortless Renting</p>
                        <a href="{{route('shop')}}" class="default-btn">Discover Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Offer Area -->



    <!-- Start Facility Area -->
    <section class="facility-area pb-70 pt-70">
        <div class="container">
            <div class="facility-slides owl-carousel owl-theme">
                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-tracking'></i>
                    </div>
                    <h3>Free Shipping</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-return'></i>
                    </div>
                    <h3>Easy Online Booking</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-shuffle'></i>
                    </div>
                    <h3>Authentic Moroccan Styles</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-sale'></i>
                    </div>
                    <h3>Flexible Rental Options</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-credit-card'></i>
                    </div>
                    <h3>Expert Style Assistance</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-location'></i>
                    </div>
                    <h3>Quality Guarantee Assured</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-customer-service'></i>
                    </div>
                    <h3>Seamless Return Process</h3>
                </div>
            </div>
        </div>
    </section>
    <!-- End Facility Area -->

    <!-- Start Products Area -->
    <section class="products-area pb-70">
        <div class="container">
            <div class="section-title">
                <span class="sub-title">See Our Collection</span>
                <h2>Best Selling Products</h2>
            </div>

            <div class="row justify-content-center">
                @forelse($randomproducts as $randomproduct)

                    <div class="col-lg-4 col-md-6 col-sm-6 products-col-item">
                        <div class="products-box">
                            <div class="products-image">
                                <a href="{{route('details',[$randomproduct->slug])}}">
                                    <img src="{{ URL::asset('admin/assets/uploads/'.$randomproduct->image) }}"
                                         class="main-image"
                                         alt="image" style="width: 100%;min-height: 430px;max-height: 430px">
                                    <img src="{{ URL::asset('admin/assets/uploads/'.$randomproduct->image) }}"
                                         class="hover-image" alt="image"
                                         style="width: 100%;min-height: 430px;max-height: 430px">
                                </a>

                                <div class="products-button">
                                    <ul>
                                        <li>
                                            <div class="quick-view-btn">
                                                <a href="{{route('details',[$randomproduct->slug])}}">
                                                    <i class='bx bx-search-alt'></i>
                                                    <span class="tooltip-label">View Detail</span>
                                                </a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="products-content">
                                <span class="category">{{ $randomproduct->category->name }}</span>
                                <h3><a href="{{route('details',[$randomproduct->slug])}}">{{ $randomproduct->name }}</a>
                                </h3>

                                <div class="price">
                                    @if(!empty($randomproduct->cut_price))
                                        <span class="old-price">{{ "$".$randomproduct->cut_price }}</span>
                                    @endif
                                    <span class="new-price">{{ "$".$randomproduct->price }}</span>
                                </div>
                                <a href="{{route('details',[$randomproduct->slug])}}" class="add-to-cart">View
                                    Details</a>
                            </div>
                        </div>
                    </div>

                @empty
                    <center><h1 style="color: red">No Products Added.</h1></center>
                @endforelse
            </div>
        </div>
    </section>
    <!-- End Products Area -->

@endsection

@section('script')
    <script src="{{ URL::asset('website/js/vendor/waypoints.js') }}"></script>

@endsection