<div>
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-header m-0">
                    <div class="d-flex align-items-center justify-content-between">
                        <h4 class="card-title m-0">Procesos Registrados</h4>
                        @can('procesos.create')
                            <a href="{{ route('procesos.create') }}" class="btn btn-primary">
                                Nuevo Proceso
                            </a>
                        @endcan
                    </div>
                </div>
                <div class="card-body performane-indicator-card">
                    <h4 class="card-title">Filtros de Búsqueda: </h4>
                        
                    <div class="row">
                        {{-- Búsqueda por código --}}
                        <div class="col-md-6">
                            <label for="search" class="form-label">Código/Descripción/Nurej</label>
                            <input type="text" id="search" wire:model.live.debounce.300ms="search" placeholder="Buscar proceso..." class="form-control">
                        </div>

                        {{-- Filtro por departamento --}}
                        <div class="col-md-2">
                            <label for="departamento" class="form-label">Departamento</label>
                            <select id="departamento" wire:model.live="departamento_id" class="form-select">
                                <option value="">Todos los departamentos</option>
                                @foreach($departamentos as $departamento)
                                    <option value="{{ $departamento->cod_depto }}">{{ $departamento->depto_nombre }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-2">
                            <label class="form-label">Tipo de Delito</label>
                            <div wire:ignore>
                                <select id="tipo_delito" class="form-select">
                                    <option value="">Todos los tipos</option>
                                    @foreach($tiposDelito as $tipo)
                                        <option value="{{ $tipo->id }}">{{ $tipo->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <label class="form-label">Tipo de Proceso</label>
                            <div wire:ignore>
                                <select id="tipo_proceso" class="form-select" >
                                    <option value="">Todos los tipos</option>
                                    @foreach($tiposProceso as $tipoP)
                                        <option value="{{ $tipoP->id }}">{{ $tipoP->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    @if($search)
                        <span class="badge badge-outline-dark" style="font-size: 0.875rem;">
                            Código/Descrip/Nurej: "{{ $search }}"
                            <a href="#" wire:click.prevent="$set('search', '')" class="text-white ml-1">✖</a>
                        </span>
                    @endif
                    @if($departamento_id)
                        <span class="badge badge-outline-dark" style="font-size: 0.875rem;">
                            Departamento: "{{ $this->departamentoNombre }}"
                            <a href="#" wire:click.prevent="$set('departamento_id', '')" class="text-white ml-1">✖</a>
                        </span>
                    @endif
                    @if($tipo_delito_id)
                        <span class="badge badge-outline-dark" style="font-size: 0.875rem;">
                            Tipo Delito: "{{ $this->tipoDelitoNombre }}"
                            <a href="#" wire:click.prevent="$set('tipo_delito_id', '')" class="text-white ml-1">✖</a>
                        </span>
                    @endif
                    @if($tipo_proceso_id)
                        <span class="badge badge-outline-dark" style="font-size: 0.875rem;">
                            Tipo Proceso: "{{ $this->tipoProcesoNombre }}"
                            <a href="#" wire:click.prevent="$set('tipo_proceso_id', '')" class="text-white ml-1">✖</a>
                        </span>
                    @endif
                    @if($search || $tipo_delito_id || $departamento_id || $tipo_proceso_id)
                        <button wire:click="limpiarFiltros" class="btn btn-sm btn-outline-danger ml-2">Quitar Filtros</button>
                    @endif
                    <hr>
                    <div class="table-responsive">
                        <div class="d-flex justify-content-end mb-3">
                            <button wire:click="exportarExcel"
                                    wire:loading.attr="disabled"
                                    class="btn btn-outline-success btn-icon-text btn-sm">
                                <i class="fa fa-file-excel-o"></i> Exportar Excel
                            </button>
                            <button wire:click="exportPdf"
                                    wire:loading.attr="disabled"
                                    class="btn btn-outline-danger btn-sm">
                                <i class="fa fa-file-pdf-o"></i> Exportar PDF
                            </button>

                        </div>

                        <table class="table table-hover table-sm" width="100%">
                            <thead>
                                <tr>
                                    <th class="text-center">Acciones</th>
                                    <th wire:click="sortBy('fecha_inicio')" class="text-center">
                                        <div class="flex items-center">
                                            Fecha Inicio
                                            @if($sortField === 'fecha_inicio')
                                                <i class="fa fa-sort-{{ $sortDirection === 'asc' ? 'up' : 'down' }} ml-2 text-blue-600"></i>
                                            @else
                                                <i class="fa fa-sort ml-2 text-gray-400"></i>
                                            @endif
                                        </div>
                                    </th>
                                    <th wire:click="sortBy('codigo_proceso')" class="text-center">
                                        <div class="flex items-center">
                                            Código
                                            @if($sortField === 'codigo_proceso')
                                                <i class="fa fa-sort-{{ $sortDirection === 'asc' ? 'up' : 'down' }} ml-2 text-blue-600"></i>
                                            @else
                                                <i class="fa fa-sort ml-2 text-gray-400"></i>
                                            @endif
                                        </div>
                                    </th>
                                    <th class="text-center">Descripción</th>
                                    <th wire:click="sortBy('ciudad_id')" class="text-center">
                                        <div class="flex items-center">
                                            Departamento
                                            @if($sortField === 'ciudad_id')
                                                <i class="fa fa-sort-{{ $sortDirection === 'asc' ? 'up' : 'down' }} ml-2 text-blue-600"></i>
                                            @else
                                                <i class="fa fa-sort ml-2 text-gray-400"></i>
                                            @endif
                                        </div>
                                    </th>
                                    <th class="text-center">Requerimientos</th>
                                    <th class="text-center">Juzgado</th>
                                    <th class="text-center">Tipo de Delito</th>
                                    <th class="text-center">Tipo de Proceso</th>
                                    <th class="text-center">Estado</th>
                                    <th class="text-center">Daño Economico</th>
                                    <th class="text-center">Registrado Por</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($procesos as $index=>$proceso)
                                    <tr>
                                        <td class="text-center">
                                            <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton{{ $index }}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Acciones </button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ $index }}">
                                                @can('seguimientos.create')<a class="dropdown-item mb-2" href="{{ route('seguimientos.create', $proceso) }}">Seguimiento</a>@endcan
                                                @can('requerimientos.create')<a class="dropdown-item mb-2" href="{{ route('requerimientos.create', $proceso) }}">Requerimiento</a>@endcan
                                                @can('procesos.edit')<a class="dropdown-item mb-2" href="{{ route('procesos.edit', $proceso) }}">Editar</a>@endcan
                                                @can('asignaciones.create')<a class="dropdown-item mb-2"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#modalAsignar"
                                                    onclick="setProceso({{ $proceso->id }})">Asignación</a>
                                                @endcan
                                                <a class="dropdown-item mb-2" href="{{ route('procesos.pdf', $proceso) }}" target="_blank">Ver Historial</a>
                                                @can('procesos.destroy')<a href="{{ route('procesos.destroy', $proceso->id) }}" class="dropdown-item mb-2" data-confirm-delete="true">Eliminar</a>@endcan
                                            </div>
                                        </td>
                                        <td class="text-center">{{ date('d/m/Y', strtotime($proceso->fecha_inicio)) }}</td>
                                        <td class="text-center">{{ $proceso->codigo_proceso }} <br>
                                            @if(count($proceso->asignaciones) > 0)
                                                @foreach($proceso->asignaciones as $asignacion)
                                                    <small class="text-primary">{{ $asignacion->abogado->name }}</small><br>
                                                @endforeach
                                            @else
                                                <small class="text-danger">Sin asignar</small>
                                            @endif
                                        </td>
                                        <td>{{ Str::limit($proceso->descripcion_proceso, 50) }}</td>
                                        <td class="text-center">
                                            {{ $proceso->ciudad->depto_nombre ?? 'N/A' }} <br>
                                            {{ $proceso->ciudad->ciudad_nombre ?? 'N/A' }}
                                        </td>
                                        <td class="text-center">
                                            @if(count($proceso->requerimientos) > 0)
                                                @foreach($proceso->requerimientos as $requerimiento)
                                                    <small class="text-dark">{{ date('d/m/Y', strtotime($requerimiento->fecha)) }} - {{ $requerimiento->motivo }}</small><br>
                                                @endforeach
                                            @else
                                                <small class="text-danger">Sin requerimientos</small>
                                            @endif
                                        </td>
                                        <td>{{ $proceso->juzgado }}</td>
                                        <td class="text-center">{{ $proceso->tipo_delito->nombre ?? 'N/A' }}</td>
                                        <td class="text-center">{{ $proceso->tipo_proceso->nombre ?? 'N/A' }}</td>
                                        <td class="text-center">
                                            @if($proceso->seguimientos->isEmpty())
                                                <span class="badge bg-secondary">SIN SEGUIMIENTO</span>
                                            @else
                                                <span class="badge 
                                                    @if($proceso->seguimientos->last()->estado->nombre=='EN PROCESO') bg-primary
                                                    @elseif($proceso->seguimientos->last()->estado->nombre=='SUSPENDIDA') bg-warning
                                                    @else bg-success @endif">
                                                    {{ $proceso->seguimientos->last()->estado->nombre }}
                                                </span>
                                            @endif
                                        </td>
                                        <td class="text-center">{{ number_format($proceso->daño_economico, 2) }}</td>
                                        <td class="text-center">{{ $proceso->usuario->name }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="11" class="px-6 py-12 text-center">
                                            <div class="text-gray-400">
                                                <i class="fas fa-folder-open text-6xl mb-4"></i>
                                                <p class="text-lg font-medium">No se encontraron procesos</p>
                                                <p class="text-sm">Intenta ajustar los filtros o crear un nuevo proceso</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- Paginación --}}
                    @if($procesos->hasPages())
                        <div class="mt-2">
                            {{ $procesos->links(data: ['scrollTo' => false]) }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @include('procesos._modal_asignacion', ['abogados' => $abogados])
    <script>
        function setProceso(id) {
            document.getElementById('proceso_id').value = id;
        }
        document.addEventListener('livewire:init', function () {

            function initSelect2() {
                $('#tipo_delito').select2({
                    placeholder: 'Todos los tipos',
                    allowClear: true
                });

                $('#tipo_proceso').select2({
                    placeholder: 'Todos los tipos',
                    allowClear: true
                });

                // Enviar valor a Livewire
                $('#tipo_delito').on('change', function () {
                    @this.set('tipo_delito_id', $(this).val());
                });

                $('#tipo_proceso').on('change', function () {
                    @this.set('tipo_proceso_id', $(this).val());
                });
            }

            initSelect2();

            // 🔥 Clave: cada vez que Livewire renderiza
            Livewire.hook('message.processed', () => {
                initSelect2();

                // 🔥 Restaurar el valor seleccionado
                $('#tipo_delito').val(@this.tipo_delito_id).trigger('change.select2');
                $('#tipo_proceso').val(@this.tipo_proceso_id).trigger('change.select2');
            });

            Livewire.on('limpiar-selects', () => {
                $('#tipo_delito').val(null).trigger('change.select2');
                $('#tipo_proceso').val(null).trigger('change.select2');
            });
        });
    </script>
</div>
