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

<main>

    <section class="inner-banner-wrap">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
                    <div class="content">
                        <h2>Checkout</h2>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
                    <div class="content">
                        <ul>
                            <li>
                                <a href="javascript:;">Home</a>
                            </li>
                            <li>
                                <i class="fa-solid fa-pipe"></i>
                            </li>
                            <li>
                                <a href="javascript:;">Checkout</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <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">
                        <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 align-items-center">
                                        <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>
                                </div>
                            </div>
                        </div>
                        <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="input-main">
                                        <label class="custom-label">FULL NAME</label>
                                        <input type="text" class="form-control" id="fname" placeholder="" name="name">
                                    </div>
                                </div>
                                
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                    <div class="input-main">
                                        <label class="custom-label">EMAIL</label>
                                        <input type="email" class="form-control" id="femail" name="email"
                                            placeholder="">
                                    </div>
                                </div>

                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                    <div class="input-main">
                                        <label class="custom-label">country</label>
                                        <select class="form-select" id="fcountry" name="country"
                                            aria-label="Default select example">
                                            <option selected="true" disabled>selected</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                    <div class="input-main">
                                        <label class="custom-label">State</label>
                                        <select class="form-select" id="fState" name="country"
                                            aria-label="Default select example">
                                            <option selected="true" disabled>selected</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                    <div class="input-main">
                                        <label class="custom-label">City</label>
                                        <select class="form-select" id="City" name="country"
                                            aria-label="Default select example">
                                            <option selected="true" disabled>selected</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                    <div class="input-main">
                                        <label class="custom-label">phone number</label>
                                        <input type="number" class="form-control" id="fphoneno" name="phone_no"
                                            placeholder="">
                                    </div>
                                </div>

                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                    <div class="input-main">
                                        <label class="custom-label">zip code</label>
                                        <input type="text  " class="form-control" id="fzipcode" name="zip_code"
                                            placeholder="">
                                    </div>
                                </div>

                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                    <div class="input-main">
                                        <label class="custom-label">Address</label>
                                        <textarea rows="3" type="text" name="address" id="faddress"
                                            class="form-control"></textarea>
                                    </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">
                                        <a href="javascript:;" class="btn btn-primary btn-wh">
                                            Proceed to pay
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
                    <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/pd-1.webp" alt="img" class="img-fluid">
                                                        </div>
                                                        <div class="desc">
                                                            <ul>
                                                                <li>Terra baking powder</li>
                                                                <li><span>Color:</span> Red</li>
                                                                <li><span>Size:</span> 50ML</li>
                                                                <li><span>Quantity:</span> <i class="fa-sharp fa-solid fa-xmark"></i>20</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <p class="pd-total">$488.00</p>
                                                </div>
                                                <div class="main-box">
                                                    <div class="product-card">
                                                        <div class="main-img">
                                                            <img src="images/pd-1.webp" alt="img" class="img-fluid">
                                                        </div>
                                                        <div class="desc">
                                                            <ul>
                                                                <li>Terra baking powder</li>
                                                                <li><span>Color:</span> Red</li>
                                                                <li><span>Size:</span> 50ML</li>
                                                                <li><span>Quantity:</span> <i class="fa-sharp fa-solid fa-xmark"></i>20</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <p class="pd-total">$488.00</p>
                                                </div>
                                                <div class="main-box">
                                                    <div class="product-card">
                                                        <div class="main-img">
                                                            <img src="images/pd-1.webp" alt="img" class="img-fluid">
                                                        </div>
                                                        <div class="desc">
                                                            <ul>
                                                                <li>Terra baking powder</li>
                                                                <li><span>Color:</span> Red</li>
                                                                <li><span>Size:</span> 50ML</li>
                                                                <li><span>Quantity:</span> <i class="fa-sharp fa-solid fa-xmark"></i>20</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <p class="pd-total">$488.00</p>
                                                </div>
                                            </div>
                                        </li>
                                        <li> Total <strong>$488.00</strong></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<?php
include 'includes/footer.php';
$page = 'home';
?>