@extends('base.base')
@php
    $logoFileName = 'logo-lcd.svg';
    $activeDemo = config('cd-system.theme.demo', 'demo-construction');

    // 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');

    // 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.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;
            }
        }
    }

    // Buscar imagen de fondo (modo oscuro)
    $demoBgPathsDark = [
        "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('{{ asset($loginBgImage) }}');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    [data-bs-theme="dark"] body {
        background-image: url('{{ 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;
    }
</style>
@endsection

@section('content')
<!--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="{{ asset(config('site.assets.main_logo', 'cd-project/img/logos/logo.png')) }}" class="h-60px"/>
                </a>
                <!--end::Logo-->

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

                <!--begin::Subtitle-->
                <p class="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="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