@extends('master.front')
@section('meta')
    <meta name="keywords" content="{{ $setting->meta_keywords }}">
    <meta name="description" content="{{ $setting->meta_description }}">
@endsection

@section('content')

@php
        function renderStarRating($rating, $maxRating = 5)
        {
            $fullStar = "<i class = 'far fa-star filled'></i>";
            $halfStar = "<i class = 'far fa-star-half filled'></i>";
            $emptyStar = "<i class = 'far fa-star'></i>";
            $rating = $rating <= $maxRating ? $rating : $maxRating;

            $fullStarCount = (int) $rating;
            $halfStarCount = ceil($rating) - $fullStarCount;
            $emptyStarCount = $maxRating - $fullStarCount - $halfStarCount;

            $html = str_repeat($fullStar, $fullStarCount);
            $html .= str_repeat($halfStar, $halfStarCount);
            $html .= str_repeat($emptyStar, $emptyStarCount);
            $html = $html;
            return $html;
        }
    @endphp


    <div class="row justify-content-center desktop" style="background: #fff">
        @if ($extra_settings->is_t4_slider == 1)
                @foreach ($sliders as $slider)
                <div class="col-md-3 m-4">
                    <a href="{{$slider->link}}">
                        <div class="card">
                            <a href="{{$slider->link}}" class="btn btn-success" style="position: absolute; bottom: 50px; margin: auto; left: 34%;">Shop Now</a>
                            <video class="unique-video" width="444" height="100%" autoplay="" muted="" loop="">
                                <source src="{{ asset('assets/images/' . $slider->photo) }}"
                                    type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                    </a>
                </div>
                @endforeach
        @endif
    </div>
    
    @if ($extra_settings->is_t4_slider == 1)
    <div class="row justify-content-center mob-video" style="background: #fff; display: none;">
        <div class="owl-carousel owl-theme">
            @foreach ($sliders as $slider)
            <div class="col-md-3">
                <a href="{{$slider->link}}">
                    <div class="card">
                        <a href="{{$slider->link}}" class="btn btn-success" style="position: absolute; bottom: 50px; margin: auto; left: 34%;">Shop Now</a>
                        <video class="unique-video" width="444" height="100%" autoplay="" muted="" loop="">
                            <source src="{{ asset('assets/images/' . $slider->photo) }}"
                                type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <div class="row justify-content-center" style="background: #fff">
        <div class="col-md-12">
            <p class="text-center">CURATED EXCLUSIVELY FOR YOU</p>
        </div>
        <div class="col-md-12">
            <h2 class="text-center">New Arrivals</h2>
        </div>

        <div class="col-md-12 banner-1">
            <div class="owl-carousel owl-theme">
                @foreach ($products->orderBy('id','DESC')->get()  as $item)
                    {{-- @if ($item->is_type == 'feature') --}}
                        <div class="item p-4">
                            <a href="{{route('front.product',$item->slug)}}">
                                @if($item->previous_price && $item->previous_price !=0)
                                                {{-- <div class="product-badge product-badge2 bg-info"> -{{PriceHelper::DiscountPercentage($item)}}</div> --}}
                                                <div class="badge"
                                                    style="background: rgb(9 33 74);position: absolute; margin-top: 10px; margin-left: 10px;">Save
                                                    {{PriceHelper::DiscountPercentage($item)}}</div>
                                @endif
                                <img style="max-width: 411px; max-height: 500px; object-fit: cover !important; min-height: 492px;"
                                    src="{{asset('assets/images/'.$item->galleries[0]->photo)}}"
                                    alt="Kanisha Purple Banarasi Saree"
                                    srcset="{{asset('assets/images/'.$item->galleries[0]->photo)}}"
                                    width="2912" height="4076" loading="eager"
                                    class="product-card__image product-card__image--secondary img-1" fetchpriority="low"
                                    sizes="(max-width: 699px) 74vw, (max-width: 999px) 38vw, calc((100vw - 96px) / 4 - (24px / 4 * 3))">
            
                                <img style="max-width: 411px; max-height: 500px; object-fit: cover !important; min-height: 492px;"
                                    src="{{asset('assets/images/'.$item->thumbnail)}}"
                                    alt="Kanisha Purple Banarasi Saree"
                                    srcset="{{asset('assets/images/'.$item->thumbnail)}}"
                                    width="2912" height="4076" loading="eager"
                                    class="product-card__image product-card__image--secondary img-2 d-none" fetchpriority="low"
                                    sizes="(max-width: 699px) 74vw, (max-width: 999px) 38vw, calc((100vw - 96px) / 4 - (24px / 4 * 3))">
                                <div class="details text-center">
                                    <p style="color: #7c6666; font-size: 17px; margin-top: 25px; margin-bottom: 6px;">{{ Str::limit($item->name,35) }}</p>
                                    <div class="review" style="margin-bottom: 13px; margin-top: 15px;">
                                        <div class="rating-component">
                                            {!! renderStarRating($item->reviews->avg('rating')) !!}
                                        </div>
                                    </div>
                                    <div class="price" style="color: #e32c2b; font-size: 13px;">
                                        {{PriceHelper::grandCurrencyPrice($item)}}
                                        @if ($item->previous_price != 0)
                                            <span class="old-price" style="color: #7c6666; text-decoration: line-through;">
                                            {{PriceHelper::setPreviousPrice($item->previous_price)}}
                                            </span>
                                         @endif
                                    </div>
                                </div>
                            </a>
                        </div>
                    {{-- @endif --}}
                @endforeach
            </div>
        </div>

        <div class="col-md-12 text-center mt-4 mb-4">
            <a href="/catalog" class="btn btn-dark">VIEW ALL</a>
        </div>

    </div>

    <div class="row justify-content-center pt-4" style="background: #fff">
        {{-- <div class="col-md-12">
            <p class="text-center">Bandhani Sarees</p>
        </div> --}}
        <div class="col-md-12">
            <h2 class="text-center">Special Campaigns</h2>
        </div>

        <div class="col-md-12 banner-1">
            <div class="owl-carousel owl-theme">
                @foreach ($products->orderBy('id','DESC')->get()  as $item)
                    {{-- @if ($item->is_type == 'feature') --}}
                        <div class="item p-4">
                            <a href="{{route('front.product',$item->slug)}}">
                                @if($item->previous_price && $item->previous_price !=0)
                                                {{-- <div class="product-badge product-badge2 bg-info"> -{{PriceHelper::DiscountPercentage($item)}}</div> --}}
                                                <div class="badge"
                                                    style="background: rgb(9 33 74);position: absolute; margin-top: 10px; margin-left: 10px;">Save
                                                    {{PriceHelper::DiscountPercentage($item)}}</div>
                                @endif
                                <img style="max-width: 411px; max-height: 500px; object-fit: cover !important; min-height: 492px;"
                                    src="{{asset('assets/images/'.$item->galleries[0]->photo)}}"
                                    alt="Kanisha Purple Banarasi Saree"
                                    srcset="{{asset('assets/images/'.$item->galleries[0]->photo)}}"
                                    width="2912" height="4076" loading="eager"
                                    class="product-card__image product-card__image--secondary img-1" fetchpriority="low"
                                    sizes="(max-width: 699px) 74vw, (max-width: 999px) 38vw, calc((100vw - 96px) / 4 - (24px / 4 * 3))">
            
                                <img style="max-width: 411px; max-height: 500px; object-fit: cover !important; min-height: 492px;"
                                    src="{{asset('assets/images/'.$item->thumbnail)}}"
                                    alt="Kanisha Purple Banarasi Saree"
                                    srcset="{{asset('assets/images/'.$item->thumbnail)}}"
                                    width="2912" height="4076" loading="eager"
                                    class="product-card__image product-card__image--secondary img-2 d-none" fetchpriority="low"
                                    sizes="(max-width: 699px) 74vw, (max-width: 999px) 38vw, calc((100vw - 96px) / 4 - (24px / 4 * 3))">
                                <div class="details text-center">
                                    <p style="color: #7c6666; font-size: 17px; margin-top: 25px; margin-bottom: 6px;">{{ Str::limit($item->name,35) }}</p>
                                    <div class="review" style="margin-bottom: 13px; margin-top: 15px;">
                                        <div class="rating-component">
                                            {{-- {!! renderStarRating($item->reviews->avg('rating')) !!} --}}
                                        </div>
                                    </div>
                                    <div class="price" style="color: #e32c2b; font-size: 13px;">
                                        {{PriceHelper::grandCurrencyPrice($item)}}
                                        @if ($item->previous_price != 0)
                                            <span class="old-price" style="color: #7c6666; text-decoration: line-through;">
                                            {{PriceHelper::setPreviousPrice($item->previous_price)}}
                                            </span>
                                         @endif
                                    </div>
                                </div>
                            </a>
                        </div>
                    {{-- @endif --}}
                @endforeach
            </div>
        </div>

        <div class="col-md-12 text-center mt-4 mb-4">
            <a href="/catalog" class="btn btn-dark">VIEW ALL</a>
        </div>

    </div>

    @if ($extra_settings->is_t4_3_column_banner_first == 1)
        <div class="row justify-content-center" style="background: #fff">
            <div class="col-md-12">
                <div class="card m-4" style="min-height: 400px; background-image: url('{{ asset('assets/images/'.$banner_first['img1']) }}')">
                    <h3 class="text-white" style="margin-top: 7rem; margin-left: 4rem; font-weight: bold; margin-bottom: 2rem;">{{$banner_first['title1']}}</h3>

                    <p class="text-white" style="margin-left: 4rem;">{{$banner_first['subtitle1']}}</p>

                    <a href="{{$banner_first['firsturl1']}}" class="btn btn-dark" style="width: 113px; margin-left: 4rem; margin-top: 2rem;">VIEW ALL</a>
                </div>
            </div>
        </div>
    @endif

    @if ($extra_settings->is_t4_popular_category == 1)
    @if (count($pupular_cateogry_home4)>0)
        <div class="row justify-content-center m-4" style="background: #fff">
            @foreach ($pupular_cateogry_home4 as $popularcategory)
            <div class="col-md-3 mb-3">
                <a href="/catalog?category="{{ $popularcategory->slug }}>
                    <div class="cats" style="position: relative">
                        <img src="{{ asset('assets/images/'.$popularcategory->photo) }}" alt="" class="zoom-image group-hover:zoom" draggable="false">
                        <h3 class="text-white" style="position: absolute; z-index: 99999999999999999; bottom: 50px; margin-left: 36%;">{{$popularcategory->name}}</h3>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    @endif
    @endif

    <div class="row justify-content-center bg-blue">
        <div class="banner" style="background-image: url('{{ asset('bg.jpg') }}'); background-size: cover;">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 mt-4">
                        <img src="{{ asset('one.jpg') }}" width="575" height="767" loading="eager" style="object-position: inherit" class="images-with-text-scroll__image">
                    </div>
                    <div class="col-md-6 mt-4">
                        <p style="margin-top: 18rem; color: #fff;">
                            Nasiba Silk belonging to a multi-generation of retailing handwork sarees and lehenga is a brand closely connected to our roots. Since 1990, we are a seller of traditional, culture-centric, and authentic sarees and lehenga specially hand-worked by our artisans for the women of generation.
                        </p>
                    </div>

                    <div class="col-md-6 mt-4">
                        <p style="margin-top: 18rem; color: #fff;">
                            In Mirpur by an 18-year-old young man in the 1990s, Nasiba Silk is standing today on the pillars of our customer’s trust, the old charm of the city, and the contemporary fashion in ethnic wear. Inspired by the legacy and developing through time, we sell a diversified collection of time-honored sarees and lehenga with a hope of constantly evolving our product line for the lifeline of our brand, “our customers”.
                        </p>
                    </div>
                    <div class="col-md-6 mt-4">
                        <img src="{{ asset('two.jpeg') }}" width="575" height="767" loading="eager" style="object-position: inherit" class="images-with-text-scroll__image">
                    </div>

                    <div class="col-md-6 mt-4">
                        <img src="{{ asset('three.jpeg') }}" width="575" height="767" loading="eager" style="object-position: inherit" class="images-with-text-scroll__image">
                    </div>
                    <div class="col-md-6 mt-4">
                        <p style="margin-top: 18rem; color: #fff;">
                            Speaks in vibrant language of legacy in textile, we are old school with modern love of pure fabricated hand-work sarees and lehenga.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="blogs" style="background: #fff">
        <div class="container pt-4 pb-4">
            <div class="row justify-content-center">
                <div class="col-md-12 mt-4 mb-4">
                    <h2 class="text-center">Stay Updated With Trend</h2>
                </div>
                @foreach ($posts as $post)
                    <div class="col-md-4">
                        <a href="{{route('front.blog.details',$post->slug)}}">
                            <img src="{{ asset('assets/images/' . json_decode($post->photo, true)[array_key_first(json_decode($post->photo, true))]) }}" alt="">
                            <h4>{{ Str::limit($post->title, 55) }}</h4>
                            <p>Read more</p>
                        </a>
                    </div>
                @endforeach

                <div class="col-md-12 text-center mt-4 mb-4">
                    <a href="/blog" class="btn btn-dark">VIEW ALL</a>
                </div>
            </div>
        </div>
    </div>

    <!--<div class="video">-->
    <!--    <div class="row justify-content-center">-->
    <!--        <div class="col-md-12">-->
    <!--            <div class="card">-->
    <!--                <video class="unique-video" width="444" height="100%" autoplay="" muted="" loop="">-->
    <!--                    <source src="https://cdn.shopify.com/videos/c/o/v/55ad4911756b4026ad9924d9cffeb374.mp4"-->
    <!--                        type="video/mp4">-->
    <!--                    Your browser does not support the video tag.-->
    <!--                </video>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</div>-->
@endsection

@section('script')

<script src=" {{ asset('/owl/dist/owl.carousel.min.js') }} "></script>


<script>
    $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    autoplay: true,
    slideTransition: 'linear',
    autoplayTimeout: 10000,
    autoplaySpeed: 1000,
    autoplayHoverPause: true,
    nav:true,
    dots: false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:4
        }
    }
})
</script>

@endsection