<?php
include 'includes/header.php';
$page = 'home';
?>

<main>

    <!-- sec-1 -->
    <section class="inner-banner">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                    <div class="title">
                        <h3>Checkout</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- sec-1 -->

    <section class="section-checkout">
        <div class="container">
            <div class="row justify-content-around">
                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                    <div class="checkout-form">
                        <form action="javascript:;" method="post">
                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                    <div class="form-head">
                                        <div class="row">
                                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                                <h5 class="form-h">Billing details</h5>
                                            </div>
                                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                                <p class="form-p">Returning User? <a href="login.php" class="signup-a">
                                                        Log In here</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                    <div class="form-group">
                                        <label for="">First Name</label>
                                        <input type="text" class="form-control" placeholder="First Name" required>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                    <div class="form-group">
                                        <label for="">Last Name</label>
                                        <input type="text" class="form-control" placeholder="Last Name" required>
                                    </div>
                                </div>

                                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                    <div class="form-group">
                                        <label for="">Phone#</label>
                                        <input type="text" class="form-control" placeholder="+123456789"
                                            required>
                                    </div>
                                </div>

                                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                    <div class="form-group">
                                        <label for="">Email Address</label>
                                        <input type="email" class="form-control" placeholder="@gmail.com"
                                            required>
                                    </div>
                                </div>

                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                    <div class="form-group">
                                        <label for="">Mailing Address</label>
                                        <input type="text" class="form-control"
                                            placeholder="Mailing Address" required>
                                    </div>
                                </div>

                                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                    <div class="form-group">
                                        <label for="">State</label>
                                        <select class="form-select" aria-label="Default select example">
                                            <option selected>Select State</option>
                                            <option value="AL">Alabama</option>
                                            <option value="AK">Alaska</option>
                                            <option value="AZ">Arizona</option>
                                            <option value="AR">Arkansas</option>
                                            <option value="CA">California</option>
                                            <option value="CO">Colorado</option>
                                            <option value="CT">Connecticut</option>
                                            <option value="DE">Delaware</option>
                                            <option value="DC">District Of Columbia</option>
                                            <option value="FL">Florida</option>
                                            <option value="GA">Georgia</option>
                                            <option value="HI">Hawaii</option>
                                            <option value="ID">Idaho</option>
                                            <option value="IL">Illinois</option>
                                            <option value="IN">Indiana</option>
                                            <option value="IA">Iowa</option>
                                            <option value="KS">Kansas</option>
                                            <option value="KY">Kentucky</option>
                                            <option value="LA">Louisiana</option>
                                            <option value="ME">Maine</option>
                                            <option value="MD">Maryland</option>
                                            <option value="MA">Massachusetts</option>
                                            <option value="MI">Michigan</option>
                                            <option value="MN">Minnesota</option>
                                            <option value="MS">Mississippi</option>
                                            <option value="MO">Missouri</option>
                                            <option value="MT">Montana</option>
                                            <option value="NE">Nebraska</option>
                                            <option value="NV">Nevada</option>
                                            <option value="NH">New Hampshire</option>
                                            <option value="NJ">New Jersey</option>
                                            <option value="NM">New Mexico</option>
                                            <option value="NY">New York</option>
                                            <option value="NC">North Carolina</option>
                                            <option value="ND">North Dakota</option>
                                            <option value="OH">Ohio</option>
                                            <option value="OK">Oklahoma</option>
                                            <option value="OR">Oregon</option>
                                            <option value="PA">Pennsylvania</option>
                                            <option value="RI">Rhode Island</option>
                                            <option value="SC">South Carolina</option>
                                            <option value="SD">South Dakota</option>
                                            <option value="TN">Tennessee</option>
                                            <option value="TX">Texas</option>
                                            <option value="UT">Utah</option>
                                            <option value="VT">Vermont</option>
                                            <option value="VA">Virginia</option>
                                            <option value="WA">Washington</option>
                                            <option value="WV">West Virginia</option>
                                            <option value="WI">Wisconsin</option>
                                            <option value="WY">Wyoming</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                    <div class="form-group">
                                        <label for="">Zip Code</label>
                                        <input type="text" class="form-control" placeholder="60659" required>
                                    </div>
                                </div>

                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                    <div class="form-group">
                                        <label for="">Shipping Address</label>
                                        <input type="text" class="form-control" placeholder="" required>
                                    </div>
                                </div>

                                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                    <div class="form-group">
                                        <label for="">State</label>
                                        <select class="form-select" aria-label="Default select example">
                                            <option selected></option>
                                            <option value="AL">Alabama</option>
                                            <option value="AK">Alaska</option>
                                            <option value="AZ">Arizona</option>
                                            <option value="AR">Arkansas</option>
                                            <option value="CA">California</option>
                                            <option value="CO">Colorado</option>
                                            <option value="CT">Connecticut</option>
                                            <option value="DE">Delaware</option>
                                            <option value="DC">District Of Columbia</option>
                                            <option value="FL">Florida</option>
                                            <option value="GA">Georgia</option>
                                            <option value="HI">Hawaii</option>
                                            <option value="ID">Idaho</option>
                                            <option value="IL">Illinois</option>
                                            <option value="IN">Indiana</option>
                                            <option value="IA">Iowa</option>
                                            <option value="KS">Kansas</option>
                                            <option value="KY">Kentucky</option>
                                            <option value="LA">Louisiana</option>
                                            <option value="ME">Maine</option>
                                            <option value="MD">Maryland</option>
                                            <option value="MA">Massachusetts</option>
                                            <option value="MI">Michigan</option>
                                            <option value="MN">Minnesota</option>
                                            <option value="MS">Mississippi</option>
                                            <option value="MO">Missouri</option>
                                            <option value="MT">Montana</option>
                                            <option value="NE">Nebraska</option>
                                            <option value="NV">Nevada</option>
                                            <option value="NH">New Hampshire</option>
                                            <option value="NJ">New Jersey</option>
                                            <option value="NM">New Mexico</option>
                                            <option value="NY">New York</option>
                                            <option value="NC">North Carolina</option>
                                            <option value="ND">North Dakota</option>
                                            <option value="OH">Ohio</option>
                                            <option value="OK">Oklahoma</option>
                                            <option value="OR">Oregon</option>
                                            <option value="PA">Pennsylvania</option>
                                            <option value="RI">Rhode Island</option>
                                            <option value="SC">South Carolina</option>
                                            <option value="SD">South Dakota</option>
                                            <option value="TN">Tennessee</option>
                                            <option value="TX">Texas</option>
                                            <option value="UT">Utah</option>
                                            <option value="VT">Vermont</option>
                                            <option value="VA">Virginia</option>
                                            <option value="WA">Washington</option>
                                            <option value="WV">West Virginia</option>
                                            <option value="WI">Wisconsin</option>
                                            <option value="WY">Wyoming</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                                    <div class="form-group">
                                        <label for="">Zip Code</label>
                                        <input type="text" class="form-control" placeholder="" required>
                                    </div>
                                </div>

                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                        <label class="form-check-label" for="flexCheckDefault">
                                            Mailing and Shipping address are the same when checking the box,
                                            the mailing address will auto
                                            populate in the shipping address fields.
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5">
                    <div class="checkout-form">
                        <div class="row">
                            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                <div class="form-head">
                                    <div class="row">
                                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                            <h5 class="form-h">Your order</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                <div class="order-details">
                                    <ul>
                                        <li>Product <strong>Subtotal</strong></li>
                                        <li>
                                            <div class="item-list">
                                                <div class="main-box">
                                                    <div class="product-card">
                                                        <div class="main-img">
                                                            <img src="images/logo-black.jpg" alt="img"
                                                                class="img-fluid">
                                                        </div>
                                                        <div class="desc">
                                                            <ul>
                                                                <li>Abc</li>
                                                                <li><i class="fa-sharp fa-solid fa-tag"></i>$500</li>
                                                                <li><i class="fa-sharp fa-solid fa-xmark"></i>20</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <p class="pd-total">$123</p>
                                                </div>

                                                <div class="main-box">
                                                    <div class="product-card">
                                                        <div class="main-img">
                                                            <img src="images/logo-black.jpg" alt="img"
                                                                class="img-fluid">
                                                        </div>
                                                        <div class="desc">
                                                            <ul>
                                                                <li>Abc</li>
                                                                <li><i class="fa-sharp fa-solid fa-tag"></i>$500</li>
                                                                <li><i class="fa-sharp fa-solid fa-xmark"></i>20</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <p class="pd-total">$123</p>
                                                </div>

                                                <div class="main-box">
                                                    <div class="product-card">
                                                        <div class="main-img">
                                                            <img src="images/logo-black.jpg" alt="img"
                                                                class="img-fluid">
                                                        </div>
                                                        <div class="desc">
                                                            <ul>
                                                                <li>Abc</li>
                                                                <li><i class="fa-sharp fa-solid fa-tag"></i>$500</li>
                                                                <li><i class="fa-sharp fa-solid fa-xmark"></i>20</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <p class="pd-total">$123</p>
                                                </div>
                                            </div>
                                        </li>
                                        <li> Total <strong>$123</strong></li>
                                    </ul>
                                </div>
                            </div>

                            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                <div class="form-head">
                                    <div class="row">
                                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                            <h5 class="form-h">payment Method</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                <div class="payment-details">
                                    <div class="row">
                                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                            <div class="form-group">
                                                <label for="">Card Holder Name</label>
                                                <input type="text" class="form-control" placeholder="" required>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                            <div class="form-group">
                                                <label for="">Card Number</label>
                                                <div class="form-group">
                                                    <input type="text" class="form-control"
                                                        placeholder="**** **** **** ****" required>
                                                    <ul class="card-imgs">
                                                        <li><img src="images/visa.png" alt="img" class="img-fluid">
                                                        </li>
                                                        <li><img src="images/master.png" alt="img" class="img-fluid">
                                                        </li>
                                                        <li><img src="images/amex.png" alt="img" class="img-fluid">
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 col-xxl-4">
                                            <div class="form-group">
                                                <label for="">Expiration</label>
                                                <input type="text" class="form-control" placeholder="03/23" required>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 col-xxl-4">
                                            <div class="form-group">
                                                <label for="">CVC</label>
                                                <input type="text" class="form-control" placeholder="534" required>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 col-xxl-4">
                                            <div class="form-group">
                                                <label for="">Zip Code</label>
                                                <input type="text" class="form-control" placeholder="60659" required>
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                            <div class="btn-box fm-btn">
                                                <button type="button" name="next"
                                                    class="btn btn-primary hvr-bounce-to-right btn-wh action-button">Pay
                                                    now</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<?php
include 'includes/footer.php';
$page = 'home';
?>