@can('listar.promocionar')
<div>
    <div class="m-2">
        <a href="{{ route('sidebar.gestion') }}"
            class="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
            <flux:icon name="arrow-left" class="mr-1 w-4 h-4" />
            Volver a Gestión Educativa
        </a>
    </div>
    <div>
        <!-- Mensajes de éxito o error -->
        @if(session()->has('mensaje'))
        <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 5000)" x-show="show"
            class="bg-green-100 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-300 px-4 py-3 rounded-xl flex items-center justify-between mb-4">
            <span>{{ session('mensaje') }}</span>
            <button type="button" @click="show = false"
                class="text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100">
                <flux:icon name="x-mark" class="h-4 w-4" />
            </button>
        </div>
        @endif

        @if(session('error'))
        <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 5000)" x-show="show"
            class="mb-4 bg-red-100 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-xl flex items-center justify-between">
            <span>{{ session('error') }}</span>
            <button type="button" @click="show = false"
                class="text-red-700 dark:text-red-300 hover:text-red-900 dark:hover:text-red-100">
                <flux:icon name="x-mark" class="h-4 w-4" />
            </button>
        </div>
        @endif
        {{-- Información Escolar (Origen) --}}
        <div class="mt-6 border-t border-zinc-200 dark:border-zinc-700 pt-6">
            <h3 class="text-lg font-medium mb-4 dark:text-white">Información Escolar</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                {{-- Ciclo Escolar Origen --}}
                <div class="mb-4">
                    <flux:select label="Ciclo Escolar" wire:model="ciclo_escolar_id">
                        <option value="">Seleccionar ciclo escolar</option>
                        @foreach($ciclos as $ciclo)
                        <option value="{{ $ciclo->id }}">{{ $ciclo->nombre }}</option>
                        @endforeach
                    </flux:select>
                </div>

                {{-- Grado Origen --}}
                <div class="mb-4">
                    <flux:select label="Grado" id="grado_id" wire:model.live="grado_id">
                        <option value="">Seleccionar grado</option>
                        @foreach($grados as $grado)
                        <option value="{{ $grado->id }}">{{ $grado->nombre }}</option>
                        @endforeach
                    </flux:select>
                </div>

                {{-- Grupo Origen --}}
                <div class="mb-4">
                    <flux:select label="Grupo" id="grupo_id" wire:model.live="grupo_id">
                        <option value="">Seleccionar grupo</option>
                        @foreach($grupos->filter(fn($grupo) => empty($this->grado_id) || $grupo->grado_id ==
                        $this->grado_id) as $grupo)
                        <option value="{{ $grupo->id }}">{{ $grupo->nombre }}</option>
                        @endforeach
                    </flux:select>
                </div>
            </div>
        </div>

        {{-- Tabla de Alumnos --}}
        @if (!empty($alumnos))
        <div class="mt-6">
            <h3 class="text-lg font-medium mb-4 dark:text-white">Alumnos</h3>
            <div class="overflow-x-auto">
                <table class="min-w-full border divide-y divide-gray-200 dark:divide-zinc-700">
                    <thead class="bg-gray-100 dark:bg-zinc-800">
                        <tr>
                            <th class="px-4 py-2">
                                <input type="checkbox" wire:click="seleccionarTodos" title="Seleccionar todos" />
                            </th>
                            <th class="px-4 py-2 text-left">Nombre</th>
                            <th class="px-4 py-2 text-left">Edad</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-zinc-800">
                        @foreach($alumnos as $alumno)
                        <tr>
                            <td class="px-4 py-2">
                                <input type="checkbox" wire:model="seleccionados" value="{{ $alumno['alumno_id'] }}" />
                            </td>
                            <td class="px-4 py-2">{{ $alumno['nombre'] }}</td>
                            <td class="px-4 py-2">{{ $alumno['edad'] }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Destino de Promoción --}}
        <div class="mt-6 border-t border-zinc-200 dark:border-zinc-700 pt-6">
            <h3 class="text-lg font-medium mb-4 dark:text-white">Destino de Promoción</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                {{-- Ciclo Escolar Destino --}}
                <div class="mb-4">
                    <flux:select label="Ciclo Escolar" wire:model.live="cicloDestinoId">
                        <option value="">Seleccionar ciclo escolar</option>
                        @foreach($ciclos as $ciclo)
                        <option value="{{ $ciclo->id }}">{{ $ciclo->nombre }}</option>
                        @endforeach
                    </flux:select>
                </div>

                {{-- Grado Destino --}}
                <div class="mb-4">
                    <flux:select label="Grado" wire:model.live="gradoDestinoId">
                        <option value="">Seleccionar grado</option>
                        @foreach($grados as $grado)
                        <option value="{{ $grado->id }}">{{ $grado->nombre }}</option>
                        @endforeach
                    </flux:select>
                </div>

                {{-- Grupo Destino --}}
                <div class="mb-4">
                    <flux:select label="Grupo" wire:model.live="grupoDestinoId">
                        <option value="">Seleccionar grupo</option>
                        @foreach($gruposDestino as $grupo)
                        <option value="{{ $grupo->id }}">{{ $grupo->nombre }}</option>
                        @endforeach
                    </flux:select>
                </div>
            </div>
        </div>

        {{-- Checkbox reinscribir no promovidos --}}
        <div class="mt-4 flex items-center space-x-2">
            <input type="checkbox" id="reinscribir" wire:model="reinscribirNoPromovidos"
                class="border-gray-300 rounded">
            <label for="reinscribir" class="text-sm dark:text-white">
                Reinscribir automáticamente a los no promovidos
            </label>
        </div>

        {{-- Botones de acción --}}
        <div class="flex justify-end space-x-3 mt-8 pt-6 border-t border-zinc-200 dark:border-zinc-700">
            @can('agregar.promocionar')
            <button wire:click="promocionarAlumnos" type="button"
                class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">
                Promocionar alumnos
            </button>

            <button wire:click="graduarAlumnos" type="button"
                class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
                Graduar alumnos
            </button>
            @endcan
        </div>
        @endif
    </div>
</div>
@endcan