@extends('layouts.auth')

@section('title', 'Iniciar Sesión')

@section('content')
<div class="login-page">
    {{-- Sidebar izquierdo --}}
    <div class="login-sidebar">
        <div class="login-brand">
            <img src="{{ asset('assets/img/logo-siryc-white.png') }}" alt="SIRYC" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgMjAwIDUwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjEwMCIgeT0iMzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIzMCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtd2VpZ2h0PSJib2xkIj5TSVJZQzwvdGV4dD48L3N2Zz4='">
            <h1>Sistema de Mantenimiento</h1>
            <p>Gestión integral de mantenimiento preventivo</p>
        </div>

        <div class="login-features">
            <div class="login-feature">
                <div class="login-feature-icon">
                    <i class="fas fa-calendar-check"></i>
                </div>
                <div>
                    <h4>Programación Inteligente</h4>
                    <p>Calendario automatizado de mantenimientos preventivos</p>
                </div>
            </div>

            <div class="login-feature">
                <div class="login-feature-icon">
                    <i class="fas fa-mobile-alt"></i>
                </div>
                <div>
                    <h4>Aplicación Móvil</h4>
                    <p>Ejecución de trabajos en campo con soporte offline</p>
                </div>
            </div>

            <div class="login-feature">
                <div class="login-feature-icon">
                    <i class="fas fa-qrcode"></i>
                </div>
                <div>
                    <h4>Aprobación QR + PIN</h4>
                    <p>Validación segura de trabajos completados</p>
                </div>
            </div>

            <div class="login-feature">
                <div class="login-feature-icon">
                    <i class="fas fa-chart-pie"></i>
                </div>
                <div>
                    <h4>Reportes en Tiempo Real</h4>
                    <p>Dashboards y métricas de cumplimiento</p>
                </div>
            </div>
        </div>

        <div class="developer-badge">
            <img src="{{ asset('assets/img/logo-macrogram.png') }}"
                 alt="MACROGRAM"
                 onerror="this.outerHTML='<span style=\'color: rgba(255,255,255,0.6); font-size: 0.8rem;\'>MACROGRAM Developer System</span>'">
        </div>
    </div>

    {{-- Contenido de login --}}
    <div class="login-content">
        <div class="login-box">
            <div class="login-header">
                <h2>Bienvenido</h2>
                <p>Ingrese su cédula y contraseña para acceder</p>
            </div>

            @if(session('error'))
            <div class="login-error">
                <i class="fas fa-exclamation-circle me-2"></i>
                {{ session('error') }}
            </div>
            @endif

            @if(session('warning'))
            <div class="login-warning">
                <i class="fas fa-exclamation-triangle me-2"></i>
                {{ session('warning') }}
            </div>
            @endif

            @if($errors->any())
            <div class="login-error">
                <i class="fas fa-exclamation-circle me-2"></i>
                {{ $errors->first() }}
            </div>
            @endif

            <form class="login-form" method="POST" action="{{ route('web.login.post') }}" id="loginForm">
                @csrf

                <div class="form-group">
                    <label class="form-label" for="cedula">Cédula</label>
                    <div class="input-group">
                        <i class="input-icon fas fa-id-card"></i>
                        <input
                            type="text"
                            class="form-control @error('cedula') is-invalid @enderror"
                            id="cedula"
                            name="cedula"
                            value="{{ old('cedula') }}"
                            placeholder="Ingrese su número de cédula"
                            autocomplete="username"
                            maxlength="13"
                            required
                            autofocus
                        >
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="password">Contraseña</label>
                    <div class="input-group">
                        <i class="input-icon fas fa-lock"></i>
                        <input
                            type="password"
                            class="form-control @error('password') is-invalid @enderror"
                            id="password"
                            name="password"
                            placeholder="Ingrese su contraseña"
                            autocomplete="current-password"
                            required
                        >
                        <button type="button" class="password-toggle" id="togglePassword">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="remember" name="remember">
                    <label class="form-check-label" for="remember">
                        Mantener sesión iniciada
                    </label>
                </div>

                <button type="submit" class="btn btn-login" id="btnLogin">
                    Iniciar Sesión
                </button>
            </form>

            <div class="login-footer">
                <a href="{{ route('web.forgot-password') }}">¿Olvidó su contraseña?</a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.login-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle password visibility
    const togglePassword = document.getElementById('togglePassword');
    const passwordInput = document.getElementById('password');

    if (togglePassword && passwordInput) {
        togglePassword.addEventListener('click', function() {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            this.querySelector('i').classList.toggle('fa-eye');
            this.querySelector('i').classList.toggle('fa-eye-slash');
        });
    }

    // Solo permitir números en cédula
    const cedulaInput = document.getElementById('cedula');
    if (cedulaInput) {
        cedulaInput.addEventListener('input', function(e) {
            this.value = this.value.replace(/[^0-9]/g, '');
        });
    }

    // Form submit loading state
    const loginForm = document.getElementById('loginForm');
    const btnLogin = document.getElementById('btnLogin');

    if (loginForm && btnLogin) {
        loginForm.addEventListener('submit', function() {
            btnLogin.classList.add('loading');
            btnLogin.disabled = true;
        });
    }
});
</script>
@endpush