@extends('adminlte::page')

@section('title', __('global.Pvr').' '.__('global.List'))

@section('content_header')
<h1>@lang('global.Pvr') @lang('global.List')</h1>
@endsection

@section('content')

    <x-row>

        <x-col>
            <x-filter>
                <x-row>
                    <x-col width="3">
                        <x-form-group.select for="usager_id" label="global.Usager">
                            @foreach (get_all_usagers() as $usager)
                                <option value="{{ $usager->id }}">{{ $usager->full_name }}</option>
                            @endforeach
                        </x-form-group.select>
                    </x-col>

                    <x-col width="3">
                        <x-form-group.select for="infraction_type_id" label="global.Offense Type">
                            @foreach (get_intitules_by_group([['slug', '=', 'types-infractions']]) as $intitule)
                                <option value="{{ $intitule->id }}">{{ $intitule->libelle }}</option>
                            @endforeach
                        </x-form-group.select>
                    </x-col>
                </x-row>
            </x-filter>
        </x-col>


        <x-col>
            <x-card>
                <x-table id="pvrs-table">
                    <thead>
                        <tr>
                            <th>@lang('global.Id')</th>
                            <th>@lang('global.Created At')</th>
                            <th>@lang('global.Usager')</th>
                            <th>@lang('global.Car Registration')</th>
                            <th>@lang('global.Offense')</th>
                            <th>@lang('global.Gpscood')</th>
                            <th>@lang('global.Etat')</th>
                            <th>@lang('global.Action')</th>
                        </tr>
                    </thead>

                    <tbody></tbody>
                </x-table>
            </x-card>
        </x-col>
    </x-row>

@endsection

@push('js')
    <script>
        $(function () {
            window.dataTable = $('#pvrs-table').DataTable({
                serverSide: true,
                processing: true,
                ajax: {
                    url: '{{ route('pvrs.index') }}',
                    data: d => {

                        if($('#infraction_type_id').val()) {

                            d.infraction_type_id = $('#infraction_type_id').val();
                        }

                        if($('#usager_id').val()) {

                            d.usager_id = $('#usager_id').val();
                        }
                    }
                },
                order: [[0, 'desc']],
                columns: [
                    {data: 'id'},
                    {data: 'created_at'},
                    {data: 'usager'},
                    {data: 'immat'},
                    {data: 'infractions'},
                    {data: 'gpscood'},
                    {data: 'etat'},
                    {data: 'action', orderable: false, className: 'text-center'},

                ]
            });

            $('#infraction_type_id, #usager_id').on('change', function () {

                window.dataTable.ajax.reload();
            });
        });
    </script>
@endpush