{% extends 'base.html' %}
{% load static %}
{% block content %}

     <!-- Breadcrumb Start-->
    <section class="breadcrumb"><img class="img-fluid img-src" src="../assets/images/herointro/3.webp" alt="">
        <div class="container">
            <div class="grid grid-cols-12">
                <div class="col-span-12">
                    <div class="breadcrumb-contain">
                        <h1 data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">checkout</h1>
                        <ul data-sal-delay="200" data-sal="slide-up" data-sal-duration="800">
                            <li><a href="index.html">Home<i class="fa fa-angle-right"></i></a></li>
                            <li><a href="contact.html">checkout</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Breadcrumb end-->
    <!-- checkout start-->
    <section class="cdx-checkout space-py-100">
        <div class="container">
            <div class="grid grid-cols-12 cdx-gap">
                <div class="col-span-12 lg:col-span-5">
                    <div class="card">
                        <div class="card-header">
                            <div>
                                <h4>Billing Address</h4>
                                <p><a class="font-primary" href="login.html">Login </a>or<a class="font-primary" href="register.html">Register</a>for faster payment.</p>
                            </div>
                        </div>
                        <div class="card-body">
                            <form class="form-theme">
                                <div class="form-group">
                                    <div class="group-small">
                                        <div>
                                            <label class="form-label" for="fname">First name</label>
                                            <input class="form-control" id="fname" type="text" placeholder="First name">
                                        </div>
                                        <div>
                                            <label class="form-label" for="lname">Last name</label>
                                            <input class="form-control" id="lname" type="text" placeholder="Last name">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Country</label>
                                    <select class="form-select" name="conuntry">
                      <option value="Afghanistan">Afghanistan</option>
                      <option value="Bahrain">Bahrain</option>
                      <option value="France">France</option>
                      <option value="Mauritania">Mauritania</option>
                    </select>
                                </div>
                                <div class="form-group">
                                    <div class="group-small">
                                        <div>
                                            <label class="form-label">State</label>
                                            <select class="form-select" name="state">
                          <option value="Alabama">Alabama                         </option>
                          <option value="California">California</option>
                          <option value="Delaware"> Delaware</option>
                          <option value="Florida"> Florida</option>
                          <option value="Georgia"> Georgia</option>
                          <option value="Wyoming"> Wyoming</option>
                        </select>
                                        </div>
                                        <div>
                                            <label class="form-label">Zip code</label>
                                            <input class="form-control" type="text">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mb-0">
                                    <label class="form-label">Address</label>
                                    <textarea class="form-control">   </textarea>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-span-12 lg:col-span-6">
                    <div class="card payment-detail">
                        <div class="card-header">
                            <h4>Payment Method </h4>
                        </div>
                        <div class="card-body">
                            <form action="#">
                                <div class="group-form">
                                    <div class="form-group">
                                        <div class="group-small payment-card">
                                            <div class="custom-chek">
                                                <input class="form-check-input" id="debitcard" type="radio" name="payment-type" value="debitcard" checked>
                                                <label for="debitcard">Debit Card</label><br>
                                            </div>
                                            <div class="custom-chek">
                                                <input class="form-check-input" id="creditcard" type="radio" name="payment-type" value="creditcard">
                                                <label for="creditcard">Credit Card</label><br>
                                            </div>
                                            <div class="custom-chek">
                                                <input class="form-check-input" id="paypal" type="radio" name="payment-type" value="paypal">
                                                <label for="paypal">PayPal</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Card Number</label>
                                    <input class="form-control" type="text" placeholder="XXXX XXXX XXXX XXXX">
                                </div>
                                <div class="form-group">
                                    <div class="form-group">
                                        <div class="group-small">
                                            <div>
                                                <label class="form-label">Month</label>
                                                <select class="form-select">
                            <option value="january">January</option>
                            <option value="february">February</option>
                            <option value="march">March</option>
                            <option value="april">April</option>
                            <option value="may">May</option>
                            <option value="june">June</option>
                            <option value="july">July</option>
                            <option value="august">August</option>
                            <option value="september">September</option>
                            <option value="october">October</option>
                            <option value="november">November</option>
                            <option value="december">December                      </option>
                          </select>
                                            </div>
                                            <div>
                                                <label class="form-label">Month</label>
                                                <select class="form-select">
                            <option value="2022">2022</option>
                            <option value="2018">2018</option>
                            <option value="2019">2019</option>
                            <option value="2020">2020</option>
                            <option value="2021">2021</option>
                            <option value="2023">2023</option>
                            <option value="2024">2024                       </option>
                          </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">CVV Code </label>
                                    <input class="form-control" type="text" placeholder="XXXX">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Name on Card</label>
                                    <input class="form-control" type="text" placeholder="Address">
                                </div>
                                <div class="form-group">
                                    <div class="form-check custom-chek">
                                        <input class="form-check-input" id="remember" type="checkbox" value="">
                                        <label class="form-check-label" for="remember">Remember this card                     </label>
                                    </div>
                                </div>
                                <div class="form-group mb-0">
                                    <button class="btn btn-primary btn-md">make a paymnet</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- checkout end-->
{% endblock %}