@extends('base.base')
@php
    $logoFileName = 'logo-lcd.svg';
    $activeDemo = get_theme_demo();

    // Obtener configuración de imagen de fondo del login
    $loginBgImage = config('site.auth.login_background_image', 'demo1/media/auth/bg4.jpg');
    $loginBgImageDark = config('site.auth.login_background_image_dark', 'demo1/media/auth/bg4-dark.jpg');

    // Verificar si las imágenes son URLs de Cloudinary (empiezan con http:// o https://)
    $isLoginBgImageUrl = filter_var($loginBgImage, FILTER_VALIDATE_URL) !== false;
    $isLoginBgImageDarkUrl = filter_var($loginBgImageDark, FILTER_VALIDATE_URL) !== false;

    // Si no son URLs, buscar imágenes locales
    if (!$isLoginBgImageUrl) {
        // Obtener nombre del demo sin el prefijo "demo-"
        $demoName = str_replace('demo-', '', $activeDemo);

        // Intentar usar imagen específica del demo si existe
        // Orden de búsqueda:
        // 1. login-bg.jpg (específico para login)
        // 2. background-1.jpg (imagen genérica del demo)
        // 3. background-2.jpg (segunda opción genérica)
        // 4. Valor configurado en site.php
        // 5. Fallback por defecto

        $demoBgPaths = [
            "cd-project/img/demos/{$demoName}/backgrounds/login-bg.png",
            "cd-project/img/demos/{$demoName}/backgrounds/login-bg.jpg",
            "cd-project/img/demos/{$demoName}/backgrounds/background-1.jpg",
            "cd-project/img/demos/{$demoName}/backgrounds/background-2.jpg",
        ];

        // Buscar imagen de fondo (modo claro)
        if ($loginBgImage === 'demo1/media/auth/bg4.jpg' || !file_exists(public_path($loginBgImage))) {
            foreach ($demoBgPaths as $demoBgPath) {
                if (file_exists(public_path($demoBgPath))) {
                    $loginBgImage = $demoBgPath;
                    break;
                }
            }
        }
    }

    // Si no es URL, buscar imagen de fondo (modo oscuro)
    if (!$isLoginBgImageDarkUrl) {
        $demoName = str_replace('demo-', '', $activeDemo);
        $demoBgPathsDark = [
            "cd-project/img/demos/{$demoName}/backgrounds/login-bg-dark.png",
            "cd-project/img/demos/{$demoName}/backgrounds/login-bg-dark.jpg",
            "cd-project/img/demos/{$demoName}/backgrounds/background-2.jpg",
            "cd-project/img/demos/{$demoName}/backgrounds/background-1.jpg",
        ];

        if ($loginBgImageDark === 'demo1/media/auth/bg4-dark.jpg' || !file_exists(public_path($loginBgImageDark))) {
            foreach ($demoBgPathsDark as $demoBgPathDark) {
                if (file_exists(public_path($demoBgPathDark))) {
                    $loginBgImageDark = $demoBgPathDark;
                    break;
                }
            }
        }

        // Si aún no se encontró, usar la misma imagen para ambos modos
        if (!file_exists(public_path($loginBgImageDark))) {
            $loginBgImageDark = $loginBgImage;
        }
    }

    if (theme()->getOption('layout', 'aside/theme') === 'light') {
        $logoFileName = 'logo-lcd-dark.svg';
    }
@endphp

@section('styles')
<style>
    body {
        background-image: url('{{ $isLoginBgImageUrl ? $loginBgImage : asset($loginBgImage) }}');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    [data-bs-theme="dark"] body {
        background-image: url('{{ $isLoginBgImageDarkUrl ? $loginBgImageDark : asset($loginBgImageDark) }}');
    }

    .tooltip-próximamente {
        position: relative;
        cursor: not-allowed;
    }

    .tooltip-próximamente::after {
        content: "Próximamente";
        position: absolute;
        background-color: #111;
        color: #fff;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-right: 10px;
    }

    .tooltip-próximamente:hover::after {
        opacity: 1;
    }

    /* Brand Colors - Configurable según demo */
    @php
        // Obtener colores del skin CSS del demo activo
        $primaryColor = get_skin_primary_color();
        $primaryColorHover = get_skin_primary_color_hover();

        // Convertir hex a rgba para box-shadow
        $rgb = hex_to_rgb($primaryColor);
        $r = $rgb['r'];
        $g = $rgb['g'];
        $b = $rgb['b'];
    @endphp

    .btn-primary {
        background-color: {{ $primaryColor }} !important;
        border-color: {{ $primaryColor }} !important;
        color: #ffffff !important;
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active {
        background-color: {{ $primaryColorHover }} !important;
        border-color: {{ $primaryColorHover }} !important;
        color: #ffffff !important;
    }

    .btn-primary:focus-visible {
        box-shadow: 0 0 0 0.25rem rgba({{ $r }}, {{ $g }}, {{ $b }}, 0.25) !important;
    }

    .text-primary {
        color: {{ $primaryColor }} !important;
    }

    .btn-active-color-primary {
        color: {{ $primaryColor }} !important;
    }

    .btn-active-color-primary:hover,
    .btn-active-color-primary.active {
        color: {{ $primaryColorHover }} !important;
    }

    .link-primary {
        color: {{ $primaryColor }} !important;
    }

    .link-primary:hover {
        color: {{ $primaryColorHover }} !important;
    }

    /* Input focus states */
    .form-control:focus {
        border-color: {{ $primaryColor }} !important;
        box-shadow: 0 0 0 0.25rem rgba({{ $r }}, {{ $g }}, {{ $b }}, 0.15) !important;
    }

    /* Menu active states */
    .menu-item .menu-link.active {
        color: {{ $primaryColor }} !important;
    }

    .menu-item .menu-link:hover {
        color: {{ $primaryColor }} !important;
    }

    /* Form Improvements */
    .form-label {
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .form-control-lg {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        border-radius: 0.475rem;
        transition: all 0.15s ease;
    }

    .form-control:focus {
        border-color: #3699FF !important;
        box-shadow: 0 0 0 0.25rem rgba(54, 153, 255, 0.15) !important;
    }

    .form-control.is-invalid {
        border-color: #f1416c !important;
    }

    .form-control.is-invalid:focus {
        border-color: #f1416c !important;
        box-shadow: 0 0 0 0.25rem rgba(241, 65, 108, 0.25) !important;
    }

    .invalid-feedback {
        display: block;
        width: 100%;
        margin-top: 0.5rem;
        font-size: 0.875rem;
        color: #f1416c;
    }

    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 0.475rem;
    }

    .alert {
        border-radius: 0.475rem;
        border: 0;
    }

    .alert-danger {
        background-color: #fff5f8;
        color: #f1416c;
    }

    .alert-success {
        background-color: #f1fdf4;
        color: #50cd89;
    }

    /* Responsive improvements */
    @media (max-width: 991px) {
        .w-lg-50 {
            width: 100% !important;
            padding: 2rem 1rem !important;
        }

        .bg-body {
            border-radius: 0.75rem !important;
        }
    }

    /* Accessibility improvements */
    .form-control:focus-visible {
        outline: 2px solid {{ $primaryColor }};
        outline-offset: 2px;
    }

    .btn:focus-visible {
        outline: 2px solid {{ $primaryColor }};
        outline-offset: 2px;
    }

    @if($activeDemo === 'demo-bewpro')
    /* ==========================================
       BEWPRO DELUXE AUTH PAGES OVERRIDES
       ========================================== */
    
    /* Background gradients & Radial glows */
    html:not([data-theme="dark"]):not([data-bs-theme="dark"]) body {
        background-color: #f4f6fa !important;
        background-image: url('{{ asset($loginBgImage) }}') !important;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    html[data-theme="dark"] body, [data-bs-theme="dark"] body {
        background-color: #030628 !important;
        background-image: url('{{ asset($loginBgImageDark) }}') !important;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    /* Typography */
    .auth-title, .auth-aside-title {
        color: #ffffff !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em;
    }
    .auth-subtitle, .auth-aside-subtitle {
        color: rgba(255, 255, 255, 0.7) !important;
    }
    
    html:not([data-theme="dark"]):not([data-bs-theme="dark"]) .auth-title,
    html:not([data-theme="dark"]):not([data-bs-theme="dark"]) .auth-aside-title {
        color: #030628 !important;
    }
    html:not([data-theme="dark"]):not([data-bs-theme="dark"]) .auth-subtitle,
    html:not([data-theme="dark"]):not([data-bs-theme="dark"]) .auth-aside-subtitle {
        color: rgba(3, 6, 40, 0.7) !important;
    }

    /* Auth card container (Light & Dark Glassmorphism) */
    .auth-card {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    html:not([data-theme="dark"]):not([data-bs-theme="dark"]) .auth-card {
        background-color: rgba(255, 255, 255, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05) !important;
        border-radius: 24px !important;
    }

    html[data-theme="dark"] .auth-card, [data-bs-theme="dark"] .auth-card {
        background-color: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
        border-radius: 24px !important;
    }

    /* Form inputs and buttons modern interactions */
    .form-control, .form-select {
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
    }

    html:not([data-theme="dark"]):not([data-bs-theme="dark"]) .form-control,
    html:not([data-theme="dark"]):not([data-bs-theme="dark"]) .form-control.form-control-solid {
        background-color: #ffffff !important;
        border-color: rgba(36, 155, 155, 0.25) !important;
        color: #111827 !important;
    }

    html[data-theme="dark"] .form-control, [data-bs-theme="dark"] .form-control,
    html[data-theme="dark"] .form-control.form-control-solid, [data-bs-theme="dark"] .form-control.form-control-solid {
        background-color: rgba(255, 255, 255, 0.02) !important;
        border-color: rgba(61, 194, 194, 0.15) !important;
        color: #ffffff !important;
    }
    
    .btn {
        transition: background-color 220ms ease, transform 120ms ease, box-shadow 220ms ease, border-color 220ms ease !important;
    }
    
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }
    
    .btn:active {
        transform: translateY(1px);
    }
    
    .btn-google {
        border-radius: 12px !important;
        padding: 0.85rem 1.5rem !important;
        font-size: 1.1rem !important;
        text-decoration: none !important;
    }
    
    html:not([data-theme="dark"]):not([data-bs-theme="dark"]) .btn-google {
        background: rgba(0,0,0,0.03) !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
        color: #111827 !important;
    }
    html:not([data-theme="dark"]):not([data-bs-theme="dark"]) .btn-google:hover {
        background: rgba(0,0,0,0.06) !important;
        border-color: rgba(0,0,0,0.15) !important;
    }

    html[data-theme="dark"] .btn-google, [data-bs-theme="dark"] .btn-google {
        background: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        color: #ffffff !important;
    }
    html[data-theme="dark"] .btn-google:hover, [data-bs-theme="dark"] .btn-google:hover {
        background: rgba(255,255,255,0.1) !important;
        border-color: rgba(255,255,255,0.2) !important;
    }
    
    /* Separators for social buttons */
    .border-gray-300 {
        border-color: rgba(36, 155, 155, 0.15) !important;
    }
    html[data-theme="dark"] .border-gray-300, [data-bs-theme="dark"] .border-gray-300 {
        border-color: rgba(61, 194, 194, 0.15) !important;
    }
    @endif
</style>
@endsection

@section('content')
<x-skin-colors />
<!--begin::Root-->
<div class="d-flex flex-column flex-root" id="kt_app_root">
    <!--begin::Authentication - Sign-in -->
    <div class="d-flex flex-column flex-column-fluid flex-lg-row">
        <!--begin::Aside-->
        <div class="d-flex flex-center w-lg-50 pt-15 pt-lg-0 px-10">
            <!--begin::Aside-->
            <div class="d-flex flex-center flex-lg-start flex-column">
                <!--begin::Logo-->
                <a href="{{ theme()->getPageUrl('') }}" class="mb-7">
                    <img alt="{{ config('site.assets.main_logo_alt', config('site.name')) }}" src="{{ site_asset_url('main_logo', 'cd-project/assets/logo.png') }}" class="h-60px"/>
                </a>
                <!--end::Logo-->

                <!--begin::Title-->
                <h2 class="auth-aside-title {{ $activeDemo === 'demo-bewpro' ? '' : 'text-white' }} fw-normal m-0 fs-2x">
                    {{ config('site.auth.login_title', __('Panel de Administración')) }}
                </h2>
                <!--end::Title-->

                <!--begin::Subtitle-->
                <p class="auth-aside-subtitle {{ $activeDemo === 'demo-bewpro' ? '' : 'text-white opacity-75' }} mt-4 mb-0 fs-5">
                    {{ config('site.auth.login_subtitle', config('site.name', 'Catalogue Website')) }}
                </p>
                <!--end::Subtitle-->
            </div>
            <!--begin::Aside-->
        </div>
        <!--begin::Aside-->

        <!--begin::Body-->
        <div class="d-flex flex-column-fluid flex-lg-row-auto justify-content-center justify-content-lg-end p-12 p-lg-20">
            <!--begin::Card-->
            <div class="auth-card bg-body d-flex flex-column align-items-stretch flex-center rounded-4 w-md-600px p-20">
                <!--begin::Wrapper-->
                <div class="d-flex flex-center flex-column flex-column-fluid px-lg-10 pb-15 pb-lg-20">
                    {{ $slot }}
                </div>
                <!--end::Wrapper-->
            </div>
            <!--end::Card-->
        </div>
        <!--end::Body-->
    </div>
    <!--end::Authentication - Sign-in-->
</div>
<!--end::Root-->
@endsection