@extends('layouts.new-layout')
@section('title', 'Payment Method')
@section('content')
<section class="pt-lg-0 pt-md-0">
</section>  
    <!-- ============================================-->
    <section class="padding-top">
        <div class="container-fluid">
            <h3 class="py-2 mb-5 text-capitalize">Shipping Detail <span class="text-blue h3">And Payment</span> Method</h3>
        <div class="row">
        <!-- Cart Items -->
        <div class="col-lg-8 col-sm-12">
            <div class="">
                <div class="col-12 border p-3">
                    <div class="row ">
                        <div class="col-2">
                            Name
                        </div>
                        <div class="col-7">
                            <p>Joy (1234567890)</p>
                        </div>
                        <div class="col-3">
                            <a href="" class="text-blue">Change</a>
                        </div>
                        <hr>
                    </div>
                    <div class="row ">
                        <div class="col-2">
                            Ship To
                        </div>
                        <div class="col-7">
                            A-10 third floor, South Delhi, Delhi
                            , India, 110024
                        </div>
                        <div class="col-3">
                            <a href="" class="text-blue">Change</a>
                        </div>
                    </div>
                </div>
            </div>
            <div id="accordion" class="mt-4">
                <div class="card" style="margin-top: 10px;">
                    <div class="card-header" id="headingOne">
                        <h5 class="mb-0">
                            <button class="btn btn-link ps-0" style="color: #000; text-decoration:none;" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                <i class="fa fa-solid fa-angle-down"></i> Add Gift Card or Promo Code
                            </button>
                        </h5>
                    </div>
                    <div id="collapseOne" class="fade collapse show" aria-labelledby="headingOne" data-parent="#accordion" style="">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-5 col-lg-5 col-6">
                                    <input type="text" class="form-control2" name="promo_code" id="promo_code" placeholder="Enter code">
                                </div>
                                <div class="col-md-3 col-lg-3 col-6">
                                    <button type="button" class="checkout-btn text-center mt-0 " id="code_apply" onclick="apply_code()">Apply
                                    </button>
                                </div>
                                <div class="col-4">
                                    <p style="color: red" id="promo_error"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                <div id="applied_div" class="d-none">
                    <div class="card">
                        <div class="row">
                            <div class="col-8">
                                <p id="promo_line" style="color: #a1c11f;margin-top:30px">Your Promo Code ABCD
                                    is applied!!!</p>
                            </div>
                            <div class="col-4">
                                <button class="checkout-btn text-center" style="background: #fffefe;border: 2px solid #334103;color: #334103 !important;font-weight: 800;" onclick="location.reload()">Remove
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-3 mb-3 d-none">
                    <h5>Shipping method</h5>
                    <div class="col-12 border mt-2">
                        <div class="row mt-3">
                            <div class="col-2">
                                <input class="form-check-input d-none" type="checkbox" value="561" checked="" name="address_radio" id="flexCheckChecked">
                            </div>
                            <div class="col-7">
                                <p>Standard Shipping ( 1- 5 business days)</p>
                            </div>
                            <div class="col-3">
                                <p>$ <b>150</b></p>
                            </div>
                        </div>
                    </div>
                </div>
                <form id="contactForm">
                    <h5 class="pt-4">Payment Method</h5>
                    <div class="border p-3">
                        <div class="col-12">
                            <div class="d-flex mt-2">
                                <div class="me-3">
                                    <input class="form-check-input " type="radio" value="PAID" onclick="document.getElementById('pay_now').innerText = 'Pay now';" checked="" name="payment_type" id="flexCheckChecked">
                                </div>
                                <div class="">
                                    <p>Online</p>
                                </div>
                                <hr>
                            </div>

                                                        </div>
                    </div>

                    <h5 class="pt-4">Billing address</h5>
                    <div class="border p-3 mt-2">
                        <div class="col-12">
                            <div class="d-flex mt-2">
                                <div class="me-3">
                                    <input class="form-check-input " type="radio" value="1" checked="" name="address_radio" id="flexCheckChecked" onclick="radio_click(this)">
                                </div>
                                <div class="">
                                    <p>Same as shipping address</p>
                                </div>
                                <hr>
                            </div>

                            <div class="d-flex">
                                <div class="me-3">
                                    <input class="form-check-input " type="radio" value="2" name="address_radio" id="flexCheckChecked" onclick="radio_click(this)">
                                </div>
                                <div class="">
                                    <p>Use a different billing address</p>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="d-none" id="address_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">
                                </div>
                            </div>

                            <div class="row mt-3">
                                <h5>Billing 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">
                                </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">
                                </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">
                                </div>

                                <div class="col-md-12 col-lg-6 form-outline p-2">
                                    <label>Locality</label>
                                    <input type="text" name="locality" id="locality" placeholder="Apartment, suite, etc. (optional)" class="form-control2">
                                </div>

                                <div class="col-md-12 col-lg-6 form-outline p-2">
                                    <label>City<span style="color:red;">*</span></label>
                                    <input type="text" name="city" id="city" placeholder="City" class="form-control2">
                                </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">
                                </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">
                                </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" onkeyup="autofillAddress()" placeholder="Zip" class="form-control2">
                                    <p style="color:red;" id="pincode_error"></p>
                                </div>

                            </div>

                        </div>
                    </div>

                    <div class="row sticky-bottom">
                        <div class="col-6 text-end">
                            <button type="button" class="checkout-btn text-center" onclick="order()" id="pay_now">
                                PAY NOW
                            </button>
                        </div>
                        <div class="col-6 text-end">
                            <a href="" class="remove-cart-btn mt-3 w-100 text-center">Cancel</a>
                        </div>
                    </div>
                </form>
            </div>
        <!-- Cart Summary -->
        <div class="col-md-12 col-lg-4 mt-lg-0 mt-md-0 mt-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">3w
        <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 "><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-dollar-sign"></i>
                                <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>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">
                                        <button form="checkout-form" type="submit" class="shopping-btn" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Proceed to Payment</button>
                                    </div>
                                </div>
                            </div>

                            <div class="text-center">  <img style="width:75px;" src="/new-assets/img/paypal.png" ><img style="width:55px;" src="/new-assets/img/visa.png" ><img style="margin-left:10px;width:55px;" src="/new-assets/img/paytm.png" ><img style="width:75px;" src="/new-assets/img/applepay.png" >
                            </div>

                        </div>

                    </div>
                </div>
                        
    </div>
</div>
      
        </div>
        <!-- end of .container-->

      </section>
      <!-- ============================================-->
<!-- ==============Modal=================-->
      <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-body text-center p-4">
      <button type="button" class="btn-close1" data-bs-dismiss="modal" aria-label="Close">
      <i class="fa fa-times" aria-hidden="true"></i>
      </button>
      <i class="fa fa-check check" aria-hidden="true"></i>
      <p style="font-size: 18px;" class="mb-1">Hey <strong>Anup Srivastava</strong>,</p>
     <h1>Your <span class="text-blue h1">Order is</span> Confirmed!</h1>
     <p>We'll send you a shipping confirmation email as soon as your order ships.</p>
     <p><a class="btn-blue5" href="tracker">Track Order</a></p>
     <img class="img-fluid  w-75" alt="" src="/new-assets/img/order.jpg">
    </div>
     
    </div>
  </div>
</div>
<!-- ============================================-->

@endsection