@extends('layouts.app')
@section('title', 'Customers | Shopping Cart | Create Order')
@section('extrastyles')
    @if(!empty(metricsGlobalEnabled()))
        <script src="https://secure.metricsglobalgateway.com/token/Collect.js"
                data-payment-selector="#metrics-global-card-form"
                data-tokenization-key="{{ metricsGlobalEnabled() }}" data-variant="inline">
        </script>
    @endif
    <style>
        .default_payment_card .actions{
            display: none;
        }
        .page-container{
            border-width: 1px;
            --tw-border-opacity: 1;
            border-color: rgba(215, 219, 223, var(--tw-border-opacity));
            --tw-bg-opacity: 1;
            background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
            border-style: solid;
        }
        .p-8{
            padding: 2rem;
        }
        .page-container-subhead
        {
            padding-bottom: 1.5rem;
            font-family: poppinssemibold, sans-serif;
            font-size: 1.875rem;
            line-height: 2.25rem;
        }
        .table > tbody > tr > .no-line {
            border-top: none;
        }
        .custom-control  .local_delivery{
            position: relative;
            left: -6px;
            top: 2px;
            opacity: 1;
            z-index: 999;
        }
    </style>
@endsection
@section('content')
    <div class="studio98_websters">
        <div class="ibox-title2">
            <h5>Create Order</h5>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content p-md">
                        <div class="order_mark_paid">
                            <label class="checkbox-inline">
                                <input type="checkbox" name="mark_paid" value="1" class="mark_paid"> Mark Paid Order
                            </label>
                        </div>
                        <div class="configure_volumes">
                            <label class="checkbox-inline">
                                <input type="checkbox" name="excludeVolume" class="excludeVolume" value="1"> Exclude volume for MLM Reporting
                            </label>
                        </div>
                        @if(\App\Facades\Integration::instance()->isEnabled())
                            <div  class="method-body" id="direct_scale_payment_form">
                                <input type="hidden" value="" id="selected_card">
                                <div class="row">
                                    <div class="col-md-12">
                                        <ul class="added_cards list-group mt-2" style="cursor: pointer"></ul>
                                    </div>
                                </div>
                                @if(!isTeqTankEnable())
                                    <button class="btn-gree add_direct_scale_card btn theme-primary mt-2" type="button" style="width: 100%">{!! __('Add Card') !!}</button>
                                    <iframe id="directScaleIframe" style="border: none; height: 0px" class="mt-2"></iframe>
                                @endif
                            </div>
                        @else
                            <input type="hidden" class="payment_token" value="">
                            <div class="method-body user-payment-detail mt-3">

                            </div>
                        @endif

                        <div class="shipping-methods">
                            <h2 style="font-weight: 300; font-family: Newsreader;">{!! __('Shipping Methods') !!}</h2>

                            <div class="shipping-method-list">
                                @if(isset($shipping_methods) && is_array($shipping_methods) and count($shipping_methods) > 0)
                                    @include('Product::shopping-cart.customer._shipping_method_list')
                                @endif
                            </div>
                            @if($allowAutoshipShipping)
                                <div class="shipping-method-list-autoship mt-3" style="{{ (isTeqTankEnable()) ? '' : 'display:none' }}">
                                    <h2 style="font-weight: 300; font-family: Newsreader;">{{$autoShipLabel}} Shipping Methods</h2>
                                    <div class="autoShipShipMethods">
                                    </div>
                                    <input type="hidden" name="isAutoShipShipping" value="0">
                                </div>
                            @endif

                            @if(isset($shippingAddress))
                                <div class="shipping-address">
                                    <h2 style="font-weight: 300; font-family: Newsreader;">{!! __('Shipping Address') !!}</h2>
                                    <div class="shipping-address-list">
                                        <h3>{{ $user->first_name }} {{ $user->last_name }}</h3>
                                        <p>{{ $shippingAddress->address }}<br>
                                        {{ $shippingAddress->city }}, {{ $shippingAddress->state }} {{ $shippingAddress->zip }}<br>
                                        {{ $shippingAddress->country }}</p>
                                    </div>
                                </div>
                            @endif

                        </div>

                        <h2 style="font-weight: 300; font-family: Newsreader;">Your Products</h2>
                            <input type="hidden" id="autoship_product" data-id="{{ $user->id }}">
                        <div class="clearfix"></div>
                            <a class="btn btn-primary pull-right" href="javascript:void(0);" data-toggle="modal" data-target="#add_product">Add Product</a>
                            <div class="clearfix"></div>
                        <div class="table-responsive">
                            <table style="width: 100%;" class="table table-striped table-bordered table-hover" data-id="{{ $user->id }}"  id="order_products">
                                <thead>
                                <tr>
                                    <th>SKU</th>
                                    <th>Title</th>
                                    <th>Qty</th>
                                    <th>Price</th>
                                    <th>Ext Amount</th>
                                    <th>Action</th>
                                </tr>
                                </thead>

                                <tbody>
                                </tbody>
                            </table>
                        </div>

                            <div class="row order_summary">
                                <div class="col-sm-8 col-xs-12"></div>
                                <div class="col-md-4 col-sm-4 col-xs-12">
                                    <div class="page-container p-8">
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <div class="form-group form-validate">
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <label class="sr-only" for="code">Code:</label>
                                                            <input type="text" class="form-control" id="code" placeholder="Coupon Code">
                                                        </div>
                                                        {{-- <div class="col-lg-4">
                                                            <button class="btn btn-primary" onclick="orderCalculation();">Apply</button>
                                                        </div> --}}
                                                    </div>
                                                    <div class="order_coupons"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="page-container-subhead">Order Summary</div>
                                        <table id="shipMethodTable" class="table table-condensed">
                                            <tbody>
                                            <tr id="subtotalRow">
                                                <td class="no-line text-right"><strong>SubTotal</strong></td>
                                                <td class="no-line text-right"><span id="lSubTotal">$0</span></td>
                                                <td class="no-line"></td>
                                            </tr>
                                            <tr id="shippingRow">
                                                <td class="no-line text-right"><strong>Shipping</strong></td>
                                                <td class="no-line text-right"><span id="lShipping">$0</span></td>
                                                <input type="hidden" id="lShippingRate" value="">
                                                <td class="no-line"></td>
                                            </tr>
                                            <tr id="taxRow">
                                                <td class="no-line text-right"><strong>Tax</strong></td>
                                                <td class="no-line text-right"><span id="lTax">$0</span></td>
                                                <td class="no-line" style="width: 18px;"></td>
                                            </tr>
                                            <tr id="cardFeeRow" style="display: none;">
                                                <td class="no-line text-right"><strong>Card Processing Fee</strong></td>
                                                <td class="no-line text-right"><span id="lCardFee">$0</span></td>
                                                <td class="no-line" style="width: 18px;"></td>
                                            </tr>
                                            <tr id="taxRow">
                                                <td class="no-line text-right"><strong>Discount</strong></td>
                                                <td class="no-line text-right"><span id="lDiscount">$0</span></td>
                                                <td class="no-line" style="width: 18px;"></td>
                                            </tr>
                                            <tr id="totalRow">
                                                <td class="text-right"><strong>Total</strong></td>
                                                <td class="text-right"><span id="lTotal">$0</span></td>
                                                <td class=""></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        <div class="clearfix"></div>
                        <button class="btn btn-primary pull-right mt-5" id="createDBOrder" onclick="createDBOrder({{ $user->id }});">Create Order</button>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal inmodal fade" id="add_product" tabindex="" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Add Product</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input type="hidden" id="ItemList_SKU" value="">
                        <input type="hidden" id="ItemList_ID" value="">
                        <input type="hidden" id="ItemList_PNAME" value="">
                        <input type="hidden" id="ItemList_PPrice" value="">
                        <select class="form-control autoship_product">
                            <option value="">Select</option>
                            @foreach($products as $product)