@extends('front/app/layout')
@section('content')
    <!-- //wrapper -->
    <div class="wrapper" id="wrapper">
        <div class="product_row" style="background-image:url('{{ asset('assets/images/product_detiles.png') }}');">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-12 col-sm-12 col-12">
                        <h2 class="pro_duct_title">Products</h2>
                        <div id="checkout_orders">

                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12 col-sm-12 col-12">
                        @if (Auth::user())
                            <div class="checkout_box">
                                <div class="order_summay">
                                    <div class="balance_grey border-0">
                                        <div class="item">
                                            <h5>Current Balance :</h5>
                                            <span><img src="{{ asset('assets/images/coin.png') }}">
                                                {{ Auth::user()->total_points }}</span>
                                        </div>
                                        <div class="item">
                                            <h5>Total Price :</h5>
                                            <span><img class="me-2" src="{{ asset('assets/images/coin.png') }}"><span
                                                    id="checkout_total_prize_final_2"></span></span>
                                        </div>
                                        <div class="item last_row">
                                            <h2>Remaining Balance</h2>
                                            <span><img class="me-2" src="{{ asset('assets/images/coin.png') }}"><span
                                                    id="checkout_remaining_balance"></span></span>
                                        </div>
                                    </div>
                                    <div class="order_btn">
                                        <a href="/" class="btn btn-primary-br"><i
                                                class="fa-solid fa-arrow-left-long me-2"></i>Continue Shopping</a>
                                        @if (Auth::user()->restrict_order == 'no')
                                            <button id="place_order_button" type="button" class="btn btn-primary"
                                                data-bs-toggle="modal" data-bs-target="#place_order">Place
                                                Order</button>
                                        @endif
                                    </div>
                                </div>
                                <div class="text-end pe-3">
                                    <span id="insufficient_message" class="text-danger">*Insufficient Balance</span>
                                </div>
                            </div>
                        @else
                            <div class="login_module pt-4 pb-4">
                                <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>
                                @if (Auth::user())
                                @else
                                    <div class="form-group{{ $errors->has('g-recaptcha-response') ? ' has-error' : '' }}">
                                        <div class="col-md-6">
                                            {!! RecaptchaV3::field('register') !!}
                                            @if ($errors->has('g-recaptcha-response'))
                                                <span class="help-block">
                                                    <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                @endif

                                <div class="mt-4">
                                    <button type="submit" id="validateSubmit" class="btn btn-primary w-100">Login</button>
                                </div>
                                {{ Form::close() }}
                            </div>
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </div>
    </div> <!--  wrapper end  -->
    <!-- //wrapper-end -->

    <!-- Modal -->
    <div class="modal fade" id="place_order" 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">
                <div class="modal-body pb-5">
                    <div class="confirm_order" style="background-image: url({{ asset('assets/images/c_bg.png') }});">
                        <img src="{{ asset('assets/images/c_order.png') }}">
                        <h3>Confirm Order</h3>
                        <p>Are you sure you want to continue?</p>
                        <br>
                    </div>
                    <div class="text-center">
                        <a href="{{ route('checkout') }}" class="btn btn-primary-br">Cancel</a>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" onclick="PlaceOrderConfirm()">Confirm</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" id="thank_you" 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">
                <div class="modal-body pb-5">
                    <div class="confirm_order" style="background-image: url({{ asset('assets/images/thank_bg.png') }});">
                        <img src="{{ asset('assets/images/thank.png') }}">
                        <h3>Thank You!</h3>
                        <br><br>
                    </div>
                    <div class="text-center">
                        <a href="/" class="btn btn-primary">Continue Shopping</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        $(document).ajaxError(function(event, xhr, settings, thrownError) {
            if (xhr.status === 419) {
                $.notify('Your session has expired. Please log in again.', 'error');
                setTimeout(function () {
                    location.reload();
                }, 1000);
            } else if (xhr.status === 500) {
                $.notify("Please try after a few minutes", "error");
            } else {
                $.notify(xhr.responseJSON?.message || "An unexpected error occurred please try again.", "error");
            }
        });

        function PlaceOrderConfirm() {
            @if (Auth::user())
                var orders = JSON.parse(localStorage.getItem('orders')) || [];

                var userTotalPoints = parseFloat("{{ Auth::user()->total_points }}");

                var finalTotalPrice = parseFloat($('#checkout_total_prize_final_2').text());
                // console.log(userTotalPoints, finalTotalPrice, $('#checkout_total_prize_final_1').text());

                if (orders.length > 0 && finalTotalPrice <= userTotalPoints) {
                    $.ajax({
                        url: '{{ route('placeOrder') }}',
                        method: 'POST',
                        data: {
                            '_token': "{{ csrf_token() }}",
                            'orders': orders
                        },
                        success: function(response) {
                            if (response.success == true) {
                                localStorage.removeItem('orders');

                                $('#thank_you').modal('show');
                                $.notify(response.message, "success"); // Success notification
                            } else {
                                $.notify(response.message, "info");
                            }
                        }
                    });
                } else {
                    if (orders.length === 0) {
                        $.notify('Orders are empty. Cannot place order.', 'warn'); // Warn notification
                    }
                    if (finalTotalPrice > userTotalPoints) {
                        $.notify('Total price exceeds user\'s total points. Cannot place order.',
                            'warn'); // Warn notification
                    }
                    location.reload();
                }
            @endif
        }


        function countTotal() {
            var total = 0;

            $('.checkout_total_price').each(function() {
                total += parseFloat($(this).val());
            });

            $('#checkout_total_prize_final_1').html(total);
            $('#checkout_total_prize_final_2').html(total);
            @if (Auth::check())
                var total_points = {{ Auth::user()->total_points }};
            @else
                var total_points = 0;
            @endif
            if ((total_points - total) >= 0) {
                if (total >= 1000) {
                    // console.log("1000 Capping per purchase.");
                    $('#checkout_remaining_balance').html('-');
                    $('#place_order_button').prop('disabled', true);
                    $('#insufficient_message').html('You can only spend up to 1000 points per purchase.');
                } else if ((total_points - total) != total_points) {
                    $('#checkout_remaining_balance').html(total_points - total);
                    $('#place_order_button').prop('disabled', false);
                    $('#insufficient_message').html('');
                } else {
                    $('#checkout_remaining_balance').html('-');
                    $('#place_order_button').prop('disabled', true);
                    $('#insufficient_message').html('*Cart Empty');
                }
            } else {
                $('#checkout_remaining_balance').html('-');
                $('#place_order_button').prop('disabled', true);
                $('#insufficient_message').html('*Insufficient Balance');
            }
        }

        function deleteProduct(productId, sizeId, index) {
            // Get the current orders from local storage
            var orders = JSON.parse(localStorage.getItem('orders')) || [];

            // Filter out the product to be deleted
            orders = orders.filter(function(order) {
                return !(order.product_id == productId && order.product_size == sizeId);
            });

            // // Update the local storage with the new orders array
            localStorage.setItem('orders', JSON.stringify(orders));

            var numOrders = orders.length;
            $('#cart_items').html(numOrders);

            // Remove the corresponding product element from the DOM
            $('#checkout_product_' + index).remove();

            if (numOrders === 0) {
                $('#checkout_orders').html('<p>No products in cart</p>');
            }

            @if (Auth::user())
                $.ajax({
                    url: '{{ route('deleteCart') }}',
                    method: 'POST',
                    data: {
                        '_token': "{{ csrf_token() }}",
                        product_id: productId,
                        size_id: sizeId
                    },
                    success: function(response) {},
                    error: function(xhr, status, error) {}
                });
            @endif
            countTotal();
        }

        $(document).on('click', '.plus', function() {
            var productId = $(this).data('productid');
            var sizeId = $(this).data('sizeid');
            var index = $(this).data('index');

            var currentQuantity = parseInt($('#numberInput_' + index).val());
            if (currentQuantity < 20) {
                var newQuantity = currentQuantity + 1;
                $('#numberInput_' + index).val(newQuantity);

                var productPrice = parseFloat($('#productPrice_' + index).text());
                var newTotalPrice = productPrice * newQuantity;
                $('#totalPrice_' + index).text(newTotalPrice);
                $('#checkout_total_price_' + index).val(newTotalPrice);

                updateLocalStorage(productId, sizeId, newQuantity);

                @if (Auth::user())
                    $.ajax({
                        url: '{{ route('updateCartQuantity') }}',
                        method: 'POST',
                        data: {
                            '_token': "{{ csrf_token() }}",
                            product_id: productId,
                            size_id: sizeId,
                            quantity: newQuantity,
                        },
                        success: function(response) {},
                        error: function(xhr, status, error) {}
                    });
                @endif
                countTotal();
            }
        });

        $(document).on('click', '.minus', function() {
            var productId = $(this).data('productid');
            var sizeId = $(this).data('sizeid');
            var index = $(this).data('index');

            var currentQuantity = parseInt($('#numberInput_' + index).val());
            if (currentQuantity > 1) {
                var newQuantity = currentQuantity - 1;
                $('#numberInput_' + index).val(newQuantity);

                var productPrice = parseFloat($('#productPrice_' + index).text());
                var newTotalPrice = productPrice * newQuantity;
                $('#totalPrice_' + index).text(newTotalPrice);
                $('#checkout_total_price_' + index).val(newTotalPrice);

                // Update local storage
                updateLocalStorage(productId, sizeId, newQuantity);
                @if (Auth::user())
                    $.ajax({
                        url: '{{ route('updateCartQuantity') }}',
                        method: 'POST',
                        data: {
                            '_token': "{{ csrf_token() }}",
                            product_id: productId,
                            size_id: sizeId,
                            quantity: newQuantity,
                        },
                        success: function(response) {},
                        error: function(xhr, status, error) {}
                    });
                @endif
                countTotal();
            }
        });

        function updateLocalStorage(productId, sizeId, newQuantity) {
            var orders = JSON.parse(localStorage.getItem('orders')) || [];
            orders.forEach(function(order) {
                if (order.product_id == productId && order.product_size == sizeId) {
                    order.product_quantity = newQuantity;
                }
            });
            localStorage.setItem('orders', JSON.stringify(orders));
        }


        $(document).ready(function() {
            @if (Auth::user())
            @else
                document.getElementById('card_number').addEventListener('input', function(e) {
                    let value = e.target.value.replace(/\D/g, ''); // Remove non-digit characters
                    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(); // Remove leading/trailing spaces
                });
            @endif



            @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

            var orders = JSON.parse(localStorage.getItem('orders')) || [];
            var promises = []; // Array to store promises from each AJAX request

            orders.forEach(function(order, index) {
                // console.log(order);

                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 || response.product_status == 'Inactive') {
                            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;
                        }



                        var productImage = response.product_image;
                        var productName = response.product_name;
                        var productPrice = response.product_price;
                        var productSizeName = response.product_size_name;
                        var productSKUCode = response.product_sku_code;

                        var checkoutProduct = `
                <div class="checkout_product" id="checkout_product_${index}">
                    <div class="left">
                        <div class="check_img">
                            <img src="${productImage}">
                        </div>
                        <div class="check_count">
                            <div class="que">
                                <span class="minus" data-productid="${order.product_id}" data-sizeid="${order.product_size}" data-index="${index}"><i class="fa-solid fa-minus"></i></span>
                                <input id="numberInput_${index}" type="text" value="${order.product_quantity}" data-productid="${order.product_id}" data-sizeid="${order.product_size}">
                                <span class="plus" data-productid="${order.product_id}" data-sizeid="${order.product_size}" data-index="${index}"><i class="fa-solid fa-plus"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <h4>${productName}</h4>
                        <span><img src="{{ asset('assets/images/coin.png') }}"> <span id="productPrice_${index}">${productPrice}</span></span>
                        <p><b>Size: </b> ${productSizeName}</p>
                        <p><b>SKU Code: </b> ${productSKUCode}</p>
                        <div class="text-end pt-3">
                            <p>Total Price: <span><img src="{{ asset('assets/images/coin.png') }}"> <span id="totalPrice_${index}">${productPrice * order.product_quantity}</span></span></p>
                        </div>
                        <input id="checkout_total_price_${index}" class="checkout_total_price" type="hidden" value="${productPrice * order.product_quantity}">
                    </div>
                    <button class="btn" onclick="deleteProduct(${order.product_id}, ${typeof order.product_size === 'string' ? `'${order.product_size}'` : order.product_size}, ${index})">
    <img src="{{ asset('assets/images/delete.png') }}">
</button>
                </div>
            `;

                        $('#checkout_orders').append(checkoutProduct);
                    },
                    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));
                    }
                });

                promises.push(promise); // Push each promise into the array
            });


            // After all AJAX requests
            Promise.all(promises).then(function() {
                if ($('#checkout_orders').children().length === 0) {
                    $('#checkout_orders').html('<p>No products in cart</p>');
                }
                countTotal();
            });

            // Wait for all AJAX requests to complete before calling countTotal
            $.when.apply($, promises).done(function() {
                countTotal();
            });

            @if (Auth::user())
            @else
                function generateRecaptchaToken() {
                    grecaptcha.execute('your_site_key', {
                            action: 'register'
                        })
                        .then(function(token) {
                            // Use the 'token' value as needed
                            $('input[name="g-recaptcha-response"]').val(token);
                        });
                }
            @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,
                        notOnlySpaces: true,
                        // digits: true,
                        // creditcard: true // Ensure credit card format check
                    },
                    card_date: {
                        required: true,
                        // minlength: 8,
                    },
                    employee_code: {
                        required: true,
                        notOnlySpaces: true,

                        // minlength: 8,
                    },

                },
                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) {
                                if (response.errors && response.errors[
                                        'g-recaptcha-response']) {
                                    generateRecaptchaToken();
                                }
                                var flag = 0;
                                $("#validateSubmit").attr('disabled', false);
                            } else if (response.status == 0) {

                                $("#validateSubmit").attr('disabled', false);
                                $.notify(response.msg, "error");
                                generateRecaptchaToken();

                            } else {
                                $.notify(response.msg, "success");
                                setTimeout(function() {
                                    window.location.reload();
                                }, 2000);
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            if (jqXHR.status == 419 || jqXHR.status == 422) {} else {
                                $("#validateSubmit").attr('disabled', false);
                                $.notify(jqXHR.responseJSON.message, "error");
                                generateRecaptchaToken();

                            }
                        }
                    });
                }
            });

        });
    </script>
@endsection