@extends('adminlte::page')

@section('title', 'Intitules List')

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

@section('content')

<div class="card">
    <div class="card-header">
        <div class="card-tools">
            @can('intitules.create')
                <a class="btn btn-primary btn-sm" href="{{ route('intitules.create') }}">@lang('global.Add New')</a>
            @endcan
        </div>
    </div>
    <div class="card-body">
        <x-table id="dataTable">
            <thead>
                <tr>
                    <th>@lang('global.Id')</th>
                    <th>@lang('global.Group')</th>
                    <th>@lang('global.Libelle')</th>
                    <th>@lang('global.Libelle Term')</th>
                    <th>@lang('global.Constante')</th>
                    <th>@lang('global.Valeur')</th>
                    <th>@lang('global.Mandatory')</th>
                    <th>@lang('global.Ordre')</th>
                    <th>@lang('global.Etat')</th>
                    <th>@lang('global.Action')</th>
                </tr>
            </thead>
        </x-table>
    </div>
</div>
@endsection

@section('js')

<script>
    $(function () {
        
        window.dataTable = $('#dataTable').DataTable({
            serverSide: true,
            processing: true,
            ajax: '{{ route('intitules.index') }}',
            order: [[0, "desc"]],
            columns: [
                {data: "id"},
                {data: "group"},
                {data: "libelle"},
                {data: "libelle_term"},
                {data: "constante"},
                {data: "valeur"},
                {data: "required"},
                {data: "ordre"},
                {data: "etat"},
                {data: "action"},
            ],
            columnDefs: [
                {targets: [-1,-2,-3], orderable: false, className: 'text-center'}
            ],
            // initComplete: function () {
                
            //     this.api().columns().every(function () {
            //         var column = this;
            //         const placeholder = $(column.footer()).text();
                    
            //         if(placeholder != '@lang('global.Action')'){

            //             var input = document.createElement("input");
            //             $(input).addClass('form-control').attr('placeholder', placeholder).appendTo($(column.footer()).empty())
            //             .on('change', function () {
            //                 column.search($(this).val(), false, false, true).draw();
            //             });
            //         }
            //     });
            // }
        });
    });
</script>

@endsection