@extends('layouts.main')
@section('title', 'Cart Details')
@section('main')
    <div class="container mt-4">
        <h2 class="mb-4">Cart Details</h2>

        @if (count($cart) > 0)
            <div class="row">
                <div class="col-md-8">
                    <div class="row">
                        @foreach ($cart as $item)
                            <div class="col-md-12 mb-4">
                                <div class="card" data-product-id="{{ $item['id'] }}" data-variable-id="{{ $item['variable_id'] }}">
                                    <div class="row no-gutters">
                                        <div class="col-md-4">
                                            <img src="{{ asset('storage/products/' . $item['variable_details']['feature_image']) }}" class="card-img" alt="{{ $item['name'] }}" style="object-fit: cover; height: 100%; width: 100%;">
                                        </div>
                                        <div class="col-md-8">
                                            <div class="card-body d-flex flex-column">
                                                <h5 class="card-title">{{ $item['name'] }}</h5>
                                                <p class="card-text">Brand: {{ $item['brand'] }}</p>
                                                <p class="card-text">Price: ${{ $item['variable_details']['listed_price'] }}</p>

                                                @foreach ($item['attribute_keys'] as $attributeKey)
                                                    <p class="card-text">
                                                        {{ str_replace('_',' ', ucfirst($attributeKey))  }}: {{ $item['variable_details'][$attributeKey] ?? 'N/A' }}
                                                    </p>
                                                @endforeach

                                                <p class="card-text">Quantity:
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="input-group me-3">
                                                        <div class="input-group me-3">
                                                            <button class="btn btn-outline-secondary btn-sm" type="button" data-action="minus" data-product-id="{{ $item['id'] }}" data-variable-id="{{ $item['variable_id'] }}">-</button>
                                                            <input type="number" class="form-control text-center quantity-input" data-product-id="{{ $item['id'] }}" data-variable-id="{{ $item['variable_id'] }}" value="{{ $item['quantity'] }}" min="1"
{{--                                                                   @if($item['variable_details']['quantity_available'] > 0) max="{{ $item['variable_details']['quantity_available'] }}" @endif--}}
                                                            >
                                                            <button class="btn btn-outline-secondary btn-sm" type="button" data-action="plus" data-product-id="{{ $item['id'] }}" data-variable-id="{{ $item['variable_id'] }}">+</button>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <button class="btn btn-danger remove-product" data-product-id="{{ $item['id'] }}" data-variable-id="{{ $item['variable_id'] }}">Remove</button>
                                                    </div>
                                                </div>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Order Summary Section -->
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Order Summary</h5>
                            <ul class="list-group mb-3" id="order-summary-section">
                            </ul>
                            <form id="cart-form" name='cart-form'>
{{--                                <div class="mb-3">--}}
{{--                                    <label for="email" class="form-label">Email</label>--}}
{{--                                    <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" value="{{isset($userDetails['email']) ? $userDetails['email'] : ''}}" >--}}
{{--                                </div>--}}
                                <div class="mb-3">
                                    <label for="mobile" class="form-label">Mobile Number</label>
                                    <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Enter your mobile number" value="{{isset($userDetails['mobile']) ? $userDetails['mobile'] : ''}}">
                                </div>
                                <button type="submit" class="btn btn-primary checkout" {{isset($userDetails['mobile']) ? '' : 'disabled'}}>Checkout</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <p>Your cart is empty.</p>
        @endif
    </div>
@endsection

@section('scripts')
    <script>
        {{--var Email = "{{isset($userDetails['email'])?$userDetails['email'] :''}}";--}}
        var Mobile = "{{isset($userDetails['mobile'])?$userDetails['mobile'] :''}}";
        var isVerified = "{{isset($userDetails['verified']) && $userDetails['verified'] == true }}";

        $(document).ready(function () {
            updateOrderSummary();

            function updateOrderSummary() {
                $.ajax({
                    url: "{{ route('cart.getSummary') }}",
                    method: 'GET',
                    success: function (response) {
                        if (response.success) {
                            let summaryHtml = '';
                            let total = 0;

                            response.items.forEach(function (item) {
                                summaryHtml += `
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        ${item.name}
                                        <span>$${item.total}</span>
                                    </li>
                                `;
                                total += parseFloat(item.total);
                            });

                            summaryHtml += `
<li class="list-group-item d-flex justify-content-between align-items-center">
                                    Shipping Price
                                    <span>$0</span>
                                </li>
<li class="list-group-item d-flex justify-content-between align-items-center">
                                    <strong>Total</strong>
                                    <strong>$${response.total}</strong>
                                </li>
                            `;

                            $('#order-summary-section').html(summaryHtml);
                            $('#grand-total').text(response.total);
                        } else {
                            toastr.error('Failed to fetch order summary.');
                        }
                    },
                    error: function () {
                        toastr.error('Failed to fetch order summary.');
                    }
                });
            }

            function updateCartQuantity(productId, variableId, quantity) {
                $.ajax({
                    url: "{{ route('cart.updateQuantity') }}",
                    method: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        product_id: productId,
                        variable_id: variableId,
                        quantity: quantity
                    },
                    success: function (response) {
                        if (response.success) {
                            updateOrderSummary();
                            toastr.success(response.message);
                        } else {
                            toastr.error('Failed to update quantity.');
                        }
                    },
                    error: function () {
                        toastr.error('Failed to update quantity.');
                    }
                });
            }

            function removeProduct(productId, variableId) {
                $.ajax({
                    url: "{{ route('cart.removeProduct') }}",
                    method: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        product_id: productId,
                        variable_id: variableId
                    },
                    success: function (response) {
                        if (response.success) {
                            updateOrderSummary();
                            $(`.card[data-product-id="${productId}"][data-variable-id="${variableId}"]`).remove();
                            toastr.success(response.message);
                        } else {
                            toastr.error('Failed to remove product.');
                        }
                    },
                    error: function () {
                        toastr.error('Failed to remove product.');
                    }
                });
            }


            $('[data-action="minus"]').on('click', function () {
                var productId = $(this).data('product-id');
                var variableId = $(this).data('variable-id');
                var quantityInput = $(`.quantity-input[data-product-id="${productId}"][data-variable-id="${variableId}"]`);
                var quantity = parseInt(quantityInput.val(), 10);

                if (quantity > 1) {
                    quantityInput.val(quantity - 1);
                    updateCartQuantity(productId, variableId, quantity - 1);
                }
            });

            // Handle "plus" button click
            $('[data-action="plus"]').on('click', function () {
                var productId = $(this).data('product-id');
                var variableId = $(this).data('variable-id');
                var quantityInput = $(`.quantity-input[data-product-id="${productId}"][data-variable-id="${variableId}"]`);
                var quantity = parseInt(quantityInput.val(), 10);
                var maxQuantity = quantityInput.attr('max');

                if (maxQuantity) {
                    maxQuantity = parseInt(maxQuantity, 10);
                    if (quantity < maxQuantity) {
                        quantityInput.val(quantity + 1);
                        updateCartQuantity(productId, variableId, quantity + 1);
                    }
                } else {
                    quantityInput.val(quantity + 1);
                    updateCartQuantity(productId, variableId, quantity + 1);
                }
            });


            $('.remove-product').on('click', function () {
                var productId = $(this).data('product-id');
                var variableId = $(this).data('variable-id');
                removeProduct(productId, variableId);
            });
        });

        $(document).ready(function () {

            $.validator.addMethod("phoneFormat", function(value, element) {
                var phoneRegex = /^\+?[1-9]\d{1,14}$/;
                return this.optional(element) || phoneRegex.test(value);
            }, "Please enter a valid phone number.");

           $("form[name='cart-form']").validate({
                rules: {
                    // email: {
                    //     required: true,
                    //     email: true
                    // },
                    mobile: {
                        required: true,
                        phoneFormat: true
                    }
                },
                messages: {
                    // email: {
                    //     required: "Please enter your email",
                    //     email: "Please enter a valid email address"
                    // },
                    mobile: {
                        required: "Please enter your mobile number",
                        phoneFormat: "Please enter a valid mobile number"
                    }
                },
                submitHandler: function (form) {
                    $(form).find('button[type="submit"]').prop('disabled', true);

                    var email = $('#email').val();

                    {{--if (Email ==  email &&  parseInt(isVerified) === 1 ) {--}}
                    {{--    window.location.href = "{{ route('checkout') }}";--}}
                    {{--    return false;--}}
                    {{--}--}}

                    var mobile = $('#mobile').val();

                    if (Mobile ==  mobile &&  parseInt(isVerified) === 1 ) {
                        window.location.href = "{{ route('checkout') }}";
                        return false;
                    }
                    $.ajax({
                        url: "{{ route('send-otp') }}",
                        method: 'POST',
                        data: {
                            _token: "{{ csrf_token() }}",
                            // email: email,
                            mobile: mobile
                        },
                        success: function (response) {
                            if (response.success) {
                                window.location.href = "{{ route('checkout') }}";
                            } else {
                                // Handle error (if any)
                                toastr.error(response.message || "An error occurred while sending OTP. Please try again.");
                                $(form).find('button[type="submit"]').prop('disabled', false);
                            }
                        },
                        error: function () {
                            toastr.error("An error occurred while processing your request. Please try again.");
                            $(form).find('button[type="submit"]').prop('disabled', false);
                        }
                    });

                    return false; // Prevent default form submission
                }
            });

            $('#cart-form').on('keyup change', function () {
                var mobile = $('#mobile').val().trim();
                var isValid = mobile !== "" && $(this).valid();
                $('button.checkout').prop('disabled', !isValid);

                // var email = $('#email').val().trim();
                // var isValid = email !== "" && $(this).valid();
                // $('button.checkout').prop('disabled', !isValid);
            });
        });

    </script>
@endsection