@extends('front/app/layout')
@section('content')
    <!-- //wrapper -->
    <div class="wrapper" id="wrapper">
        <div class="rs_hero_banner">
            @foreach ($banners as $banner)
                <div class="banner_hero">
                    <img src="{{ asset('storage/banner_image/' . $banner->banner_image) }}" alt="{{ $banner->banner_name }}">
                </div>
            @endforeach
        </div>

        <div class="product_row" style="background-image:url('{{ asset('assets/images/product_bg.png') }}');">
            <div class="container">
                <div class="row mb-3 g-2">
                    <div class="col-lg-auto col-sm-auto col-md-auto col-12 me-auto ">
                        <h2 class="pro_duct_title">Products</h2>
                    </div>
                    <div class="col-lg-2 col-sm-2 col-md-6 col-6 ">
                        {{-- js-example-basic-single --}}
                        <select id="categoryFilter" class="form-control form-select">
                            <option value="">Categories</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}"
                                    {{ request('category') == $category->id ? 'selected' : '' }}>
                                    {{ $category->category_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2 col-sm-2 col-md-6 col-6 ">
                        <select id="sortSelect" class="form-control form-select">
                            <option value="">Sort by</option>
                            <option value="low-to-high">Price: Low to High</option>
                            <option value="high-to-low">Price: High to Low</option>
                            <option value="a-to-z">Name: A to Z</option>
                            <option value="z-to-a">Name: Z to A</option>
                        </select>
                    </div>
                    <div class="col-lg-auto col-sm-auto col-md-auto col-auto my-auto">
                        <div class="list_view">
                            <a href="" class="grid_new">
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
                                    <g id="Group_64358" data-name="Group 64358" transform="translate(-1 -1)">
                                        <rect id="Rectangle_16579" data-name="Rectangle 16579" width="10" height="10"
                                            rx="3" transform="translate(1 1)" />
                                        <rect id="Rectangle_16580" data-name="Rectangle 16580" width="10" height="10"
                                            rx="3" transform="translate(13 1)" />
                                        <rect id="Rectangle_16581" data-name="Rectangle 16581" width="10" height="10"
                                            rx="3" transform="translate(1 13)" />
                                        <rect id="Rectangle_16582" data-name="Rectangle 16582" width="10" height="10"
                                            rx="3" transform="translate(13 13)" />
                                    </g>
                                </svg>
                            </a>
                            <a href="" class="list_new">
                                <svg xmlns="http://www.w3.org/2000/svg" width="29.374" height="22"
                                    viewBox="0 0 29.374 22">
                                    <g id="Group_64359" data-name="Group 64359" transform="translate(0 -64.267)">
                                        <path id="Path_167974" data-name="Path 167974"
                                            d="M26.671,64.267H10.077a2.7,2.7,0,0,0,0,5.408H26.671a2.7,2.7,0,0,0,0-5.408Zm-23.967,0a2.7,2.7,0,1,0,2.7,2.7A2.707,2.707,0,0,0,2.7,64.267Zm0,8.3a2.7,2.7,0,1,0,2.7,2.7A2.707,2.707,0,0,0,2.7,72.563Zm0,8.3a2.7,2.7,0,1,0,2.7,2.7A2.707,2.707,0,0,0,2.7,80.859Zm23.967-8.3H10.077a2.7,2.7,0,0,0,0,5.408H26.671a2.7,2.7,0,0,0,0-5.408Zm0,8.3H10.077a2.7,2.7,0,0,0,0,5.408H26.671a2.7,2.7,0,0,0,0-5.408Z" />
                                    </g>
                                </svg>
                            </a>
                        </div>
                    </div>
                    <div id="productContainer">
                        <div class="main_box">
                            @if ($products->isEmpty())
                                <div class="no-products"
                                    style="
        width:100%;
        text-align:center;
        padding:50px 0;
        font-size:14px;
    ">
                                    No products available
                                </div>
                            @else
                                @foreach ($products as $product)
                                    <div class="item">
                                        <div class="wishlist_icon" data-product-id="{{ $product->id }}">
                                            <i class="{{ $product->wishlist_status ? 'fa-solid' : 'fa-regular' }} fa-heart heart-icon"
                                                style="color: {{ $product->wishlist_status ? '#D90B1D' : '#fff' }};">
                                            </i>
                                        </div>
                                        <a href="{{ route('product', ['product_id' => Crypt::encrypt($product->id)]) }}">
                                            <div class="pro_box">

                                                <div class="pro_img">
                                                    <img
                                                        src="{{ asset('storage/product-images/' . $product->product_image) }}">
                                                </div>
                                                <div class="pro_content">
                                                    <h4>{{ $product->product_name }}</h4>
                                                    <p>{{ \Illuminate\Support\Str::limit($product->short_description, 25, '...') }}
                                                    </p>
                                                    <span><img
                                                            src="{{ asset('assets/images/coin.png') }}">{{ $product->product_prize }}</span>
                                                    <a href="{{ route('product', ['product_id' => Crypt::encrypt($product->id)]) }}"
                                                        class="btn btn-primary-br">View Details</a>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div> <!--  wrapper end  -->
    <!-- //wrapper-end -->

    <div class="modal fade" id="login" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content pb-5">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel"></h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-solid fa-xmark"></i></button>
                </div>
                <div class="modal-body">
                    <div class="login_module">
                        <h2>Login</h2>
                        <p>Thank You For Getting Back, Please Sign In To Your Account By Filling These Form</p>
                        {{ Form::open(['url' => '#', 'name' => 'validateForm', 'id' => 'validateForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}
                        <div class="mb-3">
                            <label for="" class="form-label">Card Number</label>
                            <input type="text" class="form-control" id="card_number" name="card_number"
                                placeholder="Enter Card Number" maxlength="19">

                        </div>
                        <div class="mb-3">
                            <label for="" class="form-label">Expiration Date</label>
                            <input type="month" class="form-control" id="card_date" name="card_date" placeholder="">
                        </div>
                        <div class="mb-3">
                            <label for="" class="form-label">Employee Code</label>
                            <input type="text" class="form-control" id="employee_code" name="employee_code"
                                placeholder="Enter Employee Code">
                        </div>
                        <div class="mt-4">
                            <button type="submit" id="validateSubmit" class="btn btn-primary w-100">Login</button>
                        </div>
                        {{ Form::close() }}
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        $(document).on('click', '.wishlist_icon', function(e) {
            e.preventDefault();

            @if (Auth::check())
                const icon = $(this).find('.heart-icon');
                const productId = $(this).data('product-id');

                $.ajax({
                    url: '{{ route('addWishlist') }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        product_id: productId
                    },
                    success: function(response) {
                        if (response.status === 'added') {
                            icon.removeClass('fa-regular').addClass('fa-solid').css('color', '#D90B1D');
                        } else {
                            icon.removeClass('fa-solid').addClass('fa-regular').css('color', '#fff');
                        }

                        $('#wishlistCount').text(response.wishlistCount);
                    }
                });
            @else
                $('#login').modal('show');
            @endif
        });
    </script>

    <script>
        function fetchProducts() {
            const category = $('#categoryFilter').val();
            const sort = $('#sortSelect').val();
            const currentView = $('.main_box').hasClass('list') ? 'list' : 'grid';

            $.ajax({
                url: '{{ route('ajaxFilter') }}',
                method: 'GET',
                data: {
                    category: category,
                    sort: sort
                },
                beforeSend: function() {
                    $('#productContainer').css({
                        opacity: 0.3
                    }); // only visual fade
                },
                success: function(response) {
                    $('#productContainer').html(response.html).css({
                        opacity: 0.3
                    });

                    $('.main_box').removeClass('list grid').addClass(currentView);

                    $('#productContainer').animate({
                        opacity: 1
                    }, 300);
                },
                error: function() {
                    $('#productContainer').html('<p>Something went wrong.</p>').css({
                        opacity: 1
                    });
                }
            });
        }


        $('#categoryFilter, #sortSelect').on('change', function(e) {
            e.preventDefault();
            fetchProducts();
        });
    </script>


    <script>
        document.getElementById('card_number').addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            let formattedValue = '';
            for (let i = 0; i < value.length; i++) {
                if (i > 0 && i % 4 === 0) {
                    formattedValue += ' ';
                }
                formattedValue += value[i];
            }
            e.target.value = formattedValue.trim();
        });
    </script>
    <script>
        $(document).ready(function() {

            var orders = JSON.parse(localStorage.getItem('orders')) || [];
            orders.forEach(function(order, index) {
                var promise = $.ajax({
                    url: '/get-product-details',
                    method: 'POST',
                    data: {
                        product_id: order.product_id,
                        product_size: order.product_size,
                        '_token': "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.error) {
                            orders = orders.filter(function(o) {
                                return !(o.product_id == order.product_id && o
                                    .product_size == order.product_size);
                            });
                            localStorage.setItem('orders', JSON.stringify(orders));
                            return;
                        }
                    },
                    error: function(xhr, status, error) {
                        orders = orders.filter(function(o) {
                            return !(o.product_id == order.product_id && o
                                .product_size == order.product_size);
                        });
                        localStorage.setItem('orders', JSON.stringify(orders));
                    }
                });
            });


            @if (Auth::user())
                var carts = @json($carts);
                var orders = carts.map(function(cart) {
                    return {
                        product_id: cart.product_id,
                        product_quantity: cart.quantity,
                        product_size: cart.size
                    };
                });
                localStorage.setItem('orders', JSON.stringify(orders));

                var totalOrders = orders.length;
                $('#cart_items').html(totalOrders);
            @endif

            $.validator.addMethod("notOnlySpaces", function(value, element) {
                return $.trim(value).length > 0;
            }, "This field cannot be just spaces.");

            $('#validateForm').validate({
                ignore: ".ignore",
                rules: {
                    card_number: {
                        required: true,
                        minlength: 19,
                        maxlength: 19,
                        // digits: true,
                        // creditcard: true // Ensure credit card format check
                    },
                    card_date: {
                        required: true,
                    },
                    employee_code: {
                        required: true,
                        notOnlySpaces: true,

                    }
                },
                messages: {
                    card_number: {
                        required: "Card number is required.",
                        // creditcard: "Please enter a valid credit card number.",
                        minlength: "Card number should be 16 digits.",
                        maxlength: "Card number should be 16 digits."
                    },
                    card_date: {
                        required: "Card date is required."
                    },
                    employee_code: {
                        required: "Employee code is required."
                    }
                },
                submitHandler: function(form) {
                    $("#validateSubmit").attr('disabled', true);
                    var orders = JSON.parse(localStorage.getItem('orders')) || [];
                    var formData = new FormData($("#validateForm")[0]);
                    formData.append('orders', JSON.stringify(orders));

                    $.ajax({
                        url: "{{ route('authenticate') }}",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(response) {
                            if (response.status == 2) {
                                var flag = 0;
                                $("#validateSubmit").attr('disabled', false);
                            } else if (response.status == 0) {
                                $("#validateSubmit").attr('disabled', false);
                                $.notify(response.msg, "error");
                            } else {
                                $.notify(response.msg, "success");
                                setTimeout(function() {
                                    window.location.reload();
                                }, 2000);
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            if (jqXHR.status == 419 || jqXHR.status == 422) {
                                // Handle specific errors if needed
                            } else {
                                $("#validateSubmit").attr('disabled', false);
                                $.notify(jqXHR.responseJSON.message, "error");
                            }
                        }
                    });
                }
            });
        });
    </script>
@endsection