@extends('voyager::master')

@section('page_title', 'Liste des utilisateurs')

@section('page_header')
    <h1 class="page-title flex">
        Tous les utilisateurs
    </h1>
    @include('voyager::multilingual.language-selector')
@stop

@section('content')
    <div class="page-content browse container">
        @include('voyager::alerts')
        <div class="row justify-content-md-center">
            <div class="col col-md-12">
                <div class="card shadow">
                    <div class="card-header border-0">
                        <div class="row align-items-center">
                            <div class="col col-6 col-md-5 col-lg-4 flex">
                                <div class="input-group input-group-alternative mb-0">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
                                    </div>
                                    <input type="text" placeholder="Rechercher" id="searchInTable"
                                           class="form-control form-control-alternative showPlaceHolder"/></div>
                            </div>
                            <div class="col text-right">
                                @can('add', app($dataType->model_name))
                                    <a href="{{ route('voyager.'.$dataType->slug.'.create') }}"
                                       class="btn btn-icon btn-3 btn-success btn-add-new">
                                        <span class="btn-inner--icon"><i class="ni ni-fat-add"></i></span>

                                        <span class="btn-inner--text">Nouvel utilisateur</span>
                                    </a>
                                @endcan
                                @can('delete', app($dataType->model_name))
                                    @include('voyager::partials.bulk-delete')
                                @endcan
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <!-- Videos table -->
                        <table id="dataTable" class="table align-items-center table-flush table-hover"
                               style="width:100%">
                            <thead class="thead-light">
                            <tr>
                                @can('delete',app($dataType->model_name))
                                    <th scope="col" class="miniCol">
                                        <div class="custom-control custom-control-alternative custom-checkbox mb-3 miniCol  ">
                                            <input class="custom-control-input select_all" type="checkbox" name="row_id"
                                                   id="selectAll">
                                            <label class="custom-control-label" for="selectAll"></label>
                                        </div>
                                    </th>
                                @endcan

                                <th scope="col">Nom</th>
                                <th scope="col">Mail</th>
                                <th scope="col">Rôle</th>
                                <th scope="col">Upload autorisé</th>
                                <th scope="col">Charlis</th>
                                <th scope="col">Vidéos</th>
                                <th scope="col" class="smallCol">Actions</th>
                            </tr>
                            </thead>

                            <tbody>

                            @foreach($dataTypeContent as $data)
                                <tr>
                                    @can('delete',app($dataType->model_name))
                                        <td class="no-sort no-click text-right miniCol">
                                            <div class="custom-control custom-control-alternative custom-checkbox mb-3 miniCol">
                                                <input class="custom-control-input" type="checkbox" name="row_id"
                                                       id="checkbox_{{ $data->getKey() }}"
                                                       value="{{ $data->getKey() }}">
                                                <label class="custom-control-label"
                                                       for="checkbox_{{ $data->getKey() }}"></label>
                                            </div>
                                        </td>
                                    @endcan

                                    <th scope="row">
                                        {{$data->name}}
                                    </th>

                                    <td scope="row">
                                        {{ $data->email }}
                                    </td>

                                    <td scope="row">
                                        @php $row = $dataType->browseRows[3]; @endphp
                                        @include('voyager::formfields.relationship', ['view' => 'browse','options' => $row->details])
                                    </td>

                                    <td scope="row">
                                        {{ $data->upload_allowed ? "Oui" : "Non" }}
                                    </td>

                                    <td scope="row">
                                        {{ $data->charlis != null ?count($data->charlis): '0'}}
                                    </td>

                                    <td scope="row">
                                        {{ $data->videos != null ?count($data->videos): '0'}}
                                    </td>

                                    <td class="no-sort no-click text-right smallCol" id="bread-actions">
                                        <div class="dropdown smallCol">
                                            <a class="btn btn-sm btn-icon-only text-light" href="#" role="button"
                                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                                                @foreach(Voyager::actions() as $action)
                                                    @include('vendor.voyager.partials.custom-actions', ['action' => $action])
                                                @endforeach
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach


                            </tbody>
                        </table>
                    </div>
                    @if ($isServerSide)
                        <div class="pull-left">
                            <div role="status" class="show-res" aria-live="polite">{{ trans_choice(
                                    'voyager::generic.showing_entries', $dataTypeContent->total(), [
                                        'from' => $dataTypeContent->firstItem(),
                                        'to' => $dataTypeContent->lastItem(),
                                        'all' => $dataTypeContent->total()
                                    ]) }}</div>
                        </div>
                        <div class="pull-right">
                            {{ $dataTypeContent->appends([
                                's' => $search->value,
                                'filter' => $search->filter,
                                'key' => $search->key,
                                'order_by' => $orderBy,
                                'sort_order' => $sortOrder
                            ])->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Single delete modal --}}
    <div class="modal modal-danger" tabindex="-1" id="delete_modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">{{ __('voyager::generic.delete_question') }} ?</h4>
                </div>
                <div class="modal-footer">
                    <form action="#" id="delete_form" method="POST">
                        {{ method_field('DELETE') }}
                        {{ csrf_field() }}
                        <input type="submit" class="btn btn-danger pull-right delete-confirm"
                               value="Supprimer">
                    </form>
                    <button type="button" class="btn btn-default pull-right"
                            data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@stop

@section('css')
    @if(!$dataType->server_side && config('dashboard.data_tables.responsive'))
        <link rel="stylesheet" href="{{ voyager_asset('lib/css/responsive.dataTables.min.css') }}">
    @endif
@stop

@section('javascript')
    <!-- DataTables -->
    @if(!$dataType->server_side && config('dashboard.data_tables.responsive'))
        <script src="{{ voyager_asset('lib/js/dataTables.responsive.min.js') }}"></script>
    @endif
    <script>
        $(document).ready(function () {
                    @if (!$dataType->server_side)
            var table = $('#dataTable').DataTable({!! json_encode(
                    array_merge([
                        "dom" => 't',
                        "order" => [],
                        "scrollY"=>       count($dataTypeContent)>5 ? "60vh" : false,
                        "scrollCollapse"=> count($dataTypeContent)>5 ? true : false,
                        "paging"=>         false,
                        "infos" => false,
                        "language" => __('voyager::datatable'),
                        "columnDefs" =>
                            [
                                ['targets' => [0, -1], 'searchable' =>  false, 'orderable' => false,'width' => '38px', 'max-width' => '38px'],
                            ],
                    ],
                    config('voyager.dashboard.data_tables', []))
                , true) !!});

            $('#searchInTable').keyup(function () {
                table.search($(this).val()).draw();
            });
            @else
            $('#search-input select').select2({
                minimumResultsForSearch: Infinity
            });
            @endif

            @if ($isModelTranslatable)
            $('.side-body').multilingual();
            //Reinitialise the multilingual features when they change tab
            $('#dataTable').on('draw.dt', function () {
                $('.side-body').data('multilingual').init();
            })
            @endif
            $('.select_all').on('click', function (e) {
                $('input[name="row_id"]').prop('checked', $(this).prop('checked'));
            });

        });


        var deleteFormAction;
        $('td').on('click', '.delete', function (e) {
            $('#delete_form')[0].action = '{{ route('voyager.'.$dataType->slug.'.destroy', ['id' => '__id']) }}'.replace('__id', $(this).data('id'));
            $('#delete_modal').modal('show');
        });
    </script>
@stop