@extends('layouts.layout-2')

@section('content')
    <div class="card">
        <h5 class="card-header">
            Business Points

            <div class="float-right">
                <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modals-load-content"
                    data-id="new"
                    data-action="add_user_sales_volume"
                    data-back="{{url()->current()}}"
                    data-route="{{ route('modal_load') }}"><span class="far fa-plus-circle"></span> Points hinzufügen
                </button>
            </div>
        </h5>

        @if(isset($add_points_error) && $add_points_error)
        <div class="col-sm-12">
            <div class="alert alert-danger p-2 mt-2">
                <ul>
                    <li>{{ $add_points_error }}</li>
                </ul>
            </div>
        </div>
        @endif
        <div class="card-body p-0">
        
                {!! Form::open(['url' => route('admin_business_points'), 'class' => 'form-horizontal', 'id'=>'form_admin_business_points']) !!}

                <div class="form-row align-items-center px-4 pb-2 pt-3">
                    <div class="col-12 col-sm-4 col-md-4 col-lg-4 mb-1">
                        <select class="selectpicker on_change_select" data-style="btn-default" name="points_filter_member_id" id="points_filter_member_id" data-live-search="true">
                        <option value="">Filter Berater aus</option>
                        @foreach($filter_members as $member)
                            <option value="{{$member->id}}" @if(session('points_filter_member_id') == $member->id) selected @endif>{{$member->first_name}} {{$member->last_name}} | {{$member->email}}</option>
                        @endforeach
                        </select>
                    </div>
        
                    <div class="col-6 col-sm-4 col-md-4 col-lg-4 mb-1">
                        <select class="custom-select on_change_select" name="points_filter_month">
                            @foreach($filter_months as $key=>$value)
                                <option value="{{$key}}" @if(session('points_filter_month') == $key) selected @endif>{{$value}}</option>
                            @endforeach
                        </select> 
                    </div>
                    <div class="col-6 col-sm-4 col-md-4 col-lg-4 mb-1">
                        <select class="custom-select on_change_select" name="points_filter_year">
                            @foreach($filter_years as $key=>$value)
                                <option value="{{$value}}" @if(session('points_filter_year') == $value) selected @endif>{{$value}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                {!! Form::close() !!}

            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-style table table-striped table-bordered" id="datatable-invoice">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>{{__('Datum') }}</th>
                        <th>{{__('Points')}}</th>
                        <th>{{__('Umsatz netto')}}</th>
                        <th>{{__('aus')}}</th>
                        <th>{{__('für')}}</th>
                        <th>{{__('Bestellung')}}</th>
                        <th>{{__('Berater Nr.')}}</th>
                        <th>{{__('Vorname')}}</th>
                        <th>{{__('Nachname') }}</th>
                        <th>{{__('E-Mail') }}</th>
                        <th>{{__('Info') }}</th>
                        <th>{{__('Notiz') }}</th>

                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        $( document ).ready(function() {
            var oTable = $('#datatable-invoice').DataTable({
                    "processing": true,
                    "serverSide": true,
                    "stateSave": true,
                    "searching": true,
                    ajax: {
                        url: '{!! route('admin_business_points_datatable') !!}',
                        data: function(d) {
                            d.points_filter_member_id = $('select[name=points_filter_member_id]').val();
                            d.points_filter_month = $('select[name=points_filter_month]').val();
                            d.points_filter_year = $('select[name=points_filter_year]').val();
                        }
                    },
                    "order": [[0, "desc" ]],
                    "columns": [
                        { data: 'id', orderable: true, searchable: false },
                        { data: 'date', name: 'date', orderable: true, searchable: false },
                        { data: 'points', name: 'points', orderable: true, searchable: false },
                        { data: 'total_net', name: 'total_net', orderable: true, searchable: false  },
                        { data: 'status', name: 'status', orderable: true, searchable: false },
                        { data: 'status_points', name: 'status_points', orderable: true, searchable: false },
                        { data: 'order', name: 'order', orderable: false , searchable: false },
                        { data: 'm_account', name: 'm_account', orderable: true , searchable: true },
                        { data: 'first_name', name: 'first_name', orderable: true , searchable: true },
                        { data: 'last_name', name: 'last_name', orderable: true , searchable: true },
                        { data: 'email', name: 'email', orderable: true, searchable: true  },
                        { data: 'message', name: 'message', orderable: false, searchable: false },
                        { data: 'info', name: 'info', orderable: false, searchable: false },
                    ],
                    "bLengthChange": false,
                    "iDisplayLength": 100,
                    "language": {
                        "url": "/js/German.json"
                    }
                });
            $('select.on_change_select').on('change', function(){
                oTable.draw();
            });

            $('input.on_keyup_input').on('keyup', function(){
                oTable.draw();
            });
        });
    </script>
@endsection