@extends('layouts.layout-2')

@section('content')
    <h4 class="font-weight-bold py-2 mb-2">
        {{ __('navigation.my_orders') }} / {{ __('navigation.do_order') }}
        <a href="{{ route('user_order_my_delivery', [$for, $delivery_id]) }}" class="btn btn-sm btn-default float-right">zurück</a>
        <div class="clearfix"></div>
    </h4>
    <style>
        .btn-md-extra {
            padding: 0.3rem 0.6rem;
            font-size: 0.8rem;
            line-height: 1.5;
            border-radius: 0.25rem;
        }
        .md-btn-extra {
            width: calc(1.7rem + 2px) !important;
            line-height: 1.5rem;
        }
        .form-control.input-extra {
            padding: 0.28rem 0.6rem;
            font-size: 0.8rem;
            font-weight: 500;
            min-height: calc(1.8rem + 2px);
            height: calc(1.8rem + 2px);
            width: 44px;
        }
        .input-group-min-w {
            min-width: 102px;
        }
        .img-extra {
            min-width:55px;
            max-height: 160px;
        }

        @media (max-width: 767px) {
            .default-style:not([dir=rtl]) div.card-datatable table.dataTable thead th:first-child,
            .default-style:not([dir=rtl]) div.card-datatable table.dataTable tbody td:first-child,
            .default-style:not([dir=rtl]) div.card-datatable table.dataTable tfoot th:first-child {
                padding-left: 0.6rem !important;

            }
            .img-extra {
                min-width:35px;
                max-height: 160px;
            }
        }


    </style>
    @if($user->user_level)
        <p>Die Produktpreise werden entsprechend Deiner Rolle: <strong>{{$user->user_level->name}}</strong> angezeigt.<br>
            Hinweis: Wenn Du den Warenkorb verlässt, gehen alle Einstellungen verloren.</p>
    @else
        <p>Hinweis: Dir wurde noch keine Rolle zugewisen. Bitte wende dich an serivce@gruene-seele.bio</p>
    @endif

    @if($errors->has('switchers-comp-product'))
        <div class="row">
            <div class="col-sm-12">
                <div class="alert alert-danger" id="gotocomp">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif


    <div class="card">
        <div class="card-datatable table-responsive">
            <table class="datatables-order-list table table-striped table-bordered" id="datatables-order-list" data-url="{{route('user_order_my_perform_request')}}">
                <thead>
                <tr>
                    <th>{{__('Bild')}}</th>
                    <th>{{__('Produkt')}}</th>
                    <th>{{__('Preis netto')}}</th>
                    <th>{{__('Preis brutto')}}</th>
                    <th>{{__('Provision')}}</th>
                    <th>{{__('Gewicht')}}</th>
                    <th><span class="no-line-break">{{__('Inhalt (ml)')}}</span></th>
                    <th>{{__('Artikelnummer')}}</th>
                    <th>#</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    {!! Form::open(['url' => route('user_order_my_payment', [$for, $delivery_id]), 'class' => 'form-horizontal']) !!}
    <input type="hidden" name="shipping_is_for" value="{{$for}}">

    <div class="card mt-4">
        <div class="card-body">
        @if($for === 'ot')
            <h4>Lieferland des Kunden</h4>
            @include('user.order.shipping_ot')
        @endif
        @if($for === 'me')
            <h4>Mein Lieferland</h4>
            @include('user.order.shipping_me')
            <i>Kann bei der Zahlung/Checkout nicht mehr geändert werden.</i>
        @endif
        </div>
    </div>

    @if($for === 'me')
       {{--  <div id="holder_html_view_comp_product">
            @include('user.order.comp_product')
        </div>
        --}}
    @endif

    <div class="card mt-4">
        <div class="card-body">
            <h4>Warenkorb</h4>
            <div id="holder_html_view_card">
                @include('user.order.yard_view_form')
            </div>
        </div>
    </div>
    <div class="mt-2">
    <a href="{{ route('user_order_my_delivery', [$for, $delivery_id]) }}" class="btn btn-sm btn-default float-right">zurück</a>
    </div>

    {!! Form::close() !!}


    <script>
        $( document ).ready(function() {

            var iqShoppingCart = IqShoppingCart.init();

            var oTable = $('#datatables-order-list').DataTable({
                "processing": true,
                "serverSide": true,
                ajax: {
                    url: '{!! route( 'user_order_my_datatable') !!}',
                    data: function(d) {
                        d.shipping_is_for = $('input[name=shipping_is_for]').val();
                      //  d.filter_customer_member = $('select[name=filter_customer_member]').val();
                    }
                },
                "order": [[4, "asc" ]],
                "columns": [
                    { data: 'picture', name: 'picture', searchable: false, width: 35 },
                    { data: 'product', name: 'product' },
                    { data: 'price_net', name: 'price_net', searchable: false, orderable: false },
                    { data: 'price_gross', name: 'price_gross', searchable: false, orderable: false },
                    { data: 'single_commission', name: 'single_commission', searchable: false },
                    { data: 'weight', name: 'weight', searchable: false },
                    { data: 'contents_total', name: 'contents_total', searchable: false },
                    { data: 'number', name: 'number' },
                    { data: 'action', name: 'action', searchable: false, orderable: false },
                ],
                "bLengthChange": false,
                "iDisplayLength": 1000,
                "paging": false,
                "language": {
                    "url": "/js/German.json"
                },
                drawCallback: function (settings) {
                    iqShoppingCart.reInit();
                }
            });

            iqShoppingCart.setDatabase(oTable);

            /* $('#filter_member_id').on('change', function(){
                  oTable.draw();
              });
              $('#filter_customer_member').on('change', function(){
                  oTable.draw();
              });
              */

            /*{ data: 'add_card', name: 'add_card', searchable: false, orderable: false},
                 { data: 'quantity', name: 'quantity', searchable: false, orderable: false},*/

            $('body').tooltip({
                selector: '.product-tooltip'
            });

        });
    </script>
@endsection

@section('scripts')
    <script src="{{ asset('/js/iq-shopping-cart.js') }}?v=1{{ get_file_last_time('/js/iq-shopping-cart.js') }}"></script>
@endsection
