@extends('web.layouts.layout')

@section('content')

    <section class="page-header page-header-xlg parallax parallax-3"
             style="background-image:url('/assets/images/vision-min.jpg')">
        <div class="overlay dark-1"><!-- dark overlay [1 to 9 opacity] --></div>

        <div class="container">
        </div>
    </section>
    <!-- /PAGE HEADER -->

    <style>
        div.shop-item {
            margin-bottom:30px;
            border: 1px solid #ddd;
        }
        div.shop-item > .thumbnail, .thumbnail {
            border: none;
        }
        div.shop-item-summary {
            padding: 8px;
        }
        div.shop-item-summary h2 a {
            color: #9aa983;
            font-size: 1.2em;
            margin: 0 0 10px 0;
        }
        div.shop-item-buttons {
            padding: 0 8px 10px 8px;
        }
        div.shop-item-buttons .btn-xs{
            padding: 4px;
        }
        .cartContent a.remove_item {
            background: transparent;
        }
        .cartContent .product_name {
            font-size: 1.15em;
        }
        .cartContent .product_name > small {
            line-height: 20px;
        }
        @media only screen and (max-width: 1200px) {
            .cartContent .product_name {
                padding-bottom: 0;
                min-height: 60px;
                width: 60%;
            }
            .cartContent .remove_item {
                clear: right;
            }
            .cartContent .total_price {
                width: auto;
                padding-top: 30px;
                clear: right;
            }
            .cartContent .item .qty {
                float: left;
                text-align: left;
            }
            .cartContent .item.head {
                display: none;
            }

        }
        @media only screen and (min-width: 768px) {

            .cartContent .total_price {
                padding-top: 10px;
            }
        }
        @media only screen and (min-width: 992px) {
            .cartContent .total_price {
                padding-top: 30px;
            }
        }
        @media only screen and (min-width: 1200px) {
            .cartContent .total_price {
                padding-top: 10px;
            }
        }

    </style>
    <!-- -->
    {{  Yard::instance('shopping')->setShipping(5.9) }}
    <!-- CART -->
    <!-- CHECKOUT -->
    <section>
        <div class="container">

            {{--
            <!-- NOT LOGGED IN -->
         <!--  <div class="mb-30 box-border-shadow p-20">
                <strong>You are not logged in!</strong>
                Please, <a href="pack-megashop-sign-in.html">login</a> or <a href="javascript:;" onclick="jQuery('#accountswitch').trigger('click'); _scrollTo('#newaccount', 200);">create an account</a> for later use.
            </div>
            -->
            <!-- /NOT LOGGED IN -->
            --}}


            <!-- CHECKOUT -->
            <div class="">
                    {!! Form::open(['url' => route('card_checkout_final'), 'class' => 'row clearfix', 'id'=>'']) !!}



                    <div class="col-lg-7 col-sm-7">

                        <!-- BILLING -->
                        <fieldset class="mb-0 box-border-shadow p-20">

                            <h4>Rechnung &amp; Versand</h4>

                            <hr />

                            <div class="row">

                                <div class="col-md-12 col-sm-12">
                                    <label class="mt-0 fs-14 fw-400" for="billing_company">Firma</label>
                                    <input id="billing_company" name="billing[company]" type="text" class="form-control" />
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-sm-6">
                                    <label class="mt-0 fs-14 fw-400" for="billing_firstname">Vorname*</label>
                                    <input id="billing_firstname" name="billing[firstname]" type="text" class="form-control required" />
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <label class="mt-0 fs-14 fw-400" for="billing_lastname">Nachname *</label>
                                    <input id="billing_lastname" name="billing[lastname]" type="text" class="form-control required" />
                                </div>
                            </div>



                            <div class="row">
                                <div class="col-lg-12">
                                    <label class="mt-0 fs-14 fw-400" for="billing_address1">Straße Nr. *</label>
                                    <input id="billing_address1" name="billing[address][]" type="text" class="form-control required" placeholder="" />

                                    <!--<input id="billing_address2" name="billing[address][]" type="text" class="form-control margin-top-10" placeholder="Address 2" />-->
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-sm-6">
                                    <label class="mt-0 fs-14 fw-400" for="billing_zipcode">PLZ *</label>
                                    <input id="billing_zipcode" name="billing[zipcode]" type="text" class="form-control required" />
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <label class="mt-0 fs-14 fw-400" for="billing_city">Stadt *</label>
                                    <input id="billing_city" name="billing[city]" type="text" class="form-control required" />
                                </div>

                            </div>

                            <div class="row">
                                <div class="col-md-12 col-sm-12">
                                    <label class="mt-0 fs-14 fw-400" for="billing_state">Land *</label>
                                    <select id="billing_state" name="billing[state]" class="form-control pointer selectpicker required">
                                        <option value="">Select...</option>
                                        <option value="1">...</option>
                                        <option value="2">...</option>
                                        <option value="">..............</option>
                                    </select>
                                </div>



                            </div>

                            <div class="row">
                                <div class="col-md-6 col-sm-6">
                                    <label class="mt-0 fs-14 fw-400" for="billing_phone">Telefon *</label>
                                    <input id="billing_phone" name="billing[phone]" type="text" class="form-control required" />
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <label class="mt-0 fs-14 fw-400" for="billing_fax">Fax</label>
                                    <input id="billing_fax" name="billing[fax]" type="text" class="form-control" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 col-sm-12">
                                    <label class="mt-0 fs-14 fw-400" for="billing_email">Email *</label>
                                    <input id="billing_email" name="billing[email]" type="text" class="form-control required" />
                                </div>
                            </div>


                            <div class="row">

                                <div class="col-lg-12 nomargin clearfix">
                                    <label class="mt-0 fs-14 fw-400 checkbox pull-left"><!-- see assets/js/view/demo.shop.js - CHECKOUT section -->
                                        <input id="shipswitch" name="shipping[same_as_billing]" type="checkbox" value="1" checked="checked" />
                                        <i></i> <span class="weight-300">Versand an die gleiche Adresse</span>
                                    </label>
                                </div>

                            </div>

                        </fieldset>
                        <!-- /BILLING -->


                        <!-- SHIPPING -->
                        <fieldset id="shipping" class="softhide mt-40">
                            <div class="box-border-shadow p-20">

                                <h4>Versand Adresse</h4>

                                <hr />

                                <div class="row">

                                    <div class="col-md-12 col-sm-12">
                                        <label class="mt-0 fs-14 fw-400" for="shipping_company">Firma</label>
                                        <input id="shipping_company" name="shipping[company]" type="text" class="form-control" />
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 col-sm-6">
                                        <label class="mt-0 fs-14 fw-400" for="shipping_firstname">Vorname*</label>
                                        <input id="shipping_firstname" name="shipping[firstname]" type="text" class="form-control required" />
                                    </div>
                                    <div class="col-md-6 col-sm-6">
                                        <label class="mt-0 fs-14 fw-400" for="shipping_lastname">Nachname *</label>
                                        <input id="shipping_lastname" name="shipping[lastname]" type="text" class="form-control required" />
                                    </div>
                                </div>



                                <div class="row">
                                    <div class="col-lg-12">
                                        <label class="mt-0 fs-14 fw-400" for="shipping_address1">Straße Nr. *</label>
                                        <input id="shipping_address1" name="shipping[address][]" type="text" class="form-control required" placeholder="" />

                                        <!--<input id="shipping_address2" name="shipping[address][]" type="text" class="form-control margin-top-10" placeholder="Address 2" />-->
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 col-sm-6">
                                        <label class="mt-0 fs-14 fw-400" for="shipping_zipcode">PLZ *</label>
                                        <input id="shipping_zipcode" name="shipping[zipcode]" type="text" class="form-control required" />
                                    </div>
                                    <div class="col-md-6 col-sm-6">
                                        <label class="mt-0 fs-14 fw-400" for="shipping_city">Stadt *</label>
                                        <input id="shipping_city" name="shipping[city]" type="text" class="form-control required" />
                                    </div>

                                </div>

                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <label class="mt-0 fs-14 fw-400" for="shipping_state">Land *</label>
                                        <select id="shipping_state" name="shipping[state]" class="form-control pointer selectpicker required">
                                            <option value="">Select...</option>
                                            <option value="1">...</option>
                                            <option value="2">...</option>
                                            <option value="">..............</option>
                                        </select>
                                    </div>



                                </div>

                                <div class="row">
                                    <div class="col-md-6 col-sm-6">
                                        <label class="mt-0 fs-14 fw-400" for="shipping_phone">Telefon *</label>
                                        <input id="shipping_phone" name="shipping[phone]" type="text" class="form-control required" />
                                    </div>
                                    <div class="col-md-6 col-sm-6">
                                        <label class="mt-0 fs-14 fw-400" for="shipping_fax">Fax</label>
                                        <input id="shipping_fax" name="shipping[fax]" type="text" class="form-control" />
                                    </div>
                                </div>


                            </div>
                        </fieldset>
                        <!-- /SHIPPING -->

                    </div>



                    <div class="col-lg-5 col-sm-5">

                        <!-- PAYMENT METHOD -->
                        <fieldset class="box-border-shadow p-20">

                            <h4>Zahlungsart</h4>

                            <hr>

                            <div class="toggle-transparent toggle-bordered-full clearfix">
                                <div class="toggle active">
                                    <div class="toggle-content">

                                        <div class="row nomargin-bottom">
                                            <div class="col-lg-12 nomargin clearfix">
                                                <label class="mt-0 fs-14 fw-400 radio pull-left nomargin-top">
                                                    <input id="payment_check" name="payment[method]" type="radio" value="1" checked="checked" />
                                                    <i></i> <span class="weight-300">Paypal</span>
                                                </label>
                                            </div>
                                            <div class="col-lg-12 nomargin clearfix">
                                                <label class="mt-0 fs-14 fw-400 radio pull-left">
                                                    <input id="payment_card" name="payment[method]" type="radio" value="2" />
                                                    <i></i> <span class="weight-300">Kredit Karte</span>
                                                </label>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <!-- /PAYMENT METHOD -->





                        <!-- TOTAL / PLACE ORDER -->
                        <div class="toggle-transparent toggle-bordered-full clearfix">
                            <div class="toggle active">
                                <div class="toggle-content">

                                    <div class="clearfix mb-2">
                                        <span class="pull-right">{{ Yard::instance('shopping')->total() }} €</span>
                                        <strong class="pull-left">Zwischensumme:</strong>
                                    </div>

                                    <div class="clearfix mb-2">
                                        <span class="pull-right small">{{  Yard::instance('shopping')->shipping() }} € </span>
                                        <span class="pull-left small">Versandkosten:</span>
                                    </div>

                                    <hr class="mt-4 mb-4">

                                    <div class="clearfix mb-2">
                                        <span class="pull-right small">{{  Yard::instance('shopping')->subtotalWithShipping() }} €</span>
                                        <span class="pull-left small">Summe ohne MwSt:</span>
                                    </div>

                                    <div class="clearfix mb-2">
                                        <span class="pull-right small">{{  Yard::instance('shopping')->taxWithShipping() }} €</span>
                                        <span class="pull-left small"> zzgl. {{ Yard::getTaxRate() }} % MwSt.:</span>
                                    </div>

                                    <hr />

                                    <span class="clearfix ">
                                    <span class="pull-right size-20"><strong>{{ Yard::instance('shopping')->totalWithShipping() }} €</strong></span>
                                    <strong class="pull-left">Gesamtsumme:</strong>
                                </span>
                                    <button class="btn btn-primary btn-lg btn-block size-15 mt-4"><i class="fa fa-mail-forward"></i> Bestellung absenden</button>
                                </div>
                            </div>
                        </div>
                        <!-- /TOTAL / PLACE ORDER -->

                        {{--

                       <!-- CREATE ACCOUNT -->
                       <div class="toggle-transparent toggle-bordered-full margin-top-30 clearfix">
                           <div class="toggle active">
                               <div class="toggle-content">

                                   <div class="clearfix">
                                       <label class="mt-0 fs-14 fw-400 checkbox pull-left">
                                           <input id="accountswitch" name="create-account[yes]" type="checkbox" value="1" />
                                           <i></i> <span class="weight-300">Create an account for later use</span>
                                       </label>
                                   </div>

                                   <!-- CREATE ACCOUNT FORM -->
                                   <div id="newaccount" class="margin-top-10 margin-bottom-30 softhide">

                                       <div class="row nomargin-bottom">
                                           <div class="col-md-6 col-sm-6">
                                               <label class="mt-0 fs-14 fw-400" for="account:password">Password *</label>
                                               <input id="account:password" name="account[password]" type="password" class="form-control" />
                                           </div>
                                           <div class="col-md-6 col-sm-6">
                                               <label class="mt-0 fs-14 fw-400" for="account:password2">Confirm Password *</label>
                                               <input id="account:password2" name="account[password2]" type="password" class="form-control" />
                                           </div>
                                       </div>
                                       <small class="text-warning">NOTE: Email address will be used to login</small>

                                   </div>
                                   <!-- /CREATE ACCOUNT FORM -->


                               </div>
                           </div>
                       </div>
                       <!-- /CREATE ACCOUNT -->
                       --}}

                        {!! Form::close() !!}
            </div>
            <!-- /CHECKOUT -->

        </div>
    </section>
    <!-- /CHECKOUT -->
    <!-- /CART -->


@endsection