@extends('layouts.app')
@section('content')
    <div class="row">
        <div class="col-lg-3">
            <div class="card b mb-2">
                <div class="card-header bb">
                    <h4 class="card-title">Order Summnary</h4>
                </div>
                <div class="card-body bt">
                    <h4 class="b0">Order #65487</h4>
                </div>
                <table class="table">
                    <tbody>
                        <tr>
                            <td>Subtotal</td>
                            <td>
                                <div class="text-right text-bold">$400</div>
                            </td>
                        </tr>
                        <tr>
                            <td>Estimated Tax</td>
                            <td>
                                <div class="text-right text-bold">$1.44</div>
                            </td>
                        </tr>
                        <tr>
                            <td>Shiping</td>
                            <td>
                                <div class="text-right text-bold">$5</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="card-body">
                    <div class="clearfix">
                        <div class="float-right text-right">
                            <div class="text-bold">$406.44</div>
                            <div class="text-sm">USD</div>
                        </div>
                        <div class="float-left text-bold text-dark">ORDER TOTAL</div>
                    </div>
                </div>
                <div class="card-body">
                    <p><button class="btn btn-primary btn-block" type="button">EXPRESS CHECKOUT</button></p>
                    <small class="text-muted">* To use this method you must be registered first</small>
                </div>
            </div>
        </div>
        <div class="col-lg-9">
            <div class="container-md mx-0">
                <!-- Checkout Process-->
                <form action="#" method="post" novalidate="novalidate">
                    <div id="accordion">
                        <!-- Checkout Method-->
                        <div class="card b mb-2">
                            <div class="card-header">
                                <h4 class="card-title"><a class="text-inherit" data-toggle="collapse" data-parent="#accordion" href="#acc1collapse1">1. Checkout Method</a></h4>
                            </div>
                            <div class="collapse show" id="acc1collapse1">
                                <div class="card-body" id="collapse01">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <p><strong>REGISTER AND SAVE TIME!</strong></p>
                                            <p class="mb-0">Fast and simple check out</p>
                                            <p>Quick access to order history</p>
                                            <div class="my-3"><button class="btn btn-primary" type="button">Register</button></div>
                                            <hr class="my-4" />
                                            <button class="btn btn-secondary" type="button">Checkout as Guest</button>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <p>Already a Member?</p>
                                            </div>
                                            <div class="form-group"><input class="form-control" type="text" name="login-name" required="" placeholder="Email Address" /></div>
                                            <div class="form-group"><input class="form-control" type="text" name="login-password" required="" placeholder="Password" /></div>
                                            <p><a href="#">Forgot password?</a></p>
                                            <button class="btn btn-primary" type="button">Login</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Billing Information-->
                        <div class="card b mb-2">
                            <div class="card-header">
                                <h4 class="card-title"><a class="text-inherit" data-toggle="collapse" data-parent="#accordion" href="#acc1collapse2">2. Billing Information</a></h4>
                            </div>
                            <div class="collapse" id="acc1collapse2">
                                <div class="card-body" id="collapse02">
                                    <div class="row">
                                        <div class="col-xl-6">
                                            <div class="form-group">
                                                <label>First Name*</label>
                                                <input class="form-control" type="text" name="checkout-name" required="" />
                                            </div>
                                            <div class="form-group">
                                                <label>Company</label>
                                                <input class="form-control" type="text" name="checkout-company" />
                                            </div>
                                        </div>
                                        <div class="col-xl-6">
                                            <div class="form-group">
                                                <label>Last Name*</label>
                                                <input class="form-control" type="text" name="checkout-lastname" required="" />
                                            </div>
                                            <div class="form-group">
                                                <label>Email Address*</label>
                                                <input class="form-control" type="text" name="checkout-email" required="" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xl-12">
                                            <div class="form-group">
                                                <label>Address</label>
                                                <input class="form-control" type="text" name="checkout-address" required="" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xl-6">
                                            <div class="form-group">
                                                <label>City*</label>
                                                <input class="form-control" type="text" name="checkout-city" required="" />
                                            </div>
                                            <div class="form-group">
                                                <label>Zip/Postal Code*</label>
                                                <input class="form-control" type="text" name="checkout-zip" required="" />
                                            </div>
                                            <div class="form-group">
                                                <label>Telephone*</label>
                                                <input class="form-control" type="text" name="checkout-telephone" required="" />
                                            </div>
                                        </div>
                                        <div class="col-xl-6">
                                            <div class="form-group">
                                                <label>State/Province*</label>
                                                <input class="form-control" type="text" name="checkout-state" required="" />
                                            </div>
                                            <div class="form-group">
                                                <label>Country*</label>
                                                <input class="form-control" type="text" name="checkout-country" required="" />
                                            </div>
                                            <div class="form-group">
                                                <label>Fax</label>
                                                <input class="form-control" type="text" name="checkout-fax" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="my-2">
                                        <div class="c-radio">
                                            <label>
                                                <input id="chk-guest1" type="radio" name="checkout-ship-to" value="address" />
                                                <span class="fa fa-check"></span>
                                                Ship to this address
                                            </label>
                                        </div>
                                        <div class="c-radio">
                                            <label>
                                                <input id="chk-guest2" type="radio" name="checkout-ship-to" value="other" />
                                                <span class="fa fa-check"></span>
                                                Ship to different address
                                            </label>
                                        </div>
                                    </div>
                                    <div class="pt-2 clearfix">
                                        <p class="float-right text-sm"><i>Fields marked with (*) are required</i></p>
                                        <div class="float-left"><button class="btn btn-primary" type="button">Continue</button></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Shipping Information-->
                        <div class="card b mb-2">
                            <div class="card-header">
                                <h4 class="card-title"><a class="text-inherit" data-toggle="collapse" data-parent="#accordion" href="#acc1collapse3">3. Shipping Information</a></h4>
                            </div>
                            <div class="collapse" id="acc1collapse3">
                                <div class="card-body" id="collapse03">
                                    <div class="row">
                                        <div class="col-xl-6">
                                            <div class="form-group">
                                                <label>First Name*</label>
                                                <input class="form-control" type="text" name="checkout-ship-name" required="" />
                                            </div>
                                            <div class="form-group">
                                                <label>Company</label>
                                                <input class="form-control" type="text" name="checkout-ship-company" />
                                            </div>
                                        </div>
                                        <div class="col-xl-6">
                                            <div class="form-group">
                                                <label>Last Name*</label>
                                                <input class="form-control" type="text" name="checkout-ship-lastname" required="" />
                                            </div>
                                            <div class="form-group">
                                                <label>Email Address*</label>
                                                <input class="form-control" type="text" name="checkout-ship-email" required="" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xl-12">
                                            <div class="form-group">
                                                <label>Address</label>
                                                <input class="form-control" type="text" name="checkout-ship-address" required="" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xl-6">
                                            <div class="form-group">
                                                <label>City*</label>
                                                <input class="form-control" type="text" name="checkout-ship-city" required="" />
                                            </div>
                                            <div class="form-group">
                                                <label>Zip/Postal Code*</label>
                                                <input class="form-control" type="text" name="checkout-ship-zip" required="" />
                                            </div>
                                            <div class="form-group">
                                                <label>Telephone*</label>
                                                <input class="form-control" type="text" name="checkout-ship-telephone" required="" />
                                            </div>
                                        </div>
                                        <div class="col-xl-6">
                                            <div class="form-group">
                                                <label>State/Province*</label>
                                                <input class="form-control" type="text" name="checkout-ship-state" required="" />
                                            </div>
                                            <div class="form-group">
                                                <label>Country*</label>
                                                <input class="form-control" type="text" name="checkout-ship-country" required="" />
                                            </div>
                                            <div class="form-group">
                                                <label>Fax</label>
                                                <input class="form-control" type="text" name="checkout-ship-fax" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="my-2">
                                        <div class="checkbox c-checkbox">
                                            <label>
                                                <input id="chk-guest3" type="checkbox" name="checkout-use-bill-address" />
                                                <span class="fa fa-check"></span>
                                                Use Billing Address
                                            </label>
                                        </div>
                                    </div>
                                    <div class="pt-2 clearfix">
                                        <p class="float-right text-sm"><i>Fields marked with (*) are required</i></p>
                                        <div class="float-left"><button class="btn btn-primary" type="button">Continue</button></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Shipping Method-->
                        <div class="card b mb-2">
                            <div class="card-header">
                                <h4 class="card-title"><a class="text-inherit" data-toggle="collapse" data-parent="#accordion" href="#acc1collapse4">4. Shipping Method</a></h4>
                            </div>
                            <div class="collapse" id="acc1collapse4">
                                <div class="card-body" id="collapse04">
                                    <table class="table">
                                        <thead class="bg-gray-lighter">
                                            <tr>
                                                <th class="wd-xxs"><em class="fa fa-check text-muted ml-1"></em></th>
                                                <th>Method</th>
                                                <th>Deliver Time</th>
                                                <th>Cost</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="c-radio">
                                                        <label>
                                                            <input id="chk-guest4" type="radio" name="checkout-ship" value="free" />
                                                            <span class="fa fa-check"></span>
                                                        </label>
                                                    </div>
                                                </td>
                                                <td><strong>Free Shipping</strong></td>
                                                <td>10 to 15 days</td>
                                                <td><strong class="h4 text-green">Free</strong></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="c-radio">
                                                        <label>
                                                            <input id="chk-guest5" type="radio" name="checkout-ship" value="std" />
                                                            <span class="fa fa-check"></span>
                                                        </label>
                                                    </div>
                                                </td>
                                                <td><strong>Standard post</strong></td>
                                                <td>4 to 7 days</td>
                                                <td><strong class="h4">$9.95</strong></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div class="c-radio">
                                                        <label>
                                                            <input id="chk-guest6" type="radio" name="checkout-ship" value="next" />
                                                            <span class="fa fa-check"></span>
                                                        </label>
                                                    </div>
                                                </td>
                                                <td><strong>Next day</strong></td>
                                                <td>tomorrow</td>
                                                <td><strong class="h4">$19</strong></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <div class="pt-2 clearfix">
                                        <div class="float-left"><button class="btn btn-primary" type="button">Continue</button></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Payment Information-->
                        <div class="card b mb-2">
                            <div class="card-header">
                                <h4 class="card-title"><a class="text-inherit" data-toggle="collapse" data-parent="#accordion" href="#acc1collapse5">5. Payment Information</a></h4>
                            </div>
                            <div class="collapse" id="acc1collapse5">
                                <div class="card-body" id="collapse05">
                                    <div class="row">
                                        <div class="col-xl-6">
                                            <div class="form-group">
                                                <div class="c-radio">
                                                    <label>
                                                        <input class="form-control" id="chk-guest7" type="radio" name="checkout-pay" value="paypal" checked="checked" />
                                                        <span class="fa fa-check"></span>
                                                        Paypal
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="c-radio">
                                                    <label>
                                                        <input class="form-control" id="chk-guest8" type="radio" name="checkout-pay" value="check" />
                                                        <span class="fa fa-check"></span>
                                                        Check / Money order
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="c-radio">
                                                    <label>
                                                        <input class="form-control" id="chk-guest9" type="radio" name="checkout-pay" value="creditcard" />
                                                        <span class="fa fa-check"></span>
                                                        Credit Card (saved)
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label>Name on Card*</label>
                                                <input class="form-control" type="text" name="checkout-cc-name" required="" />
                                            </div>
                                            <div class="form-group">
                                                <label>Credit Card Type*</label>
                                                <select class="form-control" name="checkout-cc-type" required="">
                                                    <option value="">- Please Select -</option>
                                                    <option value="amex">American Express</option>
                                                    <option value="visa">Visa</option>
                                                    <option value="master">Mastercard</option>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label>Credit Card Number*</label>
                                                <input class="form-control" type="text" name="checkout-cc-number" required="" />
                                            </div>
                                            <div class="row">
                                                <div class="col-xl-5">
                                                    <div class="form-group">
                                                        <label>Credit Expiration month*</label>
                                                        <select class="form-control" name="checkout-cc-exp-month" required="">
                                                            <option value="">Month</option>
                                                            <option value="1">January</option>
                                                            <option value="2">February</option>
                                                            <option value="3">March</option>
                                                            <option value="4">April</option>
                                                            <option value="5">May</option>
                                                            <option value="6">June</option>
                                                            <option value="7">Jule</option>
                                                            <option value="8">August</option>
                                                            <option value="9">September</option>
                                                            <option value="10">October</option>
                                                            <option value="11">November</option>
                                                            <option value="12">December</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-xl-5">
                                                    <div class="form-group">
                                                        <label>Credit Expiration year*</label>
                                                        <select class="form-control" name="checkout-cc-exp-year" required="">
                                                            <option value="">Year</option>
                                                            <option value="2016">2016</option>
                                                            <option value="2017">2017</option>
                                                            <option value="2018">2018</option>
                                                            <option value="2019">2019</option>
                                                            <option value="2020">2020</option>
                                                            <option value="2021">2021</option>
                                                            <option value="2022">2022</option>
                                                            <option value="2023">2023</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-xl-2">
                                                    <div class="form-group">
                                                        <label>CNV*</label>
                                                        <input class="form-control" type="text" name="checkout-cc-verification" required="" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="pt-2 clearfix">
                                        <p class="float-right text-sm"><i>Fields marked with (*) are required</i></p>
                                        <div class="float-left"><button class="btn btn-primary" type="button">Continue</button></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Order Review-->
                        <div class="card b mb-2">
                            <div class="card-header">
                                <h4 class="card-title"><a class="text-inherit" data-toggle="collapse" data-parent="#accordion" href="#acc1collapse6">6. Order Review</a></h4>
                            </div>
                            <div class="collapse" id="acc1collapse6">
                                <div class="card-body" id="collapse06">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <colgroup>
                                                <col class="order-pic" span="1" />
                                                <col class="order-item-name" span="1" />
                                                <col class="order-qty" span="1" />
                                                <col class="order-price" span="1" />
                                                <col class="order-tax" span="1" />
                                                <col class="order-total" span="1" />
                                            </colgroup>
                                            <thead class="bg-gray-lighter">
                                                <tr>
                                                    <th>Product</th>
                                                    <th>Product Title</th>
                                                    <th class="wd-xs">Qty</th>
                                                    <th>Unit Price</th>
                                                    <th>Tax</th>
                                                    <th>Total</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="order-pic thumb64"><img src="/img/dummy.png" alt="dummy" /></td>
                                                    <td class="order-item-name">Lorem Ipsum dolor</td>
                                                    <td class="order-qty"><input class="form-control" type="text" name="checkout-qty" value="1" /></td>
                                                    <td class="order-price">$825.00</td>
                                                    <td class="order-tax">$16.00</td>
                                                    <td class="order-total">$841.00</td>
                                                </tr>
                                                <tr>
                                                    <td class="order-pic"><img src="/img/dummy.png" alt="dummy" /></td>
                                                    <td class="order-item-name">Lorem Ipsum dolor</td>
                                                    <td class="order-qty"><input class="form-control" type="text" name="checkout-qty" value="1" /></td>
                                                    <td class="order-price">$825.00</td>
                                                    <td class="order-tax">$16.00</td>
                                                    <td class="order-total">$841.00</td>
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <td colspan="5">Subtotal</td>
                                                    <td>$1540.00</td>
                                                </tr>
                                                <tr>
                                                    <td colspan="5">Shipping &amp; Handling (Free)</td>
                                                    <td>$0.00</td>
                                                </tr>
                                                <tr>
                                                    <td colspan="5">Tax</td>
                                                    <td>$49.00</td>
                                                </tr>
                                                <tr class="order-subtotal">
                                                    <td colspan="5">Subtotal</td>
                                                    <td>$1340.00</td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                    <div class="mt-3"><button class="btn btn-info" type="button">Submit Order</button></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('styles')@endsection
@section('scripts')@endsection
