@extends('main-page')
@section('title')
   Shopping Cart
@endsection
@section('main-contents')
<style type="text/css">
    .quantity-control {
    display: flex;
    align-items: center;
    border: 2px solid #59595D;
    border-radius: 20px;
    padding: 2px;
    background-color: #FFF4EC;
    width: fit-content;
}

.quantity-control button {
    background-color: #FFF4EC;
    border: none;
    width: 15px;
    height: 15px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color:#59595D;
    font-weight: 600;
}

.quantity-input {
    width: 80px;
    text-align: center;
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 16px;
}
.border-chg{
    border-bottom: 1px solid #59595D;margin-bottom: 10px;width: 100%;margin-top: 10px;
}
.border-chg:last-child{
    border-bottom: none;
}
</style>

<!-- <div class="page-content">
    <div class="cart mt-5">
        <div id="shopping-cart-page-container" class="container">
            <div class="checkout-action-part" style="width: 70%;">
                <p class="shopping-cart-title">SHOPPING CART</p>
                <button class="cart-all-remove-btn" data-bs-toggle="modal" data-bs-target="#delete-all-carts">
                    <img src="{{asset('/frontend')}}/assets/images/remove.png">
                </button>
            </div>
            <div class="row">
                <div class="col-lg-9">
                    <div style="border:2px solid #59595D;border-radius:20px;padding: 10px 20px;" id="cart_items_list">
                        <input type="hidden" id="cart-item-list-color" name="cart-item-list-color" value="">
                        <div  id="cart_items_list_row" class="row">
                            
                        </div>
                    </div>
                </div>
                <aside class="col-lg-3">
                        <div class="summary summary-cart">
                            <h3 class="summary-title" style="color: black; font-weight: 600;">ORDER SUMMARY</h3>
                            <table class="table table-summary">
                                <tbody>
                                    <tr>
                                        <td style="font-size: 1.3rem; font-weight: 600;">ITEMS TOTAL:</td>
                                        <td style="font-size: 1.3rem; font-weight: 600;"><span id="cart_item_total">US $160.00</span></td>
                                    </tr>
                                    <tr style="border-bottom: 1px solid #59595D;margin-bottom: 10px;width: 100%;margin-top: 10px;">
                                        <td style="font-size: 1.3rem; font-weight: 600;">DISCOUNTS:</td>
                                        <td style="font-size: 1.3rem; font-weight: 600;">
                                            -<span id="cart_discount_total"> US $160.00</span>
                                        </td>
                                    </tr>
                                    <tr style="font-size: 1.3rem; font-weight: 600;">
                                        <td>SUBTOTAL:</td>
                                        <td><span id="cart_shipping_sub_total"></span></td>
                                    </tr>
                                    <tr style="border-bottom: 1px solid #59595D;margin-bottom: 10px;width: 100%;margin-top: 10px; font-size: 1.3rem; font-weight: 600;">
                                        <td style="font-size: 1.3rem; font-weight: 600;">SHIPPING:</td>
                                        <td>+ <span id="cart_shipping_total"></span>
                                        </td>

                                    </tr>
                                    <tr style="font-size: 1.3rem; font-weight: 600;">
                                        <td style="font-size: 1.3rem; font-weight: 600;">ORDER TOTAL:</td>
                                        <td><span id="cart_order_total"></span></td>
                                    </tr>
                                </tbody>
                            </table>
                            <a onclick="setNote()" href="{{url('/checkout')}}"  class="btn login-reg-btn" style="width:100%;padding:5px 5px;">PROCEED TO CHECKOUT</a>
                        </div>

                        <input id="order-note-checkout" class="order-note" type="text" placeholder="ORDER NOTE"> 
                </aside>
            </div>
        </div>
        <div id="shopping-cart-page-empty-container">
            <div>
                <p>YOUR CART IS EMPTY</p>
                <button onclick="window.location.href='{{ route('all-products') }}'">START SHOPPING</button>
            </div>
        </div>
    </div>
    <div class="modal fade" id="delete-cart-confirm" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteConfirm" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered address-del-modal">
            <div class="modal-content">
                <div class="modal-body">
                    <p>ARE YOU SURE YOU WANT TO DELETE THIS PRODUCT?</p>
                    <div class="row address-modify-btn mt-1">
                            <button type="submit" onclick="cartDeleteConfirmation(false, 'single')" class="btn" data-bs-dismiss="modal">
                               CANCEL
                            </button>
                            <button type="submit" class="btn" data-bs-toggle="modal" data-bs-target="#delete-cart-confirm" id="delete-cart-confirm-btn" data-custom="" onclick="cartDeleteConfirmation(true, 'single')" value="">
                                DELETE
                            </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="delete-all-carts" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteConfirm" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered address-del-modal">
            <div class="modal-content">
                <div class="modal-body">
                    <p>ARE YOU SURE YOU WANT TO DELETE ALL PRODUCTS?</p>
                    <div class="row address-modify-btn mt-1">
                            <button type="submit" onclick="cartDeleteConfirmation(false, 'all')" class="btn" data-bs-dismiss="modal">
                               CANCEL
                            </button>
                            <button type="submit" class="btn" data-bs-toggle="modal" data-bs-target="#delete-all-carts" id="delete-all-carts-btn" data-custom="" onclick="cartDeleteConfirmation(true, 'all')" value="">
                                DELETE
                            </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> -->
<script type="text/javascript">

//     function setNote(){
//         const noteValue = document.getElementById('order-note-checkout').value;
//         localStorage.setItem("aequm-checkout-note", JSON.stringify(noteValue));
//     }

//     document.addEventListener('DOMContentLoaded', () => {
//     let noteValue =localStorage.getItem('aequm-checkout-note');
//     noteValue = JSON.parse(noteValue);
//     document.getElementById('order-note-checkout').value = noteValue;
//     showPreloader();
//         setTimeout(() => {
//             hidePreloader();
//         }, 2000);
//     });
  

// document.addEventListener('click', function(event) {
//     if (event.target && event.target.classList.contains('decrease')) {
//         let input = event.target.parentElement.querySelector('.quantity-input');
//         if (input.value > 1) {
//             input.value = parseInt(input.value) - 1;
//         }
//     }
// });
// document.addEventListener('click', function(event) {
//     if (event.target && event.target.classList.contains('increase')) {
//         let input = event.target.parentElement.querySelector('.quantity-input');
//         input.value = parseInt(input.value) + 1;
//     }
// });
</script>
@endsection