@extends('adminlte::page')

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

@section('content')
    <x-row>
        <x-col width="12">
            <x-filter>
                <x-row>
                    <x-col width="3">
                        <div class="from-group">
                            <label for="category_id">@lang('global.Category')</label>
                            <x-select name="category_id" id="category_id" error="category_id">
                                @foreach (get_intitules_by_group([['slug', '=', 'categories']]) as $intitule)
                                    <option value="{{ $intitule->id }}" data-valeur="{{ $intitule->valeur }}">{{ $intitule->libelle }}</option>
                                @endforeach
                            </x-select>
                        </div>
                    </x-col>
                    <x-col width="3">
                        <div class="from-group">
                            <label for="type_id">@lang('global.Type')</label>
                            <x-select name="type_id" id="type_id" error="type_id">
                                @foreach (get_intitules_by_group([['slug', '=', 'types-annuaires']]) as $intitule)
                                    <option value="{{ $intitule->id }}" data-valeur="{{ $intitule->valeur }}">{{ $intitule->libelle }}</option>
                                @endforeach
                            </x-select>
                        </div>
                    </x-col>
                </x-row>
            </x-filter>
        </x-col>
    </x-row>
    <x-row>
        <x-col width="12">
            <x-card>
                @can('annuaires.create')    
                    <x-slot name="tools">
                        {!! Util::Link(__('global.Add New'), route('annuaires.create'), 'plus', null, ['class' => Util::BTN_PRIMARY_SM]) !!}
                    </x-slot>
                @endcan

                <x-table>
                    <thead>
                        <tr>
                            <th>@lang('global.Id')</th>
                            <th>@lang('global.Uo')</th>
                            <th>@lang('global.Raison Sociale')</th>
                            <th>@lang('global.Address')</th>
                            <th>@lang('global.Contacts')</th>
                            <th>@lang('global.Action')</th>
                        </tr>
                    </thead>
                </x-table>
            </x-card>
        </x-col>
    </x-row>
@endsection

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

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

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

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

                            d.type_id = $('#type_id').val();
                        }
                    }
                },
                columnDefs: [
                    {targets: -1, orderable: false, className: 'text-center'}
                ],
                columns: [
                    {data: 'id'},
                    {data: 'uo_id'},
                    {data: 'raison_sociale'},
                    {data: 'address'},
                    {data: 'contact'},
                    {data: 'action'},
                ]
            });

            $('body').on('change', '#category_id, #type_id', function () {

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