@extends('frontEnd.layouts.master')

@section('title')
    Home
@endsection

@section('body')
    <section>
        <div class="slider">
            <div class="container-fluid container-95">
                <div class="row">
                    <div class="col-md-3 pr-1 category">
                        <div class="card">
                            <div class="card-header">
                                ক্যাটেগরীজ
                            </div>
                            <div class="card-body">
                                <ul>
                                    @foreach($categories as $cat)
                                        <li>
                                            <a href="{{route('single.category',$cat->id)}}">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                     class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M9 6l6 6l-6 6"/>
                                                </svg> {{$cat->category_name}}</a>
                                        </li>
                                    @endforeach
                                    @if(count($categories)>8)
                                        <li>
                                            <a href="" class="show_more"><i class="ti ti-square-plus"></i> আরও দেখুন</a>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9 px-md-3 p-0">
                        <div id="home_slider" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                @if(count($sliders)>1)
                                    @foreach($sliders as $key => $item)
                                        <li data-target="#home_slider" data-slide-to="{{$key}}" @if($key==0) class="active" @endif></li>
                                    @endforeach
                                @endif
                            </ol>
                            <div class="carousel-inner">
                                @foreach($sliders as $key => $item)
                                    <div class="carousel-item {{$key==0 ? "active":""}}">
                                        <a href="{{$item->slider_url}}"><img
                                                src="{{$item->get_img ? asset($item->get_img->file_url):asset('frontEnd/images/no_image.png')}}" class="d-block w-100"
                                                alt=""></a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="hot-deals mt-md-4">
            <div class="container-fluid container-95">
                <div class="row">
                    <div class="col-12">
                        <div class="hot-deals-inner-wrapper">
                            <div class="row">
                                <div class="col-12">
                                    <h4 class="mb-3">
                                        হট ডিল
                                        <a href="{{route('all.hot.deals')}}">সবগুলো দেখুন <i class="fa fa-angle-right"></i></a>
                                    </h4>
                                </div>
                            </div>

                            <div class="owl-carousel mb-3">
                                @foreach($hot_deal_1 as $item)
                                                                        <div class="hot-deals-product">
                                        <div class="main-product-inner-wrapper text-center">
                                            <div class="discount">
                                                <div class="discount-wrapper">
                                                    <img src="{{asset('frontEnd/images/flash-deal-percentage.png')}}" alt="">
                                                    <span>{{$percentage}}%</span> <br>
                                                    <span>ছাড়</span>
                                                </div>
                                            </div>
                                            <a href="{{route('single.product',[$item->slug,$item->id])}}">
                                                <img src="{{$item->get_image ? asset($item->get_image->file_url) : asset('frontEnd/images/no_image.png')}}"
                                                     alt="{{$item->name}}">
                                            </a>
                                            @if($item->sale_price != 0)
                                                <p class="mb-0" style="text-decoration: line-through;color: #b8b8b8">{{$web_settings->currency_sign}} {{\App\BanglaToEnglishConverter::en2bn($item->price)}}</p>
                                                <p class="font-weight-bold mb-0" style="color: #fca204">{{$web_settings->currency_sign}} {{\App\BanglaToEnglishConverter::en2bn($item->sale_price)}}</p>
                                            @else
                                                <p class="font-weight-bold mb-0"
                                                   style="margin-top: 24px;color: #fca204">{{$web_settings->currency_sign}} {{\App\BanglaToEnglishConverter::en2bn($item->price)}}</p>
                                            @endif
                                            <p class="mb-0 prod_name"><a href="{{route('single.product',[$item->slug,$item->id])}}">{{$item->name}}</a></p>
                                            <form action="{{route('add.cart',$item->id)}}" method="post">
                                                @csrf
                                                <input type="hidden" name="qty" value="1">
                                                <input type="submit" class="btn btn-sm w-100 mb-2 order_now_btn" name="order_now" value="অর্ডার করুন">
                                            </form>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if(count($category_products)>0)
        @foreach($category_products as $category)

            @if(count($category->get_products)>0)
                <div class="main-products-section">
                    <div class="container-fluid container-95">
                        <div class="row">
                            <div class="col-md-12">
                                <h4 class="mb-3">
                                    {{$category->category_name}}
                                    <a href="{{route('single.category',$category->id)}}">সবগুলো দেখুন <i class="fa fa-angle-right"></i></a>
                                </h4>
                            </div>
                        </div>
                        <div class="row m-0">
                            @foreach($category->get_products()->take(12)->get() as $item)
                                @if($item)
                                    <div class="main-product">
                                        <div class="main-product-inner-wrapper text-center">
                                            <a href="{{route('single.product',[$item->slug,$item->id])}}">
                                                <img src="{{$item->get_image ? asset($item->get_image->file_url) : asset('frontEnd/images/no_image.png')}}"
                                                     alt="{{$item->name}}">
                                            </a>
                                            @if($item->sale_price != 0)
                                                <p class="mb-0" style="text-decoration: line-through;color: #b8b8b8">{{$web_settings->currency_sign}} {{\App\BanglaToEnglishConverter::en2bn($item->price)}}</p>
                                                <p class="font-weight-bold mb-0" style="color: #fca204">{{$web_settings->currency_sign}} {{\App\BanglaToEnglishConverter::en2bn($item->sale_price)}}</p>
                                            @else
                                                <p class="font-weight-bold mb-0"
                                                   style="margin-top: 24px;color: #fca204">{{$web_settings->currency_sign}} {{\App\BanglaToEnglishConverter::en2bn($item->price)}}</p>
                                            @endif
                                            <p class="mb-0 prod_name"><a href="{{route('single.product',[$item->slug,$item->id])}}">{{$item->name}}</a></p>
                                            <form action="{{route('add.cart',$item->id)}}" method="post">
                                                @csrf
                                                <input type="hidden" name="qty" value="1">
                                                <input type="submit" class="btn btn-sm w-100 mb-2 order_now_btn" name="order_now" value="অর্ডার করুন">
                                            </form>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>

                        <div class="row mt-md-4 mt-2">
                            <div class="col-12">
                                {{ $category_products->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach
    @endif


    {{--<section>
        <div class="main-products-section">
            <div class="container-fluid container-95">
                <div class="row">
                    <div class="col-md-12">
                        <h4 class="mb-3">প্রয়োজনীয় প্রোডাক্ট</h4>
                    </div>
                </div>
                <div class="row m-0">
                    @foreach($products as $item)
                        <div class="main-product">
                            <div class="main-product-inner-wrapper text-center">
                                <a href="{{route('single.product',[$item->slug,$item->id])}}">
                                    <img src="{{$item->get_image ? asset($item->get_image->file_url) : asset('frontEnd/images/no_image.png')}}" alt="{{$item->name}}">
                                </a>
                                @if($item->sale_price != 0)
                                    <p class="mb-0" style="text-decoration: line-through;color: #b8b8b8">{{$web_settings->currency_sign}} {{$item->price}}</p>
                                    <p class="font-weight-bold mb-0" style="color: #fca204">{{$web_settings->currency_sign}} {{$item->sale_price}}</p>
                                @else
                                    <p class="font-weight-bold mb-0" style="margin-top: 24px;color: #fca204">{{$web_settings->currency_sign}} {{$item->price}}</p>
                                @endif
                                <p class="mb-0 prod_name"><a href="{{route('single.product',[$item->slug,$item->id])}}">{{$item->name}}</a></p>
                                <form action="{{route('add.cart',$item->id)}}" method="post">
                                    @csrf
                                    <input type="hidden" name="qty" value="1">
                                    <input type="submit" class="btn btn-sm w-100 mb-2 order_now_btn" name="order_now" value="অর্ডার করুন">
                                </form>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="row mt-md-4 mt-2">
                    <div class="col-12">
                        {{ $products->links() }}
                    </div>
                </div>
            </div>
        </div>
    </section>--}}
@endsection



@section('script')
    <script>
        $(document).ready(function () {
            $(".owl-carousel").owlCarousel({
                margin: 20,
                loop: true,
                dots: false,
                autoplay: true,
                autoplayTimeout: 6000,
                autoplayHoverPause: true,
                responsiveClass: true,
                responsive: {
                    0: {
                        items: 2,
                        nav: true
                    },
                    600: {
                        items: 3,
                        nav: false
                    },
                    1000: {
                        items: 6,
                        nav: true,
                        loop: false
                    }
                }
            });

            $('.owl-nav').remove();
        });
    </script>
@endsection