@extends('layouts.app')

@section('title', 'Iniciar sesion')
@section('hide_navbar', '1')
@section('full_width', '1')
@section('body_class', 'auth-login')

@push('styles')
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@endpush

@section('content')
    <div class="ambient-shape shape-1"></div>
    <div class="ambient-shape shape-2"></div>

    <div class="login-shell">
        <div class="card login-card">
            <div class="card-body p-4 p-md-5">
                <img src="{{ asset('imgs/avante-logo.png') }}" alt="Avante" class="login-logo" onerror="this.style.display='none'">
                <h1 class="h3 text-center login-title mb-4">Bienvenido de nuevo</h1>

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

                    <div class="mb-3">
                        <input class="form-control @error('cedula') is-invalid @enderror" id="cedula" name="cedula" type="text" placeholder="Numero de Cedula" value="{{ old('cedula') }}" required autofocus autocomplete="off">
                        @error('cedula')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <input class="form-control" id="password" name="password" type="password" placeholder="Contraseña" required>
                    </div>

                    <div class="form-check mb-4">
                        <input class="form-check-input" id="remember" name="remember" type="checkbox" value="1">
                        <label class="form-check-label text-secondary" for="remember">Recordarme</label>
                    </div>

                    <button type="submit" class="btn btn-login w-100">Iniciar Sesion</button>
                </form>

                <p class="footer-text text-center mt-4 mb-0">
                    Sistema de Administracion de Almacen<br>© v2.0
                </p>
            </div>
        </div>
    </div>
@endsection
