@extends('frontend.layout.master')
@section('title', $pageTitle)
@section('content')

<style>
    .scroll-div {
        height: 137px;
        overflow: hidden;
        overflow-y: scroll;
    }
    @media screen and (max-width: 400px){
        .row-align{
            align-items: center;
        }
        .nk_shop_button_001 {
            line-height: 22px;
            margin-top: 4px;
        }
        .nk_shop_div_20{
            line-height: 0;
        }
    }
</style>

<div class="nk_shop_div_1">
    <div class="container">
        <div class="nk_shop_div_2">

            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-12 col-12">
                    <div class="nk_shop_div_3 left_side_1 side-div-padding">
                        <!-- <div class="nk_shop_div_11">
                            <p class="nk_shop_p_3">Categories</p>
                            <div class="scroll-div">
                            <div class="nk_shop_div_10">
                                <a href="#block" id="open-close" class="nk_shop_list_1">
                                    <p class="nk_shop_p_4">
                                        Main Cetagory 1
                                    </p>
                                </a>
                                <div id="block" style="display: none;">
                                    <ul class="nk_shop_ul_1">
                                        <li class="nk_shop_li_1">
                                            Sub Cetagory 1
                                        </li>
                                        <li class="nk_shop_li_1">
                                            Sub Cetagory 1
                                        </li>
                                        <li class="nk_shop_li_1">
                                            Sub Cetagory 1
                                        </li>
                                        <li class="nk_shop_li_1">
                                            Sub Cetagory 1
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="nk_shop_div_10">
                                <a href="#block1" id="open-close1" class="nk_shop_list_1">
                                    <p class="nk_shop_p_4">
                                        Main Cetagory 2
                                    </p>
                                </a>
                                <div id="block1" style="display: none;">
                                    <ul class="nk_shop_ul_1">
                                        <li class="nk_shop_li_1">
                                            Sub Cetagory 2
                                        </li>
                                        <li class="nk_shop_li_1">
                                            Sub Cetagory 2
                                        </li>
                                        <li class="nk_shop_li_1">
                                            Sub Cetagory 2
                                        </li>
                                        <li class="nk_shop_li_1">
                                            Sub Cetagory 2
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="nk_shop_div_10">
                                <a href="#block2" id="open-close2" class="nk_shop_list_1">
                                    <p class="nk_shop_p_4">
                                        Main Cetagory 3
                                    </p>
                                </a>
                                <div id="block2" style="display: none;">
                                    <ul class="nk_shop_ul_1">
                                        <li class="nk_shop_li_1">
                                            Sub Cetagory 3
                                        </li>
                                        <li class="nk_shop_li_1">
                                            Sub Cetagory 3
                                        </li>
                                        <li class="nk_shop_li_1">
                                            Sub Cetagory 3
                                        </li>
                                        <li class="nk_shop_li_1">
                                            Sub Cetagory 3
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            </div>
                        </div> -->

                        <form action="{{ route('products') }}" method="GET">
                            <div class="nk_shop_div_11">
                                <p class="nk_shop_p_3">Filter</p>
                                <div class="nk_shop_div_12">
                                    <ul class="nk_shop_ul_2">
                                        @foreach($priceRanges as $key => $range)
                                        <li class="nk_shop_li_2">
                                            <input type="checkbox" name="price_range[]" value="{{ $range }}" id="price{{ $key }}">
                                            <label class="shop-lable" for="price{{ $key }}">{{ $range }}</label><br>
                                        </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>

                            <div class="nk_shop_div_11">
                                <div class="nk_shop_div_13">
                                    <button type="submit" class="nk_shop_button_2">Apply</button>
                                </div>
                            </div>
                        </form>


                    </div>
                    <div class="mobile_sidebar">
                        <div id="mySidenav1" class="sidenav1">
                            <a href="javascript:void(0)" class="closebtn closebtn-1" onclick="closeNav1()">&times;</a>
                            <div class="sidebar_bar">
                                <!-- <div class="nk_shop_div_11">
                                    <p class="nk_shop_p_3">Categories</p>
                                    <div class="nk_shop_div_10">
                                        <a href="#block" id="open-close" class="nk_shop_list_1">
                                            <p class="nk_shop_p_4">
                                                Main Cetagory 1
                                            </p>
                                        </a>
                                        <div id="block" style="display: none;">
                                            <ul class="nk_shop_ul_1">
                                                <li class="nk_shop_li_1">
                                                    Sub Cetagory 1
                                                </li>
                                                <li class="nk_shop_li_1">
                                                    Sub Cetagory 1
                                                </li>
                                                <li class="nk_shop_li_1">
                                                    Sub Cetagory 1
                                                </li>
                                                <li class="nk_shop_li_1">
                                                    Sub Cetagory 1
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="nk_shop_div_10">
                                        <a href="#block1" id="open-close1" class="nk_shop_list_1">
                                            <p class="nk_shop_p_4">
                                                Main Cetagory 2
                                            </p>
                                        </a>
                                        <div id="block1" style="display: none;">
                                            <ul class="nk_shop_ul_1">
                                                <li class="nk_shop_li_1">
                                                    Sub Cetagory 2
                                                </li>
                                                <li class="nk_shop_li_1">
                                                    Sub Cetagory 2
                                                </li>
                                                <li class="nk_shop_li_1">
                                                    Sub Cetagory 2
                                                </li>
                                                <li class="nk_shop_li_1">
                                                    Sub Cetagory 2
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="nk_shop_div_10">
                                        <a href="#block2" id="open-close2" class="nk_shop_list_1">
                                            <p class="nk_shop_p_4">
                                                Main Cetagory 3
                                            </p>
                                        </a>
                                        <div id="block2" style="display: none;">
                                            <ul class="nk_shop_ul_1">
                                                <li class="nk_shop_li_1">
                                                    Sub Cetagory 3
                                                </li>
                                                <li class="nk_shop_li_1">
                                                    Sub Cetagory 3
                                                </li>
                                                <li class="nk_shop_li_1">
                                                    Sub Cetagory 3
                                                </li>
                                                <li class="nk_shop_li_1">
                                                    Sub Cetagory 3
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div> -->

                                <form action="{{ route('products') }}" method="GET">
                                    <div class="nk_shop_div_11">
                                        <p class="nk_shop_p_3">Filter</p>
                                        <div class="nk_shop_div_12">
                                            <ul class="nk_shop_ul_2">
                                                @foreach($priceRanges as $key => $range)
                                                <li class="nk_shop_li_2">
                                                    <input type="checkbox" name="price_range[]" value="{{ $range }}" id="price{{ $key }}">
                                                    <label for="price{{ $key }}">{{ $range }}</label><br>
                                                </li>
                                                @endforeach

                                            </ul>
                                        </div>
                                    </div>

                                    <div class="nk_shop_div_13">
                                        <button type="submit" class="nk_shop_button_2">Apply</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <span style="font-size:30px;cursor:pointer" onclick="openNav1()">&#9776;</span>
                    </div>
                </div>

                <div class="col-lg-9 col-md-9 col-sm-12 col-12" style="padding: 0px;">
                    <div class="nk_shop_div_3">
                        <div class="nk_shop_div_6">
                            <div class="row">
                                @foreach($allprtd as $all)
                                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 col-6" style="padding: 0px;">
                                    <div class="nk_shop_div_5">
                                        <a href="{{ route('product_details', ['slug' => $all->product_slug]) }}">
                                            <img src="{{ url('/') }}/{{$all->product_image}}" class="nk_shop_img_1">
                                        </a>
                                        <div class="nk_shop_div_7">
                                            <p class="nk_shop_p_1">{{$all->product_name}}</p>
                                            <div class="nk_shop_div_8">
                                                <div class="row row-align">
                                                    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 col-12 mobile-price-padding" style="padding: 0px 5px;">
                                                        <div class="nk_shop_div_9">
                                                            <p class="nk_shop_p_2">
                                                                Rs. {{$all->product_saleprice}}
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 col-6" style="padding: 0px 5px;">
                                                        <div class="nk_shop_div_9">
                                                            <form class="add-to-cart-form" action="{{ route('add.to.cart', $all->id) }}" method="POST">
                                                                @csrf
                                                                <button class="nk_shop_button_1">Add to Cart</button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-6" style="padding: 0px 5px;">
                                                        <div class="nk_shop_div_20">
                                                            <button class="nk_shop_button_001 AddToWhishlist" data-id="{{ $all->id }}">
                                                                <i class="fa-regular fa-heart"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                @endforeach
                            </div>

                            

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        $('.AddToWhishlist').click(function(e) {
            e.preventDefault();

            var product_id = $(this).data('id');  // Fetch product ID from button
            var _token = "{{ csrf_token() }}";   // Fetch CSRF Token

            if (!product_id) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Product ID is missing!',
                });
                return;
            }

            $.ajax({
                url: "{{ route('add.to.wishlist') }}",
                method: "POST",
                data: {
                    product_id: product_id,
                    _token: _token
                },
                success: function(response) {
                    if (response.status === 'success') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Added!',
                            text: 'Product added to wishlist successfully!',
                            showConfirmButton: false,
                            timer: 2000
                        });
                    } else if (response.status === 'exists') {
                        Swal.fire({
                            icon: 'info',
                            title: 'Already Added',
                            text: 'This product is already in your wishlist!',
                        });
                    } else if (response.status === 'unauthenticated') {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Login Required',
                            text: 'Please log in to add items to your wishlist.',
                            confirmButtonText: 'Login Now'
                        }).then((result) => {
                            // Automatically redirect after pop-up
                            if (result.isConfirmed) {
                                window.location.href = "{{ route('login_user') }}";
                            }
                        });

                        // Add automatic redirection after 2 seconds
                        setTimeout(() => {
                            window.location.href = "{{ route('login_user') }}";
                        }, 2000);  // 2-second delay
                    }
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                    Swal.fire({
                        icon: 'error',
                        title: 'Something went wrong!',
                        text: 'Please Login First.',
                    });
                    window.location.href = "{{ route('login_user') }}";
                }
            });
        });
    });
</script>

<script>
    $('#open-close').click(function(event) {
        event.preventDefault();
        $('#block').slideToggle(400, function() {
            if ($('#block').is(':visible')) {
                // $('#open-close').html('Скрыть');
            } else {
                $('#open-close');
            }
        })
    })
</script>
<script>
    $('#open-close1').click(function(event) {
        event.preventDefault();
        $('#block1').slideToggle(400, function() {
            if ($('#block1').is(':visible')) {
                // $('#open-close').html('Скрыть');
            } else {
                $('#open-close');
            }
        })
    })
</script>
<script>
    $('#open-close2').click(function(event) {
        event.preventDefault();
        $('#block2').slideToggle(400, function() {
            if ($('#block2').is(':visible')) {
                // $('#open-close').html('Скрыть');
            } else {
                $('#open-close');
            }
        })
    })
</script>

<script>
    function openNav() {
        document.getElementById("mySidenav").style.width = "100%";
    }

    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
    }
</script>


<script>
	$(document).ready(function () {
    $(document).on("submit", ".add-to-cart-form", function (e) {
        e.preventDefault(); // Prevent default form submission

        var form = $(this);

        $.ajax({
            url: form.attr("action"),
            method: "POST",
            data: form.serialize(),
            dataType: "json",
            success: function (response) {
                if (response.status === "error") {
                    Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: response.message
                    });
                } else if (response.status === "success") {
                    Swal.fire({
                        icon: "success",
                        title: "Success!",
                        text: "Product added to cart!",
                        showConfirmButton: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            location.reload(); // Reload the page after clicking OK
                        }
                    });

                    // Update cart count dynamically
                    $("#cart-count").text(response.cart_count);
                }
            },
          error: function (xhr) {
    Swal.fire({
        icon: "error",
        title: "Error",
        text: "Something went wrong, Please log in first to continue.",
        showConfirmButton: false,      // Hides the "OK" button
        timer: 2000                    // Automatically closes after 2 seconds
    });

    // Redirect to login page after 2 seconds
    setTimeout(() => {
        window.location.href = "{{ route('login_user') }}";   // Replace with your login route
    }, 200);  // Match the timer duration

    console.log(xhr.responseText);
}
        });
    });
});
</script>


@endsection