<?php $__env->startSection('title', 'Iniciar Sesión'); ?>

<?php $__env->startSection('content'); ?>
<div class="login-page">
    
    <div class="login-sidebar">
        <div class="login-brand">
            <img src="<?php echo e(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="<?php echo e(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>

    
    <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>

            <?php if(session('error')): ?>
            <div class="login-error">
                <i class="fas fa-exclamation-circle me-2"></i>
                <?php echo e(session('error')); ?>

            </div>
            <?php endif; ?>

            <?php if(session('warning')): ?>
            <div class="login-warning">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <?php echo e(session('warning')); ?>

            </div>
            <?php endif; ?>

            <?php if($errors->any()): ?>
            <div class="login-error">
                <i class="fas fa-exclamation-circle me-2"></i>
                <?php echo e($errors->first()); ?>

            </div>
            <?php endif; ?>

            <form class="login-form" method="POST" action="<?php echo e(route('web.login.post')); ?>" id="loginForm">
                <?php echo csrf_field(); ?>

                <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 <?php $__errorArgs = ['cedula'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                            id="cedula"
                            name="cedula"
                            value="<?php echo e(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 <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                            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="<?php echo e(route('web.forgot-password')); ?>">¿Olvidó su contraseña?</a>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('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>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('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>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.auth', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/tecnicos/sistema_mantenimiento/resources/views/auth/login.blade.php ENDPATH**/ ?>