@extends('layouts.app')

@section('content')
<style>
/* Colores personalizados basados en Blulinc */
:root {
    --blulinc-black: #000000;
    --blulinc-blue: #015cff;
    --blulinc-gray: #c1c1c1;
    --blulinc-light-gray: #f8f9fa;
    --blulinc-light-blue: #e6f2ff;
    --blulinc-bg-blue: #f0f7ff;
}

body {
    background-color: var(--blulinc-bg-blue) !important;
}

.blulinc-login-container {
    max-width: 450px;
    margin: 0 auto;
    padding: 16px 12px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blulinc-login-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(1, 92, 255, 0.12);
    border: 1px solid #e1ecf7;
    overflow: hidden;
    width: 100%;
    max-width: 400px;
}

.blulinc-login-header {
    background: linear-gradient(135deg, var(--blulinc-blue) 0%, #0147d9 100%);
    color: white;
    padding: 20px 24px;
    text-align: center;
    border-bottom: none;
}

.blulinc-login-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}

.blulinc-login-subtitle {
    font-size: 13px;
    opacity: 0.9;
    margin: 0;
}

.blulinc-login-body {
    padding: 24px 20px;
}

.blulinc-form-group {
    margin-bottom: 16px;
}

.blulinc-form-label {
    display: block;
    margin-bottom: 4px;
    color: var(--blulinc-black);
    font-weight: 600;
    font-size: 13px;
}

.blulinc-form-control {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e1ecf7;
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.2s ease;
    background-color: white;
    box-sizing: border-box;
}

.blulinc-form-control:focus {
    outline: none;
    border-color: var(--blulinc-blue);
    box-shadow: 0 0 0 3px rgba(1, 92, 255, 0.1);
}

.blulinc-form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.blulinc-form-check-input {
    width: 16px;
    height: 16px;
    border: 2px solid #e1ecf7;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.blulinc-form-check-input:checked {
    background-color: var(--blulinc-blue);
    border-color: var(--blulinc-blue);
}

.blulinc-form-check-label {
    color: var(--blulinc-black);
    font-weight: 500;
    font-size: 13px;
}

.blulinc-btn-login {
    background: linear-gradient(135deg, var(--blulinc-blue) 0%, #0147d9 100%);
    border: none;
    color: white;
    border-radius: 6px;
    font-weight: 700;
    padding: 12px;
    font-size: 14px;
    width: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(1, 92, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blulinc-btn-login:hover {
    background: linear-gradient(135deg, #0147d9 0%, #0133b8 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(1, 92, 255, 0.35);
    color: white;
}

.blulinc-error-alert {
    background-color: #fef2f2;
    border: 2px solid #fca5a5;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 16px;
    color: #dc2626;
    font-weight: 500;
    font-size: 12px;
}

.blulinc-forgot-link {
    text-align: center;
    margin-top: 16px;
}

.blulinc-forgot-link a {
    color: var(--blulinc-blue);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.2s ease;
}

.blulinc-forgot-link a:hover {
    color: #0147d9;
    text-decoration: underline;
}

/* Estilos para campos de contraseña */
.blulinc-password-container {
    position: relative;
    display: flex;
    align-items: center;
}

.blulinc-password-input {
    padding-right: 40px;
    border: 2px solid #e1ecf7;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.blulinc-password-input:focus {
    outline: none;
    border-color: var(--blulinc-blue);
    box-shadow: 0 0 0 3px rgba(1, 92, 255, 0.1);
}

.blulinc-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--blulinc-gray);
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blulinc-password-toggle:hover {
    color: var(--blulinc-blue);
    background-color: rgba(1, 92, 255, 0.1);
}

.blulinc-password-toggle:active {
    transform: translateY(-50%) scale(0.95);
}

/* === MEDIA QUERIES PARA RESPONSIVIDAD === */

/* Pantallas grandes (1200px - 1919px) */
@media (max-width: 1919px) and (min-width: 1200px) {
    .blulinc-login-container {
        max-width: 400px;
    }
}

/* Pantallas medianas (768px - 1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
    .blulinc-login-container {
        padding: 12px 8px;
        max-width: 380px;
    }
    .blulinc-login-card {
        max-width: 100%;
    }
    .blulinc-login-header {
        padding: 16px 20px;
    }
    .blulinc-login-header h3 {
        font-size: 20px;
    }
    .blulinc-login-subtitle {
        font-size: 12px;
    }
    .blulinc-login-body {
        padding: 20px 16px;
    }
    .blulinc-form-group {
        margin-bottom: 14px;
    }
    .blulinc-form-label {
        font-size: 12px;
        margin-bottom: 3px;
    }
    .blulinc-form-control {
        padding: 8px 12px;
        font-size: 12px;
    }
    .blulinc-btn-login {
        padding: 10px;
        font-size: 13px;
    }
}

/* Pantallas pequeñas (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
    .blulinc-login-container {
        padding: 8px 4px;
        max-width: 100%;
    }
    .blulinc-login-header {
        padding: 14px 16px;
    }
    .blulinc-login-header h3 {
        font-size: 18px;
        margin-bottom: 4px;
    }
    .blulinc-login-subtitle {
        font-size: 11px;
    }
    .blulinc-login-body {
        padding: 16px 14px;
    }
    .blulinc-form-group {
        margin-bottom: 12px;
    }
    .blulinc-form-label {
        font-size: 11px;
        margin-bottom: 2px;
    }
    .blulinc-form-control {
        padding: 7px 10px;
        font-size: 11px;
    }
    .blulinc-btn-login {
        padding: 9px;
        font-size: 12px;
    }
    .blulinc-form-check {
        gap: 6px;
        margin-bottom: 14px;
    }
    .blulinc-form-check-input {
        width: 14px;
        height: 14px;
    }
    .blulinc-form-check-label {
        font-size: 11px;
    }
    .blulinc-forgot-link {
        margin-top: 12px;
    }
    .blulinc-forgot-link a {
        font-size: 11px;
    }
}

/* Pantallas muy pequeñas (hasta 575px) */
@media (max-width: 575px) {
    .blulinc-login-container {
        padding: 6px 2px;
    }
    .blulinc-login-card {
        border-radius: 8px;
    }
    .blulinc-login-header {
        padding: 12px 14px;
    }
    .blulinc-login-header h3 {
        font-size: 16px;
        margin-bottom: 3px;
    }
    .blulinc-login-subtitle {
        font-size: 10px;
    }
    .blulinc-login-body {
        padding: 14px 12px;
    }
    .blulinc-form-group {
        margin-bottom: 10px;
    }
    .blulinc-form-label {
        font-size: 10px;
        margin-bottom: 2px;
    }
    .blulinc-form-control {
        padding: 6px 8px;
        font-size: 10px;
    }
    .blulinc-btn-login {
        padding: 8px;
        font-size: 11px;
    }
    .blulinc-form-check {
        gap: 4px;
        margin-bottom: 12px;
    }
    .blulinc-form-check-input {
        width: 12px;
        height: 12px;
    }
    .blulinc-form-check-label {
        font-size: 10px;
    }
    .blulinc-forgot-link {
        margin-top: 10px;
    }
    .blulinc-forgot-link a {
        font-size: 10px;
    }
    .blulinc-error-alert {
        padding: 6px 8px;
        margin-bottom: 12px;
        font-size: 10px;
    }
}

/* Pantallas ultra pequeñas (hasta 400px) */
@media (max-width: 400px) {
    .blulinc-login-container {
        padding: 4px 1px;
    }
    .blulinc-login-header {
        padding: 10px 12px;
    }
    .blulinc-login-header h3 {
        font-size: 15px;
        margin-bottom: 2px;
    }
    .blulinc-login-subtitle {
        font-size: 9px;
    }
    .blulinc-login-body {
        padding: 12px 10px;
    }
    .blulinc-form-group {
        margin-bottom: 8px;
    }
    .blulinc-form-label {
        font-size: 9px;
        margin-bottom: 1px;
    }
    .blulinc-form-control {
        padding: 5px 6px;
        font-size: 9px;
    }
    .blulinc-btn-login {
        padding: 7px;
        font-size: 10px;
    }
    .blulinc-form-check {
        gap: 3px;
        margin-bottom: 10px;
    }
    .blulinc-form-check-input {
        width: 11px;
        height: 11px;
    }
    .blulinc-form-check-label {
        font-size: 9px;
    }
    .blulinc-forgot-link {
        margin-top: 8px;
    }
    .blulinc-forgot-link a {
        font-size: 9px;
    }
    .blulinc-error-alert {
        padding: 5px 6px;
        margin-bottom: 10px;
        font-size: 9px;
    }
}
</style>

<div class="blulinc-login-container">
    <div class="blulinc-login-card">
        <div class="blulinc-login-header">
            <h3><i class="bi bi-shield-lock me-2"></i>Login</h3>
                            <p class="blulinc-login-subtitle">Access your Blulinc account</p>
        </div>
        
        <div class="blulinc-login-body">
            <form method="POST" action="{{ route('login') }}">
                @csrf

                <div class="blulinc-form-group">
                    <label for="email" class="blulinc-form-label">{{ __('Email Address') }}</label>
                    <input id="email" type="email" class="blulinc-form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus placeholder="Enter your email">
                    
                    @error('email')
                        <div class="blulinc-error-alert">
                            <i class="bi bi-exclamation-triangle me-1"></i>{{ $message }}
                        </div>
                    @enderror
                </div>

                <div class="blulinc-form-group">
                    <label for="password" class="blulinc-form-label">
                        <i class="bi bi-lock me-1"></i>{{ __('Password') }}
                    </label>
                    <div class="blulinc-password-container">
                        <input id="password" type="password" class="blulinc-form-control blulinc-password-input @error('password') is-invalid @enderror" name="password" required autocomplete="current-password" placeholder="Enter your password">
                        <button type="button" class="blulinc-password-toggle" onclick="togglePassword('password')">
                            <i class="bi bi-eye" id="password-icon"></i>
                        </button>
                    </div>
                    
                    @error('password')
                        <div class="blulinc-error-alert">
                            <i class="bi bi-exclamation-triangle me-1"></i>{{ $message }}
                        </div>
                    @enderror
                </div>

                <div class="blulinc-form-check">
                    <input class="blulinc-form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                    <label class="blulinc-form-check-label" for="remember">
                        {{ __('Remember Me') }}
                    </label>
                </div>

                <button type="submit" class="blulinc-btn-login">
                    <i class="bi bi-box-arrow-in-right me-2"></i>{{ __('Login') }}
                </button>


            </form>
        </div>
    </div>
</div>

<script>
// Función para mostrar/ocultar contraseña
function togglePassword(inputId) {
    const input = document.getElementById(inputId);
    const icon = document.getElementById(inputId + '-icon');
    
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('bi-eye');
        icon.classList.add('bi-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.remove('bi-eye-slash');
        icon.classList.add('bi-eye');
    }
}
</script>
@endsection
