@extends('adminlte::page')

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

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

@section("content")

{{-- @if (auth()->user()->role->name != 'client')
<x-filter>
    <x-row>
        <x-input-group.select col="6" name="rubrique_id" id="rubrique_id"  for="rubrique_id" label="global.Heading" error="rubrique_id">
            @foreach (get_intitules_by_group([['slug', 'rubriques']]) as $intitule)
            <option value="{{ $intitule->id }}" data-valeur="{{ $intitule->valeur }}">{{ $intitule->libelle }}</option>
            @endforeach
        </x-input-group.select>
    </x-row>
</x-filter>
@endif --}}

<div class="row">
    <div class="col-sm-12">
        <x-card>
            @can('rubriques.create')
            <x-slot name="tools">
                {!! Util::Link(__('global.Add New'), route('rubriques.create'), 'plus', null, ['class' => Util::BTN_PRIMARY_SM]) !!}
            </x-slot>
            @endcan

            <x-table id="dataTable">
                <thead class="thead-inverse">
                    <tr>
                        <th>@lang('global.Id') </th>
                        <th>@lang('global.Type')</th>
                        <th>@lang('global.Directories')</th>
                        <th>@lang('global.Heading')</th>
                        <th>@lang('global.Description')</th>
                        <th>@lang('global.Action')</th>
                    </tr>
                </thead>
                {{-- <tbody>

                    @foreach ($annuaires as $annuaire)
                    <tr>
                        <td> {{ $annuaire->id }} </td>
                        <td class="text-center" style="width: 10%">
                            @if ($annuaire->getLogoAttribute() != null)
                                <img src="{{ $annuaire->get_logo() }}" style="width: 50%" />
                            @else
                                <div class="w-100 h-100">
                                    <i class="fa-solid fa-building fa-2x"></i>
                                </div>
                            @endif
                        </td>
                        <td>
                            {{ $annuaire->raison_sociale }} <br>
                            <small> {{ $annuaire->denomination }} </small>
                        </td>
                        <td>
                            <ul style="list-style-type: none;">
                                @foreach ($annuaire->rubriques as $intitule)
                                    <li> {{ $intitule->libelle }} </li>
                                @endforeach
                            </ul>
                        </td>
                        <td class="text-center"> {{ $annuaire->note ? Str::limit($annuaire->note, 90, ' ...') : '-' }} </td>
                        <td class="text-center">
                            {!! Util::Dropdown((
                                Util::DropDownItem(Util::FA_ICON("edit").' '.__('global.Edit'), route('rubriques.edit', $annuaire->string_id), ['class' => '']).
                                Util::DropDownDivider().
                                Util::DropDownItem(Util::FA_ICON("trash").' '.__('global.Delete'), route('rubriques.destroy', $annuaire->string_id), ['class' => 'bg-danger ajax-delete'])
                                ))
                            !!}

                        </td>
                    </tr>
                    @endforeach

                </tbody> --}}
            </x-table>
        </x-card>
    </div>
</div>
@endsection


@section('adminlte_js')
    <script>
        // $('#rubrique_id').on('change', function () {
        //     link = "{{ route('rubriques.index') }}?rubrique_id=" + $('#rubrique_id').val();
        //     console.log(link);
        //     window.location = link;
        // });

        $(function () {
            window.dataTable = $('#dataTable').DataTable({
                serverSide: true,
                processing: true,
                order: [[0, "desc"]],
                ajax: {
                    url: '{{ route('rubriques.index') }}',
                    data: function (d) {
                        d.rubrique_id = $('#rubrique_id').val();
                    }
                },
                columns: [
                    {data: "id"},
                    {data: "logo"},
                    {data: "raison"},
                    {data: "rubrique"},
                    {data: "desc"},
                    {data: 'action', className: 'text-center, text-nowrap'},
                ],
                columnDefs: [
                    {targets: [-1, -2], orderable: false, className: 'text-center'}
                ]
            });

            $('#rubrique_id').on('change', function () {
                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);
                    },
                });

            })
        });
    </script>
@endsection