@extends('front::layouts.master')

@section('title','E-SHOP || PRODUCT PAGE')

@section('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('front.index')}}">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('front.product-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">
                            <!-- Single Widget -->
                            <div class="single-widget category">
    <h3 class="title">Categories</h3>

    @php
        // current slug dynamically detect karo
        $currentSlug = request()->route('slug') ?? request()->segment(3);
    @endphp

    <ul class="categor-list">
        @foreach ($categories as $category)

            @php
                $isActive = $currentSlug == $category->slug;

                // check if any child is active (important UX)
                $isChildActive = collect($category->childrenCategories)
                    ->pluck('slug')
                    ->contains($currentSlug);
            @endphp

            <li>
                <a href="{{ route('front.product-cat', $category->slug) }}"
                   class="{{ ($isActive || $isChildActive) ? 'active-category' : '' }}">
                    {{ $category->title }}
                </a>

                @if(count($category->childrenCategories) > 0)
                    <ul>
                        @foreach ($category->childrenCategories as $childCategory)
                            @include('front::layouts.child_category', [
                                'child_category' => $childCategory,
                                'currentSlug' => $currentSlug
                            ])
                        @endforeach
                    </ul>
                @endif
            </li>

        @endforeach
    </ul>
</div>
                            <!--/ End Single Widget -->
                            <!-- Shop By Price -->
                            {{-- <div class="single-widget range">
                                <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>
                                        <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>
                                        <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">
                                <h3 class="title">Recent post</h3>
                                @foreach($products as $product)
                                    <!-- Single Post -->
                                    <div class="single-post first">
                                        <div class="image">
                                            <img src="{{ $product->imageUrl }}" alt="{{$product->imageUrl}}">
                                        </div>
                                        <div class="content">
                                            <h5>
                                                <a href="{{route('front.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">
                                                    ${{number_format($product->price,2)}}</del>
                                                ${{number_format($org,2)}}  </p>
                                        </div>
                                    </div>
                                    <!-- End Single Post -->
                                @endforeach
                            </div> --}}
                            <!--/ End Single Widget -->
                            <!-- Single Widget -->
							{{-- <div class="single-widget category">
                                <h3 class="title">Brands</h3>
                                <ul class="category-list">
                                    @foreach($brands as $brand)
                                        <li>
                                            <a href="{{route('front.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('front.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>
                                </div>
                                <!--/ End Shop Top -->
                            </div>
                        </div>
                        <div class="row">
                            @if($products->count() > 0)
                                @foreach($products as $product)
                                    {{-- {{$product}} --}}
                                    <!-- Start Single List -->
                                    <div class="col-lg-12 col-md-6 col-12 product-list-item" data-product-id="{{ $product->id }}">
                                        <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('front.product-detail',$product->slug)}}">
                                                            <img class="default-img" src="{{$product->imageUrl}}" alt="{{$product->title}}">
                                                       <img class="hover-img" src="{{$product->imageUrl}}" alt="{{$product->title}}">
                                                        </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 title="Add to cart"
                                                                   href="{{route('add-to-cart',$product->slug)}}">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>${{number_format($after_discount,2)}}</span>
                                                            <del>${{number_format($product->price,2)}}</del>
                                                        </div>
                                                        <h3 class="title"><a
                                                                    href="{{route('front.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="{{route('front.product-detail',$product->slug)}}"
                                                       class="btn cart">Read more
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- End Single List -->
                                @endforeach
                                <div class="row">
                                    <div class="col-md-12 justify-content-center d-flex">
                                        {{$products->appends($_GET)->links('vendor.pagination.bootstrap-4')}}
                                    </div>
                                </div>
                            @else
                                <h4 class="text-warning" style="margin:100px auto;">There are no products.</h4>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--/ End Product Style 1  -->
    </form>
    <!-- Modal -->
    @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">
                                        <div class="single-slider">
                                   <img src="{{$product->imageUrl}}" alt="{{$product->title}}">
                                    </div>
                                    </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">
    @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
    
    @if($rate_count > 0)
        <div class="quickview-ratting">
            @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 {{ Str::plural('review', $rate_count) }})</a>
    @else
        <div class="quickview-ratting">
            <span class="text-muted">No reviews yet</span>
        </div>
    @endif
</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">
                                                ${{number_format($product->price,2)}}</del>
                                        </small> ${{number_format($after_discount,2)}}  </h3>
                                    <div class="quickview-peragraph">
                                        <p>{!! html_entity_decode($product->summary) !!}</p>
                                    </div>
									{{--   @if($product->size)
                                        <div class="size">
                                            <h4>Size</h4>
                                            <ul>
                                                @php
                                                    $sizes=explode(',',$product->size);
                                                @endphp
                                                @foreach($sizes as $size)
                                                    <li><a href="#" class="one">{{$size}}</a></li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif --}}
                                    <form action="{{route('single-add-to-cart')}}" method="POST">
                                        @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="quantity[1]">
                                                        <i class="ti-minus"></i>
                                                    </button>
                                                </div>
                                                <input type="hidden" name="slug" value="{{$product->slug}}">
                                                <input type="text" name="quantity[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="quantity[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
    <!-- 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;
        }
        /* Product Card */
.single-product {
    position: relative;
    overflow: hidden;
}

/* Button Head - Always Visible */
.single-product .button-head {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0; /* Always visible */
    opacity: 1;
    visibility: visible;
    transition: none; /* remove animation */
}

/* Remove Hover Effect Completely */
.single-product:hover .button-head {
    bottom: 0;
}

/* Optional: Remove any transform/animation if exists */
.single-product .button-head,
.single-product:hover .button-head {
    transform: none !important;
    background-color: #f7941d;
}
/* Button Head Background */
.button-head {
    background-color: #f7941d;
}

/* All text inside button-head */
.button-head,
.button-head a,
.button-head span,
.button-head p {
    color: #fff !important;
}

/* Icons */
.button-head i {
    color: #fff !important;
}
.product-action-2 {
    padding-left: 10px;
}
.product-action {
    padding-right: 10px;
}
/* Hover state (optional - same hi rahe) */
.button-head a:hover,
.button-head a:hover i,
.button-head a:hover span {
    color: #fff !important;
}

/* Add to cart button (agar alag style ho) */
.product-action-2 a {
    color: #fff !important;
    border-color: #fff !important; /* optional */
}

/* If previously hidden using negative bottom */
.button-head {
    bottom: 0 !important;
}
.single-product .product-img .product-action a:hover span {
    margin-top: -20px !important;
}
/* Optional styling for better UI */
.button-head {
    background: #fff;
    padding: 10px;
    text-align: center;
}
.active-category {
    font-weight: 600;
    color: #f7941d !important;
    background: #fff3e0;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}
    </style>
@endpush
@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

    <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>
        document.addEventListener('DOMContentLoaded', function() {
            const productIds = Array.from(document.querySelectorAll('.product-list-item'))
                .map(el => el.dataset.productId);
            if (productIds.length > 0) {
                fetch('/api/tracking/product-impressions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        product_ids: productIds
                    })
                });
            }
        });
        document.querySelectorAll('.product-list-item a').forEach(function(link) {
            link.addEventListener('click', function(e) {
                const productId = this.closest('.product-list-item').dataset.productId;
                fetch('/api/tracking/product-click', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        product_id: productId
                    })
                });
            });
        });
    </script>
    <script>
    $('.modal').on('shown.bs.modal', function () {
        let slider = $(this).find('.quickview-slider-active');

        if (slider.length && slider.hasClass('owl-loaded')) {
            slider.trigger('refresh.owl.carousel');
        }
    });
</script>
@endpush