@extends('Layout.master')
@section('content')
<style>
    .shape-1 {
        position: absolute;
        left: 120px;
        top: 120px;
        background-image: url("{{ asset('assets/images/shape/shape-176.png') }}");
        transform: rotate(0deg);
    }

    .shape-2 {
        position: absolute;
        top: 180px;
        right: 170px;
        background-image: url("{{ asset('assets/images/shape/shape-56.png') }}");
        animation: float-bob-y 2s infinite;
    }

    .shape-3 {
        position: absolute;
        left: 0;
        bottom: 0;
        background-image: url("{{ asset('assets/images/shape/shape-189.png') }}");
    }
</style>
<!-- Page Title -->
<section class="page-title p_relative centred">
    <div class="pattern-layer">
        <div class="shape-1"></div>
        <div class="shape-2"></div>
        <div class="shape-3"></div>
    </div>
    <div class="auto-container">
        <div class="content-box">
            <h1 class="d_block fs_60 lh_70 fw_bold mb_10">Checkout Page</h1>
            <ul class="bread-crumb p_relative d_block mb_8 clearfix">
                <li class="p_relative d_iblock fs_16 lh_25 fw_sbold font_family_inte mr_20"><a href="index.html">Home</a></li>
                <li class="current p_relative d_iblock fs_16 lh_25 fw_sbold font_family_inte">Checkout Page</li>
            </ul>
        </div>
    </div>
</section>
<!-- End Page Title -->

<!-- checkout-section -->
<section class="checkout-section p_relative pt_140 pb_150">
    <div class="container">
        <div class="coupon-box p_relative d_block mb_40 pl_30 pt_19 pr_30 pb_17 b_radius_5">
            <h6 class="d_block fs_16 fw_medium">Have a Coupon? <a href="checkout.html" class="d_iblock">Click here to enter your code</a></h6>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-12 col-sm-12 left-column">
                <div class="inner-box">
                    <div class="billing-info p_relative d_block mb_55">
                        <h4 class="sub-title d_block fs_30 lh_40 mb_25">Billing Details</h4>
                        <form action="#" method="post" class="billing-form p_relative d_block">
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                    <label class="p_relative d_block fs_16 font_family_poppins color_black mb_2">First Name*</label>
                                    <div class="field-input">
                                        <input type="text" name="first_name">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                    <label class="p_relative d_block fs_16 font_family_poppins color_black mb_2">Last Name*</label>
                                    <div class="field-input">
                                        <input type="text" name="last_name">
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                    <label class="p_relative d_block fs_16 font_family_poppins color_black mb_2">Company Name*</label>
                                    <div class="field-input">
                                        <input type="text" name="company_name">
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                    <label class="p_relative d_block fs_16 font_family_poppins color_black mb_2">Email Address*</label>
                                    <div class="field-input">
                                        <input type="email" name="email">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                    <label class="p_relative d_block fs_16 font_family_poppins color_black mb_2">Phone Number*</label>
                                    <div class="field-input">
                                        <input type="text" name="phone">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                    <label class="p_relative d_block fs_16 font_family_poppins color_black mb_2">Country*</label>
                                    <div class="select-column select-box">
                                        <select class="selectmenu" id="ui-id-1">
                                            <option selected="selected">Select Option</option>
                                            <option>United State</option>
                                            <option>Australia</option>
                                            <option>Canada</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                    <label class="p_relative d_block fs_16 font_family_poppins color_black mb_2">Address*</label>
                                    <div class="field-input">
                                        <input type="text" name="address" class="address">
                                        <input type="text" name="address">
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                    <label class="p_relative d_block fs_16 font_family_poppins color_black mb_2">Town/City*</label>
                                    <div class="field-input">
                                        <input type="text" name="town_city">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                    <label class="p_relative d_block fs_16 font_family_poppins color_black mb_2">State*</label>
                                    <div class="select-column select-box">
                                        <select class="selectmenu" id="ui-id-2">
                                            <option selected="selected">Select Option</option>
                                            <option>United State</option>
                                            <option>Australia</option>
                                            <option>Canada</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                    <label class="p_relative d_block fs_16 font_family_poppins color_black mb_2">Zip Code*</label>
                                    <div class="field-input">
                                        <input type="text" name="zip">
                                    </div>
                                </div>
                                <div class="form-group col-lg-12 col-md-12 col-sm-12">
                                    <div class="create-acc p_relative d_block mt_3">
                                        <div class="check-box">
                                            <input class="check" type="checkbox" id="checkbox">
                                            <label for="checkbox">Create an Account?</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="additional-info">
                        <div class="note-book p_relative d_block">
                            <label class="p_relative d_block fs_16 font_family_poppins color_black mb_2">Order Notes</label>
                            <textarea name="note_box" placeholder="Notes about your order, e.g. special notes for your delivery"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12 col-sm-12 right-column">
                <div class="inner-box">
                    <div class="order-info p_relative d_block pt_45 pr_50 pb_25 pl_50 mb_50">
                        <h4 class="sub-title d_block fs_24 lh_30 mb_25">Your Order</h4>
                        <div class="order-product">
                            <ul class="order-list clearfix">
                                <li class="p_relative d_block clearfix pt_17 pb_16">
                                    <h6 class="fs_15 lh_20 pull-left fw_normal">Lenovo IdeaPad Slim 250U <br />15.6" Laptop</h6>
                                    <span class="p_relative d_block pull-right fs_15 fw_medium font_family_inter color_black">$70.30</span>
                                </li>
                                <li class="p_relative d_block clearfix pt_17 pb_16">
                                    <h6 class="fs_15 lh_20 pull-left fw_normal">Dell Optiplex 3060 Core i5 <br />8th Gen</h6>
                                    <span class="p_relative d_block pull-right fs_15 fw_medium font_family_inter color_black">$25.50</span>
                                </li>
                                <li class="p_relative d_block clearfix pt_17 pb_16">
                                    <h6 class="fs_15 lh_20 pull-left fw_normal">Apple TV 4K 32GB 6th Gen <br />TV Box</h6>
                                    <span class="p_relative d_block pull-right fs_15 fw_medium font_family_inter color_black">$90.00</span>
                                </li>
                                <li class="sub-total p_relative d_block clearfix pt_17 pb_16">
                                    <h6 class="fs_16 fw_medium lh_20 pull-left">Sub Total</h6>
                                    <span class="p_relative d_block pull-right fs_15 fw_medium font_family_inter color_black light">$150.00</span>
                                </li>
                                <li class="order-total p_relative d_block clearfix pt_17 pb_16">
                                    <h6 class="fs_16 fw_bold lh_20 pull-left">Order Total</h6>
                                    <span class="p_relative d_block pull-right fs_15 fw_bold font_family_inter color_black">$150.00</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="payment-info p_relative d_block pt_45 pr_50 pb_50 pl_50">
                        <h4 class="sub-title d_block fs_24 lh_30 mb_40">Payment</h4>
                        <div class="payment-inner p_relative d_block pt_25 pr_30 pb_20 pl_30 mb_30">
                            <div class="option-block pb_12 mb_13">
                                <div class="check-box">
                                    <input class="check" type="checkbox" id="checkbox2" checked>
                                    <label for="checkbox2" class="fs_16 fw_medium font_family_inter color_black">Direct Bank Transfer</label>
                                </div>
                                <p class="fs_14 font_family_poppins pl_30">Please send a check to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</p>
                            </div>
                            <div class="option-block clearfix">
                                <div class="check-box pull-left mr_25">
                                    <input class="check" type="checkbox" id="checkbox3">
                                    <label for="checkbox3" class="fs_16 fw_medium font_family_inter color_black">Paypal</label>
                                </div>
                                <div class="link pull-left">
                                    <a href="checkout.html" class="fs_16 fw_medium font_family_inter color_black">What is Paypal?</a>
                                </div>
                            </div>
                        </div>
                        <div class="btn-link">
                            <a href="checkout.html" class="theme-btn theme-btn-eight">Place Your Order <i class="icon-4"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- checkout-section end -->
@endsection