@extends('adminlte::page')

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

@section('content_header')
    <h1>{{ __('global.Employees') . ' ' . __('global.List') }}</h1>
@endsection

@section('content')
    <x-filter>
        <x-row>
            <x-col width="3">
                <div class="from-group">
                    <label for="direction_id">@lang('global.Direction')</label>
                    <x-select name="direction_id" id="direction_id" error="direction_id">
                        @foreach (get_intitules_by_group([['slug', '=', 'directions']]) 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="fonction_id">@lang('global.Fonction')</label>
                    <x-select name="fonction_id" id="fonction_id" error="fonction_id">
                        @foreach (get_intitules_by_group([['slug', '=', 'fonctions']]) as $intitule)
                            <option value="{{ $intitule->id }}" data-valeur="{{ $intitule->valeur }}">
                                {{ $intitule->libelle }}</option>
                        @endforeach
                    </x-select>
                </div>
            </x-col>
        </x-row>
    </x-filter>
    <div class="contianer-fluid">
        <div class="row">
            <div class="col-md-12">
                <x-card>
                    <x-slot name="tools">
                        <a href="{{ route('employees.create') }}" class="btn btn-primary btn-sm">@lang('global.Add New')</a>
                    </x-slot>

                    <x-table id="employees">
                        <thead>
                            <tr>
                                <th>@lang('global.id')</th>
                                <th>@lang('global.Name') & @lang('global.Prenom')</th>
                                <th>@lang('global.Directories')</th>
                                <th>@lang('global.Fonction')</th>
                                <th>@lang('global.Contact')</th>
                                <th>@lang('global.Action')</th>
                            </tr>
                        </thead>
                    </x-table>
                </x-card>
            </div>
        </div>
    </div>

@endsection

@section('adminlte_js')

    <script>
        $(function() {

            window.dataTable = $('#employees').DataTable({
                serverSide: true,
                processing: true,
                ajax: {
                    url: "{{ route('employees.index') }}",
                    data: (d) => {

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

                        if ($('#fonction_id').val()) {
                            d.fonction_id = $('#fonction_id').val();
                        }
                        
                        if ($('#etat').val()) {
                            d.etat = $('#etat').val();
                        }
                    }
                },
                columns: [{
                        data: "id"
                    },
                    {
                        data: "name"
                    },
                    {
                        data: "annuaire"
                    },
                    {
                        data: "fonction"
                    },
                    {
                        data: "contact"
                    },
                    {
                        data: "action"
                    }
                ],
                columnDefs: [{
                    targets: -1,
                    orderable: false,
                    className: "text-center"
                }]
            });


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

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

            $('#service_id').on('change', function() {
                window.dataTable.ajax.reload();
            });
        });
    </script>

@endsection