@extends('layouts.layout-2')

@section('content')
    <h4 class="font-weight-bold py-2 mb-2">
        {{ __('navigation.my_orders') }} / {{ __('navigation.do_order') }}
    </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;
        }

    </style>

    <div class="card">
        <div class="card-datatable table-responsive">
            <table class="datatables-order-list table table-striped table-bordered" id="datatables-order-list">
                <thead>
                <tr>
                    <th>{{__('Bild')}}</th>
                    <th>#</th>
                    <th>{{__('Anzahl')}}</th>
                    <th>{{__('Produkt')}}</th>
                    <th>{{__('Artikelnummer')}}</th>
                    <th>{{__('Netto-Preis')}}</th>
                    <th>{{__('Points')}}</th>
                    <th><span class="no-line-break">{{__('Inhalt (ml)')}}</span></th>
                    <th><span class="no-line-break">{{__('Gewicht (g)')}}</span></th>
                    <th>#</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

        <hr>

        {!! Form::open(['url' => route('wizard_store_payment', [20]), 'class' => 'form-horizontal']) !!}

        <div class="card-body">

        @if($for === 'ot')
            <h4>Lieferadresse (Kunde)</h4>
            @include('user.order.shipping_ot')
        @endif

        @if($for === 'me')
            <h4>Lieferadresse (meine)</h4>
            @include('user.order.shipping_me')
        @endif
        </div>


        @include('user.order.list_form')

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

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

            var oTable = $('#datatables-order-list').DataTable({
                "processing": true,
                "serverSide": true,
                ajax: {
                    url: '{!! route( 'user_order_my_datatable') !!}',
                    data: function(d) {
                      //  d.filter_member_id = $('select[name=filter_member_id]').val();
                      //  d.filter_customer_member = $('select[name=filter_customer_member]').val();
                    }
                },
                "order": [[4, "asc" ]],
                "columns": [
                    { data: 'picture', name: 'picture', searchable: false, orderable: false },
                    { data: 'add_card', name: 'add_card', searchable: false, orderable: false},
                    { data: 'quantity', name: 'quantity', searchable: false, orderable: false},
                    { data: 'name', name: 'name' },
                    { data: 'number', name: 'number' },
                    { data: 'price', name: 'price', searchable: false },
                    { data: 'points', name: 'points', searchable: false },
                    { data: 'contents_total', name: 'contents_total', searchable: false },
                    { data: 'weight', name: 'weight', searchable: false },
                    { data: 'action', name: 'action', searchable: false, orderable: false },
                ],
                "bLengthChange": false,
                "iDisplayLength": 50,
                "language": {
                    "url": "/js/German.json"
                }
            });
          /* $('#filter_member_id').on('change', function(){
                oTable.draw();
            });
            $('#filter_customer_member').on('change', function(){
                oTable.draw();
            });
            */

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



        });
    </script>
@endsection