@extends('adminlte::page')

@section('title', 'Subcategorías EFE')
@section('plugins.Datatables', true)
@section('plugins.DatatablesPlugins', true)

@section('content_header')
    <h1>Subcategorías EFE</h1>
@stop

@section('content')
<div class="card card-outline">
    <div class="card-header d-flex align-items-center">
        <i class="fas fa-sitemap mr-2"></i>
        <h3 class="card-title mb-0">Catálogo de Subcategorías</h3>

        @can('efe_classification.create')
        <a href="{{ route('catalogs.subcategory_classification.create') }}" class="btn btn-success ml-auto">
            <i class="fas fa-plus-circle"></i> Nueva Subcategoría
        </a>
        @endcan
    </div>

    <div class="card-body">
        @if(session('success'))
            <x-adminlte-alert theme="success" title="OK" dismissable>
                {{ session('success') }}
            </x-adminlte-alert>
        @endif
        {{-- Filtro por Categoría EFE (columna 0) --}}
        <div class="row mb-3">
        <div class="col-md-6">
            <label for="efeFilterInput" class="mb-1">Filtrar por Categoría EFE</label>
            <div class="input-group">
            <input id="efeFilterInput" class="form-control" list="efeFilterOptions" placeholder="Escribe para buscar...">
            <datalist id="efeFilterOptions"></datalist>
            <div class="input-group-append">
                <button type="button" id="efeFilterClear" class="btn btn-outline-secondary" title="Limpiar filtro">
                <i class="fas fa-times"></i>
                </button>
            </div>
            </div>
            <small class="form-text text-muted">
            Empieza a escribir para ver sugerencias; al seleccionar una categoría se filtrará la tabla.
            </small>
        </div>
        </div>

        <x-adminlte-datatable id="tblSubcats" :heads="$heads" :config="$config" striped hoverable bordered with-buttons>
            @foreach($rows as $r)
                <tr>
                    <td>{{ $r->efe?->name }}</td>
                    <td>{{ $r->name }}</td>
                    <td class="text-center">
                        @can('efe_classification.update')
                        <a class="btn btn-xs btn-warning"
                           href="{{ route('catalogs.subcategory_classification.edit', $r->subcategory_classification_id) }}"
                           aria-label="Editar subcategoría">
                            <i class="fas fa-edit"></i>
                        </a>
                        @endcan
                    </td>
                </tr>
            @endforeach
        </x-adminlte-datatable>
    </div>
</div>
@stop
@push('js')
<script>
(function () {
    const tableSel = '#tblSubcats';               // ID de tu DataTable
    const input    = document.getElementById('efeFilterInput');
    const clearBtn = document.getElementById('efeFilterClear');
    const list     = document.getElementById('efeFilterOptions');

    function regexEscape(s) {
        return (s+'').replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }

    function buildOptions(dt) {
        // Obtiene valores únicos de la columna 0 (Categoría EFE) y llena el datalist
        const uniques = dt.column(0).data().unique().toArray()
            .map(v => (v || '').toString().trim())
            .filter(v => v.length > 0)
            .sort((a, b) => a.localeCompare(b, 'es', {sensitivity:'base'}));

        list.innerHTML = '';
        for (const val of uniques) {
            const opt = document.createElement('option');
            opt.value = val;
            list.appendChild(opt);
        }
    }

    function applyFilter(dt, val, exactIfMatches = true) {
        const value = (val || '').trim();
        if (!value) {
            dt.column(0).search('').draw();
            return;
        }

        // ¿coincide exactamente con alguna opción del datalist?
        const options = Array.from(list.querySelectorAll('option')).map(o => o.value.toLowerCase());
        const exactMatch = options.includes(value.toLowerCase());

        if (exactIfMatches && exactMatch) {
            // Filtro exacto
            dt.column(0).search('^' + regexEscape(value) + '$', true, false).draw();
        } else {
            // Filtro por contiene (por si el usuario escribe y presiona Enter sin seleccionar)
            dt.column(0).search(value, false, true).draw();
        }
    }

    function init() {
        const $table = $(tableSel);
        const run = () => {
            const dt = $table.DataTable();
            buildOptions(dt);

            // Al cambiar (seleccionar) en el input con datalist → aplicar filtro
            input?.addEventListener('change', () => applyFilter(dt, input.value, true));

            // Al presionar Enter en el input → aplicar filtro por contiene
            input?.addEventListener('keydown', (ev) => {
                if (ev.key === 'Enter') {
                    ev.preventDefault();
                    applyFilter(dt, input.value, false);
                }
            });

            // Botón limpiar
            clearBtn?.addEventListener('click', () => {
                input.value = '';
                dt.column(0).search('').draw();
                input.focus();
            });
        };

        // Si la tabla ya está inicializada
        if ($.fn.dataTable.isDataTable($table)) {
            run();
        } else {
            // Espera a que DataTables termine de inicializar
            $table.on('init.dt', run);
        }
    }

    document.readyState !== 'loading' ? init() : document.addEventListener('DOMContentLoaded', init);
})();
</script>
@endpush