@extends('frontend.layouts.master')
@section('title','Concorde || HOME PAGE')
@section('main-content')
<!-- Slider Area -->
@if(count($banners)>0)
<section id="Gslider" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        @foreach($banners as $key=>$banner)
        <div class="carousel-item {{(($key==0)? 'active' : '')}}">
            <div class="slider-wrapper">
                <img src="{{ asset($banner->photo) }}" class="slider-image" alt="{{$banner->title}}">
                <div class="slider-overlay"></div>
                <div class="container">
                    <div class="slider-content">
                        <h1 class="slider-title">{{$banner->title}}</h1>
                        <p class="slider-text text-white">{!! html_entity_decode($banner->description) !!}</p>
                        <a href="{{route('product-grids')}}" class="shop-btn">Shop Now</a>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    
    <!-- Navigation -->
    <a class="carousel-control-prev" href="#Gslider" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    </a>
    <a class="carousel-control-next" href="#Gslider" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </a>
</section>

<style>
#Gslider {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.slider-wrapper {
    position: relative;
    height: 100vh;
    width: 100%;
}

.slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(75deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
}

.slider-content {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    color: white;
    max-width: 600px;
    z-index: 2;
}

.slider-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.slider-text {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    opacity: 0.9;
   
}
 p{
color: white!important;
margin-bottom: 10px!important;
}

.shop-btn {
    background: #e74c3c;
    color: white;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-block;
    transition: all 0.3s ease;
}

.shop-btn:hover {
    background: #c0392b;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
}

.carousel-control-prev { left: 20px; }
.carousel-control-next { right: 20px; }

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: rgba(255,255,255,0.3);
    opacity: 1;
}

/* Responsive */
@media (max-width: 1200px) {
    .slider-title { font-size: 3rem; }
    .slider-content { left: 8%; }
}

@media (max-width: 992px) {
    .slider-title { font-size: 2.5rem; }
    .slider-text { font-size: 1.1rem; }
    .slider-content { left: 5%; max-width: 500px; }
}

@media (max-width: 768px) {
    #Gslider, .slider-wrapper { height: 70vh; }
    .slider-content { 
        left: 50%; 
        transform: translate(-50%, -50%);
        text-align: center;
        width: 90%;
        max-width: 400px;
    }
    .slider-title { font-size: 2.2rem; }
    .slider-text { font-size: 1rem; }
    .slider-overlay { 
        background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.4));
    }
}

@media (max-width: 576px) {
    #Gslider, .slider-wrapper { height: 60vh; }
    .slider-title { font-size: 1.8rem; }
    .slider-text { font-size: 0.9rem; margin-bottom: 1.5rem; }
    .shop-btn { padding: 12px 30px; font-size: 1rem; }
    .carousel-control-prev,
    .carousel-control-next {
        width: 40px;
        height: 40px;
    }
}
</style>
@endif

<!--/ End Slider Area -->

<!-- Start Small Banner  -->
<section class="small-banner section">
    <div class="container-fluid">
        <div class="row">
            @php
            $category_lists=DB::table('categories')->where('status','active')->limit(3)->get();
            @endphp
            @if($category_lists)
                @foreach($category_lists as $cat)
                    @if($cat->is_parent==1)
                        <!-- Single Banner  -->
                        <div class="col-lg-4 col-md-6 col-12  ">
                            <div class="single-banner bg-light">
                                @if($cat->photo)
                                    <img src="{{ asset($cat->photo) }}" alt="{{$cat->photo}}">
                                @else
                                    <img src="https://via.placeholder.com/600x370" alt="#">
                                @endif
                                <div class="content">
                                    <h3>{{$cat->title}}</h3>
                                        <a href="{{route('product-cat',$cat->slug)}}">Discover Now</a>
                                </div>
                            </div>
                        </div>
                    @endif
                    <!-- /End Single Banner  -->
                @endforeach
            @endif
        </div>
    </div>
</section>
<!-- End Small Banner -->

<!-- Start Product Area -->
<div class="product-area section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title">
                        <h2>Trending Item</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="product-info">
                        <div class="nav-main">
                            <!-- Tab Nav -->
                            <ul class="nav nav-tabs filter-tope-group " id="myTab" role="tablist">
                                @php
                                    $categories=DB::table('categories')->where('status','active')->where('is_parent',1)->get();
                                    // dd($categories);
                                @endphp
                                @if($categories)
                                <button class="btn" style="margin: 5px!important;  background:black"data-filter="*">
                                    All Products
                                </button>
                                    @foreach($categories as $key=>$cat)

                                    <button class="btn" style="background:none;color:black;"data-filter=".{{$cat->id}}">
                                        {{$cat->title}}
                                    </button>
                                    @endforeach
                                @endif
                            </ul>
                            <!--/ End Tab Nav -->
                        </div>
                        <div class="tab-content isotope-grid" id="myTabContent">
                             <!-- Start Single Tab -->
                            @if($product_lists)
                                @foreach($product_lists as $key=>$product)
                                <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item {{$product->cat_id}}">
                                    <div class="single-product">
                                        <div class="product-img">
                                            <a href="{{route('product-detail',$product->slug)}}">
                                                @php
                                                    $photo=explode(',',$product->photo);
                                                // dd($photo);
                                                @endphp
                                                <img class="default-img" src="{{$photo[0]}}" alt="{{$photo[0]}}">
                                                <img class="hover-img" src="{{$photo[0]}}" alt="{{$photo[0]}}">
                                                @if($product->stock<=0)
                                                    <span class="out-of-stock">Sale out</span>
                                                @elseif($product->condition=='new')
                                                    <span class="new">New</span
                                                @elseif($product->condition=='hot')
                                                    <span class="hot">Hot</span>
                                                @else
                                                    <span class="price-dec">{{$product->discount}}% Off</span>
                                                @endif


                                            </a>
                                            <div class="button-head">
                                                <div class="product-action">
                                                    <a data-toggle="modal" data-target="#{{$product->id}}" title="Quick View" href="#"><i class=" ti-eye"></i><span>Quick Shop</span></a>
                                                    <a title="Wishlist" href="{{route('add-to-wishlist',$product->slug)}}" ><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
                                                </div>
                                                <div class="product-action-2">
                                                    <a title="Add to cart" href="{{route('add-to-cart',$product->slug)}}">Add to cart</a>
                                                </div>
                                            </div>
                                        </div>
                                       <div class="product-content">
    <h3>
        <a href="{{ route('product-detail', $product->slug) }}">
            {{ $product->title }}
        </a>
    </h3>

    <div class="product-price">
        @php
            $after_discount = $product->price - ($product->price * $product->discount) / 100;
        @endphp

        <span>Rs.{{ number_format($after_discount, 2) }}</span>

        @if($product->discount > 0)
            <del style="padding-left:4%;">Rs {{ number_format($product->price, 2) }}</del>
        @endif
    </div>
</div>

                                    </div>
                                </div>
                                @endforeach

                             <!--/ End Single Tab -->
                            @endif

                        <!--/ End Single Tab -->

                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>
<!-- End Product Area -->
{{-- @php
    $featured=DB::table('products')->where('is_featured',1)->where('status','active')->orderBy('id','DESC')->limit(1)->get();
@endphp --}}
<!-- Start Midium Banner  -->
<section class="midium-banner">
    <div class="container">
        <div class="row">
            @if($featured)
                @foreach($featured as $data)
                    <!-- Single Banner  -->
                    <div class="col-lg-6 col-md-6 col-12">
                        <div class="single-banner bg-light">
                            @php
                                $photo=explode(',',$data->photo);
                            @endphp
                            <img src="{{$photo[0]}}" alt="{{$photo[0]}}">
                            <div class="content">
<p>{{ $data->cat_info->title ?? '' }}</p>
                                <h3>{{$data->title}} <br>Up to<span> {{$data->discount}}%</span></h3>
                                <a href="{{route('product-detail',$data->slug)}}">Shop Now</a>
                            </div>
                        </div>
                    </div>
                    <!-- /End Single Banner  -->
                @endforeach
            @endif
        </div>
    </div>
</section>
<!-- End Midium Banner -->

<!-- Start Most Popular -->


<div class="product-area most-popular section">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="section-title">
                    <h2>Hot Item</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="owl-carousel popular-slider">
                    @foreach($product_lists as $product)
                        @if($product->condition=='hot')
                            <!-- Start Single Product -->
                        <div class="single-product">
                            <div class="product-img">
                                <a href="{{route('product-detail',$product->slug)}}">
                                    @php
                                        $photo=explode(',',$product->photo);
                                    // dd($photo);
                                    @endphp
                                    <img class="default-img" src="{{$photo[0]}}" alt="{{$photo[0]}}">
                                    <img class="hover-img" src="{{$photo[0]}}" alt="{{$photo[0]}}">
                                    {{-- <span class="out-of-stock">Hot</span> --}}
                                </a>
                                <div class="button-head">
                                    <div class="product-action">
                                        <a data-toggle="modal" data-target="#{{$product->id}}" title="Quick View" href="#"><i class=" ti-eye"></i><span>Quick Shop</span></a>
                                        <a title="Wishlist" href="{{route('add-to-wishlist',$product->slug)}}" ><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
                                    </div>
                                    <div class="product-action-2">
                                        <a href="{{route('add-to-cart',$product->slug)}}">Add to cart</a>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content">
                                <h3><a href="{{route('product-detail',$product->slug)}}">{{$product->title}}</a></h3>
                                <div class="product-price">
                                    <span class="old">Rs.{{number_format($product->price,2)}}</span>
                                    @php
                                    $after_discount=($product->price-($product->price*$product->discount)/100)
                                    @endphp
                                    <span>Rs.{{number_format($after_discount,2)}}</span>
                                </div>
                            </div>
                        </div>
                        <!-- End Single Product -->
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Most Popular Area -->
<style>/* ===== Latest Items Section ===== */
.shop-home-list.section{
    padding:60px 0 !important;
    background:#f8f9fa !important;
}

.shop-section-title h1{
    font-size:32px !important;
    font-weight:700 !important;
    color:#222 !important;
    margin-bottom:30px !important;
    text-transform:capitalize !important;
    border-bottom:2px solid #eee !important;
    padding-bottom:10px !important;
}

/* ===== Product Card ===== */
.single-list{
    background:#fff !important;
    border-radius:10px !important;
    box-shadow:0 8px 25px rgba(0,0,0,0.08) !important;
    margin-bottom:30px !important;
    overflow:hidden !important;
    transition:all 0.3s ease !important;
}

.single-list:hover{
    transform:translateY(-6px) !important;
    box-shadow:0 12px 30px rgba(0,0,0,0.12) !important;
}

/* ===== Image Section ===== */
.list-image{
    position:relative !important;
    padding:15px !important;
}

.list-image img{
    width:100% !important;
    height:180px !important;
    object-fit:contain !important;
}

/* Buy button */
.list-image .buy{
    position:absolute !important;
    bottom:15px !important;
    right:15px !important;
    background:#000 !important;
    color:#fff !important;
    width:40px !important;
    height:40px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    opacity:0 !important;
    transition:0.3s ease !important;
}

.single-list:hover .buy{
    opacity:1 !important;
}

/* ===== Content ===== */
.content{
    padding:20px 15px !important;
}

.content .title{
    font-size:18px !important;
    font-weight:600 !important;
    margin-bottom:10px !important;
}

.content .title a{
    color:#333 !important;
    text-decoration:none !important;
}

.content .title a:hover{
    color:#000 !important;
}

.price.with-discount{
    font-size:16px !important;
    font-weight:700 !important;
    color:white!important;
}
.shop-home-list .single-list .content .price
{
background:#CB2027!important;
}

/* ===== Responsive ===== */
@media(max-width:768px){
    .list-image img{
        height:160px !important;
    }
    .content{
        text-align:center !important;
    }
}
</style>
<!-- Start Shop Home List  -->
<section class="shop-home-list section">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-12">
                <div class="row">
                    <div class="col-12">
                        <div class="shop-section-title">
                            <h1>Latest Items</h1>
                        </div>
                    </div>
                </div>
                <div class="row">
                    @php
                        $product_lists=DB::table('products')->where('status','active')->orderBy('id','DESC')->limit(6)->get();
                    @endphp
                    @foreach($product_lists as $product)
                        <div class="col-md-4">
                            <!-- Start Single List  -->
                            <div class="single-list">
                                <div class="row">
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="list-image overlay">
                                        @php
                                            $photo=explode(',',$product->photo);
                                            // dd($photo);
                                        @endphp
                                        <img src="{{$photo[0]}}" alt="{{$photo[0]}}">
                                        <a href="{{route('add-to-cart',$product->slug)}}" class="buy"><i class="fa fa-shopping-bag"></i></a>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12 no-padding">
                                    <div class="content">
                                        <h4 class="title"><a href="#">{{$product->title}}</a></h4>
                                        <p class="price with-discount">Rs.{{number_format($product->discount,2)}}</p>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <!-- End Single List  -->
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    </div>
</section> 
<!-- End Shop Home List  -->

<!-- Start Shop Blog  -->
<style>
/* ===== BLOG SECTION ===== */
.shop-blog {
    padding: 80px 0 !important;
    background: #f8f9fa !important;
}

/* ===== SECTION TITLE ===== */
.section-title h2 {
    color: #2c3e50 !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin-bottom: 50px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    position: relative !important;
    padding-bottom: 15px !important;
}

.section-title h2::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80px !important;
    height: 4px !important;
    background: #CB2027 !important;
    border-radius: 2px !important;
}

/* ===== BLOG CARD ===== */
.shop-single-blog {
    background: #ffffff !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    border: 1px solid #e9ecef !important;
}

.shop-single-blog:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(203,32,39,0.15) !important;
    border-color: #CB2027 !important;
}

/* ===== BLOG IMAGE ===== */
.shop-single-blog img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

.shop-single-blog:hover img {
    transform: scale(1.05) !important;
}

/* ===== CONTENT ===== */
.shop-single-blog .content {
    padding: 25px !important;
}

/* ===== DATE ===== */
.shop-single-blog .date {
    color: #CB2027 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.shop-single-blog .date::before {
    content: '\e6b6' !important;
    font-family: 'themify' !important;
    font-size: 14px !important;
}

/* ===== TITLE ===== */
.shop-single-blog .title {
    color: #2c3e50 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 15px !important;
    transition: color 0.3s ease !important;
}

.shop-single-blog .title:hover {
    color: #CB2027 !important;
}

/* ===== READ MORE BUTTON ===== */
.shop-single-blog .more-btn {
    color: #CB2027 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.shop-single-blog .more-btn::after {
    content: '\e628' !important;
    font-family: 'themify' !important;
    font-size: 12px !important;
    transition: transform 0.3s ease !important;
}

.shop-single-blog .more-btn:hover {
    color: #a5181e !important;
}

.shop-single-blog .more-btn:hover::after {
    transform: translateX(5px) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .shop-blog {
        padding: 60px 0 !important;
    }
    
    .section-title h2 {
        font-size: 30px !important;
        margin-bottom: 40px !important;
    }
    
    .shop-single-blog img {
        height: 220px !important;
    }
}

@media (max-width: 768px) {
    .shop-blog {
        padding: 50px 0 !important;
    }
    
    .section-title h2 {
        font-size: 26px !important;
        margin-bottom: 30px !important;
    }
    
    .shop-single-blog {
        margin-bottom: 30px !important;
    }
    
    .shop-single-blog img {
        height: 200px !important;
    }
    
    .shop-single-blog .content {
        padding: 20px !important;
    }
    
    .shop-single-blog .title {
        font-size: 18px !important;
    }
}

@media (max-width: 576px) {
    .shop-blog {
        padding: 40px 0 !important;
    }
    
    .section-title h2 {
        font-size: 24px !important;
    }
    
    .shop-single-blog img {
        height: 180px !important;
    }
    
    .shop-single-blog .content {
        padding: 15px !important;
    }
    
    .shop-single-blog .title {
        font-size: 16px !important;
    }
}
</style>

<section class="shop-blog section m-5">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="section-title">
                    <h2>From Our Blog</h2>
                </div>
            </div>
        </div>
        <div class="row">
            @if($posts)
                @foreach($posts as $post)
                    <div class="col-lg-4 col-md-6 col-12">
                        <!-- Start Single Blog  -->
                        <div class="shop-single-blog">
                            <img src="{{ asset($post->photo) }}" alt="{{$post->photo}}">
                            <div class="content">
                                <p class="date">{{$post->created_at->format('d M , Y. D')}}</p>
                                <a href="{{route('blog.detail',$post->slug)}}" class="title">{{$post->title}}</a>
                                <a href="{{route('blog.detail',$post->slug)}}" class="more-btn">Continue Reading</a>
                            </div>
                        </div>
                        <!-- End Single Blog  -->
                    </div>
                @endforeach
            @endif
        </div>
    </div>
</section>
<!-- End Shop Blog  -->

<!-- Start Shop Services Area -->
<!-- Simple Clean Bootstrap Design -->
<section class="shop-services py-5 bg-white">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold text-dark display-6 mb-3">✨ Premium Shopping Experience</h2>
            <p class="text-muted fs-5">Enjoy exclusive benefits designed just for you</p>
        </div>
        <div class="row g-3">
            
            <div class="col-lg-3 col-md-6">
                <div class="d-flex align-items-center p-3 border rounded">
                    <div class="bg-danger text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                        <i class="ti-rocket"></i>
                    </div>&nbsp;&nbsp;
                    <div>
                        <h6 class="fw-bold mb-1">Free Shipping</h6>
                        <p class="text-muted mb-0 small">Over Rs.10,000</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6">
                <div class="d-flex align-items-center p-3 border rounded">
                    <div class="bg-danger text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                        <i class="ti-reload"></i>
                    </div>&nbsp;&nbsp;
                    <div>
                        <h6 class="fw-bold mb-1">Free Return</h6>
                        <p class="text-muted mb-0 small">30 Days Return</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6">
                <div class="d-flex align-items-center p-3 border rounded">
                    <div class="bg-danger text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                        <i class="ti-lock"></i>
                    </div>&nbsp;&nbsp;
                    <div>
                        <h6 class="fw-bold mb-1">Secure Payment</h6>
                        <p class="text-muted mb-0 small">100% Secure</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6">
                <div class="d-flex align-items-center p-3 border rounded">
                    <div class="bg-danger text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                        <i class="ti-tag"></i>
                    </div>&nbsp;&nbsp;
                    <div>
                        <h6 class="fw-bold mb-1">Best Price</h6>
                        <p class="text-muted mb-0 small">Guaranteed</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Shop Services Area -->


<!-- Modal -->
@if($product_lists)
    @foreach($product_lists as $key=>$product)
        <div class="modal fade" id="{{$product->id}}" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="ti-close" aria-hidden="true"></span></button>
                        </div>
                        <div class="modal-body">
                            <div class="row no-gutters">
                                <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                    <!-- Product Slider -->
                                        <div class="product-gallery">
                                            <div class="quickview-slider-active">
                                                @php
                                                    $photo=explode(',',$product->photo);
                                                // dd($photo);
                                                @endphp
                                                @foreach($photo as $data)
                                                    <div class="single-slider">
                                                        <img src="{{$data}}" alt="{{$data}}">
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    <!-- End Product slider -->
                                </div>
                                <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                    <div class="quickview-content">
                                        <h2>{{$product->title}}</h2>
                                        <div class="quickview-ratting-review">
                                            <div class="quickview-ratting-wrap">
                                                <div class="quickview-ratting">
                                                    {{-- <i class="yellow fa fa-star"></i>
                                                    <i class="yellow fa fa-star"></i>
                                                    <i class="yellow fa fa-star"></i>
                                                    <i class="yellow fa fa-star"></i>
                                                    <i class="fa fa-star"></i> --}}
                                                    @php
                                                        $rate=DB::table('product_reviews')->where('product_id',$product->id)->avg('rate');
                                                        $rate_count=DB::table('product_reviews')->where('product_id',$product->id)->count();
                                                    @endphp
                                                    @for($i=1; $i<=5; $i++)
                                                        @if($rate>=$i)
                                                            <i class="yellow fa fa-star"></i>
                                                        @else
                                                        <i class="fa fa-star"></i>
                                                        @endif
                                                    @endfor
                                                </div>
                                                <a href="#"> ({{$rate_count}} customer review)</a>
                                            </div>
                                            <div class="quickview-stock">
                                                @if($product->stock >0)
                                                <span><i class="fa fa-check-circle-o"></i> {{$product->stock}} in stock</span>
                                                @else
                                                <span><i class="fa fa-times-circle-o text-danger"></i> {{$product->stock}} out stock</span>
                                                @endif
                                            </div>
                                        </div>
                                        @php
                                            $after_discount=($product->price-($product->price*$product->discount)/100);
                                        @endphp
                                        <h3><small><del class="text-muted">Rs.{{number_format($product->price,2)}}</del></small>    Rs.{{number_format($after_discount,2)}}  </h3>
                                        <div class="quickview-peragraph">
                                            <p>{!! html_entity_decode($product->summary) !!}</p>
                                        </div>
                                        @if($product->size)
                                            <div class="size">
                                                <div class="row">
                                                    <div class="col-lg-6 col-12">
                                                        <h5 class="title">Size</h5>
                                                        <select>
                                                            @php
                                                            $sizes=explode(',',$product->size);
                                                            // dd($sizes);
                                                            @endphp
                                                            @foreach($sizes as $size)
                                                                <option>{{$size}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    {{-- <div class="col-lg-6 col-12">
                                                        <h5 class="title">Color</h5>
                                                        <select>
                                                            <option selected="selected">orange</option>
                                                            <option>purple</option>
                                                            <option>black</option>
                                                            <option>pink</option>
                                                        </select>
                                                    </div> --}}
                                                </div>
                                            </div>
                                        @endif
                                        <form action="{{route('single-add-to-cart')}}" method="POST" class="mt-4">
                                            @csrf
                                            <div class="quantity">
                                                <!-- Input Order -->
                                                <div class="input-group">
                                                    <div class="button minus">
                                                        <button type="button" class="btn btn-primary btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
                                                            <i class="ti-minus"></i>
                                                        </button>
                                                    </div>
													<input type="hidden" name="slug" value="{{$product->slug}}">
                                                    <input type="text" name="quant[1]" class="input-number"  data-min="1" data-max="1000" value="1">
                                                    <div class="button plus">
                                                        <button type="button" class="btn btn-primary btn-number" data-type="plus" data-field="quant[1]">
                                                            <i class="ti-plus"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                <!--/ End Input Order -->
                                            </div>
                                            <div class="add-to-cart">
                                                <button type="submit" class="btn">Add to cart</button>
                                                <a href="{{route('add-to-wishlist',$product->slug)}}" class="btn min"><i class="ti-heart"></i></a>
                                            </div>
                                        </form>
                                        <div class="default-social">
                                        <!-- ShareThis BEGIN --><div class="sharethis-inline-share-buttons"></div><!-- ShareThis END -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    @endforeach
@endif
<!-- Modal end -->
@endsection

@push('styles')
    <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=5f2e5abf393162001291e431&product=inline-share-buttons' async='async'></script>
    <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=5f2e5abf393162001291e431&product=inline-share-buttons' async='async'></script>
    <style>
        /* Banner Sliding */
        #Gslider .carousel-inner {
        background: #000000;
        color:black;
        }

        #Gslider .carousel-inner{
        height: 550px;
        }
        #Gslider .carousel-inner img{
            width: 100% !important;
            opacity: .9;
        }

        #Gslider .carousel-inner .carousel-caption {
        bottom: 60%;
        }

        #Gslider .carousel-inner .carousel-caption h1 {
        font-size: 50px;
        font-weight: bold;
        line-height: 100%;
        color: #F7941D;
        }

        #Gslider .carousel-inner .carousel-caption p {
        font-size: 18px;
        color: black;
        margin: 28px 0 28px 0;
        }

        #Gslider .carousel-indicators {
        bottom: 70px;
        }
    </style>
@endpush

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
    <script>

        /*==================================================================
        [ Isotope ]*/
        var $topeContainer = $('.isotope-grid');
        var $filter = $('.filter-tope-group');

        // filter items on button click
        $filter.each(function () {
            $filter.on('click', 'button', function () {
                var filterValue = $(this).attr('data-filter');
                $topeContainer.isotope({filter: filterValue});
            });

        });

        // init Isotope
        $(window).on('load', function () {
            var $grid = $topeContainer.each(function () {
                $(this).isotope({
                    itemSelector: '.isotope-item',
                    layoutMode: 'fitRows',
                    percentPosition: true,
                    animationEngine : 'best-available',
                    masonry: {
                        columnWidth: '.isotope-item'
                    }
                });
            });
        });

        var isotopeButton = $('.filter-tope-group button');

        $(isotopeButton).each(function(){
            $(this).on('click', function(){
                for(var i=0; i<isotopeButton.length; i++) {
                    $(isotopeButton[i]).removeClass('how-active1');
                }

                $(this).addClass('how-active1');
            });
        });
    </script>
    <script>
         function cancelFullScreen(el) {
            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
            if (requestMethod) { // cancel full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

        function requestFullScreen(el) {
            // Supports most browsers and their versions.
            var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;

            if (requestMethod) { // Native full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
            return false
        }
    </script>

@endpush