@extends('frontend.layouts.master')

@section('title','JAYAKA || PRODUCT PAGE')

@section('main-content')
	
		<!-- Breadcrumbs -->
		<div class="breadcrumbs">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<div class="bread-inner">
							<ul class="bread-list">
								<li><a href="{{route('home')}}">Home<i class="ti-arrow-right"></i></a></li>
								<li class="active"><a href="javascript:void(0);">Shop List</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- End Breadcrumbs -->
		<form action="{{route('shop.filter')}}" method="POST">
		@csrf
			<!-- Product Style 1 -->
			<section class="product-area shop-sidebar shop-list shop section">
				<div class="container">
					<div class="row">
						<div class="col-lg-3 col-md-4 col-12">
							
							    <div class="shop-sidebar d-flex flex-column">

                                <!-- Single Widget -->
<!-- Mobile Toggle Buttons -->
<div class="d-block d-md-none mb-3">
    <button class="btn btn-outline-dark w-100 mb-2" type="button" onclick="toggleMobileFilter('mobile-category')">Filter by Category</button>
    <button class="btn btn-outline-dark w-100 mb-2" type="button" onclick="toggleMobileFilter('mobile-price')">Filter by Price</button>
    <button class="btn btn-outline-dark w-100" type="button" onclick="toggleMobileFilter('mobile-brand')">Filter by Brand</button>
</div>


                                <!-- Single Widget -->
<div id="mobile-category" class="single-widget category d-md-block d-none">

                                    <h3 class="title">Categories</h3>
                                    <ul class="categor-list">
										@php
											// $category = new Category();
											$menu=App\Models\Category::getAllParentWithChild();
										@endphp
										@if($menu)
										<li>
											@foreach($menu as $cat_info)
													@if($cat_info->child_cat->count()>0)
														<li><a href="{{route('product-cat',$cat_info->slug)}}">{{$cat_info->title}}</a>
															<ul>
																@foreach($cat_info->child_cat as $sub_menu)
																	<li><a href="{{route('product-sub-cat',[$cat_info->slug,$sub_menu->slug])}}">{{$sub_menu->title}}</a></li>
																@endforeach
															</ul>
														</li>
													@else
														<li><a href="{{route('product-cat',$cat_info->slug)}}">{{$cat_info->title}}</a></li>
													@endif
											@endforeach
										</li>
										@endif
                                        {{-- @foreach(Helper::productCategoryList('products') as $cat)
                                            @if($cat->is_parent==1)
												<li><a href="{{route('product-cat',$cat->slug)}}">{{$cat->title}}</a></li>
											@endif
                                        @endforeach --}}
                                    </ul>
                                </div>
                                <!--/ End Single Widget -->
                                <!-- Shop By Price -->
								<!-- Shop By Price -->
<!-- Shop By Price -->
<div id="mobile-price" class="single-widget range d-md-block d-none">


									<h3 class="title">Shop by Price</h3>
									<div class="price-filter">
										<div class="price-filter-inner">
											{{-- <div id="slider-range" data-min="10" data-max="2000" data-currency="%"></div>
												<div class="price_slider_amount">
												<div class="label-input">
													<span>Range:</span>
													<input type="text" id="amount" name="price_range" value='@if(!empty($_GET['price'])) {{$_GET['price']}} @endif' placeholder="Add Your Price"/>
												</div>
											</div> --}}
											@php
												$max=DB::table('products')->max('price');
												// dd($max);
											@endphp
											<div id="slider-range" data-min="0" data-max="{{$max}}"></div>
											<div class="product_filter">
											<button type="submit" class="filter_button">Filter</button>
											<div class="label-input">
												<span>Range:</span>
												<input style="" type="text" id="amount" readonly/>
												<input type="hidden" name="price_range" id="price_range" value="@if(!empty($_GET['price'])){{$_GET['price']}}@endif"/>
											</div>
											</div>
										</div>
									</div>
									{{-- <ul class="check-box-list">
										<li>
											<label class="checkbox-inline" for="1"><input name="news" id="1" type="checkbox">$20 - $50<span class="count">(3)</span></label>
										</li>
										<li>
											<label class="checkbox-inline" for="2"><input name="news" id="2" type="checkbox">$50 - $100<span class="count">(5)</span></label>
										</li>
										<li>
											<label class="checkbox-inline" for="3"><input name="news" id="3" type="checkbox">$100 - $250<span class="count">(8)</span></label>
										</li>
									</ul> --}}
								</div>
								<!--/ End Shop By Price -->
                                <!-- Single Widget -->
                                <div class="single-widget recent-post d-none d-md-block">
    <h3 class="title">Recent post</h3>
    @foreach($recent_products as $product)
        @php $photo=explode(',',$product->photo); @endphp
        <div class="single-post first">
            <div class="image">
                <img src="{{$photo[0]}}" alt="{{$photo[0]}}">
            </div>
            <div class="content">
                <h5><a href="{{route('product-detail',$product->slug)}}">{{$product->title}}</a></h5>
                @php
                    $org=($product->price-($product->price*$product->discount)/100);
                @endphp
                <p class="price">
                    <del class="text-muted">Rs{{number_format($product->price,2)}}</del>
                    Rs{{number_format($org,2)}}
                </p>
            </div>
        </div>
    @endforeach
</div>

                                <!--/ End Single Widget -->
                                <!-- Single Widget -->
<!-- Single Widget -->
<div id="mobile-brand" class="single-widget category d-md-block d-none">
    <h3 class="title">Brands</h3>
    <ul class="categor-list">
        @php
            $brands=DB::table('brands')->orderBy('title','ASC')->where('status','active')->get();
        @endphp
        @foreach($brands as $brand)
            <li><a href="{{route('product-brand',$brand->slug)}}">{{$brand->title}}</a></li>
        @endforeach
    </ul>
</div>


                                <!--/ End Single Widget -->
                        	</div>
						</div>
						<div class="col-lg-9 col-md-8 col-12">
							<div class="row">
								<div class="col-12">
									<!-- Shop Top -->
									<div class="shop-top">
										<div class="shop-shorter">
											<div class="single-shorter">
												<label>Show :</label>
												<select class="show" name="show" onchange="this.form.submit();">
													<option value="">Default</option>
													<option value="9" @if(!empty($_GET['show']) && $_GET['show']=='9') selected @endif>09</option>
													<option value="15" @if(!empty($_GET['show']) && $_GET['show']=='15') selected @endif>15</option>
													<option value="21" @if(!empty($_GET['show']) && $_GET['show']=='21') selected @endif>21</option>
													<option value="30" @if(!empty($_GET['show']) && $_GET['show']=='30') selected @endif>30</option>
												</select>
											</div>
											<div class="single-shorter">
												<label>Sort By :</label>
												<select class='sortBy' name='sortBy' onchange="this.form.submit();">
													<option value="">Default</option>
													<option value="title" @if(!empty($_GET['sortBy']) && $_GET['sortBy']=='title') selected @endif>Name</option>
													<option value="price" @if(!empty($_GET['sortBy']) && $_GET['sortBy']=='price') selected @endif>Price</option>
													<option value="category" @if(!empty($_GET['sortBy']) && $_GET['sortBy']=='category') selected @endif>Category</option>
													<option value="brand" @if(!empty($_GET['sortBy']) && $_GET['sortBy']=='brand') selected @endif>Brand</option>
												</select>
											</div>
										</div>
										<!--<ul class="view-mode">-->
										<!--	<li><a href="{{route('product-grids')}}"><i class="fa fa-th-large"></i></a></li>-->
										<!--	<li class="active"><a href="javascript:void(0)"><i class="fa fa-th-list"></i></a></li>-->
										<!--</ul>-->
@php
    $curr = request()->query('view', 'grid'); // fallback to grid if no query
    $gridUrl = request()->fullUrlWithQuery(['view' => 'grid']);
    $listUrl = request()->fullUrlWithQuery(['view' => 'list']);
@endphp

<ul class="view-mode">
    <li class="{{ $curr === 'grid' ? 'active' : '' }}">
        <a href="{{ $gridUrl }}"><i class="fa fa-th-large"></i></a>
    </li>
    <li class="{{ $curr === 'list' ? 'active' : '' }}">
        <a href="{{ $listUrl }}"><i class="fa fa-th-list"></i></a>
    </li>
</ul>







									</div>
									<!--/ End Shop Top -->
									<!-- Mobile Recent Posts (Visible Only on Mobile) -->


								</div>
							</div>
							<div class="row">
								@if(count($products))
									@foreach($products as $product)
									 	{{-- {{$product}} --}}
										<!-- Start Single List -->
										<div class="col-12">
											<div class="row">
												<div class="col-lg-4 col-md-6 col-sm-6">
													<div class="single-product">
														<div class="product-img">
															<a href="{{route('product-detail',$product->slug)}}">
															@php 
																$photo=explode(',',$product->photo);
															@endphp
															<img class="default-img" src="{{$photo[0]}}" alt="{{$photo[0]}}">
															<img class="hover-img" src="{{$photo[0]}}" alt="{{$photo[0]}}">
															</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)}}" class="wishlist" data-id="{{$product->id}}"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
																</div>
																<div class="product-action-2">
																	<a data-toggle="modal" title="Add to cart" data-target="#{{$product->id}}" href="#">Add to cart</a>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="col-lg-8 col-md-6 col-12">
													<div class="list-content">
														<div class="product-content">
															<div class="product-price">
																@php
																	$after_discount=($product->price-($product->price*$product->discount)/100);
																@endphp
																<span>Rs{{number_format($after_discount,2)}}</span>
																<del>Rs{{number_format($product->price,2)}}</del>
															</div>
															<h3 class="title"><a href="{{route('product-detail',$product->slug)}}">{{$product->title}}</a></h3>
														{{-- <p>{!! html_entity_decode($product->summary) !!}</p> --}}
														</div>
														<p class="des pt-2">{!! html_entity_decode($product->summary) !!}</p>
														<a href="#" class="btn cart" data-toggle="modal" data-target="#{{$product->id }}">Buy Now!</a>
														<!--<a data-toggle="modal" data-target="#{{$product->id}}" title="Quick View" href="#">-->


													</div>
													
												</div>
											</div>
											
										</div>
										<!-- End Single List -->
									@endforeach
								@else
									<h4 class="text-warning" style="margin:100px auto;">There are no products.</h4>
								@endif
							</div>
							 <div class="row">
                            <div class="col-md-12 justify-content-center d-flex">
                                {{-- {{$products->appends($_GET)->links()}}  --}}
                            </div>
                          </div>
						</div>
					</div>
					<div class="single-widget recent-post d-block d-md-none mt-4 px-3">
    <h3 class="title">Recent post</h3>
    @foreach($recent_products as $product)
        @php $photo=explode(',',$product->photo); @endphp
        <div class="single-post first mb-3">
            <div class="image">
                <img src="{{$photo[0]}}" alt="{{$photo[0]}}">
            </div>
            <div class="content">
                <h5><a href="{{route('product-detail',$product->slug)}}">{{$product->title}}</a></h5>
                @php
                    $org=($product->price-($product->price*$product->discount)/100);
                @endphp
                <p class="price">
                    <del class="text-muted">Rs{{number_format($product->price,2)}}</del>
                    Rs{{number_format($org,2)}}
                </p>
            </div>
        </div>
    @endforeach
</div>
				</div>
			</section>
			<!--/ End Product Style 1  -->	
		</form>
		<!-- Modal -->
		@if($products)
			@foreach($products 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>
											


												<form action="{{route('single-add-to-cart')}}" method="POST">
													@csrf 
													<input type="hidden" name="redirect_to_cart" value="1">
													@if($product->size)
    <div class="form-group mt-3">
        <label for="size"><strong>Select Size:</strong></label>
        <select name="size" class="form-control" required>
            <option value="">-- Choose Size --</option>
            @foreach(explode(',', $product->size) as $size)
                <option value="{{ trim($size) }}">{{ trim($size) }}</option>
            @endforeach
        </select>
    </div>
@endif
													<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')
<style>
	 .pagination{
        display:inline-flex;
    }
	.filter_button{
        /* height:20px; */
        text-align: center;
        background:#F7941D;
        padding:8px 16px;
        margin-top:10px;
        color: white;
    }
</style>
@endpush
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

    {{-- <script>
        $('.cart').click(function(){
            var quantity=1;
            var pro_id=$(this).data('id');
            $.ajax({
                url:"{{route('add-to-cart')}}",
                type:"POST",
                data:{
                    _token:"{{csrf_token()}}",
                    quantity:quantity,
                    pro_id:pro_id
                },
                success:function(response){
                    console.log(response);
					if(typeof(response)!='object'){
						response=$.parseJSON(response);
					}
					if(response.status){
						swal('success',response.msg,'success').then(function(){
							document.location.href=document.location.href;
						});
					}
					else{
                        swal('error',response.msg,'error').then(function(){
							// document.location.href=document.location.href;
						}); 
                    }
                }
            })
        });
	</script> --}}
	
        <!--$(document).ready(function(){-->
        <!--/*----------------------------------------------------*/-->
        <!--/*  Jquery Ui slider js-->
        <!--/*----------------------------------------------------*/-->
        <!--if ($("#slider-range").length > 0) {-->
        <!--    const max_value = parseInt( $("#slider-range").data('max') ) || 500;-->
        <!--    const min_value = parseInt($("#slider-range").data('min')) || 0;-->
        <!--    const currency = $("#slider-range").data('currency') || '';-->
        <!--    let price_range = min_value+'-'+max_value;-->
        <!--    if($("#price_range").length > 0 && $("#price_range").val()){-->
        <!--        price_range = $("#price_range").val().trim();-->
        <!--    }-->
            
        <!--    let price = price_range.split('-');-->
        <!--    $("#slider-range").slider({-->
        <!--        range: true,-->
        <!--        min: min_value,-->
        <!--        max: max_value,-->
        <!--        values: price,-->
        <!--        slide: function (event, ui) {-->
        <!--            $("#amount").val(currency + ui.values[0] + " -  "+currency+ ui.values[1]);-->
        <!--            $("#price_range").val(ui.values[0] + "-" + ui.values[1]);-->
        <!--        }-->
        <!--    });-->
        <!--    }-->
        <!--if ($("#amount").length > 0) {-->
        <!--    const m_currency = $("#slider-range").data('currency') || '';-->
        <!--    $("#amount").val(m_currency + $("#slider-range").slider("values", 0) +-->
        <!--        "  -  "+m_currency + $("#slider-range").slider("values", 1));-->
        <!--    }-->
        <!--})-->
        

<!--</script>-->


<script>
function toggleMobileFilter(id) {
    const box = document.getElementById(id);
    box.classList.toggle('d-none');
}
</script>
<style>@media (max-width: 768px) {
    .single-widget {
        margin-bottom: 20px;
    }
}
</style>

@endpush