@extends('adminlte::page')

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

@section('content')
    <div class="contianer-fluid">
        <x-filter>
            <x-row>
                <x-form-group.select col="3" for="uo_id" id="uo_id" label="global.Uo">
                    @foreach (get_all_uos() as $uo)
                        <option value="{{ $uo->id }}">{{ $uo->raison_sociale }}</option>
                    @endforeach
                </x-form-group.select>

                <x-form-group.select col="2" for="type_id" name="type_id" id="type_id"
                    label="global.Type Directory" 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-form-group.select>
                
                <x-form-group.select col="2" name="category_id" id="category_id" label="global.Category"
                    error="category_id">
                    @foreach (get_intitules_by_group([['slug', '=', 'categories-annuaires']]) as $intitule)
                        <option value="{{ $intitule->id }}" data-valeur="{{ $intitule->valeur }}">
                            {{ $intitule->libelle }}</option>
                    @endforeach
                </x-form-group.select>

                <x-form-group.select col="2" name="activite_id" id="activite_id" label="global.Activity"
                    error="activite_id">
                    @foreach (get_intitules_by_group([['slug', '=', 'activites']]) as $intitule)
                        <option value="{{ $intitule->id }}" data-valeur="{{ $intitule->valeur }}">
                            {{ $intitule->libelle }}</option>
                    @endforeach
                </x-form-group.select>

                <x-form-group.select col="3" name="manager_id" id="manager_id" label="global.Manager"
                    error="manager_id">
                    @foreach ($gestionnaires as $manager)
                        <option value="{{ $manager->id }}"> {{ $manager->name . ' ' . $manager->last_name }}
                        </option>
                    @endforeach
                </x-form-group.select>

                <div class="float-right">
                    <a href="#" onclick="filtre_clear()" class="btn btn-primary"> @lang('global.Clear all') </a>
                </div>

            </x-row>
        </x-filter>

        <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 id="annuaires">
                        <thead>
                            <tr>
                                <th>@lang('global.id')</th>
                                <th>@lang('global.Type')</th>
                                <th>@lang('global.Uo')</th>
                                <th>@lang('global.RSociale')</th>
                                {{-- <th nowrap>@lang('global.Full Address')</th> --}}
                                <th>@lang('global.Contacts')</th>
                                {{-- <th>@lang('global.Ctrl Announcement')</th> --}}
                                {{-- <th>@lang('global.Subscriber')</th> --}}
                                <th>@lang('global.Etat')</th>
                                <th>@lang('global.Action')</th>
                            </tr>
                        </thead>
                    </x-table>
                </x-card>
            </x-col>
        </x-row>
    </div>
    <div class="modal fade" id="address-map-modal" role="dialog"></div>

@endsection

@section('adminlte_js')
    <script>
        $(function() {
            window.dataTable = $('#annuaires').DataTable({
                serverSide: true,
                processing: true,
                order: [
                    [0, "desc"]
                ],
                ajax: {
                    url: '{{ route('annuaires.index') }}',
                    data: function(d) {

                        if ($('#type_id').val()) {
                            d.type_id = $('#type_id').val();
                        }

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

                        if ($('#activite_id').val()) {
                            d.activite_id = $('#activite_id').val();
                        }

                        if ($('#uo_id').val()) {
                            d.uo_id = $('#uo_id').val();
                        }

                        if ($('#manager_id').val()) {
                            d.manager_id = $('#manager_id').val();
                        }

                        if ($('#annuaire_created_at').val()) {
                            d.annuaire_created_at = $('#annuaire_created_at').val();
                        }
                    }
                },

                columnDefs: [{
                    targets: [-1, -2, -3],
                    orderable: false,
                    className: 'text-center'
                }],

                order: [
                    [1, "desc"]
                ],

                columns: [
                    {
                        data: 'column_id',
                        className: 'text-center'
                    },
                    {
                        data: 'id',
                        className: 'text-center'
                    },
                    {
                        data: 'uo_id'
                    },
                    {
                        data: 'raison_sociale',
                        className: 'text-center'
                    },
                    // {data: 'adresse'},
                    {
                        data: 'contact',
                        className: 'text-nowrap'
                    },
                    // {
                    //     data: 'block_pub'
                    // },
                    // {
                    //     data: 'abonnement'
                    // },
                    {
                        data: 'etat'
                    },
                    {
                        data: 'action',
                        className: 'text-center, text-nowrap'
                    },
                ]
            });

            $('#type_id').on('change', function() {
                window.dataTable.ajax.reload();
            });

            $('#category_id').on('change', function() {
                window.dataTable.ajax.reload();
            });

            $('#activite_id').on('change', function() {
                window.dataTable.ajax.reload();
            });

            $('#uo_id').on('change', function() {
                window.dataTable.ajax.reload();
            });

            $('#manager_id').on('change', function() {
                window.dataTable.ajax.reload();
            });

            // $('#annuaire_created_at').on('change', function () {
            //     window.dataTable.ajax.reload();
            // });


            window.dataTable.on('change', function(e) {
                window.dataTable.ajax.reload();
            })

            // window.dataTable.on('change', function(e){
            //     $.ajax({
            //         type: "PUT",
            //         url: e.target.dataset.url,
            //         data: {
            //             "_token": "{{ csrf_token() }}",
            //         },
            //         success: function(data){
            //             console.log(data);
            //         },
            //     });
            // })

            filtre_clear = () => {
                $('#uo_id').val("");
                $('#uo_id').trigger('change');
                $('#type_id').val("");
                $('#type_id').trigger('change');
                $('#category_id').val("");
                $('#category_id').trigger('change');
                $('#activite_id').val("");
                $('#activite_id').trigger('change');
                $('#manager_id').val("");
                $('#manager_id').trigger('change');
            }
        });
    </script>
@endsection