@extends('adminlte::page')

@section('title', 'Fake Clients')

@section('plugins.Datatables', true)

@section('content')
    <div class="card">
        <div class="card-header">
            <h3>{{ __('Fake Clients') }}</h3>
        </div>
        <div class="card-body">
            @if (Session::has('message'))
                <div class="alert alert-info">{{ Session::get('message') }}</div>
            @endif
            <div class="row">
                <div class="col-md-2 pl-1">
                    <div class="form-group">
                        <label>Рeзидент</label>
                        <select name="is_resident" class="form-control form-filter-select" id="filter-resident">
                            <option value="">Все</option>
                            <option value="1">Да</option>
                            <option value="0">Нет</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2 pl-1">
                    <div class="form-group">
                        <label>Виза</label>
                        <select name="visa_type_id" class="form-control form-filter-select" id="filter-visa-type">
                            <option value="">Все</option>
                            @foreach($visaTypes as $visaType)
                                <option value="{!! $visaType->id !!}">{!! $visaType->short_name !!}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2 pl-1">
                    <div class="form-group">
                        <label>Страна</label>
                        <select name="country" class="form-control form-filter-select" id="filter-country">
                            <option value="">Все</option>
                            @foreach($countries as $country)
                                <option value="{!! $country->id !!}">{!! $country->flag . ' ' . $country->name !!}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2 pl-1">
                    <div class="form-group">
                        <label>Размер группы</label>
                        <select name="group_size" class="form-control form-filter-select" id="filter-group-size">
                            <option value="">Все</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2 pl-1 align-self-end">
                    <div class="form-group">
                        <button type="button" class="form-control btn btn-success btn-reload">Reload</button>
                    </div>
                </div>
                <div class="col-md-2 pl-1 align-self-end" style="text-align: right;">
                    <div class="form-group">
                        <a href="/fake-clients-na/stats" class="btn btn-default"><i class="fas fa-fw fa-chart-pie"></i> Статистика</a>
                    </div>
                </div>
            </div>
            <table id="tbl-items" class="table no-footer table-hover" style="width: 100%;" role="grid">
                <thead>
                <tr>
                    <th style="width: 50px">ID</th>
                    <th style="width: 150px">Email</th>
                    <th style="width: 150px">Пароль</th>
                    <th style="width: 40px">Resident</th>
                    <th style="width: 40px">Size</th>
                    <th style="width: 150px">Страна</th>
                    <th>Тип визы</th>
                    <th style="width: 50px">🚫</th>
                    <th style="width: 100px">Статус</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(function() {
            $('#tbl-items').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 100,
                ajax: {
                    url: '/fake-clients-na/load',
                    data: function (d) {
                        d.is_resident   = $('#filter-resident').val();
                        d.visa_type_id  = $('#filter-visa-type').find(':selected').val();
                        d.country       = $('#filter-country').find(':selected').val();
                        d.group_size    = $('#filter-group-size').find(':selected').val();
                    },
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                },
                columnDefs: [{
                    "targets": 'no-sort',
                    "orderable": false,
                }],
                order: [[0, 'desc']]
            });
            $( ".btn-reload" ).on("click", function() {
                $('#tbl-items').DataTable().ajax.reload();
            });
            $( ".form-filter-select" ).change(function() {
                $('#tbl-items').DataTable().ajax.reload();
            });
            $( ".form-filter" ).on("input", function() {
                $('#tbl-items').DataTable().ajax.reload();
            });
            $(document).on('change', '.slct-status', function () {
                $.post(
                    '/fake-clients-na/' + $(this).data('id') + '/status',
                    {
                        _token: '{{ csrf_token() }}',
                        status: $(this).val()
                    }
                );
                return false;
            });
        });
    </script>
@endpush

@push('scripts')
    <script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
@endpush