@extends('layouts.layout-2')

@section('content')


    <h4 class="font-weight-bold py-2 mb-2">
        {{ __('Bestellungen Kunden') }}
    </h4>
    <div class="card">
        <div class="card-header">
            <div class="form-row align-items-center">
                <div class="col-sm-4 mb-2">
                    <label class="form-label" for="filter_user_shop_id">Filter zugewiesener Berater</label>

                    <select class="selectpicker" data-style="btn-default" name="filter_member_id" id="filter_member_id" data-live-search="true">
                        <option value="">Filter aus</option>
                        @foreach($filter_members as $member)
                            <option value="{{$member->id}}" @if(get_user_attr('filter_member_id') == $member->id) selected @endif>{{$member->first_name}} {{$member->last_name}} | {{$member->email}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-sm-4 mb-2">
                    <label class="form-label" for="filter_user_shop_id">Filter Gekauft im Shop</label>
                        <select class="selectpicker" data-style="btn-default" name="filter_user_shop_id" id="filter_user_shop_id" data-live-search="true">
                        <option value="">Filter aus</option>
                        @foreach($filter_user_shops as $id=>$name)
                            <option value="{{$id}}" @if(get_user_attr('filter_user_shop_id') == $id) selected @endif>{{$name}}.{{config('app.domain').config('app.tld_care')}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-10 col-sm-3 mb-2">
                    <label class="form-label" for="filter_txaction">Filter Status</label>
                    <select class="custom-select" name="filter_txaction" id="filter_txaction">
                        <option value="">Filter aus</option>
                        @foreach(\App\Services\Payment::$txaction_filter_text as $id=>$name)
                            <option value="{{$id}}" @if(get_user_attr('filter_txaction') == $id) selected @endif>{{$name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-2 col-sm-1 mb-2 mt-4">
                    <a href="{{ route('admin_sales_customers') }}?reset=filter"  data-toggle="tooltip" data-placement="top"  title="Reset Filter" class="btn icon-btn btn-sm btn-outline-dark float-right">
                        <span class="fa fa-sync"></span>
                    </a>
                </div>
            </div>

        </div>
        <div class="card-datatable table-responsive">
            <table class="datatable-customers table table-striped table-bordered" id="datatable-customers">
                <thead>
                <tr>
                    <th>#</th>
                    <th>{{__('Datum')}}</th>
                    <th>{{__('Betrag')}}</th>
                    <th>{{__('Zahlung')}}</th>
                    <th>{{__('Status')}}</th>
                    <th>{{__('Versand')}}</th>
                    <th>{{__('Rechnung')}}</th>                
                    <th>{{__('First name')}}</th>
                    <th>{{__('Last name')}}</th>
                    <th>{{__('E-Mail')}}</th>
                    <th>{{__('zugewiesener Berater')}}</th>
                    <th>{{__('Rf-Nr.')}}</th>
                    <th>{{__('Art')}}</th>
                    <th>{{__('Käufe')}}</th>
                    <th>{{__('Gekauft im Shop')}}</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <script>
        $( document ).ready(function() {
            var oTable = $('#datatable-customers').DataTable({
                    "processing": true,
                    "serverSide": true,
                    ajax: {
                        url: '{!! route( 'admin_sales_customers_datatable') !!}',
                        data: function(d) {
                            d.filter_member_id = $('select[name=filter_member_id]').val();
                            d.filter_user_shop_id = $('select[name=filter_user_shop_id]').val();
                            d.filter_txaction = $('select[name=filter_txaction]').val();
                        }
                    },
                    "order": [[0, "desc" ]],
                    "columns": [
                        { data: 'id', searchable: false },
                        { data: 'created_at', name: 'shopping_orders.created_at' },
                        { data: 'total_shipping', name: 'total_shipping' },
                        { data: 'payment', name: 'payment', orderable: false },
                        { data: 'txaction', name: 'txaction' },
                        { data: 'shipped', name: 'shipped' },
                        { data: 'invoice', name: 'invoice', orderable: false  },
                        { data: 'shopping_user.billing_firstname', name: 'shopping_user.billing_firstname' },
                        { data: 'shopping_user.billing_lastname', name: 'shopping_user.billing_lastname' },
                        { data: 'shopping_user.billing_email', name: 'shopping_user.billing_email' },
                        { data: 'member_id', name: 'member_id', searchable: false, orderable: false },
                        { data: 'reference', name: 'reference' },
                        { data: 'payment_for', name: 'payment_for' },
                        { data: 'shopping_user.orders', name: 'shopping_user.orders' },
                        { data: 'user_shop_id', name: 'user_shop_id', searchable: false, orderable: true },
                    ],
                    "bLengthChange": false,
                    "iDisplayLength": 100,
                    "language": {
                        "url": "/js/German.json"
                    }
                });
            $('#filter_member_id').on('change', function(){
                oTable.draw();
            });
            $('#filter_user_shop_id').on('change', function(){
                oTable.draw();
            });
            $('#filter_txaction').on('change', function(){
                oTable.draw();
            });
        });
    </script>
@endsection