@include('frontend.WebPages.header')
<link rel="stylesheet" href="{{ asset('frontend/css/custom/checkout.css') }}">
<title>Payment</title>
</head>
<style>
    .shopping-cart {
        padding-bottom: 50px;
        font-family: 'Montserrat', sans-serif;
    }

    .shopping-cart.dark {
        background-color: #f6f6f6;
    }

    .shopping-cart .content {
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
        background-color: white;
    }

    .shopping-cart .block-heading {
        padding-top: 50px;
        margin-bottom: 40px;
        text-align: center;
    }

    .shopping-cart .block-heading p {
        text-align: center;
        max-width: 420px;
        margin: auto;
        opacity: 0.7;
    }

    .shopping-cart .dark .block-heading p {
        opacity: 0.8;
    }

    .shopping-cart .block-heading h1,
    .shopping-cart .block-heading h2,
    .shopping-cart .block-heading h3 {
        margin-bottom: 1.2rem;
        color: #3b99e0;
    }

    .shopping-cart .items {
        margin: auto;
    }

    .shopping-cart .items .product {
        margin-bottom: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 40px;
    }

    .shopping-cart .items .product .info {
        padding-top: 0px;
        text-align: center;
    }

    .shopping-cart .items .product .info .product-name {
        font-weight: 600;
    }

    .shopping-cart .items .product .info .product-name .product-info {
        font-size: 14px;
        margin-top: 15px;
    }

    .shopping-cart .items .product .info .product-name .product-info .value {
        font-weight: 400;
    }

    .shopping-cart .items .product .info .quantity .quantity-input {
        margin: auto;
        width: 80px;
    }

    .shopping-cart .items .product .info .price {
        margin-top: 15px;
        font-weight: bold;
        font-size: 22px;
    }

    .shopping-cart .summary {
        border-top: 2px solid #5ea4f3;
        background-color: #f7fbff;
        height: 100%;
        padding: 30px;
    }

    .shopping-cart .summary h3 {
        text-align: center;
        font-size: 1.3em;
        font-weight: 600;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .shopping-cart .summary .summary-item:not(:last-of-type) {
        padding-bottom: 10px;
        padding-top: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .shopping-cart .summary .text {
        font-size: 1em;
        font-weight: 600;
    }

    .shopping-cart .summary .price {
        font-size: 1em;
        float: right;
    }

    .shopping-cart .summary button {
        margin-top: 20px;
    }

    @media (min-width: 768px) {
        .shopping-cart .items .product .info {
            padding-top: 25px;
            text-align: left;
        }

        .shopping-cart .items .product .info .price {
            font-weight: bold;
            font-size: 22px;
            top: 17px;
        }

        .shopping-cart .items .product .info .quantity {
            text-align: center;
        }

        .shopping-cart .items .product .info .quantity .quantity-input {
            padding: 4px 10px;
            text-align: center;
        }
    }

    .payment-form {
        padding-bottom: 50px;
        font-family: 'Montserrat', sans-serif;
    }

    .payment-form.dark {
        background-color: #f6f6f6;
    }

    .payment-form .content {
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
        background-color: white;
    }

    .payment-form .block-heading {
        padding-top: 50px;
        margin-bottom: 40px;
        text-align: center;
    }

    .payment-form .block-heading p {
        text-align: center;
        max-width: 420px;
        margin: auto;
        opacity: 0.7;
    }

    .payment-form.dark .block-heading p {
        opacity: 0.8;
    }

    .payment-form .block-heading h1,
    .payment-form .block-heading h2,
    .payment-form .block-heading h3 {
        margin-bottom: 1.2rem;
        color: #3b99e0;
    }

    .payment-form form {
        border-top: 2px solid #5ea4f3;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
        background-color: #ffffff;
        padding: 0;
        max-width: 600px;
        margin: auto;
    }

    .payment-form .title {
        font-size: 1em;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        margin-bottom: 0.8em;
        font-weight: 600;
        padding-bottom: 8px;
    }

    .payment-form .products {
        background-color: #f7fbff;
        padding: 25px;
    }

    .payment-form .products .item {
        margin-bottom: 1em;
    }

    .payment-form .products .item-name {
        font-weight: 600;
        font-size: 0.9em;
    }

    .payment-form .products .item-description {
        font-size: 0.8em;
        opacity: 0.6;
    }

    .payment-form .products .item p {
        margin-bottom: 0.2em;
    }

    .payment-form .products .price {
        float: right;
        font-weight: 600;
        font-size: 0.9em;
    }

    .payment-form .products .total {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        margin-top: 10px;
        padding-top: 19px;
        font-weight: 600;
        line-height: 1;
    }

    .payment-form .card-details {
        padding: 25px 25px 15px;
    }

    .payment-form .card-details label {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 15px;
        color: #79818a;
        text-transform: uppercase;
    }

    .payment-form .card-details button {
        margin-top: 0.6em;
        padding: 12px 0;
        font-weight: 600;
    }

    .payment-form .date-separator {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 5px;
    }

    @media (min-width: 576px) {
        .payment-form .title {
            font-size: 1.2em;
        }

        .payment-form .products {
            padding: 40px;
        }

        .payment-form .products .item-name {
            font-size: 1em;
        }

        .payment-form .products .price {
            font-size: 1em;
        }

        .payment-form .card-details {
            padding: 40px 40px 30px;
        }

        .payment-form .card-details button {
            margin-top: 2em;
        }
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        /* Semi-transparent black */
        z-index: 9998;
        /* Ensure it's below the loader but above other content */
        display: none;
        /* Initially hidden */
    }

    .loader {
        border: 4px solid #f3f3f3;
        border-radius: 50%;
        border-top: 4px solid #3498db;
        width: 40px;
        height: 40px;
        -webkit-animation: spin 2s linear infinite;
        /* Safari */
        animation: spin 2s linear infinite;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -20px;
        margin-left: -20px;
        z-index: 9999;
        /* Ensure it's on top of everything */
        display: none;
        /* Initially hidden */
    }

    /* Safari */
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    #checkoutInfo {
        padding: 40px
    }
</style>

<body>
    <div id="overlay" class="overlay"></div>
    <div id="loader" class="loader"></div>
    <section class="checkout-cards">
        <form action="{{ route('checkout.orderItemStore', ['slug' => $slug]) }}" name="checkoutInfo" id="checkoutInfo"
            method="POST">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-12">
                        <div class="page">
                            <section class="shopping-cart dark">
                                <div class="container">
                                    <div class="content">
                                        <div class="row">
                                            @foreach ($cartWithProductDetails as $index => $item)
                                                <div class="col-md-12 col-lg-12">
                                                    <div class="items">
                                                        <div class="product" id="item_{{ $item['cartItem']->id }}">
                                                            <div class="row">
                                                                <div class="col-md-3">
                                                                    <img class="img-fluid mx-auto d-block image"
                                                                        src="{{ asset('adImages/' . $item['product']->image) }}">
                                                                </div>
                                                                <div class="col-md-8">
                                                                    <div class="info">
                                                                        <div class="row">
                                                                            <div class="col-md-4 product-name">
                                                                                <div class="product-name">
                                                                                    <a href="#">Product Name:
                                                                                        {{ $item['product']->title }}</a>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-4 quantity">
                                                                                <label
                                                                                    for="quantity{{ $index }}">Quantity:</label>
                                                                                <input id="quantity{{ $index }}"
                                                                                    name="quantities[]" type="number"
                                                                                    class="form-control quantity-input"
                                                                                    value="{{ $item['cartItem']->qty }}">
                                                                                <input type="hidden"
                                                                                    name="cart_item_ids[]"
                                                                                    value="{{ $item['cartItem']->id }}">
                                                                                <input type="hidden" name="user_id" id="user_id"
                                                                                    value="{{ $item['user']->id }}">
                                                                            </div>
                                                                            <div class="col-md-3 price">
                                                                                <span class="cartTotalPrice" 
                                                                                      data-item-id="{{ $item['cartItem']->id }}" 
                                                                                      data-original-price="{{ number_format($item['cartItem']->price, 2) }}">
                                                                                    ${{ number_format($item['cartItem']->price, 2) }}
                                                                                </span>
                                                                            </div>
                                                                            
                                                                            <div class="col-md-1 delete">
                                                                                <a class="delete-item" href="javascript:void(0)"
                                                                                    style="color: red"
                                                                                    onclick="deleteItem( {{ $item['cartItem']->id }})"><i
                                                                                        class="fa fa-times"
                                                                                        aria-hidden="true"></i></a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12 col-lg-12" style="padding: 40px">
                                                @csrf
                                                <h3 class="text-center mb-4">Add Personal Info</h3>
                                                <div class="form-group row mb-4">
                                                    <label for="fname" class="col-sm-2 col-form-label"><strong>First
                                                            Name: <span class="text-danger">*</span></strong></label>
                                                    <div class="col-sm-10">
                                                        <input type="text" name="fname" class="form-control"
                                                            id="fname" placeholder="Enter First Name">
                                                        @error('fname')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group row mb-4">
                                                    <label for="lname" class="col-sm-2 col-form-label"><strong>Last
                                                            Name: <span class="text-danger">*</span></strong></label>
                                                    <div class="col-sm-10">
                                                        <input type="text" name="lname" class="form-control"
                                                            id="lname" placeholder="Enter Last Name">
                                                        @error('lname')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group row mb-4">
                                                    <label for="email" class="col-sm-2 col-form-label"><strong>Email:
                                                            <span class="text-danger">*</span></strong></label>
                                                    <div class="col-sm-10">
                                                        <input type="email" name="email" class="form-control"
                                                            id="email" placeholder="Enter Email">
                                                        @error('email')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group row mb-4">
                                                    <label for="address"
                                                        class="col-sm-2 col-form-label"><strong>Address: <span
                                                                class="text-danger">*</span></strong></label>
                                                    <div class="col-sm-10">
                                                        <input type="text" name="address" class="form-control"
                                                            id="address" placeholder="Enter Address">
                                                        @error('address')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group row mb-4">
                                                    <label for="phone"
                                                        class="col-sm-2 col-form-label"><strong>Phone: <span
                                                                class="text-danger">*</span></strong></label>
                                                    <div class="col-sm-10">
                                                        <input type="text" name="phone" class="form-control"
                                                            id="phone" placeholder="Enter Phone No:">
                                                        @error('phone')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group row mb-4">
                                                    <label for="city"
                                                        class="col-sm-2 col-form-label"><strong>City: <span
                                                                class="text-danger">*</span></strong></label>
                                                    <div class="col-sm-10">
                                                        <select name="city" class="form-control" id="city">
                                                            <option value="">Select City</option>
                                                            @foreach ($cities as $city)
                                                                <option value="{{ $city->id }}">
                                                                    	{{ json_decode($city->name)->en }}</option>
                                                            @endforeach
                                                        </select>
                                                        @error('city')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group row mb-4">
                                                    <label for="phone"
                                                        class="col-sm-2 col-form-label"><strong>Comments:</strong></label>
                                                    <div class="col-sm-10">
                                                        <input type="text" name="comment" class="form-control"
                                                            id="comment" placeholder="Enter Comments:">
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
                        <div class="page payment-page">
                            <section class="payment-form dark">
                                <div class="container">
                                    <div class="products">
                                        <h3 class="title">Checkout</h3>
                                        <div class="summary">
                                            <div class="summary-item">
                                                <span class="text">Subtotal</span>
                                                <span class="price subTotal">${{ number_format($SubTotal, 2) }}</span>
                                                <input type="hidden" name="subtotal" value="{{ $SubTotal }}"
                                                    class="subTotal">
                                            </div>
                                            <div class="summary-item">
                                                <span class="text">Shipping</span>
                                                <span class="price">${{ number_format($shipment, 2) }}</span>
                                                <input type="hidden" name="shipment" value=""
                                                class="subTotal">

                                            </div>
                                        </div>
                                        <div class="total">Total<span class="price"
                                                id="total">${{ number_format($total, 2) }}</span></div>
                                        <input type="hidden" name="total" value="{{ $total }}"
                                            class="subTotal">
                                    </div>
                                    <div class="form-group col-sm-12">
                                        <button type="submit" class="btn btn-primary btn-block">Proceed</button>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>

                </div>
            </div>
        </form>
    </section>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
       $(document).ready(function() {
    // Retrieve and update the cartTotalPrice for each item from localStorage
    $('.cartTotalPrice').each(function() {
        var itemId = $(this).data('item-id');
        var storedPrice = localStorage.getItem('cartTotalPrice_' + itemId);
        if (storedPrice) {
            $(this).text('$' + storedPrice);
        }
    });

    // Event handler for quantity change
    $('.quantity-input').on('change', function() {
        var quantity = $(this).val();
        var id = $(this).siblings('input[type="hidden"]').val();
        var user_id = $(this).siblings('input[name="user_id"]').val();
        var $this = $(this);

        // Check if quantity is less than 1, if so, set it to 1
        if (quantity < 1) {
            quantity = 1;
            $this.val(1); // Update the input field value
        }

        $('.loader').show();
        $('.overlay').show();

        $.ajax({
            url: '{{ route('checkout.qtyChange') }}',
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                qty: quantity,
                id: id,
                user_id: user_id
            },
            success: function(response) {
                var formattedTotalPrice = response.totalPrice;
                var formattedSubTotal = response.subTotal;
                var formattedTotal = response.total;
                var ShipmentCharges = response.shipment;

                // Update the displayed price for the specific item
                $this.closest('.quantity').siblings('.price').find('span').text('$' + formattedTotalPrice);
                
                // Update and store the cartTotalPrice in localStorage
                localStorage.setItem('cartTotalPrice_' + id, formattedTotalPrice);

                // Update other total values
                $('#totalPrice').text('$' + formattedTotalPrice);
                $('.subTotal').text('$' + formattedSubTotal);
                $('#total').text('$' + formattedTotal);

                // Update hidden input fields for total values
                $('input[name="total"]').val(formattedTotal);
                $('input[name="subtotal"]').val(formattedSubTotal);
                $('input[name="shipment"]').val(ShipmentCharges);
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
                // Handle errors
            },
            complete: function() {
                $('.overlay').hide();
                $('.loader').hide();
            }
        });
    });
});

        // $(document).ready(function() {
        //              // Retrieve and update the cartTotalPrice from localStorage
        //     var storedPrices = localStorage.getItem('cartTotalPrices');
        //     if (storedPrices) {
        //         $('.cartTotalPrice').text('$' + storedPrices);
        //     }
        //     $('.quantity-input').on('change', function() {
        //         var quantity = $(this).val();
        //         var id = $(this).siblings('input[type="hidden"]').val();
        //         var user_id = $(this).siblings('input[name="user_id"]').val(); // Retrieve user_id value

        //         // Check if quantity is less than 1, if so, set it to 1
        //         if (quantity < 1) {
        //             quantity = 1;
        //             $(this).val(1); // Update the input field value
        //         }

        //         var $this = $(this); // Storing a reference to $(this) for later use

        //         $('.loader').show();
        //         $('.overlay').show();

        //         $.ajax({
        //             url: '{{ route('checkout.qtyChange') }}',
        //             type: 'POST',
        //             headers: {
        //                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //             },
        //             data: {
        //                 qty: quantity,
        //                 id: id,
        //                 user_id: user_id // Include user_id in the data object
        //             },
        //             success: function(response) {
        //                 localStorage.setItem('cartTotalPrices', response.totalPrice);
        //                 $('.cartTotalPrice').text('$' + response.totalPrice);
        //                 $this.closest('.quantity').siblings('.price').find('span').text('$' +
        //                     response.totalPrice);
        //                 $('#totalPrice').text('$' + response.totalPrice); // Assuming this is the total price for all items
        //                 $('.summary-item .subTotal').text('$' + response.subTotal);
        //                 $('#total').text('$' + response.total);
        //                 $('input[name="total"]').val(response.total);
        //                 $('input[name="subtotal"]').val(response.subTotal);
        //                 $('input[name="shipment"]').val(response.shipment);
        //             },
        //             error: function(xhr, status, error) {
        //                 console.error(xhr.responseText);
        //                 // Handle errors
        //             },
        //             complete: function() {
        //                 $('.overlay').hide();
        //                 $('.loader').hide();
        //             }
        //         });
        //     });


        // });
    
        function deleteItem(rowId) {
    if (confirm('Are you sure you want to delete it?')) {
        var userId = $('#user_id').val();
        var shipment = "{{ number_format($shipment, 2) }}";
        // alert(shipment);
        $('.loader').show();
        $('.overlay').show();
        $.ajax({
            url: '{{ route('checkout.qtyDelete') }}',
            type: 'post',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                rowId: rowId,
                userId: userId,
                shipment:shipment
            },
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    var formattedSubTotal = response.subTotal;
                    var formattedTotal = response.total;
                    $('#item_' + rowId).remove();
                    $('#total').text('$' + formattedTotal);
                    $('.subTotal').text('$' + formattedSubTotal);
                    $('.overlay').hide();
                    $('.loader').hide();
                } else {
                    alert('Failed to delete item.');
                    $('.overlay').hide();
                    $('.loader').hide();
                }
            },
        });
    }
}

    </script>
    






    @include('frontend.WebPages.footer')