@extends($user_shop ?'web.user.layouts.layout' : '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>
        .checkbox.error{
            color:#b92c28 !important;
        }
        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>
    <!-- -->
    <!-- CART -->
    <!-- CHECKOUT -->
    <section>
        <div class="container">
         {{--   @if ($errors->any())
                <div class="row">
                    <div class="col-sm-12">
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
        @endif
         --}}
            {{--
            <!-- 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 -->

             @if ($errors->any())

                 <div class="row">
                     <div class="col-sm-12">
                         <div class="alert alert-danger">
                             Bitte überprüfen Sie das Formular und vervollständigen alle Angaben.
                         </div>
                     </div>
                 </div>
                 @endif
        <div class="m-checkout">
        {!! Form::open(['url' => route('checkout.checkout_card_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">
                            <div class="form-group">
                                <label class="mt-0 fs-14 fw-400" for="billing_company">Firmenname  (optional)</label>
                                {!! Form::text('billing[company]', null, ['class' => 'form-control', 'id'=>'billing_company']) !!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                <label class="mt-0 fs-14 fw-400" for="billing_firstname">Vorname*</label>
                                {!! Form::text('billing[firstname]', null, ['class' => 'form-control '.($errors->has('billing.firstname') ? 'error' : ''), 'id'=>'billing_firstname']) !!}
                                @if ($errors->has('billing.firstname'))
                                    <label for="billing_firstname" class="error text-danger small" style="display: block;">{{ $errors->first('billing.firstname') }}</label>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                <label class="mt-0 fs-14 fw-400" for="billing_lastname">Nachname*</label>
                                {!! Form::text('billing[lastname]', null, ['class' => 'form-control '.($errors->has('billing.lastname') ? 'error' : ''), 'id'=>'billing_lastname']) !!}
                                @if ($errors->has('billing.lastname'))
                                    <label for="billing_lastname" class="error text-danger small" style="display: block;">{{ $errors->first('billing.lastname') }}</label>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label class="mt-0 fs-14 fw-400" for="billing_address">Straße Nr. *</label>
                                {!! Form::text('billing[address]', null, ['class' => 'form-control '.($errors->has('billing.address') ? 'error' : ''), 'id'=>'billing_address']) !!}
                                @if ($errors->has('billing.address'))
                                    <label for="billing_address" class="error text-danger small" style="display: block;">{{ $errors->first('billing.address') }}</label>
                                @endif
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label class="mt-0 fs-14 fw-400" for="billing_address_2">Wohnung / Gebäude  (optional)</label>
                                {!! Form::text('billing[address_2]', null, ['class' => 'form-control '.($errors->has('billing.address_2') ? 'error' : ''), 'id'=>'billing_address_2']) !!}
                                @if ($errors->has('billing.address_]'))
                                    <label for="billing_address_2" class="error text-danger small" style="display: block;">{{ $errors->first('billing.address_2') }}</label>
                                @endif
                            </div>
                        </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>
                            {!! Form::text('billing[zipcode]', null, ['class' => 'form-control '.($errors->has('billing.zipcode') ? 'error' : ''), 'id'=>'billing_zipcode']) !!}
                            @if ($errors->has('billing.zipcode'))
                                <label for="billing_zipcode" class="error text-danger small" style="display: block;">{{ $errors->first('billing.zipcode') }}</label>
                            @endif
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <label class="mt-0 fs-14 fw-400" for="billing_city">Stadt *</label>
                            {!! Form::text('billing[city]', null, ['class' => 'form-control '.($errors->has('billing.city') ? 'error' : ''), 'id'=>'billing_city']) !!}
                            @if ($errors->has('billing.city'))
                                <label for="billing_city" class="error text-danger small" style="display: block;">{{ $errors->first('billing.city') }}</label>
                            @endif
                        </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 select2 required" disabled="true">
                                {!! HTMLHelper::getCountriesForShipping(Yard::instance('shopping')->getShippingCountryId()) !!}
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <label class="mt-0 fs-14 fw-400" for="billing_phone">Telefon (optional)</label>
                            {!! Form::text('billing[phone]', null, ['class' => 'form-control '.($errors->has('billing.phone') ? 'error' : ''), 'id'=>'billing_phone']) !!}
                            @if ($errors->has('billing.phone'))
                                <label for="billing_phone" class="error text-danger small" style="display: block;">{{ $errors->first('billing.phone') }}</label>
                            @endif
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <label class="mt-0 fs-14 fw-400" for="billing_email">E-Mail *</label>
                            {!! Form::email('billing[email]', null, ['class' => 'form-control '.($errors->has('billing.email') ? 'error' : ''), 'id'=>'billing_email']) !!}
                            @if ($errors->has('billing.email'))
                                <label for="billing_email" class="error text-danger small" style="display: block;">{{ $errors->first('billing.email') }}</label>
                            @endif
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <hr>
                            <label class="checkbox {{ ($errors->has('accepted_data_checkbox') ? 'error' : '') }}" for="accepted_data_checkbox" style="font-size: 14px;line-height: 22px; font-weight: 400">
                                {!! Form::checkbox('accepted_data_checkbox', 1, false, ['id'=>'accepted_data_checkbox', 'class' => 'form-control '.($errors->has('accepted_data_checkbox') ? 'error' : '')]) !!}
                                <i></i> Mit Klick auf "Jetzt kaufen" akzeptiere ich die <a href="{{ url('/datenschutz') }}">Allgemeinen Geschäftsbedingungen</a>, die <a href="{{ url('/datenschutz') }}">Widerrufsbestimmungen</a> und die <a href="{{ url('/datenschutz') }}">Datenschutzbelehrung</a>, damit für die Bestellung meine Daten verarbeitet werden können.
                            </label>
                            @if ($errors->has('accepted_data_checkbox'))
                                <label for="accepted_data_checkbox" class="error text-danger small" style="display: block;">{{ $errors->first('accepted_data_checkbox') }}</label>
                            @endif
                        </div>
                    </div>


                    <div class="row">

                        <div class="col-lg-12 nomargin clearfix">
                            <hr>
                            <label class="mt-0 fs-14 fw-400 checkbox pull-left"><!-- see assets/js/view/demo.shop.js - CHECKOUT section -->
                                {!! Form::checkbox('shipping[same_as_billing]', 1, true, ['id'=>'shipswitch', 'class' => '']) !!}
                                <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">Firmenname  (optional)</label>
                                {!! Form::text('shipping[company]', null, ['class' => 'form-control', 'id'=>'billing_company']) !!}
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label class="mt-0 fs-14 fw-400" for="shipping_firstname">Vorname*</label>
                                    {!! Form::text('shipping[firstname]', null, ['class' => 'form-control '.($errors->has('shipping.firstname') ? 'error' : ''), 'id'=>'shipping_firstname']) !!}
                                    @if ($errors->has('shipping.firstname'))
                                        <label for="shipping_firstname" class="error text-danger small" style="display: block;">{{ $errors->first('shipping.firstname') }}</label>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label class="mt-0 fs-14 fw-400" for="shipping_lastname">Nachname*</label>
                                    {!! Form::text('shipping[lastname]', null, ['class' => 'form-control '.($errors->has('shipping.lastname') ? 'error' : ''), 'id'=>'shipping_lastname']) !!}
                                    @if ($errors->has('shipping.lastname'))
                                        <label for="shipping_lastname" class="error text-danger small" style="display: block;">{{ $errors->first('shipping.lastname') }}</label>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="mt-0 fs-14 fw-400" for="shipping_address">Straße Nr. *</label>
                                    {!! Form::text('shipping[address]', null, ['class' => 'form-control '.($errors->has('shipping.address') ? 'error' : ''), 'id'=>'shipping_address']) !!}
                                    @if ($errors->has('shipping.address'))
                                        <label for="shipping_address" class="error text-danger small" style="display: block;">{{ $errors->first('shipping.address') }}</label>
                                    @endif
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="mt-0 fs-14 fw-400" for="shipping_address_2">Wohnung / Gebäude  (optional)</label>
                                    {!! Form::text('shipping[address_2]', null, ['class' => 'form-control '.($errors->has('shipping.address_2') ? 'error' : ''), 'id'=>'shipping_address_2']) !!}
                                    @if ($errors->has('shipping.address_]'))
                                        <label for="shipping_address_2" class="error text-danger small" style="display: block;">{{ $errors->first('shipping.address_2') }}</label>
                                    @endif
                                </div>
                            </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>
                                {!! Form::text('shipping[zipcode]', null, ['class' => 'form-control '.($errors->has('shipping.zipcode') ? 'error' : ''), 'id'=>'shipping_zipcode']) !!}
                                @if ($errors->has('shipping.zipcode'))
                                    <label for="shipping_zipcode" class="error text-danger small" style="display: block;">{{ $errors->first('shipping.zipcode') }}</label>
                                @endif
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <label class="mt-0 fs-14 fw-400" for="shipping_city">Stadt *</label>
                                {!! Form::text('shipping[city]', null, ['class' => 'form-control '.($errors->has('shipping.city') ? 'error' : ''), 'id'=>'shipping_city']) !!}
                                @if ($errors->has('shipping.city'))
                                    <label for="shipping_city" class="error text-danger small" style="display: block;">{{ $errors->first('shipping.city') }}</label>
                                @endif
                            </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 select2 required" disabled="true">
                                    {!! HTMLHelper::getCountriesForShipping(Yard::instance('shopping')->getShippingCountryId()) !!}
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 col-sm-12">
                                <label class="mt-0 fs-14 fw-400" for="shipping_phone">Telefon (optional)</label>
                                {!! Form::text('shipping[phone]', null, ['class' => 'form-control '.($errors->has('shipping.phone') ? 'error' : ''), 'id'=>'shipping_phone']) !!}
                                @if ($errors->has('shipping.phone'))
                                    <label for="shipping_phone" class="error text-danger small" style="display: block;">{{ $errors->first('shipping.phone') }}</label>
                                @endif
                            </div>
                        </div>
                    </div>
                </fieldset>
                <!-- /SHIPPING -->

                <a href="{{ Util::getUserShopBackUrl('/card/show') }}" class="btn btn-default btn-sm btn- size-15 mt-4"><i class="fa fa-chevron-left"></i> zurück zum Warenkorb</a>
            </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="paypal" 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="sofort" />
                                            <i></i> <span class="weight-300">Sofortüberweisung</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="credit" />
                                            <i></i> <span class="weight-300">Kredit Karte</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="sepa" />
                                            <i></i> <span class="weight-300">Lastschrift SEPA</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="voraus" />
                                            <i></i> <span class="weight-300">Vorauskasse</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>

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

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

                            <div class="clearfix mb-2">
                                <span class="pull-right small">{{  Yard::instance('shopping')->getShippingCountryName() }}</span>
                                <span class="pull-left small">Versandland:</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 />

                            <div class="clearfix">
                                <span class="pull-right size-20"><strong>{{ Yard::instance('shopping')->totalWithShipping() }} €</strong></span>
                                <strong class="pull-left">Gesamtsumme:</strong>
                            </div>

                            <button type="submit" class="btn btn-primary btn-lg btn-block size-18 btn-text-500 mt-4 faa-parent animated-hover"><i class="fa fa-mail-forward faa-horizontal"></i> Jetzt kaufen</button>
                            <hr><p class="text-center" style="line-height: 1.2em;"><em class="small text-center"> <i class="fa fa-lock"></i> Sind alle Ihre Angaben vollsätndig ausgefüllt, klicken Sie auf "Jetzt kaufen" und Sie werden zu unserem Zahlungsanbieter weitergeleitet, die Verbindung wird ist SSL verschlüsselt.</em></p>




                        </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 -->
               --}}

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

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


@endsection