@extends('layouts.new-layout')
@section('title', 'Address')
@section('content')
<style>
    @media (max-width: 768px) {
    
    /* .cancel{
        padding: 20px 15px !important;
    } */
}

    </style>
@include('partials.parallaxSlider', ['title' => 'Delivery Address'])
<section class="pt-lg-5 pt-md-5 mt-lg-5 mt-md-5 pb-0 cart-sec">
    <div class="container-fluid">
        <div class="row mx-lg-5 mt-lg-0  my-4">
            <div class="container-fluid">
                <h3 class="py-2 mb-5 text-capitalize">Select a <span class="text-blue h3">Delivery</span> Address</h3>
                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                <div class="row">
                    <form id="checkout-form" method="POST" action="{{ route('save.address') }}" class="col-lg-8">
                        @csrf
                        <input type="hidden" name="address_id" />
                        @if($addresses->count())
                        <div class="mb-3 bg-white">
                            <div class="p-3">
                                <div class="row justify-content-between align-items-center">
                                    <div class="row justify-content-between align-items-center">
                                        <h5 class="col-6 m-0"> Saved Address </h5>
                                        <button type="button" class="btn btn-sm col-6 view-all-btn w-auto">View
                                            All</button>
                                    </div>
                                    @forelse($addresses as $address)
                                    <div class="saved-address form-check col-12 pl-12 mt-3" style="padding-left: 2rem;"
                                        title="{{ $address->is_shipping_available ? 'Shipping available' : 'Shipping not available at this address' }}">
                                        <input id="first-address" class="form-check-input mt-3" type="radio"
                                            value="{{ $address->id }}" name="address_radio" id="flexCheckChecked"
                                            onclick="selectAddress(this)"
                                            {{ $address->is_shipping_available ? 'data-shipping='.$address->shipping->price.' data-delivery='.$address->shipping->delivery_days : 'disabled' }}>
                                        <label class="form-check-label" for="flexCheckChecked">
                                            <p>
                                                <span>
                                                    <b>{{ $address->firstname }} {{ $address->lastname }}</b>
                                                    @if($address->is_shipping_available && $address->shipping &&
                                                    $address->shipping->price)
                                                    <small class="text-success">(<i class="fas fa-dollar-sign"></i>
                                                        {{ $address->shipping->price}} -
                                                        {{$address->shipping->delivery_days }} Days)</small>
                                                    @endif
                                                    @unless($address->is_shipping_available)
                                                    <small class="text-danger">(Shipping unavailable for this pin
                                                        code.)</small>
                                                    @endunless
                                                </span>
                                                <br>
                                                {{ $address->address }},{{ $address->city }},{{ $address->state }}
                                                ,{{ $address->country }},{{ $address->pincode }}<br>
                                                <span> Phone: ({{ $address->phone }})</span>

                                            </p>
                                            <a class="remove-cart-btn" href="#" data-toggle="modal"
                                                data-target="#editAddressModal-{{ $address->id }}">Edit Address</a>
                                        </label>
                                    </div>
                                    @empty
                                    <p>No Saved Address found.</p>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                        @endif
                        <div class="mb-3 p-3 card bg-white">
                            <div id="add_address" class="{{ empty($addresses) ? 'd-none' : '' }} ">
                                <h5>Add Address +</h5>
                            </div>
                            <div class="{{ empty($addresses) ? '' : 'd-none' }}" id="address_div">
                                <div>
                                    <div>
                                        <div class="row">
                                            <h5>Contact information</h5>
                                            <div class="col-md-12 col-lg-12 form-outline p-2">
                                                <label>Email<span style="color:red;">*</span></label>
                                                <input type="email" name="email" id="email" placeholder="Email"
                                                    class="form-control2" title="Please enter Email.."
                                                    value="{{ !empty($address) ? $address->email : '' }}">
                                            </div>
                                            <div class="col-md-12 col-lg-12 form-outline p-2">
                                                <label>Mobile No.<span style="color:red;">*</span></label>
                                                <input type="tel" name="phone" id="phone" placeholder="Mobile No."
                                                    class="form-control2" maxlength="10"
                                                    oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 10);"
                                                    title="Please enter Mobile No."
                                                    value="{{ !empty($address) ? $address->phone : '' }}">
                                            </div>
                                            {{-- <div class="col-md-12 col-lg-12 form-outline p-2">
                                                <label>Email<span style="color:red;">*</span></label>
                                                <input type="email" name="email" id="email" placeholder="Email"
                                                    class="form-control2" title="Please enter Email.."
                                                    value="{{ !empty($address) ? $address->email : '' }}">
                                            </div> --}}
                                            
                                        </div>
                                        <div class="row mt-3">
                                            <h5>Shipping address</h5>
                                            <div class="col-md-12 col-lg-6 form-outline p-2">
                                                <label>First Name<span style="color:red;">*</span></label>
                                                <input type="text" name="first_name" id="first_name"
                                                    placeholder="First Name" class="form-control2"
                                                    value="{{ !empty($address) ? $address->firstname : '' }}">
                                            </div>
                                            <div class="col-md-12 col-lg-6 form-outline p-2">
                                                <label>Last Name<span style="color:red;">*</span></label>
                                                <input type="text" name="last_name" id="last_name"
                                                    placeholder="Last Name" class="form-control2"
                                                    value="{{ !empty($address) ? $address->lastname : '' }}">
                                            </div>
                                            <div class="col-md-12 col-lg-12 form-outline p-2">
                                                <label>Address<span style="color:red;">*</span></label>
                                                <input type="text" name="address" id="address" placeholder="Address"
                                                    class="form-control2"
                                                    value="{{ !empty($address) ? $address->address : '' }}">
                                            </div>
                                            <div class="col-md-12 col-lg-4 form-outline p-2">
                                                <label>Zip</label>
                                                <input type="text" name="pincode" id="pincode" placeholder="Zip"
                                                    class="form-control2" maxlength="6"
                                                    oninput="this.value = this.value.replace(/[^a-zA-Z0-9]/g, '').substring(0, 6);"
                                                    value="{{ !empty($address) ? $address->pincode : '' }}">
                                                <p style="color: red;" id="pin_code_error"></p>
                                                <p id="address_pin_code_error" style="color:red;"></p>
                                            </div>
                                            <div class="col-md-12 col-lg-8 form-outline p-2">
                                                <label>Apartment/Suite Number</label>
                                                <input type="text" name="locality" id="locality"
                                                    placeholder="Apartment/Suite Number" class="form-control2"
                                                    value="{{ !empty($address) ? $address->locality : '' }}">
                                            </div>
                                            <div class="col-md-12 col-lg-4 form-outline p-2">
                                                <label>City<span style="color:red;">*</span></label>
                                                <input type="text" name="city" id="city" placeholder="City"
                                                    class="form-control2"
                                                    value="{{ !empty($address) ? $address->city : '' }}">
                                            </div>
                                            <div class="col-md-12 col-lg-4 form-outline p-2">
                                                <label for="state">Province<span style="color:red;">*</span></label>
                                                <select name="state" id="state" class="form-control2" required>
                                                    
                                                    <option value="Alberta"
                                                        {{ (!empty($address) && $address->state == 'Alberta') ? 'selected' : '' }}>
                                                        Alberta</option>
                                                    <option value="British Columbia"
                                                        {{ (!empty($address) && $address->state == 'British Columbia') ? 'selected' : '' }}>
                                                        British Columbia</option>
                                                    <option value="Manitoba"
                                                        {{ (!empty($address) && $address->state == 'Manitoba') ? 'selected' : '' }}>
                                                        Manitoba</option>
                                                    <option value="New Brunswick"
                                                        {{ (!empty($address) && $address->state == 'New Brunswick') ? 'selected' : '' }}>
                                                        New Brunswick</option>
                                                    <option value="Newfoundland and Labrador"
                                                        {{ (!empty($address) && $address->state == 'Newfoundland and Labrador') ? 'selected' : '' }}>
                                                        Newfoundland and Labrador</option>
                                                    <option value="Nova Scotia"
                                                        {{ (!empty($address) && $address->state == 'Nova Scotia') ? 'selected' : '' }}>
                                                        Nova Scotia</option>
                                                    <option value="Ontario"
                                                        {{ (!empty($address) && $address->state == 'Ontario') ? 'selected' : '' }}>
                                                        Ontario</option>
                                                    <option value="Prince Edward Island"
                                                        {{ (!empty($address) && $address->state == 'Prince Edward Island') ? 'selected' : '' }}>
                                                        Prince Edward Island</option>
                                                    <option value="Quebec"
                                                        {{ (!empty($address) && $address->state == 'Quebec') ? 'selected' : '' }}>
                                                        Quebec</option>
                                                    <option value="Saskatchewan"
                                                        {{ (!empty($address) && $address->state == 'Saskatchewan') ? 'selected' : '' }}>
                                                        Saskatchewan</option>
                                                </select>
                                            </div>
                                            <div class="col-md-12 col-lg-4 form-outline p-2">
                                                <label>Country<span style="color:red;">*</span></label>
                                                <input type="text" name="country" id="country" placeholder="Country"
                                                    class="form-control2"
                                                    value="{{ !empty($address) ? $address->country : 'Canada' }}"
                                                    readOnly>
                                            </div>
                                            {{-- <div class="form-check col-12 mt-3">
                                              <input class="form-check-input" type="checkbox" value="1" name="same" id="flexCheckChecked" checked>
                                              <label class="form-check-label" for="flexCheckChecked"> Billing Address Same as Shipping Address</label>
                                            </div> --}}
                                            <!-- <button class="shopping-btn my-3" id="add-address">SUBMIT</button> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                            <!-- <div class="text-end">
                                <button type="submit" class="shopping-btn my-3" id="payment">Proceed to Payment</button>
                            </div> -->
                            <div class="row">
                                <div class="col-6 text-end">
                                    <button type="submit" class="checkout-btn text-center d-none" id="payment">
                                    Proceed to Payment
                                    </button>
                                </div>
                                <div class="col-6 text-end">
                                    <a href="{{ route('cart.index') }}" class="checkout-btn text-center cancel"
                                        style="background: #fffefe;border: 2px solid #334103;color: #334103 !important;font-weight: 800;">Cancel</a>
                                </div>
                            </div>
                    </form>                
                    <div class="col-lg-4 p-4 bg-blue-light">
                        <div class=" sidebgdonta">
                            <div class="items" style="max-height:70vh; overflow-y: auto; overflow-x: hidden;">
                                @if(!empty(Cart::session(cartSessionId())->getContent()))
                                @foreach(Cart::session(cartSessionId())->getContent() as $item)
                                <x-aside-cart-item class="row p-2 mt-2" :item="$item" />
                                @endforeach
                                @endif
                            </div>
                            <hr>
                            <div class="row p-1">
                                <div class="col-8">
                                    <p class="item-title ">Subtotal</p>
                                </div>
                                <div class="col-4 ">
                                    <p class="item-title" data-subtotal>
                                        <i class="fas fa-dollar-sign"></i>
                                        <b>{{ Cart::session(cartSessionId())->getTotal() }}</b>
                                    </p>
                                </div>
                                @if($shipping || (session('location.pincode') && Shipping::where('status',
                                1)->where('pincode', session('location.pincode'))->exists()))
                                <div class="col-8">
                                    <p class="item-title ">Shipping</p>
                                </div>
                                <div class="col-4 ">
                                    <!-- <i class="fas fa-dollar-sign"></i> -->
                                    <b style="font-size: 12px;">Calculated on Next Page</b>
                                    <!-- <b>{{ $shipping->price ?? "" }}</b> -->
                                </div>
                                @else
                                <div class="col-8">
                                    <p class="item-title ">Service Fee / Shipping Cost</p>
                                </div>
                                <div class="col-4">
                                    <!-- <i class="fas fa-dollar-sign"></i> -->
                                    <b style="font-size: 12px;">Calculated separately from order</b>
                                    <!-- <b>{{ $shipping->price ?? "" }}</b> -->
                                </div>
                                <div class="col-12 mt-3">
                                    <b style="font-size: 12px;">Delivery Information</b>
                                    <p style="font-size: 12px;">
                                        Contact Northern Leisure Rentals if outside of Prince George city limits for shipping details.
                                    </p>
                                </div>
                                @endif
                                @if($shipping && $shipping->delivery_days)
                                <div class="col-8">
                                    <p class="item-title ">Delivery Days </p>
                                </div>
                                <div class="col-4 ">
                                    <!-- <i class="fas fa-shipping-fast"></i> -->
                                    <b class="delivery-days">2-5 Days</b>
                                    <!-- <b class="delivery-days">{{ $shipping->delivery_days }}</b> -->
                                </div>
                                @endif
                            </div>
                            <hr>
                            <div>
                                <div class="row p-1">
                                    <div class="col-5">
                                        <p class="item-title h3">Total</p>
                                    </div>
                                    <div class="col-7 text-end">
                                        <p class="item-title" data-total>
                                            <i class="fas fa-dollar-sign"></i><span class="h3">{{ Cart::session(cartSessionId())->getTotal() }}</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="row p-1 outl-bg">
                                    <div class="col-12">
                                        <!-- <p class="item-title info-pt"> * Easy Return * Quality Gurantee *
                                        Secured Checkout</p> -->
                                    </div>
                                    <div class="d-flex justify-content-lg-end justify-content-md-end">
                                        <div class="text-center p-2">
                                            <a style="color:#fff;" href="{{ route('welcome') }}"
                                                class="remove-cart-btn">
                                                Continue Shopping
                                            </a>
                                        </div>
                                        <div class="text-end p-2">
                                            <button form="checkout-form" type="submit" id="payment2" class="shopping-btn d-none" style="height: 68px;">Proceed to
                                                Payment</button>
                                        </div>
                                    </div>
                                    <!-- <div class="col-4 "> <p class="item-title text-white info-pt">  </p></div>
                                        <div class="col-4 "> <p class="item-title text-white info-pt"> </p></div>  -->
                                </div>
                                <!-- <div class="row p-1  mt-4 mb-4 ">
                                        <div class=" p-2 text-center">
                                            <div class="col-12"><p class="item-title text-uppercase h6"> Express checkout</p></div>
                                        </div>
                                    </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</section>
@endsection
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->


<script>
     $(document).ready(function () {
        function checkRequiredFields() {
        const requiredFields = ['phone', 'email', 'first_name', 'last_name', 'address', 'city', 'state']; // Required fields
        let allFilled = true;

        // Check if all required fields have a value
        requiredFields.forEach(fieldId => {
            const field = document.getElementById(fieldId);
            if (!field || !field.value.trim()) {
                allFilled = false; // Set to false if any field is empty
            }
        });

        // Show or hide the Proceed to Payment button
        const paymentButton = document.getElementById('payment');
        const paymentButton2 = document.getElementById('payment2');
        if (allFilled) {
            paymentButton.classList.remove('d-none');
            paymentButton2.classList.remove('d-none');
        } else {
            paymentButton.classList.add('d-none');
            paymentButton2.classList.add('d-none');
        }
    }

    $('#email').on('blur', function () {
        var email = $(this).val();

        if (email) {
            $.ajax({
                url: '{{ route("user.getDetailsByEmail") }}', // Define your route
                type: 'GET',
                data: { email: email },
                success: function (response) {
                    if (response.status === 'success') {
                        var user = response.data;

                        // Populate input fields with user data
                        $('#first_name').val(user.addresses[0]?.firstname || '');
                        $('#last_name').val(user.addresses[0]?.lastname || '');
                        $('#phone').val(user.addresses[0]?.phone || '');
                        $('#address').val(user.addresses[0]?.address || ''); // First address
                        $('#pincode').val(user.addresses[0]?.pincode || '');
                        $('#locality').val(user.addresses[0]?.locality || '');
                        $('#city').val(user.addresses[0]?.city || '');
                        $('#state').val(user.addresses[0]?.state || '');
                        $('#country').val(user.addresses[0]?.country || 'Canada');

                        // Check required fields after populating
                        checkRequiredFields();
                    }
                },
                error: function (error) {
                    console.error(error.responseJSON.message || 'Error fetching user details');
                },
            });
        }
    });

    // Add event listener for manual input fields
    document.addEventListener('input', checkRequiredFields);
});
document.addEventListener('DOMContentLoaded', () => {
    const addAddressBtn = document.getElementById('add_address');
    // Check if button exists and is clickable
    if (addAddressBtn) 
    {
        // Add event listener to addAddressBtn
        addAddressBtn.addEventListener('click', () => {
            console.log("addAddressBtn clicked");
            const addressIdInput = document.querySelector('input[type="hidden"][name="address_id"]');
            addressIdInput.value = '';
            document.getElementById('address_div').classList.remove('d-none');
            addAddressBtn.classList.add('d-none');
            // Set required attributes for inputs in the address div
            const inputs = document.getElementById('address_div').querySelectorAll('input');
            inputs.forEach(input => {
                input.setAttribute('required', 'required');
            });
            document.getElementById('pincode').removeAttribute('required');
            document.getElementById('locality').removeAttribute('required');
            
            // Uncheck all radio buttons
            const radioButtons = document.querySelectorAll('input[type="radio"][name="address_radio"]');
            radioButtons.forEach(radio => {
                radio.checked = false;
            });
            // Hide all saved addresses
            const allSavedAddress = document.querySelectorAll('.saved-address');
            allSavedAddress.forEach(address => {
                address.classList.add('d-none');
            });
            // Show the "view all" button
            const viewAllBtn = document.querySelector('.view-all-btn');
            if (viewAllBtn) viewAllBtn.classList.remove('d-none');
        });
        // Automatically trigger the button click if $address is true
        @if($address)
            console.log("Triggering addAddressBtn click due to $address being true");
            addAddressBtn.click();
        @endif
    } else {
        console.log("addAddressBtn not found in the DOM");
    }
    // Try to trigger the first enabled radio button for address selection
    const firstEnabledRadioButton = document.querySelector('[name="address_radio"]:not(:disabled)');
    if (firstEnabledRadioButton) 
    {
        console.log("Triggering first enabled radio button");
        firstEnabledRadioButton.click();
    } 
    else 
    {
        console.log("No enabled radio button found");
    }
    // Event listener for pincode change in address input
    const pinCodeElement = document.getElementById('pincode');
    if (pinCodeElement) 
    {
        // pinCodeElement.addEventListener('change', async () => {
        //     console.log("Pincode changed");
        //    // await updateAddressByPinCode();
        // });
    }
    // Event listener for pincode change in edit address input
    const editAddressPinCodeElement = document.getElementById('address_pincode');
    if (editAddressPinCodeElement) {
        editAddressPinCodeElement.addEventListener('change', async () => {
            console.log("Edit PinCode changed");
           // await updateAddressByPinCodeForSaved();
        });
    }
});

function selectAddress(element) {
    console.log("Address Selected", element);
    const shippingDays = element.dataset.delivery;
    const shippingCharge = element.dataset.shipping;

    console.table({
        shippingDays,
        shippingCharge
    });
    const payment = document.getElementById('payment');

    const addressIdInput = document.querySelector('input[type="hidden"][name="address_id"]');
    addressIdInput.value = element.value;
    // payment.setAttribute('href', `/payment_method/${element.value}`);

    const inputs = document.getElementById('address_div').querySelectorAll('input');
    inputs.forEach(input => {
        input.removeAttribute('required');
    });

    document.getElementById('address_div').classList.add('d-none');
    document.getElementById('add_address').classList.remove('d-none');

    const allSavedAddress = document.querySelectorAll('.saved-address');
    allSavedAddress.forEach(address => {
        address.classList.remove('d-none');
    });

    const viewAllBtn = document.querySelector('.view-all-btn');
    viewAllBtn.classList.add('d-none');
}

document.addEventListener('DOMContentLoaded', (event) => {
    const viewAllBtn = document.querySelector('.view-all-btn');
    console.log(viewAllBtn);
    if(viewAllBtn){
    viewAllBtn.addEventListener('click', () => {
        const allSavedAddress = document.querySelectorAll('.saved-address');
        allSavedAddress.forEach(address => {
            address.classList.remove('d-none');
        });

        const inputs = document.getElementById('address_div').querySelectorAll('input');
        inputs.forEach(input => {
            input.removeAttribute('required');
        });

        viewAllBtn.classList.add('d-none');

        const addAddressBtn = document.getElementById('add_address');
        addAddressBtn.classList.add('d-none');

        document.getElementById('add_address').classList.remove('d-none');

        const firstSavedAddres = document.querySelector(
            '.saved-address input[type="radio"]:not(:disabled)');
        if (firstSavedAddres) {
            firstSavedAddres.click();
        }
    });
}
});
async function updateAddressByPinCodeForSaved() {
    
   // alert('mkm');
    const pinCodeElement = document.getElementById('address_pincode');
    const PINCode = pinCodeElement.value;
    const pinErrorElement = document.getElementById('address_pin_code_error');
    pinErrorElement.innerText = '';
    if (PINCode === '') {
        pinErrorElement.innerText = 'Please enter a valid PIN Code.';
    }
    // try {
    //     const response = await fetch('https://api.postalpincode.in/pincode/' + PINCode);
    //     const data = await response.json();
    //     const result = data[0];
    //     alert(result.Status);
    //     if (result.Status === 'Success') {
    //         const {
    //             State,
    //             Division,
    //             Name,
    //             District,
    //             Country,
    //         } = result.PostOffice[0];
    //         document.getElementById('address_city').value = District;
    //         document.getElementById('address_state').value = State;
    //         document.getElementById('address_country').value = Country;
    //         document.getElementById('address_locality').value = `${Name}, ${Division}`;
    //         pinErrorElement.innerText = '';
    //         // submitBtn.removeAttribute('disabled');
    //     } else {
    //       //  alert(result.Message);
    //         pinErrorElement.innerText = result.Message;
    //         document.getElementById('address_city').value = '';
    //         document.getElementById('address_state').value = '';
    //         document.getElementById('address_locality').value = '';
    //         document.getElementById('address_country').value = '';
    //     }
    // } catch (error) {
    //     throw error;
    //     //  alert('Something went wrong, Please try again');
    //     pinErrorElement.innerText = 'Something went wrong, Please try again';
    // }
}

async function updateAddressByPinCode() {
    //alert('kmkvfvfvf');
    const pinCodeElement = document.getElementById('pincode');
    const PINCode = pinCodeElement.value;
    const pinErrorElement = document.getElementById('pin_code_error');
    pinErrorElement.innerText = '';
   // const submitBtn = document.getElementById('add-address');
  //  submitBtn.setAttribute('disabled', true);
    if (PINCode === '') {
        pinErrorElement.innerText = 'Please enter a valid PIN Code.';
    }
    try {
        const response = await fetch('https://api.postalpincode.in/pincode/' + PINCode);
        const data = await response.json();
        const result = data[0];
        if (result.Status === 'Success') {
            const {
                State,
                Division,
                Name,
                District,
                Country,
            } = result.PostOffice[0];
            document.getElementById('city').value = District;
            document.getElementById('state').value = State;
            document.getElementById('country').value = Country;
            document.getElementById('locality').value = `${Name}, ${Division}`;
            pinErrorElement.innerText = '';
            //submitBtn.removeAttribute('disabled');
        } else {

            //alert('njn');
            pinErrorElement.innerText = result.Message;
            document.getElementById('city').value = '';
            document.getElementById('state').value = '';
            document.getElementById('locality').value = '';
            document.getElementById('country').value = '';
        }
    } catch (error) {
       
        pinErrorElement.innerText = 'Something went wrong, Please try again';
    }
}

</script>
@if($addresses->count())
@foreach($addresses as $address)
<div class="modal fade" id="editAddressModal-{{ $address->id }}" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form method="POST" action="{{ route('save.address') }}">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit
                        Address</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="p-2">
                        <input type="hidden" name="shipaddress_id" value="{{ $address->id }}" />
                        <div class="row">
                            <h5>Contact information</h5>
                            <div class="col-md-12 col-lg-12 form-outline p-2">
                                <label>Mobile No.<span style="color:red;">*</span></label>
                                <input type="tel" name="phone" id="phone" placeholder="Mobile No." class="form-control2"
                                    value="{{ $address->phone }}" required>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <h5>Shipping address</h5>
                            <div class="col-md-12 col-lg-6 form-outline p-2">
                                <label>First Name<span style="color:red;">*</span></label>
                                <input type="text" name="first_name" id="first_name" placeholder="First Name"
                                    class="form-control2" autocomplete="first-name" value="{{ $address->firstname }}"
                                    required>
                            </div>
                            <div class="col-md-12 col-lg-6 form-outline p-2">
                                <label>Last Name<span style="color:red;">*</span></label>
                                <input type="text" name="last_name" id="last_name" placeholder="Last Name"
                                    class="form-control2" autocomplete="last-name" value="{{ $address->lastname }}"
                                    required>
                            </div>
                            <div class="col-md-12 col-lg-12 form-outline p-2">
                                <label>Address<span style="color:red;">*</span></label>
                                <input type="text" name="address" id="address" placeholder="Address"
                                    autocomplete="street-address" class="form-control2" value="{{ $address->address }}"
                                    required>
                            </div>
                            <div class="col-md-12 col-lg-4 form-outline p-2">
                                <label>Zip</label>
                                <input type="text" name="pincode" id="address_pincode" placeholder="Zip"
                                    class="form-control2" value="{{ $address->pincode }}" 
                                    >
                                <p id="address_pin_code_error" style="color:red;"></p>
                            </div>
                            <div class="col-md-12 col-lg-8 form-outline p-2">
                                <label>Appartment/Suite Number</label>
                                <input type="text" name="locality" id="address_locality"
                                    placeholder="Appartment/Suite Number" class="form-control2"
                                    value="{{ $address->locality }}">
                            </div>
                            <div class="col-md-12 col-lg-4 form-outline p-2">
                                <label>City<span style="color:red;">*</span></label>
                                <input type="text" name="city" id="address_city" placeholder="City"
                                    class="form-control2" value="{{ $address->city }}" required>
                            </div>
                            <div class="col-md-12 col-lg-4 form-outline p-2">
                                <label for="address_state">Province<span style="color:red;">*</span></label>
                                <select name="state" id="address_state" class="form-control2" required>
                                    <option value="" disabled>Select Province</option>
                                    <option value="Alberta" {{ $address->state == 'Alberta' ? 'selected' : '' }}>Alberta
                                    </option>
                                    <option value="British Columbia"
                                        {{ $address->state == 'British Columbia' ? 'selected' : '' }}>British Columbia
                                    </option>
                                    <option value="Manitoba" {{ $address->state == 'Manitoba' ? 'selected' : '' }}>
                                        Manitoba</option>
                                    <option value="New Brunswick"
                                        {{ $address->state == 'New Brunswick' ? 'selected' : '' }}>New Brunswick
                                    </option>
                                    <option value="Newfoundland and Labrador"
                                        {{ $address->state == 'Newfoundland and Labrador' ? 'selected' : '' }}>
                                        Newfoundland and Labrador</option>
                                    <option value="Nova Scotia"
                                        {{ $address->state == 'Nova Scotia' ? 'selected' : '' }}>Nova Scotia</option>
                                    <option value="Ontario" {{ $address->state == 'Ontario' ? 'selected' : '' }}>Ontario
                                    </option>
                                    <option value="Prince Edward Island"
                                        {{ $address->state == 'Prince Edward Island' ? 'selected' : '' }}>Prince Edward
                                        Island</option>
                                    <option value="Quebec" {{ $address->state == 'Quebec' ? 'selected' : '' }}>Quebec
                                    </option>
                                    <option value="Saskatchewan"
                                        {{ $address->state == 'Saskatchewan' ? 'selected' : '' }}>Saskatchewan</option>
                                </select>
                            </div>
                            <div class="col-md-12 col-lg-4 form-outline p-2">
                                <label>Country<span style="color:red;">*</span></label>
                                <input type="text" name="country" id="address_country" placeholder="Country"
                                    class="form-control2" value="Canada" readOnly required>
                            </div>
                        </div>
                        {{-- <div class="form-check col-12 mt-3">
                                                  <input class="form-check-input" type="checkbox" value="1" name="same" id="flexCheckChecked" checked>
                                                  <label class="form-check-label" for="flexCheckChecked"> Billing Address Same as Shipping Address</label>
                                                </div> --}}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-pink" style="background: #a9788e;" data-dismiss="modal">
                        Close
                    </button>
                    <button class="btn-pink">SUBMIT</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endforeach
@endif
<script>
function remove_item(id) {
    $.ajax({
        type: 'POST',
        url: '{{  route('remove.item.from.cart') }}',
        datatype: 'json',
        data: {
            '_token': "{{ csrf_token() }}",
            'cart_id': id,
        },
        success: function(data) {
            const cartItems = document.querySelectorAll(`.aside-cart-item[data-cart-id="${id}"]`);
            cartItems.forEach(item => {
                item.remove();
            });

            let subtotalElements = document.querySelectorAll('[data-subtotal]');
            Array.from(subtotalElements).forEach(totalElement => {
                totalElement.innerHTML =
                    `<i class="fas fa-dollar-sign"></i> <strong>${data.subtotal}</strong>`;
            });

            let totalElements = document.querySelectorAll('[data-total]');
            Array.from(totalElements).forEach(totalElement => {
                totalElement.innerHTML =
                    `<i class="fas fa-dollar-sign"></i> <strong>${data.subtotal}</strong>`;
            });

            // let totalItemCountElement = document.getElementById('total_cart_items');
            // if(totalItemCountElement){
            //     totalItemCountElement.textContent = data.count;
            // }

            // let saveElement = document.getElementById('total-save');
            // if (saveElement) {
            //     saveElement.textContent = data.save_total;
            // }
            //
            // let savePercentage = document.getElementById('save-percentage');
            // if (savePercentage) {
            //     savePercentage.textContent = data.save_percentage;
            // }

            if (data.count === 0) {
                window.location.reload();
            }

            Array.from(document.querySelectorAll('#cart_no')).forEach(element => {
                element.textContent = data.count;
            });
        },
        complete: function() {},
        error: function() {},
    });
}
</script>