@extends('layouts.layout-2')

@section('content')


    <h4 class="font-weight-bold py-2 mb-2">
        {{ __('Kunden') }}
    </h4>

    <div class="card">
        <div class="card-header">
            <div class="form-row align-items-center">
                {{-- <div class="col-sm-5 mb-2">
                    <label class="form-label" for="filter_user_shop_id">Filter Kunden/Berater</label>
                    <select class="custom-select" name="filter_customer_member" id="filter_customer_member">
                        <option value="">Filter aus</option>
                        <option value="customers" @if(get_user_attr('filter_customer_member') === 'customers') selected @endif>Kunden</option>
                        <option value="members" @if(get_user_attr('filter_customer_member') === 'members') selected @endif>Berater</option>

                    </select>
                </div>--}}
                <div class="col-sm-10 mb-2">
                    <label class="form-label" for="filter_user_shop_id">Filter zugewiesener Berater</label>
                    <select class="custom-select" name="filter_member_id" id="filter_member_id">
                        <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-2 col-sm-2 mb-2 mt-4">
                    <a href="{{ route('admin_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">
            <div class="ml-4">
                <!--<a href="{{ route('admin_lead_edit', ['new']) }}" class="btn btn-sm btn-primary">{{__('Neuen Berater erstellen')}}</a> -->
            </div>
            <table class="datatables-customers table table-striped table-bordered" id="datatables-customers">

                <thead>
                <tr>
                    <th>#</th>
                    <th>{{__('Nummer')}}</th>
                    <th>{{__('E-Mail')}}</th>
                    <th>{{__('ist Berater')}}</th>
                    <th>{{__('Anrede')}}</th>
                    <th>{{__('Firma')}}</th>
                    <th>{{__('Vorname')}}</th>
                    <th>{{__('Nachname')}}</th>
                    <th>{{__('PLZ')}}</th>
                    <th>{{__('Stadt')}}</th>
                    <th>{{__('Land')}}</th>
                    <th>{{__('Käufe')}}</th>
                    <th>{{__('zugewiesener Berater')}}</th>
                    <th>{{__('Datum')}}</th>
                </tr>
                </thead>
                <tbody>

                </tbody>

            </table>
            <div class="mt-4 ml-4">
              <!--  <a href="{{ route('admin_lead_edit', ['new']) }}" class="btn btn-sm btn-primary">{{__('Neuen Berater erstellen')}}</a> -->
            </div>
        </div>
    </div>

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

            var oTable = $('#datatables-customers').DataTable({
                "processing": true,
                "serverSide": true,
                ajax: {
                    url: '{!! route( 'admin_customer_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": [[0, "desc" ]],
                "columns": [
                    { data: 'id', searchable: false},
                    { data: 'number', name: 'number'},
                    { data: 'billing_email', name: 'billing_email' },
                    { data: 'isMember', name: 'isMember' },
                    { data: 'billing_salutation', name: 'billing_salutation' },
                    { data: 'billing_company', name: 'billing_company' },
                    { data: 'billing_firstname', name: 'billing_firstname' },
                    { data: 'billing_lastname', name: 'billing_lastname' },
                    { data: 'billing_zipcode', name: 'billing_zipcode' },
                    { data: 'billing_city', name: 'billing_city' },
                    { data: 'billing_country_id', name: 'billing_country_id' },
                    { data: 'orders', name: 'orders' },
                    { data: 'member_id', name: 'member_id', searchable: false, orderable: false },
                    { data: 'created_at', name: 'created_at' },
                ],
                "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();
            });

        });
    </script>
@endsection