@extends('layouts/fullLayoutMaster')

@section('title', 'Login Page')

@section('page-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('css/base/pages/page-auth.css')) }}">
@endsection

@section('content')
<div class="position-relative" style="z-index: 1">
    <div class="position-absolute top-0 start-50 translate-middle-x col-12">
        @if (session('success'))
        <div role="alert" class="alert alert-success col-10 m-auto">
            <div class="alert-body text-center">
                <span>{{ session('success') }}!</span>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
        @elseif(session('warning'))
        <div role="alert" class="alert alert-warning col-10 m-auto">
            <div class="alert-body text-center">
                <span>{{ session('warning') }}!</span>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
        @endif
    </div>
</div>
<div class="auth-wrapper auth-v1 px-2" style="background: #0b0f12ee" >
    <div class="auth-inner py-2 back-gris" style="background: #35424a">
        <!-- Login v1 -->
        <div class="card mb-0 back-gris">
            <div class="card-body">
                
                <span class="brand-logo">
                    <img src="{{asset('images/logo/promolider_logo.png')}}" style="min-width: 130px;width:50%">
                </span>

                <h4 class="card-title mb-1 color-text-green">Bienvenido a Promolíder! 👋</h4>
                <p class="card-text mb-2 color-text-white">Inicia sesión con tu cuenta y comienza la aventura</p>

                <form class="auth-login-form mt-2" method="POST" action="{{ route('main-login') }}">
                    @csrf
                    <div class="form-group {{ $errors->has('username') ? 'has-error' : '' }}">
                        <label for="login-user" class="form-label color-text-green">Usuario</label>
                        <input type="text" autocomplete="off" class="form-control input-back @error('username') is-invalid @enderror" id="login-user" name="username" aria-describedby="login-user" tabindex="1" autofocus value="{{ old('username') }}" placeholder="Ingrese su nombre de usuario" />
                        @error('username')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group {{ $errors->has('password') ? 'has-error' : '' }}">
                        <label for="login-password" class="form-label color-text-green">Contraseña</label>
                        <input type="password" class="form-control input-back @error('password') is-invalid @enderror" id="login-password" name="password" tabindex="2" aria-describedby="login-password" placeholder="Ingrese su constraseña" />
                        @error('password')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input input-back" type="checkbox" id="remember-me" name="remember-me" tabindex="3" {{ old('remember-me') ? 'checked' : '' }} />
                            <label class="custom-control-label color-text-white" for="remember-me"> Recuérdame </label>
                        </div>
                    </div>

                    <div class="form-group {{ $errors->has('g-recaptcha-response') ? 'has-error' : '' }}">
                        <center>
                            {!! htmlFormSnippet() !!}
                            @error('g-recaptcha-response')
                                <span class="invalid-feedback" role="alert" style="display: block">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </center>
                    </div>

                    <button type="submit" class="btn back-green btn-block color-text-white" tabindex="4">Iniciar sesión</button>
                </form>
            </div>
        </div>
    </div>
    <!-- /Login v1 -->
</div>
</div>
@endsection