@extends('layouts.guest')

@section('title', 'Iniciar Sesion - SICA')

@section('content')
<div class="page page-center">
    <div class="container container-tight py-4">
        <div class="text-center mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#206bc4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="mb-2"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M22 9l-10 -4l-10 4l10 4z"/><path d="M4 13v4c0 1.1 2.686 3 6 3s6 -1.9 6 -3v-4"/><path d="M18 11.01v7"/></svg>
            <h1 class="fw-bold fs-1 mb-1">SICA</h1>
            <p class="text-secondary mb-2">Sistema de Control Escolar</p>
            <p class="text-muted small px-3" style="font-size:0.8rem; line-height:1.5;">
                Plataforma privada para la administración de registros de profesores y alumnos,
                con sincronización a Moodle. Acceso exclusivo para personal autorizado.
            </p>
        </div>

        <div class="card card-md">
            <div class="card-body">
                <h2 class="h2 text-center mb-4">Iniciar Sesion</h2>

                @if($errors->any())
                    <div class="alert alert-danger">
                        @foreach($errors->all() as $error)
                            <p class="mb-0">{{ $error }}</p>
                        @endforeach
                    </div>
                @endif

                <form action="{{ route('login') }}" method="POST" autocomplete="off">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">CURP o Correo electronico</label>
                        <input type="text"
                               name="login_id"
                               class="form-control @error('login_id') is-invalid @enderror"
                               placeholder="CURP o correo@ejemplo.com"
                               value="{{ old('login_id') }}"
                               autofocus
                               required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Contrasena</label>
                        <div class="input-group input-group-flat">
                            <input type="password"
                                   name="password"
                                   id="password"
                                   class="form-control"
                                   placeholder="Tu contrasena"
                                   required>
                            <span class="input-group-text">
                                <a href="#" class="link-secondary" id="toggle-password" title="Mostrar contrasena">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                         viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                         class="icon">
                                        <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/>
                                        <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"/>
                                    </svg>
                                </a>
                            </span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-check">
                            <input type="checkbox" name="remember" class="form-check-input"/>
                            <span class="form-check-label">Recordarme</span>
                        </label>
                    </div>
                    <div class="form-footer">
                        <button type="submit" class="btn btn-primary w-100">
                            Iniciar Sesion
                        </button>
                    </div>
                </form>

                <div class="hr-text text-secondary my-3">o continua con</div>

                <a href="{{ route('auth.google') }}" class="btn btn-outline-secondary w-100">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" style="margin-right:8px; vertical-align:-3px;">
                        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/>
                        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                    </svg>
                    Iniciar sesion con Google
                </a>
            </div>
        </div>

        <div class="text-center text-muted mt-3" style="font-size: 0.8rem;">
            <a href="{{ route('privacy') }}" class="text-muted">Política de Privacidad</a>
            &nbsp;·&nbsp;
            <a href="{{ route('terms') }}" class="text-muted">Condiciones del Servicio</a>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/auth/login.js') }}"></script>
@endpush