@php
    
    // Capturar el parámetro ciudad de la URL
    $ciudad = request()->get('ciudad');

    // Lista de ciudades válidas
    $ciudadesValidas = ['iquitos', 'pucallpa'];

    // Si la ciudad no está en la lista válida, redirigir a welcome
  if (!in_array($ciudad, $ciudadesValidas)) {
        header('Location: ' . url('/'));
        exit;
    }

    
    // Array de imágenes por ciudad
    $imagenes = [
        'iquitos' => 'bg/paisaje_iquitos.png',
        'pucallpa' => 'bg/paisaje_pucallpa.png',
        'default' => 'bg/paisaje_default.png'
    ];
    
    // Seleccionar la imagen según la ciudad
    $imagenLogin = $imagenes[$ciudad] ?? $imagenes['default'];
    
    // Array de logos por ciudad (mismo logo para ambas sedes)
    $logos = [
        'iquitos' => 'imagenes/logo_seminario.png',
        'pucallpa' => 'imagenes/logo_seminario.png',
        'default' => 'imagenes/logo_seminario.png'
    ];
    $logoLogin = $logos[$ciudad] ?? $logos['default'];
    
    // Array de títulos por ciudad
    $titulos = [
        'iquitos' => 'Sede Iquitos - Etapa Discipular y Configurativa',
        'pucallpa' => 'Sede Pucallpa - Etapa Propedéutica',
        'default' => 'Seminario Amazónico del Perú'
    ];
    $tituloSede = $titulos[$ciudad] ?? $titulos['default'];
    
    // Array de colores por ciudad
    $colores = [
        'iquitos' => '#074207', // verde
        'pucallpa' => '#f97316', // naranja
        'default' => '#6366f1'   // indigo
    ];
    $colorSede = $colores[$ciudad] ?? $colores['default'];
    
    // Array de colores hover por ciudad
    $coloresHover = [
        'iquitos' => '#059669', // verde oscuro
        'pucallpa' => '#ea580c', // naranja oscuro
        'default' => '#4f46e5'   // indigo oscuro
    ];
    $colorHover = $coloresHover[$ciudad] ?? $coloresHover['default'];
    
    // ============================================
    // CONTROL DE TAMAÑO DEL LOGO - MODIFICA AQUÍ
    // ============================================
    $logoSize = 'h-28'; // Opciones: h-16 (64px), h-20 (80px), h-24 (96px), h-28 (112px), h-32 (128px), h-36 (144px), h-40 (160px)
    $logoWidth = 'w-auto'; // Mantiene la proporción automática
    // ============================================
@endphp

<x-guest-layout>
    {{-- Estilo personalizado para cambiar colores según la ciudad --}}
    <style>
        :root {
            --color-sede: {{ $colorSede }};
            --color-hover: {{ $colorHover }};
        }
        
        .bg-sede {
            background-color: var(--color-sede) !important;
        }
        
        .text-sede {
            color: var(--color-sede);
        }
        
        .border-sede {
            border-color: var(--color-sede);
        }
        
        .focus\:ring-sede:focus {
            --tw-ring-color: var(--color-sede) !important;
        }
        
        .hover\:bg-sede-dark:hover {
            background-color: var(--color-hover) !important;
        }
        
        .hover\:text-sede:hover {
            color: var(--color-sede);
        }
        
        /* Estilo para el checkbox */
        input[type="checkbox"]:checked {
            background-color: var(--color-sede) !important;
            border-color: var(--color-sede) !important;
        }
        
        /* Estilos para fondos difuminados */
        .blur-bg {
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .blur-bg-light {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        /* Efecto de brillo en los bordes */
        .glow-border {
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
        }
    </style>

    {{-- Mostrar la imagen de fondo con overlay --}}
    <div class="fixed inset-0 z-0">
        <img src="{{ asset($imagenLogin) }}" alt="Fondo {{ ucfirst($ciudad) }}" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-black/60"></div> {{-- Overlay más oscuro para mejor legibilidad --}}
    </div>

    {{-- Contenedor principal con la imagen de fondo --}}
    <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 relative z-10 px-4">
        
        {{-- Logo SIN fondo difuminado (solo la imagen) --}}
        <div class="text-center mb-8">
            <img src="{{ asset($logoLogin) }}" 
                 alt="Logo Seminario Amazónico" 
                 class="{{ $logoSize }} {{ $logoWidth }} drop-shadow-2xl">
        </div>

        {{-- Contenedor del título con fondo difuminado --}}
        <div class="text-center mb-6 w-full max-w-2xl">
            <div class="blur-bg rounded-xl px-6 py-4 inline-block">
                <h2 class="text-xl sm:text-2xl font-bold text-white drop-shadow-lg px-2">
                    {{ $tituloSede }}
                </h2>
            </div>
        </div>

        {{-- Formulario de login con fondo difuminado --}}
        <div class="w-full sm:max-w-md mt-4 px-6 py-6 blur-bg-light rounded-2xl shadow-2xl glow-border">
            <!-- Session Status -->
            <x-auth-session-status class="mb-4" :status="session('status')" />

            <form method="POST" action="{{ route('login') }}">
                @csrf
                
                {{-- Campo oculto para mantener la ciudad --}}
                <input type="hidden" name="ciudad" value="{{ $ciudad }}">

                <!-- Username -->
                <div>
                    <x-input-label for="username" :value="__('Usuario')" class="text-sede font-semibold" />
                    <x-text-input id="username" class="block mt-1 w-full border-gray-300 focus:border-sede focus:ring-sede rounded-lg bg-white/90 backdrop-blur-sm" 
                                type="text" name="username" :value="old('username')" required autofocus autocomplete="username" />
                    <x-input-error :messages="$errors->get('username')" class="mt-2" />
                </div>

                <!-- Password -->
                <div class="mt-4">
                    <x-input-label for="password" :value="__('Password')" class="text-sede font-semibold" />

                    <x-text-input id="password" class="block mt-1 w-full border-gray-300 focus:border-sede focus:ring-sede rounded-lg bg-white/90 backdrop-blur-sm"
                                    type="password"
                                    name="password"
                                    required autocomplete="current-password" />

                    <x-input-error :messages="$errors->get('password')" class="mt-2" />
                </div>

                <!-- Remember Me -->
                <div class="block mt-4">
                    <label for="remember_me" class="inline-flex items-center">
                        <input id="remember_me" type="checkbox" class="rounded border-gray-300 text-sede shadow-sm focus:ring-sede" name="remember">
                        <span class="ms-2 text-sm text-white/90 font-medium">{{ __('Remember me') }}</span>
                    </label>
                </div>

                <div class="flex items-center justify-between mt-6">
                    @if (Route::has('password.request'))
                        <a class="underline text-sm text-white/80 hover:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sede transition-colors duration-200" href="{{ route('password.request') }}">
                            {{ __('Forgot your password?') }}
                        </a>
                    @endif

                    <button type="submit" 
                            class="inline-flex items-center px-6 py-3 bg-sede hover:bg-sede-dark border border-transparent rounded-lg font-semibold text-xs text-white uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sede transition duration-150 ease-in-out shadow-lg"
                            style="background-color: {{ $colorSede }};">
                        {{ __('Log in') }}
                    </button>
                </div>
            </form>
        </div>
        
        {{-- Texto de ayuda para selección de sede --}}
        <p class="text-white/90 text-sm mt-6 drop-shadow-lg blur-bg-light px-4 py-2 rounded-full">
            Sede: <span class="font-semibold" style="color: {{ $colorSede }}">{{ ucfirst($ciudad) }}</span>
        </p>
    </div>
</x-guest-layout>