@extends('layouts.new-layout')
@section('title', 'Address')
@section('content')


<section class="pt-lg-0 pt-md-0">
</section>


     
      <!-- ============================================-->




      <!-- ============================================-->
      <section class="pt-lg-5 pt-md-5">

        <div class="container-fluid">
            <h3 class="py-2 mb-5 text-capitalize">Select a <span class="text-blue h3">Delivery</span> Address</h3>
        <div class="row">
        <!-- Cart Items -->
        <div class="col-lg-8 col-md-12">
        <div class="mb-3 p-3 card bg-white">
                        <div id="add_address" class="d-none">
                            <h5>Add Address +</h5>
                        </div>
                        <div class="" id="address_div">
                            <div>
                                <div class="">
                                    <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" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 10);" title="Please enter Mobile No." required="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" required="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" required="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" class="form-control2" required="required">
                                        </div>

                                        <div class="col-md-12 col-lg-4 form-outline p-2">
                                            <label>Zip<span style="color:red;">*</span></label>
                                            <input type="text" name="pincode" id="pincode" placeholder="Zip" class="form-control2" maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 6);" required="required">
                                            <p style="color: red;" id="pin_code_error"></p>
                                        </div>

                                        <div class="col-md-12 col-lg-8 form-outline p-2">
                                            <label>Locality</label>
                                            <input type="text" name="locality" id="locality" placeholder="Apartment, suite, etc. (optional)" class="form-control2" required="required">
                                        </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" readonly="" required="required">
                                        </div>

                                        <div class="col-md-12 col-lg-4 form-outline p-2">
                                            <label>State<span style="color:red;">*</span></label>
                                            <input type="text" name="state" id="state" placeholder="State" class="form-control2" readonly="" required="required">
                                        </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="India" readonly="" required="required">
                                        </div>

                                    </div>
                                    


                                    <button class="shopping-btn mt-3" id="add-address">SUBMIT</button>

                                </div>
                            </div>
                        </div>
                        </div>
                        <div class="text-end ">
                        <button type="submit" class="shopping-btn my-3" id="payment">Proceed to Payment</button>
                    </div>
                    
                    </div>

        <!-- Cart Summary -->
        <div class="col-md-12 col-lg-4 ">
                        <div class="p-4 bg-blue-light">
                        
                        <div class="items" style="max-height:70vh; overflow-y: auto; overflow-x: hidden;">
                                                                                                <div class="position-relative aside-cart-item row p-2 mt-2" data-cart-id="3143">
    <div class="col-3">
        <img class="object-scale-down" alt="AXE Intense Perfume's Image" src="/new-assets/img/gallery/upload.webp" width="60" height="60" data-max-width="60" data-max-height="80" style="border-radius:5px;">
    </div>
    <div class="col-5">
        <p class="item-title" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
        Softub
            <br>
            <small class="item-title">
                Qty. :<span>1</span>
            </small>
        </p>
    </div>
    <div class="col-4 ">
        <p class="item-title"><i class="fas fa-dollar-sign"></i>
            <b>70</b>
        </p>
    </div>
    <button class="border-0 cart-trash position-absolute top-0 end-0 w-auto" onclick="remove_item('3143')"><i class="fa fa-trash green-text" aria-hidden="true"></i>
    </button>
</div>
<div class="position-relative aside-cart-item row p-2 mt-2" data-cart-id="3641">
    <div class="col-3">
        <img class="object-scale-down" alt="Pure Cotton Stretchable Suit's Image" src="/new-assets/img/gallery/upload.webp" width="60" height="60" data-max-width="60" data-max-height="80" style="border-radius:5px;">
    </div>
    <div class="col-5">
        <p class="item-title" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
        Softub
            <br>
            <small class="item-title">
                Qty. :<span>1</span>
            </small>
        </p>
    </div>
    <div class="col-4 ">
        <p class="item-title"><i class="fas fa-dollar-sign"></i>
            <b>1050</b>
        </p>
    </div>
    <button class="border-0 cart-trash position-absolute top-0 end-0 w-auto" onclick="remove_item('3641')"><i class="fa fa-trash green-text" aria-hidden="true"></i>
    </button>
</div>
                                                                                    </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>1714</b>
                                </p>
                            </div>
                                                            <div class="col-8">
                                    <p class="item-title ">Shipping</p>
                                </div>
                                <div class="col-4 ">
                                    <!-- <i class="fas fa-rupee-sign"></i> -->
                                    <b style="font-size: 12px;">Calculated on Next Page</b>
                                    <!-- <b>150</b> -->
                                </div>
                                                                                        <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">5</b> -->
                                </div>
                                                    </div>
                        <hr>
                        <div>
                            <div class="row p-1">
                                <div class="col-8">
                                    <p class="item-title h3">Total</p>
                                </div>
                                <div class="col-4 ">
                                    <p class="item-title" data-total="">
                                        <span class="h3"><i class="fas fa-dollar-sign"></i> 1714</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="dresses" class="remove-cart-btn">
                                            Continue Shopping
                                        </a>
                                    </div>
                                    <div class="text-center p-2">
                                        <a form="checkout-form" href="payment-method" type="submit" class="shopping-btn">Proceed to Payment</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>               
    </div>
</div>
        </div>
        <!-- end of .container-->
      </section>
      <!-- ============================================-->
@endsection