@extends('layouts.app')

@section('content')
<style>
/* Estilos para hacer el header fijo en la página de auth */
#header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Ajustar el contenido para que no se superponga con el header fijo */
.auth-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #da3b85 0%, #d07ea7 100%);
    padding: 2rem 0;
    padding-top: 120px; /* Espacio para el header fijo */
}

/* Estilos para el footer en la página de auth */
#footer-3 {
    background: linear-gradient(135deg, #da3b85 0%, #d07ea7 100%) !important;
    color: white !important;
}

#footer-3 * {
    color: white !important;
}

#footer-3 a {
    color: white !important;
}

#footer-3 a:hover {
    color: #f8f9fa !important;
    text-decoration: none;
}

#footer-3 h5 {
    color: white !important;
}

#footer-3 p {
    color: white !important;
}

#footer-3 .p-lg {
    color: white !important;
}

#footer-3 .p-md {
    color: white !important;
}

.auth-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: none;
}

.auth-tabs {
    display: flex;
    background: #f8f9fa;
    border-radius: 15px;
    padding: 5px;
    margin-bottom: 2rem;
}

.auth-tab {
    flex: 1;
    padding: 12px 20px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    color: #6c757d;
    border: none;
    background: transparent;
}

.auth-tab.active {
    background: linear-gradient(135deg, #da3b85 0%, #d07ea7 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(218, 59, 133, 0.3);
}

.auth-tab:hover:not(.active) {
    background: rgba(218, 59, 133, 0.1);
    color: #da3b85;
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-control {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.form-control:focus {
    border-color: #da3b85;
    box-shadow: 0 0 0 0.2rem rgba(218, 59, 133, 0.25);
    background: white;
}

.btn-auth {
    background: linear-gradient(135deg, #da3b85 0%, #d07ea7 100%);
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(218, 59, 133, 0.3);
}

.btn-auth:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(218, 59, 133, 0.4);
    color: white;
}

.form-check-input:checked {
    background-color: #da3b85;
    border-color: #da3b85;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(218, 59, 133, 0.25);
}

.auth-divider {
    text-align: center;
    margin: 2rem 0;
    position: relative;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e9ecef;
}

.auth-divider span {
    background: white;
    padding: 0 1rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.social-login {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-btn {
    flex: 1;
    padding: 10px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    background: white;
    color: #6c757d;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    font-weight: 500;
}

.social-btn:hover {
    border-color: #da3b85;
    color: #da3b85;
    transform: translateY(-1px);
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.features-list li {
    padding: 8px 0;
    color: #6c757d;
    position: relative;
    padding-left: 25px;
}

.features-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #da3b85;
    font-weight: bold;
}

.alert {
    border-radius: 12px;
    border: none;
}

.alert-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.alert-danger {
    background: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
    color: white;
}
</style>

<div class="auth-container">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="auth-card">
                    <div class="card-body p-5">
                        <!-- Tabs -->
                        <div class="auth-tabs">
                            <button class="auth-tab active" onclick="switchTab('login')">
                                <i class="fas fa-sign-in-alt me-2"></i>
                                Iniciar Sesión
                            </button>
                            <button class="auth-tab" onclick="switchTab('register')">
                                <i class="fas fa-user-plus me-2"></i>
                                Registrarse
                            </button>
                        </div>

                        

                                                 <!-- Login Form -->
                         <div id="login-form" class="auth-form active">
                             @if(session('success'))
                                 <div class="alert alert-success alert-dismissible fade show" role="alert">
                                     <i class="fas fa-check-circle me-2"></i>
                                     {{ session('success') }}
                                     <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                 </div>
                             @endif

                             @if($errors->any() && !session('show_register_tab'))
                                 <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                     <i class="fas fa-exclamation-triangle me-2"></i>
                                     <strong>Error:</strong> Por favor corrige los siguientes errores:
                                     <ul class="mb-0 mt-2">
                                         @foreach($errors->all() as $error)
                                             <li>{{ $error }}</li>
                                         @endforeach
                                     </ul>
                                     <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                 </div>
                             @endif



                            <form method="POST" action="{{ route('login') }}">
                                @csrf

                                <div class="mb-3">
                                    <label for="login-email" class="form-label">Email</label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                           id="login-email" name="email" value="{{ old('email') }}" required autofocus>
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="login-password" class="form-label">Contraseña</label>
                                    <input type="password" class="form-control @error('password') is-invalid @enderror" 
                                           id="login-password" name="password" required>
                                    @error('password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3 form-check">
                                    <input type="checkbox" class="form-check-input" id="remember" name="remember">
                                    <label class="form-check-label" for="remember">
                                        Recordarme
                                    </label>
                                </div>

                                <div class="d-grid gap-2">
                                    <button type="submit" class="btn btn-auth">
                                        <i class="fas fa-sign-in-alt me-2"></i>
                                        Iniciar Sesión
                                    </button>
                                </div>
                            </form>

                            <div class="auth-divider">
                                <span>O continúa con</span>
                            </div>

                            <div class="social-login">
                                <a href="#" class="social-btn">
                                    <i class="fab fa-google me-2"></i>
                                    Google
                                </a>
                                <a href="#" class="social-btn">
                                    <i class="fab fa-facebook me-2"></i>
                                    Facebook
                                </a>
                            </div>
                        </div>

                                                 <!-- Register Form -->
                         <div id="register-form" class="auth-form">
                             @if($errors->any() && session('show_register_tab'))
                                 <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                     <i class="fas fa-exclamation-triangle me-2"></i>
                                     <strong>Error:</strong> Por favor corrige los siguientes errores:
                                     <ul class="mb-0 mt-2">
                                         @foreach($errors->all() as $error)
                                             <li>{{ $error }}</li>
                                         @endforeach
                                     </ul>
                                     <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                 </div>
                             @endif
                             
                             <form method="POST" action="{{ route('register') }}">
                                @csrf

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="nombre" class="form-label">Nombre *</label>
                                            <input type="text" class="form-control @error('nombre') is-invalid @enderror" 
                                                   id="nombre" name="nombre" value="{{ old('nombre') }}" required>
                                            @error('nombre')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="apellido" class="form-label">Apellido *</label>
                                            <input type="text" class="form-control @error('apellido') is-invalid @enderror" 
                                                   id="apellido" name="apellido" value="{{ old('apellido') }}" required>
                                            @error('apellido')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="username" class="form-label">Nombre de Usuario *</label>
                                            <input type="text" class="form-control @error('username') is-invalid @enderror" 
                                                   id="username" name="username" value="{{ old('username') }}" required>
                                            @error('username')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="telefono" class="form-label">Teléfono</label>
                                            <input type="text" class="form-control @error('telefono') is-invalid @enderror" 
                                                   id="telefono" name="telefono" value="{{ old('telefono') }}">
                                            @error('telefono')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                                                 <div class="mb-3">
                                     <label for="register-email" class="form-label">Email *</label>
                                     <input type="email" class="form-control @error('register_email') is-invalid @enderror" 
                                            id="register-email" name="register_email" value="{{ old('register_email') }}" required>
                                     @error('register_email')
                                         <div class="invalid-feedback">{{ $message }}</div>
                                     @enderror
                                 </div>

                                <div class="row">
                                                                         <div class="col-md-6">
                                         <div class="mb-3">
                                             <label for="register-password" class="form-label">Contraseña *</label>
                                             <input type="password" class="form-control @error('register_password') is-invalid @enderror" 
                                                    id="register-password" name="register_password" required>
                                             @error('register_password')
                                                 <div class="invalid-feedback">{{ $message }}</div>
                                             @enderror
                                         </div>
                                     </div>
                                     <div class="col-md-6">
                                         <div class="mb-3">
                                             <div class="mb-3">
                                                 <label for="register_password_confirmation" class="form-label">Confirmar Contraseña *</label>
                                                 <input type="password" class="form-control" 
                                                        id="register_password_confirmation" name="register_password_confirmation" required>
                                             </div>
                                         </div>
                                     </div>
                                </div>

                                <div class="d-grid gap-2">
                                    <button type="submit" class="btn btn-auth">
                                        <i class="fas fa-user-plus me-2"></i>
                                        Crear Cuenta
                                    </button>
                                </div>
                            </form>

                            <div class="mt-4">
                                <h6 class="text-muted mb-3">Beneficios de registrarte:</h6>
                                <ul class="features-list">
                                    <li>Gana puntos por cada actividad</li>
                                    <li>Accede a descuentos especiales</li>
                                    <li>Reserva citas fácilmente</li>
                                    <li>Sube fotos de tus uñas</li>
                                    <li>Participa en la comunidad</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function switchTab(tab) {
    // Ocultar todos los formularios
    document.querySelectorAll('.auth-form').forEach(form => {
        form.classList.remove('active');
    });
    
    // Remover clase active de todos los tabs
    document.querySelectorAll('.auth-tab').forEach(tabBtn => {
        tabBtn.classList.remove('active');
    });
    
    // Mostrar el formulario seleccionado
    if (tab === 'login') {
        document.getElementById('login-form').classList.add('active');
        document.querySelectorAll('.auth-tab')[0].classList.add('active');
    } else {
        document.getElementById('register-form').classList.add('active');
        document.querySelectorAll('.auth-tab')[1].classList.add('active');
    }
}

// Detectar errores y cambiar al tab correspondiente
document.addEventListener('DOMContentLoaded', function() {
    const showLoginTab = {{ session('show_login_tab', 'false') }};
    const showRegisterTab = {{ session('show_register_tab', 'false') }};
    
    // Verificar si hay errores en campos específicos del registro
    const registerFields = ['nombre', 'apellido', 'username', 'register_password_confirmation'];
    let hasRegisterSpecificErrors = false;
    
    registerFields.forEach(field => {
        const element = document.querySelector(`[name="${field}"]`);
        if (element && element.classList.contains('is-invalid')) {
            hasRegisterSpecificErrors = true;
        }
    });
    
    // Verificar si hay errores en campos específicos del login
    const loginFields = ['remember'];
    let hasLoginSpecificErrors = false;
    
    loginFields.forEach(field => {
        const element = document.querySelector(`[name="${field}"]`);
        if (element && element.classList.contains('is-invalid')) {
            hasLoginSpecificErrors = true;
        }
    });
    
    // Verificar si hay errores en campos específicos de cada formulario
    const registerEmailPassword = ['register_email', 'register_password'];
    const loginEmailPassword = ['email', 'password'];
    let hasRegisterEmailPasswordErrors = false;
    let hasLoginEmailPasswordErrors = false;
    
    registerEmailPassword.forEach(field => {
        const element = document.querySelector(`[name="${field}"]`);
        if (element && element.classList.contains('is-invalid')) {
            hasRegisterEmailPasswordErrors = true;
        }
    });
    
    loginEmailPassword.forEach(field => {
        const element = document.querySelector(`[name="${field}"]`);
        if (element && element.classList.contains('is-invalid')) {
            hasLoginEmailPasswordErrors = true;
        }
    });
    
    // Lógica de priorización mejorada
    if (showLoginTab) {
        switchTab('login');
    } else if (showRegisterTab) {
        switchTab('register');
    } else if (hasRegisterSpecificErrors || hasRegisterEmailPasswordErrors) {
        switchTab('register');
    } else if (hasLoginSpecificErrors || hasLoginEmailPasswordErrors) {
        switchTab('login');
    } else {
        // Si no hay errores específicos, verificar en qué formulario hay más errores totales
        const totalRegisterErrors = document.querySelectorAll('#register-form .is-invalid').length;
        const totalLoginErrors = document.querySelectorAll('#login-form .is-invalid').length;
        
        if (totalRegisterErrors > totalLoginErrors) {
            switchTab('register');
        } else if (totalLoginErrors > totalRegisterErrors) {
            switchTab('login');
        }
    }
});
</script>
@endsection