@push('css')
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.5/css/dataTables.dataTables.css" />
<style>
.dashlite-dt-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}
.dashlite-dt-toolbar [data-dashlite-datatable-custom-filter] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0;
}
.dashlite-dt-toolbar [data-dashlite-datatable-custom-filter] .form-label {
    margin-bottom: 0;
    white-space: nowrap;
}
.dashlite-dt-toolbar [data-dashlite-datatable-custom-filter] .form-select {
    min-width: 10.5rem;
    max-width: 18rem;
}
.dashlite-dt-toolbar [data-dashlite-datatable-custom-filter] .form-control.dashlite-filter-number {
    min-width: 5.5rem;
    max-width: 9rem;
}
</style>
@endpush
<div class="dash-lite-datatable">
    @if(count($customFilters))
    <div class="dashlite-dt-toolbar">
    @foreach($customFilters as $customFilter)
    <div class="form-group mb-0" data-dashlite-datatable-custom-filter>
        <label class="form-label" for="{{ $customFilter['selectId'] }}">{{ $customFilter['label'] }}</label>
        @if(($customFilter['control'] ?? 'select') === 'number')
            <input
                type="text"
                id="{{ $customFilter['selectId'] }}"
                class="form-control dashlite-filter-number"
                inputmode="decimal"
                autocomplete="off"
                placeholder="{{ $customFilter['placeholder'] ?? '' }}"
                aria-describedby="{{ $customFilter['selectId'] }}-hint"
            >
            <span id="{{ $customFilter['selectId'] }}-hint" class="visually-hidden">{{ __('Nombre uniquement, point ou virgule pour les décimales') }}</span>
        @else
            <select
                id="{{ $customFilter['selectId'] }}"
                class="form-select"
                autocomplete="off"
                @if(!empty($customFilter['dependsOn'])) disabled @endif
            >
                <option value="">{{ __('Toutes') }}</option>
                @if(empty($customFilter['dependsOn']))
                    @foreach($customFilter['options'] ?? [] as $option)
                        <option value="{{ $option->id }}">@if(filled($option->code ?? null)){{ $option->code }} — @endif{{ $option->name }}</option>
                    @endforeach
                @endif
            </select>
        @endif
    </div>
    @endforeach
    </div>
    @endif
    <div class="dataTables_wrapper dt-bootstrap4 no-footer">
        <table id="{{ $name }}" class="datatable-wrap my-3 table table-orders dt-bootstrap4 hover">
            <thead class="tb-odr-head">
                <tr class="tb-odr-item">
                    @foreach($columns as $column)
                    <th><span>{{ $column['label'] }}</span></th>
                    @endforeach
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
@push('js')
<script src="https://cdn.datatables.net/2.3.5/js/dataTables.js"></script>
<script>
$(document).ready(function () {
    const base = new URL(window.location.href);
    let page = base.searchParams.get('page') ?? 0;
    let length = base.searchParams.get('length') ?? 10;

  let table = $('#{{ $name }}').DataTable({
        processing: true,
        serverSide: true,
        searching: {{ ($searching ?? true) ? 'true' : 'false' }},
        displayStart: page * length,
        pageLength: length,
        order: [[0, "asc"]],
        columnDefs: [{ targets: '_all', className: 'dt-left' }],

        ajax: {
            url: "{{ $route }}",
            data: function (data) {
                data.filter = $('#filterByFilter').val();
                data.status = $('#filterStatusByFilter').val();
                @foreach($customFilters as $customFilter)
                    @if(($customFilter['control'] ?? 'select') === 'number')
                    (function () {
                        var raw = ($('#{{ $customFilter['selectId'] }}').val() || '').replace(/,/g, '.').trim();
                        var n = parseFloat(raw);
                        data['{{ $customFilter['param'] }}'] = (raw !== '' && raw !== '.' && Number.isFinite(n)) ? String(n) : '';
                    })();
                    @else
                    data['{{ $customFilter['param'] }}'] = $('#{{ $customFilter['selectId'] }}').val() || '';
                    @endif
                @endforeach

                page = base.searchParams.get('page') ?? 0;
                length = base.searchParams.get('length') ?? 10;

                data.start = page * length;
                data.length = length;
            }
        },

        columns: [
            @foreach ($columns as $col)
                {
                    data: "{{ $col['field'] ?? 'id' }}",
                    name: "{{ $col['field'] ?? '' }}",
                    @if (($col['orderable'] ?? true) === false)
                    orderable: false,
                    @endif
                    @if (($col['searchable'] ?? true) === false)
                    searchable: false,
                    @endif

                    @if ($col['type'] === 'text' && isset($col['suffix']))
                        @php
                            $_suffixField = $col['field'] ?? '';
                            $_suffixUseRow = str_contains($_suffixField, '.');
                            $_suffixPath = $_suffixUseRow ? explode('.', $_suffixField) : [];
                        @endphp
                        render: function (data, type, row) {
                            var val = @if($_suffixUseRow) (function (r) {
                                var path = @json($_suffixPath);
                                var v = r;
                                for (var i = 0; i < path.length; i++) {
                                    v = (v == null) ? null : v[path[i]];
                                }
                                return v;
                            })(row) @else data @endif;
                            if (val === null || val === undefined || val === '') {
                                return '';
                            }
                            return String(val) + @json($col['suffix']);
                        },
                    @endif

                    @if ($col['type'] === 'boolean')
                        render: function (data) {
                            return data
                            ? '<em class="icon text-success ni ni-check-circle"></em>'
                                : '<em class="icon text-danger ni ni-cross-circle"></em>';
                        },
                    @endif

                    @if ($col['type'] === 'badge')
                        render: function (data, type, row) {
                            if (!data) return '';
                    
                            const colors = @json($col['colors']);
                            const labels = @json($col['labels']);
                    
                            const color = colors[data] ?? 'secondary';
                            const label = labels[data] ?? data;
                    
                            return `<span class="badge bg-${color}">${label}</span>`;
                        },
                    @endif

                    @if ($col['type'] === 'date')
                        render: function (data) {
                            if (!data) return '';
                            let d = new Date(data);
                            return d.toLocaleDateString("fr-FR");
                        },
                    @endif

                  @if ($col['type'] === 'action')
                  render: function (data, type, row) {
                      let buttonsHtml = '<div class="btn-group" aria-label="Actions">';
                      let btnRoute = '';
                  
                      @foreach($col['buttons'] as $button)
                          btnRoute = '{{ $button['route'] }}'.replace(':id', row.id);
                  
                          @if ($button['action'] ?? null)
                              let attributes = '';
                              let color = '{{ $button['color'] }}';
                              let icon = '{{ $button['icon'] }}';
                              @if ($button['action'] === 'block')
                              const isActive = row.is_active == 1;
                  
                              const label = isActive ? '{{ __("Bloquer") }}' : '{{ __("Débloquer") }}';
                              color = isActive ? 'warning' : 'success';
                              icon  = isActive ? 'ban' : 'check';
                              attributes = `data-state="${isActive ? 1 : 0}" title="${label}"`;
                              @elseif ($button['action'] === 'delete')
                              attributes = `title="Supprimer"`;
                              @endif
                  
                              buttonsHtml += `
                                  <button class="btn btn-sm btn-dim btn-outline-${color} {{ $button['action'] }}-btn" data-url="${btnRoute}" ${attributes}>
                                      <em class="icon fas fa-${icon}"></em>
                                  </button>
                              `;
                          @else
                              buttonsHtml += `
                                  <a href="${btnRoute}"
                                     class="btn btn-sm btn-dim btn-outline-{{ $button['color'] }}"
                                     title="{{ $button['label'] }}">
                                      <em class="icon fas fa-{{ $button['icon'] }}"></em>
                                  </a>
                              `;
                          @endif
                      @endforeach
                  
                      buttonsHtml += '</div>';
                      return buttonsHtml;
                  },
                  @endif
                },
            @endforeach
        ],
        language: {
            search: 'Recherche&nbsp;:',
            searchPlaceholder: 'Rechercher...',
            lengthMenu: 'Afficher _MENU_ entrées',
            info: 'Affichage de _START_ à _END_ sur _TOTAL_ entrées',
            infoEmpty: 'Aucune entrée à afficher',
            infoFiltered: '(filtré de _MAX_ entrées au total)',
            paginate: { first: 'Premier', last: 'Dernier', next: 'Suivant', previous: 'Précédent' },
            emptyTable: 'Aucune donnée disponible',
            zeroRecords: 'Aucun résultat trouvé',
            processing: 'Chargement...',
        },
    });

    @php
        $dashliteCustomFilterParentIds = collect($customFilters)
            ->pluck('dependsOn')
            ->filter()
            ->unique()
            ->values()
            ->all();
    @endphp
    @foreach($customFilters as $customFilter)
        @if(($customFilter['control'] ?? 'select') === 'number')
        (function () {
            var $w = $('#{{ $customFilter['selectId'] }}');
            $w.on('keydown', function (e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    $(this).trigger('change');
                    return;
                }
                var allowed = ['Backspace', 'Delete', 'Tab', 'Escape', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
                if (allowed.indexOf(e.key) >= 0) {
                    return;
                }
                if (e.ctrlKey || e.metaKey || e.altKey) {
                    return;
                }
                if (/^[0-9.,]$/.test(e.key)) {
                    return;
                }
                e.preventDefault();
            });
            $w.on('input', function () {
                var v = this.value.replace(/,/g, '.');
                v = v.replace(/[^0-9.]/g, '');
                var dot = v.indexOf('.');
                if (dot !== -1) {
                    v = v.slice(0, dot + 1) + v.slice(dot + 1).replace(/\./g, '');
                }
                this.value = v;
            });
            $w.on('change', function () {
                table.ajax.reload(null, false);
            });
        })();
        @elseif(!empty($customFilter['dependsOn']))
        (function () {
            var $parent = $('#{{ $customFilter['dependsOn'] }}');
            var $child = $('#{{ $customFilter['selectId'] }}');
            var map = @json($customFilter['optionsByParent'] ?? []);
            var allLabel = @json(__('Toutes'));

            function rebuildChild() {
                var pid = $parent.val();
                $child.prop('disabled', !pid);
                var opts = pid && map[pid] ? map[pid] : [];
                $child.empty().append($('<option>', { value: '', text: allLabel }));
                opts.forEach(function (o) {
                    var text = (o.code ? String(o.code) + ' — ' : '') + String(o.name);
                    $child.append($('<option>', { value: o.id, text: text }));
                });
                $child.val('');
            }

            $parent.on('change', function () {
                rebuildChild();
                table.ajax.reload(null, false);
            });
            $child.on('change', function () {
                table.ajax.reload(null, false);
            });
            rebuildChild();
        })();
        @else
        @if(! in_array($customFilter['selectId'], $dashliteCustomFilterParentIds, true))
        $('#{{ $customFilter['selectId'] }}').on('change', function () {
            table.ajax.reload(null, false);
        });
        @endif
        @endif
    @endforeach

    window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            @foreach($customFilters as $customFilter)
            $('#{{ $customFilter['selectId'] }}').val('');
            @endforeach
            table.ajax.reload(null, false);
        }
    });

    $('#{{ $name }}').on('page.dt', function () {
        let info = table.page.info();
        base.searchParams.set("page", info.page);
        window.history.replaceState(null, null, base);
    });

    $('#{{ $name }}').on('length.dt', function (e, settings, len) {
        base.searchParams.set("length", len);
        window.history.replaceState(null, null, base);
    });

    // AJAX buttons
    $(document).on('click', '.delete-btn', function() {
        let url = $(this).data('url');
        Swal.fire({
            title: 'Êtes-vous sûr ?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Oui',
            cancelButtonText: 'Annuler'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: url,
                    type: 'DELETE', // or POST if needed
                    data: { _token: '{{ csrf_token() }}' },
                    success: function() { table.ajax.reload(null, false); },
                    error: function() { Swal.fire('Erreur', 'Impossible', 'error'); }
                });
            }
        });
    });
  $(document).on('click', '.block-btn', function () {
    const url = $(this).data('url');
    const isActive = $(this).data('state');

    Swal.fire({
        title: isActive ? 'Bloquer cet utilisateur ?' : 'Débloquer cet utilisateur ?',
        text: isActive
            ? 'Cet utilisateur ne pourra plus se connecter.'
            : 'Cet utilisateur pourra se reconnecter.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: isActive ? 'Oui, bloquer' : 'Oui, débloquer',
        cancelButtonText: 'Annuler',
    }).then((result) => {
        if (result.isConfirmed) {
            $.post(url, {
                _token: '{{ csrf_token() }}',
                'is_active': isActive,
            })
            .done(() => {
                table.ajax.reload(null, false);
                Swal.fire('Succès', 'Action effectuée avec succès', 'success');
            })
            .fail(() => {
                Swal.fire('Erreur', 'Impossible de traiter la demande', 'error');
            });
        }
    });
});

});
</script>
@endpush