@extends('layouts.layout-2')

@section('content')
    <div class="card">
        <h6 class="card-header">
            Zahlungen / Guthaben

            <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-pay-credit"
                    data-back="{{url()->current()}}"
                    data-route="{{ route('modal_load') }}"><span class="far fa-plus-circle"></span> Einkaufsguthaben aufladen
                </button>
            </div>
        </h6>
           {{-- <div class="col-sm-6 mb-0 mt-2">
                {!! Form::open(['url' => route('admin_payments_paycredit'), 'class' => 'form-horizontal', 'id'=>'form_filter_user_status']) !!}
                <label class="form-label" for="filter_user_status">Filter User</label>
                <select class="custom-select" name="filter_user_status" id="filter_user_status">
                        <option value="all" @if($filter_user_status === 'all') selected @endif>alle</option>
                        <option value="active" @if($filter_user_status === 'active') selected @endif>Acount aktiv</option>
                        <option value="deactive" @if($filter_user_status === 'deactive') selected @endif>Acount deaktiv</option>
                </select>
                {!! Form::close() !!}

            </div>
             --}} 

        @if(isset($add_credit_error) && $add_credit_error)
                 <div class="col-sm-12">
                     <div class="alert alert-danger p-2 mt-2">
                         <ul>
                             <li>{{ $add_credit_error }}</li>
                         </ul>
                     </div>
                 </div>
         @endif

        <div class="card-datatable table-responsive pt-2">
            <table class="datatables-style table table-striped table-bordered" id="datatable-pay-credit">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>{{__('Vorname')}}</th>
                    <th>{{__('Nachname') }}</th>
                    <th>{{__('E-Mail') }}</th>
                    <th>{{__('Guthaben') }}</th>
                    <th>{{__('Account')}}</th>
                    <th>&nbsp;</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

    </div>

    <script>
        $( document ).ready(function() {
            var oTable = $('#datatable-pay-credit').DataTable({
                    "processing": true,
                    "serverSide": true,
                    ajax: {
                        url: '{!! route( 'admin_payments_paycredit_datatable') !!}',
                        data: function(d) {
                            d.filter_user_status = $('select[name=filter_user_status]').val();
                        }
                    },
                    "order": [[0, "desc" ]],
                    "columns": [
                        { data: 'id', searchable: false },
                        { data: 'first_name', name: 'account.first_name' },
                        { data: 'last_name', name: 'account.last_name' },
                        { data: 'email', name: 'email' },
                        { data: 'payment_credit', name: 'payment_credit' },
                        { data: 'is_active_account', name: 'is_active_account', orderable: false, searchable: false },
                        { data: 'action', name: 'action', orderable: false, searchable: false  },
                    ],
                    "bLengthChange": false,
                    "iDisplayLength": 100,
                    "language": {
                        "url": "/js/German.json"
                    }
                });
            $('#filter_user_status').on('change', function(){
                oTable.draw();
            });
        });
        /*$('#filter_user_status').on('change', function(){
            $('#form_filter_user_status').submit();
        });*/

    
    </script>
@endsection