@include('ai_includes.header')

<style>
    .checkout-container { margin-top: 30px;margin-bottom: 40px; }
    .summary-card {
        background: #fff; padding: 20px; border-radius: 10px;
        box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
    }
    .deliveryDiv {
        background: #ededed; border-radius: 10px;
        padding: 15px 20px; margin-bottom: 15px;
    }
    .deliveryHeader { display: flex; justify-content: space-between; align-items: center; }
    .cart-item {
        border-bottom: 1px solid #eee; padding: 10px 0;
    }
    .cartQuantityDiv i {
        cursor: pointer; padding: 4px 8px;
        border: 1px solid #ccc; border-radius: 4px;
        background: #f9f9f9;
    }
    .cartQuantityDiv i.deactivated { opacity: 0.4; cursor: not-allowed; }
    .frequently-bought {
        background: #fff; border-radius: 10px;
        padding: 15px; margin-top: 30px;
        box-shadow: 0px 2px 6px rgba(0,0,0,0.05);
    }
    .frequently-bought .item {
        border-bottom: 1px solid #eee; padding: 10px 0;
    }
    .bg-light-blue{
        background-color: #5a97ff;
        color: white;
    }
    .bg-light-blue:hover{
        color: white;
        background-color: #227cff;
        /* border:1px solid #5a97ff;
        color: #5a97ff; */
    }
    .frequently-bought .item:last-child { border-bottom: none; }
    @media (max-width: 768px) { .checkout-container { padding: 0 10px; margin-top:60px; } }
</style>

<div id="checkoutApp" class="container checkout-container">
    <div class="row">
        <h2 class="mb-4">Checkout</h2>
        <div class="col-lg-7">
            <h4 class="mb-3">Delivery Address</h4>
            
            <div style="max-height: 320px; overflow-y: auto;scrollbar-width: thin;">
                <div v-for="address in addresses" :key="address.id" class="deliveryDiv">
                    <div class="deliveryHeader">
                    <h6 class="fw-bold mb-0">@{{ address.name }} <small class="text-muted fw-medium"><i>@{{ address.is_default ? '(Default)' : '' }}</i></small></h6>
                    <div class="dropdown">
                        <button class="btn btn-link text-dark p-0" type="button" data-bs-toggle="dropdown">
                        <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" @click="editAddress(address.id)" href="javascript:void(0);"><i class="fas fa-edit me-2"></i>Edit</a></li>
                        <li><a class="dropdown-item" @click="setDefaultAddress(address.id)" href="javascript:void(0);"><i class="fas fa-star me-2"></i>Set as Default</a></li>
                        <li><a class="dropdown-item text-danger" @click="deleteAddress(address.id)" href="javascript:void(0);"><i class="fas fa-trash me-2"></i>Delete</a></li>
                        </ul>
                    </div>
                    </div>
                    <p class="mb-0 mt-2">@{{address.street}}<br>@{{address.city}}, @{{address.postal}}
                        <br>@{{address.address}}
                    </p>
                </div>
            </div>

            <button class="btn btn-dark mt-3" data-bs-toggle="modal" data-bs-target="#addAddressModal">
                <i class="fas fa-plus me-2"></i> Add New Address
            </button>
        </div>

        <div class="col-lg-5">
            <div class="summary-card">
                <h5 class="mb-3">Your Cart</h5>
                
                <!-- Cart Items -->
                <div v-for="cartItem in cartItems" :key="cartItem.id" class="cart-item d-flex align-items-center">
                <img :src="'{{ url('uploads/products') }}/' + cartItem.variant.product.images.split(',')[0]" height="70" width="70" class="me-2 rounded object-fit-cover" alt="">
                <div class="flex-grow-1">
                    <h6 class="" style="margin-bottom:-5px;">@{{cartItem.variant.product.name}}</h6>
                    <small class="text-muted" >@{{cartItem.variant.dimensionx}} x @{{cartItem.variant.dimensiony}} x @{{cartItem.variant.height}}</small>
                    <div class="d-flex justify-content-between align-items-center mt-2">
                    <div class="cartQuantityDiv d-flex align-items-center">
                        <i class="fa fa-minus" :class="{'deactivated': cartItem.quantity <= 1 || loadingCartIds.has(cartItem.id)}" :title="cartItem.quantity <= 1 ? 'Minimum quantity reached' : ''"  @click="decrementQuantity(cartItem.id)"></i>
                        <span :data-variant-id="cartItem.variant_id" class="mx-2 cartQuantity">@{{cartItem.quantity}}</span>
                        <i class="fa fa-plus" :class="{'deactivated': cartItem.quantity >= 10 || loadingCartIds.has(cartItem.id)}" :title="cartItem.quantity >= cartItem.variant.stock ? 'Maximum quantity reached' : ''" @click="incrementQuantity(cartItem.id)"></i>
                    </div>
                    <div>
                        <strong class="item-price fw-medium">₹@{{cartItem.variant.price}}</strong>
                        <small class="text-muted" style="text-decoration: line-through;">₹@{{cartItem.variant.price + ((cartItem.variant.price*cartItem.variant.discount)/100)}}</small>
                    </div>
                    </div>
                </div>
                <a @click="removeFromCart(cartItem.id)" class="ms-2 text-danger"><i class="fa fa-trash-can"></i></a>
                </div>

                {{-- <div class="cart-item d-flex align-items-center">
                <img src="https:placehold.co/70" class="me-2 rounded" alt="">
                <div class="flex-grow-1">
                    <h6 class="mb-1">Luxury Pillow</h6>
                    <small class="text-muted">Soft</small>
                    <div class="d-flex justify-content-between align-items-center mt-2">
                    <div class="cartQuantityDiv d-flex align-items-center">
                        <i class="fa fa-minus"></i>
                        <span class="mx-2 cartQuantity">2</span>
                        <i class="fa fa-plus"></i>
                    </div>
                    <div>
                        <strong class="item-price">₹800</strong>
                    </div>
                    </div>
                </div>
                <a href="#" class="ms-2 text-danger"><i class="fa fa-trash"></i></a>
                </div> --}}

                <hr>
                <div class="d-flex justify-content-between">
                <span>Subtotal</span> <strong id="subtotal">₹@{{cartTotal}}</strong>
                </div>
                <div class="d-flex justify-content-between">
                <span>Shipping</span> <strong id="shipping">₹@{{shippingCost}}</strong>
                </div>
                <div v-if="discountAmount > 0" style="border: 1px dashed #28a745; padding: 0px 8px; border-radius: 5px;" class="d-flex mt-1 justify-content-between text-success " id="discountRow">
                <span>Coupon Discount</span> <strong id="discountAmount">-₹@{{discountAmount}}</strong>
                </div>
                <hr>
                <div class="d-flex justify-content-between mb-3">
                <span>Total</span> <strong id="total">₹@{{grandTotal}}</strong>
                </div>
                <button class="btn fw-600 btn-outline-dark w-100 mb-2" data-bs-toggle="modal" data-bs-target="#couponModal">Apply Coupon</button>
                <button class="btn fw-600 bg-light-blue w-100">Place Order</button>
            </div>

            <!-- Frequently Bought Section -->
            {{-- <div class="frequently-bought mt-4">
                <h6 class="fw-bold mb-3">Frequently Bought Together</h6>
                <div class="item d-flex align-items-center">
                <img src="https://via.placeholder.com/50" class="me-2 rounded" alt="">
                <div class="flex-grow-1">
                    <span>Silk Bedsheet</span> <br>
                    <small class="text-muted">₹500</small>
                </div>
                <button class="btn btn-sm btn-outline-dark">Add</button>
                </div>
                <div class="item d-flex align-items-center">
                <img src="https://via.placeholder.com/50" class="me-2 rounded" alt="">
                <div class="flex-grow-1">
                    <span>Comforter Blanket</span> <br>
                    <small class="text-muted">₹1500</small>
                </div>
                <button class="btn btn-sm btn-outline-dark">Add</button>
                </div>
            </div> --}}
            </div>
    </div>

    <div class="modal fade" id="addAddressModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content p-3">
            <div class="modal-header border-0">
                <h5 class="modal-title fs-4">Add New Address</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addressForm" @submit.prevent="saveAddress">
                    <div class="mb-3">
                        <label class="form-label fw-medium">Full Name</label>
                        <input required type="text" minlength="4" maxlength="250"  v-model="newAddress.addressName" class="form-control" name="name" placeholder="Office">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Street / Floor</label>
                        <input required type="text" minlength="5" maxlength="250" v-model="newAddress.addressStreet" class="form-control" name="street" placeholder="Floor 4">
                    </div>
                    <div class="mb-3">
                    <label class="form-label fw-medium">City</label>
                    <input required type="text" minlength="3" maxlength="250" v-model="newAddress.addressCity" class="form-control" name="city" placeholder="Delhi">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Pincode</label>
                        <input required type="text" minlength="6" maxlength="10" v-model="newAddress.addressPostal" class="form-control" name="pincode" placeholder="110001">
                    </div>
                    <div class="mb-3">
                    <label class="form-label fw-medium">Address</label>
                    <textarea required minlength="5" maxlength="500" class="form-control" v-model="newAddress.addressNotes" name="address"></textarea>
                    </div>
                <button class="btn btn-dark w-100">Save Address</button>
                </form>
            </div>
            </div>
        </div>
        </div>

    
    <!-- Coupon Modal -->
    <div class="modal fade" id="couponModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content p-3">
        <div class="modal-header border-0">
            <h5 class="modal-title">Apply Coupon</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
            <input type="text" v-model="couponCode" id="couponCode" class="form-control mb-3" placeholder="Enter coupon code">
            <button @click="applyCoupon" id="applyCouponBtn" class="btn btn-dark w-100">Apply</button>
        </div>
        </div>
    </div>
    </div>
</div>

{{-- <div class="container checkout-container">
  <div class="row">
    <h2 class="mb-4">Checkout</h2>
    
    <!-- Left Column -->
    <div class="col-lg-7">
      <h4 class="mb-3">Delivery Address</h4>
        <div style="max-height: 500px; overflow-y: scroll">
            <div class="deliveryDiv">
              <div class="deliveryHeader">
                <h6 class="fw-bold mb-0">John Doe <small class="text-muted">(Default)</small></h6>
                <div class="dropdown">
                  <button class="btn btn-link text-dark p-0" type="button" data-bs-toggle="dropdown">
                    <i class="fas fa-ellipsis-v"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#"><i class="fas fa-edit me-2"></i>Edit</a></li>
                    <li><a class="dropdown-item" href="#"><i class="fas fa-star me-2"></i>Set as Default</a></li>
                    <li><a class="dropdown-item text-danger" href="#"><i class="fas fa-trash me-2"></i>Delete</a></li>
                  </ul>
                </div>
              </div>
              <p class="mb-0 mt-2">Floor 5<br>Ambala City, 133001<br>India</p>
            </div>
        </div>

      <button class="btn btn-dark mt-3" data-bs-toggle="modal" data-bs-target="#addAddressModal">
        <i class="fas fa-plus me-2"></i> Add New Address
      </button>
    </div>
    
    <!-- Right Column -->
    <div class="col-lg-5">
      <div class="summary-card">
        <h5 class="mb-3">Your Cart</h5>
        
        <!-- Cart Items -->
        <div class="cart-item d-flex align-items-center">
          <img src="https:placehold.co/70" class="me-2 rounded" alt="">
          <div class="flex-grow-1">
            <h6 class="mb-1">Premium Mattress</h6>
            <small class="text-muted">72 x 60 x 8</small>
            <div class="d-flex justify-content-between align-items-center mt-2">
              <div class="cartQuantityDiv d-flex align-items-center">
                <i class="fa fa-minus"></i>
                <span class="mx-2 cartQuantity">1</span>
                <i class="fa fa-plus"></i>
              </div>
              <div>
                <strong class="item-price">₹1200</strong>
              </div>
            </div>
          </div>
          <a href="#" class="ms-2 text-danger"><i class="fa fa-trash"></i></a>
        </div>

        <div class="cart-item d-flex align-items-center">
          <img src="https:placehold.co/70" class="me-2 rounded" alt="">
          <div class="flex-grow-1">
            <h6 class="mb-1">Luxury Pillow</h6>
            <small class="text-muted">Soft</small>
            <div class="d-flex justify-content-between align-items-center mt-2">
              <div class="cartQuantityDiv d-flex align-items-center">
                <i class="fa fa-minus"></i>
                <span class="mx-2 cartQuantity">2</span>
                <i class="fa fa-plus"></i>
              </div>
              <div>
                <strong class="item-price">₹800</strong>
              </div>
            </div>
          </div>
          <a href="#" class="ms-2 text-danger"><i class="fa fa-trash"></i></a>
        </div>

        <hr>
        <div class="d-flex justify-content-between">
          <span>Subtotal</span> <strong id="subtotal">₹2000</strong>
        </div>
        <div class="d-flex justify-content-between">
          <span>Shipping</span> <strong id="shipping">₹50</strong>
        </div>
        <div class="d-flex justify-content-between text-success d-none" id="discountRow">
          <span>Coupon Discount</span> <strong id="discountAmount">-₹0</strong>
        </div>
        <hr>
        <div class="d-flex justify-content-between mb-3">
          <span>Total</span> <strong id="total">₹2050</strong>
        </div>
        <button class="btn btn-outline-primary w-100 mb-2" data-bs-toggle="modal" data-bs-target="#couponModal">Apply Coupon</button>
        <button class="btn btn-success w-100">Place Order</button>
      </div>

      <!-- Frequently Bought Section -->
      <div class="frequently-bought mt-4">
        <h6 class="fw-bold mb-3">Frequently Bought Together</h6>
        <div class="item d-flex align-items-center">
          <img src="https://via.placeholder.com/50" class="me-2 rounded" alt="">
          <div class="flex-grow-1">
            <span>Silk Bedsheet</span> <br>
            <small class="text-muted">₹500</small>
          </div>
          <button class="btn btn-sm btn-outline-dark">Add</button>
        </div>
        <div class="item d-flex align-items-center">
          <img src="https://via.placeholder.com/50" class="me-2 rounded" alt="">
          <div class="flex-grow-1">
            <span>Comforter Blanket</span> <br>
            <small class="text-muted">₹1500</small>
          </div>
          <button class="btn btn-sm btn-outline-dark">Add</button>
        </div>
      </div>
    </div>
  </div>
</div> --}}

@include('ai_includes.footer')
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
$(document).ready(function(){
    // Address save
    // $("#addressForm").submit(function(e){
    //     e.preventDefault();
    //     alert("Address Saved!");
    //     $("#addAddressModal").modal('hide');
    // });

    // Quantity control
    // $(".fa-plus").click(function(){
    //     let qtyEl = $(this).siblings(".cartQuantity");
    //     let qty = parseInt(qtyEl.text());
    //     if(qty < 10) {
    //         qtyEl.text(qty + 1);
    //         updateTotals();
    //     }
    // });

    // $(".fa-minus").click(function(){
    //     let qtyEl = $(this).siblings(".cartQuantity");
    //     let qty = parseInt(qtyEl.text());
    //     if(qty > 1) {
    //         qtyEl.text(qty - 1);
    //         updateTotals();
    //     }
    // });

    // Remove item
    $(".fa-trash").click(function(){
        $(this).closest(".cart-item").remove();
        updateTotals();
    });

    // Apply Coupon Demo
    // $("#applyCouponBtn").click(function(){
    //     let code = $("#couponCode").val().trim();
    //     if(code.toUpperCase() === "SAVE10"){
    //         let subtotal = parseInt($("#subtotal").text().replace("₹",""));
    //         let discount = Math.round(subtotal * 0.10);
    //         $("#discountAmount").text("-₹" + discount);
    //         $("#discountRow").removeClass("d-none");
    //         updateTotals(discount);
    //         $("#couponModal").modal('hide');
    //     } else {
    //         alert("Invalid Coupon Code");
    //     }
    // });

    function updateTotals(discount=0){
        let subtotal = 0;
        $(".cart-item").each(function(){
            let qty = parseInt($(this).find(".cartQuantity").text());
            let price = parseInt($(this).find(".item-price").text().replace("₹",""));
            subtotal += qty * price;
        });
        $("#subtotal").text("₹" + subtotal);
        let shipping = parseInt($("#shipping").text().replace("₹",""));
        let total = subtotal + shipping - discount;
        $("#total").text("₹" + total);
    }
});

</script>

{{-- vue script  --}}
<script>
 const { createApp } = Vue;
 
 const checkoutApp = createApp({
    data() {
        return {
            addresses : @json($user->addresses),
            cartItems : @json($user->cart->cartItems),
            shippingCost : 0,
            couponCode : '',
            couponDiscount : 0,
            appliedCoupon : '',
            couponType : '',
            newAddress: {
                id: null,
                addressName: '',
                addressStreet: '',
                addressCity: '',
                addressPostal: '',
                addressNotes: '',
                returnAddress: true
            },
            loadingCartIds : new Set(),
        }
    },
    methods: {
        saveAddress() {
            if($("#addressForm")[0].reportValidity()) {
                console.log(this.newAddress);
                axios.post('{{url('addAddress')}}', this.newAddress)
                .then(res => {
                    console.log(res);
                    if(res.data.status == 'success') {
                        if(this.newAddress.id != null) {
                         this.addresses = this.addresses.filter(address => address.id != this.newAddress.id);   
                        }
                        this.addresses.push(res.data.data);
                        this.newAddress = {
                            id: null,
                            addressName: '',
                            addressStreet: '',
                            addressCity: '',
                            addressPostal: '',
                            addressNotes: '',
                            returnAddress: true
                        }
                        $("#addAddressModal").modal('hide');
                    }
                    if(res.data.status == 'error') {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: res.data.message,
                            showConfirmButton: false,
                            timer: 1500
                        })
                    }
                })
                .catch(err => {
                    console.log(err.response?.data || err.message);
                });
            }else{
                $('#addAddressForm')[0].reportValidity();
            }
        },
        deleteAddress(id){
            axios.post('{{url('deleteAddress')}}', {id : id,returnId: true})
            .then(res => {
                console.log(res);
                if(res.data.status == 'success') {
                    this.addresses = this.addresses
                                    .filter(address => address.id != res.data.id)
                                    .map(address => ({
                                        ...address,
                                        is_default: address.id == res.data.defaultAddressId ? 1 : 0
                                    }));
                }
                if(res.data.status == 'error') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: res.data.message,
                        showConfirmButton: false,
                        timer: 1500
                    })
                }
            })
            .catch(err => {
                console.log(err.response?.data || err.message);
            });
        },
        editAddress(id){
            const add = this.addresses.find(address => address.id == id);
            this.newAddress.addressName = add.name;
            this.newAddress.addressStreet = add.street;
            this.newAddress.addressCity = add.city;
            this.newAddress.addressPostal = add.pincode;
            this.newAddress.addressNotes = add.address;
            this.newAddress.id = id;
            $("#addAddressModal").modal('show');  
        },
        resetNewAddress() {
            this.newAddress = {
                addressName: '',
                addressStreet: '',
                addressCity: '',
                addressPostal: '',
                addressNotes: '',
                returnAddress: true
            };
        },
        setDefaultAddress(id){
            this.addresses.forEach(address => {
                address.is_default = 0;
            });
            const add = this.addresses.find(address => address.id == id);
            add.is_default = 1; 
            axios.post('{{url('setDefaultAddress')}}', {id : id, returnId: true})
                .then(res => {
                    if(res.data.status == 'error') {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: res.data.message,
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                });
        },
        decrementQuantity(id){
            if(this.loadingCartIds.has(id)) return;
            const item = this.cartItems.find(item => item.id == id);
            if(item.quantity <= 1) return;
            this.loadingCartIds.add(id);
            axios.post('{{url('updateQuantity')}}', {variantId : item.variant_id, quantity: -1})
            .then(res => {
                console.log(res);
                if(res.data.status == 'error') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: res.data.message,
                        showConfirmButton: false,
                        timer: 1500
                    });
                }
                if(res.data.status == 'success') {
                    --item.quantity;
                }
                if(res.data.refreshCart){
                    window.refreshCart();
                }
            })
            .finally(() => {
                this.loadingCartIds.delete(id);
            })
        },
        incrementQuantity(id){
            if(this.loadingCartIds.has(id)) return;
            const item = this.cartItems.find(item => item.id == id);
            if(item.quantity >= 10) return;
            this.loadingCartIds.add(id);
            axios.post('{{url('updateQuantity')}}', {variantId : item.variant_id, quantity: 1})
            .then(res => {
                console.log(res);
                if(res.data.status == 'error') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: res.data.message,
                        showConfirmButton: false,
                        timer: 1500
                    });
                }
                if(res.data.status == 'success') {
                    ++item.quantity;
                }
                if(res.data.refreshCart){
                    window.refreshCart();
                }
            })
            .finally(() => {
                this.loadingCartIds.delete(id);
            })
        },
        removeFromCart(id){
            if(this.loadingCartIds.has(id)) return;
            this.loadingCartIds.add(id);
            axios.post('{{url('removeFromCart')}}', {id: id})
            .then(res => {
                console.log(res);
                if(res.data.status == 'error') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: res.data.message,
                        showConfirmButton: false,
                        timer: 1500
                    });
                }
                if(res.data.status == 'success') {
                    this.cartItems = this.cartItems.filter(item => item.id != id);
                }
                if(res.data.refreshCart){
                    window.refreshCart();
                }
            })
            .finally(() => {
                this.loadingCartIds.delete(id);     
            })
        },
        applyCoupon(){
            const code = this.couponCode.trim();
            if(code == '') return;
            axios.post('{{url('applyCoupon')}}', {code : code})
            .then(res => {
                console.log(res);
                if(res.data.status == 'success') {
                    this.couponDiscount = res.data.discount;
                    this.appliedCoupon = code;
                    this.couponType = res.data.type;
                    Swal.fire({
                        icon: 'success',
                        title: res.data.message,
                        showConfirmButton: false,
                        timer: 1500
                    }).then(() => {
                        $('#couponModal').modal('hide');
                    });
                }
                if(res.data.status == 'error') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: res.data.message,
                        showConfirmButton: false,
                        timer: 1500
                    });
                    this.couponCode = this.appliedCoupon
                }
            })
            .catch(err => {
                console.log(err.response?.data || err.message);
            });

        },
        fetchingShippingCost(){
            if(this.defaultAddress) {
                axios.post('{{url('fetchShippingCost')}}', {pincode : this.defaultAddress.pincode,weight : this.cartWeight , pt : 'pre-paid'})
                .then(res => {
                    console.log(res);
                    if(res.data.status == 'success') {
                        this.shippingCost = parseInt(res.data.response[0].total_amount);
                    }
                })
                .catch(err => {
                    console.log(err.response?.data || err.message);
                });
            }
        }

    },
    mounted() {
        $('#addAddressModal').on('hidden.bs.modal', () => {
            this.resetNewAddress();
        });

        this.fetchingShippingCost();
    },
    computed: {
        cartTotal(){
            return this.cartItems.reduce((total,item)=> total + (item.quantity * item.variant.price),0);
        },
        discountAmount() {
            if(this.couponType == 'percentage') {
                return this.cartTotal * this.couponDiscount / 100;
            } else {
                return this.couponDiscount;
            };
        },
        grandTotal(){
            return this.cartTotal + this.shippingCost - this.discountAmount;
        },
        cartWeight(){
            return 1;
            // return this.cartItems.reduce((total,item)=> total + (item.quantity * item.variant.weight),1);
        },
        defaultAddress(){
            return this.addresses.find(address => address.is_default == 1);
        }
    },
    watch: {
        defaultAddress(newVal){
            this.fetchingShippingCost();
        },
        cartWeight(newVal){
            this.fetchingShippingCost();
        }
    }
 });

window.checkoutApp = checkoutApp.mount('#checkoutApp');
</script>