@extends('layouts.default')
@section('content')
<div class="page-title-section" style="background-image: url(images/inner-bg.jpg)">
    <div class="container">
        <div class="page-title-section-inner">
            <div class="row align-items-center">
                <div class="col-md-7">
                    <div class="page-title">
                        <span>Checkout</span>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="inner-breadcrum">
                        <a href="index.php">Home</a> 
                        / 
                        <span class="current">Checkout</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="checkout-section universal-spacing universal-bg-white">
    <div class="container">
        <div class="checkout-section-inner">
            <div class="row">
                <div class="col-md-7">
                    <div id="accordion">
                        <div class="card">
                            <div class="card-header" id="heading1" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
                                <div class="universal-dark-small-title">
                                    <span>Login Or Signup</span>
                                </div>
                            </div>
                            <div id="collapse1" class="collapse show" aria-labelledby="heading1" data-parent="#accordion">
                                <div class="card-body">
                                    <div class="checkout-select">
                                        <div class="checkout-select-single">
                                            <label id="guest-signup">
                                                <input type="radio" name="checkout-select" value="guest-signup" checked="">
                                                Checkout as Guest
                                            </label>
                                        </div>
                                        <div class="checkout-select-single">
                                            <label id="login-signup">
                                                <input type="radio" name="checkout-select" value="login-signup">
                                                Already a Member?
                                                <div class="shipping-form" id="login-signup-show" style="display: none;">
                                                    <div class="single-review">
                                                        <label>Email Address:</label>
                                                        <input type="text" name="login-username">
                                                    </div>
                                                    <div class="main-btn">
                                                        <button type="submit">Continue</button>
                                                    </div>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header collapsed" id="heading2" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
                                <div class="universal-dark-small-title">
                                    <span>Shipping Address</span>
                                </div>
                            </div>
                            <div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordion">
                                <div class="card-body">
                                    <div class="account-address-area">
                                        <div class="checkout-addresss">
                                            <label id="exsiting-address">
                                                <input name="delivery" value="exsiting-address" for="exsiting-address" type="radio" checked=""> 
                                                <div class="email-field-t">
                                                    <div class="email-text-t">
                                                        <span class="address-type-name">Work</span>
                                                        <span>Guri 9478600000</span>
                                                        <br>
                                                        <span class="tt-t">555, Sector 17, Chandigarh, punjab - <strong>160101</strong></span>
                                                    </div>
                                                </div>
                                            </label>
                                        </div>
                                        <div class="checkout-addresss">
                                            <label id="new-address">
                                                <input name="delivery" value="new-address" for="new-address" type="radio"> 
                                                <span class="new-c-addr"><i class="fas fa-plus"></i> New Address</span>
                                            </label>
                                            <div class="delivery-fileds" id="checkout-new-address" style="display: none;">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="single-review">
                                                            <input type="text" placeholder="First Name*">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="single-review">
                                                            <input type="text" placeholder="Last Name*">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="single-review">
                                                            <input type="text" placeholder="Phone Number*">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="single-review">
                                                            <input type="text" placeholder="Company">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="single-review">
                                                            <textarea style="height:150px;" type="text" placeholder="Address (area &amp; street)*"></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="single-review">
                                                            <input type="text" placeholder="City*">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="single-review">
                                                            <select>
                                                                <option selected="">Please select a region, state or province.*</option>
                                                                <option>Alberta</option>
                                                                <option>British Columbia</option>
                                                                <option>Manitoba</option>
                                                                <option>New Brunswick</option>
                                                                <option>Newfoundland and Labrador</option>
                                                                <option>Northwest Territories</option>
                                                                <option>Nova Scotia</option>
                                                                <option>Nunavut</option>
                                                                <option>Ontario</option>
                                                                <option>Prince Edward Island</option>
                                                                <option>Quebec</option>
                                                                <option>Saskatchewan</option>
                                                                <option>Yukon Territory</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="single-review">
                                                            <input type="text" placeholder="Zip/Postal Code*">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="single-review">
                                                            <select>
                                                                <option selected="">Canada</option>
                                                                <option>xyz</option>
                                                                <option>xyz</option>
                                                                <option>xyz</option>
                                                                <option>xyz</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header collapsed" id="heading4" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" aria-controls="collapse4">
                                <div class="universal-dark-small-title">
                                    <span>Payment Option</span>
                                </div>
                            </div>
                            <div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordion">
                                <div class="card-body">
                                    <div class="payment-sections">
                                        <div id="accordion1" class="universal-form-fields-light">
                                            <div class="card">
                                                <div class="card-header" id="headingPayOne" data-toggle="collapse" data-target="#collapsePayOne" aria-expanded="false" aria-controls="collapsePayOne">
                                                    <label class="main-input" for="onepayment"><input name="payment" value="atm" type="radio" id="onepayment" checked="">Pay Via Paypal</label>
                                                </div>
                                                <div id="collapsePayOne" class="collapse show" aria-labelledby="headingPayOne" data-parent="#accordion1" style="">
                                                    <div class="payment-option">
                                                        <div class="main-info">
                                                            <span>You'll be redirected to Paypal page</span>
                                                        </div>
                                                        <div class="main-btn">
                                                            <button type="submit">Continue</button>
                                                        </div>
                                                    </div>
                                                </div>    
                                            </div>
                                            <div class="card">
                                                <div class="card-header collapsed" id="headingPayTwo" data-toggle="collapse" data-target="#collapsePayTwo" aria-expanded="false" aria-controls="collapsePayTwo">
                                                    <label class="main-input" for="Twopayment"><input name="payment" value="phonepe" type="radio" id="Twopayment">Pay Via Stripe</label>
                                                </div>
                                                <div id="collapsePayTwo" class="collapse" aria-labelledby="headingPayTwo" data-parent="#accordion1" style="">
                                                    <div class="payment-option">
                                                        <div class="main-info">
                                                            <span>You'll be redirected to Stripe page</span>
                                                        </div>
                                                        <div class="main-btn">
                                                            <button type="submit">Continue</button>
                                                        </div>
                                                    </div>
                                                </div>    
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="order-area">
                        <div class="main-title">
                            <span>Your <font>Orders</font></span>
                        </div>
                        <table class="shop-cart-table">
                            <tbody>
                                <tr>
                                    <td class="product-thumbnail">
                                        <a href="{{url('/shop-single')}}">
                                            <img src="images/product1.jpeg">
                                        </a>                     
                                    </td>
                                    <td class="product-name">
                                        <div class="row align-items-center">
                                            <div class="col-md-9">
                                                <div class="quant-cart text-left">
                                                    <span>1x1</span> <a href="{{url('/shop-single')}}">Daily Moisturizer</a>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="product-subtotal text-right">
                                                    <span>$300.00</span>
                                                </div>
                                            </div>
                                        </div>                                              
                                        <div class="product-name-detail">
                                            <div class="product-name-detail-single">
                                                <div class="row">                                    
                                                    <div class="col-md-9">
                                                        <span>Essential Oils - <strong>1 x Tea Tree Essential Oil</strong></span>
                                                    </div>
                                                    <div class="col-md-3 text-right">
                                                        <span>$100.00</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="product-name-detail-single">
                                                <div class="row">                                    
                                                    <div class="col-md-9">
                                                        <span>Packaging Options - <strong>1 x Glass straight-sided round jar / Amber</strong></span>
                                                    </div>
                                                    <div class="col-md-3 text-right">
                                                        <span>$50.00</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="product-name-detail-single">
                                                <div class="row">                                    
                                                    <div class="col-md-6">
                                                        <span>Uploaded Logo</span>
                                                    </div>
                                                    <div class="col-md-6 text-right">
                                                        <img src="images/logo-dark.png">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="cart-total-area">
                        <div class="main-title">
                            <span>Cart <font>Totals</font></span>
                        </div>
                        <div class="single-cart-total">
                            <div class="row">
                                <div class="col-md-6">
                                    <span>Cart Subtotal</span>
                                </div>
                                <div class="col-md-6 text-right">
                                    <strong>$300.00</strong>
                                </div>
                            </div>
                        </div>
                        <div class="single-cart-total">
                            <div class="row">
                                <div class="col-md-6">
                                    <span>Shipping</span>
                                </div>
                                <div class="col-md-6 text-right">
                                    <span>Free Delivery</span>
                                </div>
                            </div>
                        </div>
                        <div class="single-cart-total">
                            <div class="row">
                                <div class="col-md-6">
                                    <span>Total</span>
                                </div>
                                <div class="col-md-6 text-right">
                                    <span class="total">$300.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection