@props([
    'columns',
    'items',
    'detailRoute' => null,
    'editRoute' => null,
    'deleteRoute' => null,
    'showActions' => true
])
@php
    $showActions = filter_var($showActions, FILTER_VALIDATE_BOOLEAN);
@endphp
<div class="overflow-x-auto overflow-y-hidden rounded-md bg-white">
    <table class="min-w-full">
        <thead>
            <tr class="bg-surface">
                @foreach ($columns as $column)
                    <th
                        class="px-4 py-3 text-left w-[{{ $column['width'] ?? 'auto' }}] text-size-small-heading font-medium text-black leading-normal">
                        {{ $column['label'] }}
                    </th>
                @endforeach
                @if ($showActions)
                <th class="px-4 py-3 text-left w-[120px] text-size-small-heading font-medium text-black leading-normal">
                    Acciones
                </th>
                @endif
            </tr>
        </thead>
        <tbody>
            @forelse ($items as $item)
                <tr class="border-t border-t-[#dde1e3]">
                    {{-- Celdas de datos --}}
                    @foreach ($columns as $column)
                        <td class="h-[72px] px-4 py-2 text-[#6a7681] text-sm font-normal leading-normal">
                            @php
                                $cellContent = $column['render']($item);
                            @endphp

                            @if (!empty($column['type']) && $column['type'] === 'status')
                                {{-- Manejo de la columna de ESTADO --}}
                                @php
                                    $isEnabled = filter_var($cellContent, FILTER_VALIDATE_BOOLEAN); // Asume que $cellContent es booleano (true/false, 1/0, 'true'/'false')
                                    $statusClass = $isEnabled ? 'bg-green-500' : 'bg-red-500';
                                    $statusBackgroundClass = $isEnabled ? 'bg-success100' : 'bg-danger100';
                                    $statusText = $isEnabled ? 'Habilitado' : 'Deshabilitado';
                                    $textColor = $isEnabled ? 'text-green-500' : 'text-red-500';
                                @endphp
                                <div class="flex justify-start">
                                    <div class="flex items-center space-x-2 py-1 px-2 rounded-full {{ $statusBackgroundClass }}">
                                        <span class="inline-block w-2 h-2 rounded-full {{ $statusClass }}"></span>
                                        <span class="{{ $textColor }} text-sm font-normal">{{ $statusText }}</span>
                                    </div>
                                </div>
                            @elseif (!empty($column['isHtml']) && $column['isHtml'] === true)
                                {{-- Contenido HTML/Renderizado --}}
                                <div class="line-clamp-2">{!! html_entity_decode($cellContent) !!}</div>
                            @else
                                {{-- Contenido de texto simple --}}
                                {!! $cellContent !!}
                            @endif
                        </td>
                    @endforeach
                    @if ($showActions)
                    <td class="h-[72px] px-4 py-2 w-[120px] text-sm font-normal leading-normal">
                        <div class="flex items-center space-x-2">
                            @if (isset($detailRoute))
                                <a href="{{ route($detailRoute, $item['id'] ?? $item->id) }}"
                                    class="p-2 text-[#6a7681] hover:text-[#121416] transition-colors duration-150"
                                    title="Ver detalle">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none"
                                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
                                        <circle cx="12" cy="12" r="3" />
                                    </svg>
                                </a>
                            @endif
                            @if (isset($editRoute))
                                <a href="{{ route($editRoute, $item['id'] ?? $item->id) }}"
                                    class="btn-edit"
                                    title="Editar">
                                    <x-icons.edit />
                                </a>
                            @endif
                            @if (isset($deleteRoute))
                                <button type="button"
                                    onclick="toggleModalDelete('deleteModalTableCrud', '{{ route($deleteRoute, $item->id) }}')"
                                    class="btn-rounded-remove" title="Eliminar">
                                    <x-icons.trash />
                                </button>
                            @endif
                        </div>
                    </td>
                    @endif
                </tr>
            @empty
                <tr>
                    <td colspan="{{ count($columns) + 1 }}" class="text-parrafo text-center py-4 text-[#6a7681]">
                        No hay registros disponibles.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>

    @if ($items->hasPages())
        <div class="px-4 py-4">
            {{ $items->withQueryString()->links() }}
        </div>
    @endif
</div>

@if(isset($deleteRoute))
    <x-modals.modal-confirm-delete id="deleteModalTableCrud" cancelId="btnCloseTableCrud" />
@endif

@push('scripts')
    <script>
        const btnCloseModal = document.getElementById("btnCloseTableCrud");
        if (btnCloseModal) {
            btnCloseModal.addEventListener("click", function (e) {
                e.preventDefault();
                const modal = document.getElementById("deleteModalTableCrud");
                if (modal) {
                    modal.classList.add('hidden');
                }
            });
        }
    </script>
@endpush