@php

    $carpeta = Str::slug(config('app.name'), '');

@endphp

@extends('coopdigital::diseños.cabecera')

{{-- Título --}}
@section('tituloCabecera', 'Recuperación de Contraseña')

{{-- Estilos --}}
@section('cssCabecera')

    {{-- CSS --}}
    <link rel="stylesheet" href="{{ asset('vendor/daite/coopdigital/src/public/css/vista/recuperacionContrasena.css') }}">

@endsection

{{-- Contenido --}}
@section('contenidoCabecera')

    {{-- Cuerpo --}}

    <body>

        {{-- Contenedor --}}
        <div id="contenedor">

            {{-- Fila contenedor --}}
            <div class="row h-100">

                {{-- Contenedor izquierdo --}}
                <div class="col-lg-5 col-12">

                    {{-- Contenedor --}}
                    <div id="contenedorIzquierdo">

                        {{-- Logo --}}
                        <div class="logotipo">
                            <a tabindex="-1"><img src="https://www.daite.com.do/archivos/imagenes/{{ $carpeta }}/logotipo.png"
                                    alt="{{ config('app.name') }}"></a>
                        </div>

                        {{-- Título --}}
                        <h1 class="titulo">Recuperación de Contraseña</h1>
                        {{-- <p class="auth-subtitle mb-5">Input your email and we will send you reset password link.</p> --}}

                        {{-- Formulario --}}
                        <form action="{{ route('iniciarSesion') }}" method="POST" id="formulario">

                            {{-- Mensaje de validación sobre el inicio de sesión fallido --}}
                            <div class="alert alert-danger" id="etiquetaValidacion"></div>

                            {{-- Clave única de verificación para el formulario --}}
                            @csrf

                            {{-- Campo correo electrónico --}}
                            <div class="form-group position-relative has-icon-left">
                                <input type="email" class="form-control form-control-xl" placeholder="Correo Electrónico"
                                    id="correo" name="correo" value="{{ old('correo') }}">
                                <div class="form-control-icon">
                                    <i class="bi bi-envelope"></i>
                                </div>
                            </div>

                            {{-- Campo cédula --}}
                            <div class="form-group position-relative has-icon-left">
                                <input type="text" class="form-control form-control-xl" placeholder="Cédula"
                                    id="cedula" name="cedula" value="{{ old('cedula') }}">
                                <div class="form-control-icon">
                                    <i class="bi bi-postcard"></i>
                                </div>
                            </div>

                            {{-- Botón enviar --}}
                            <button class="btn btn-primary btn-block btn-lg shadow-lg mt-5" id="botonEnviar">Enviar</button>

                        </form>

                        {{-- Enlace para iniciar sesión --}}
                        <div class="text-center mt-4 text-lg fs-4">
                            <p class='text-gray-600'><a href="{{ route('inicioSesion') }}"
                                    class="font-bold">Iniciar Sesión</a>.
                            </p>
                        </div>

                        <input type="text" id="usuario" name="usuario" hidden>

                        <input type="text" id="contrasena" name="contrasena" hidden>

                    </div>

                </div>

                {{-- Contenedor izquierdo --}}
                <div class="col-lg-7 d-none d-lg-block">

                    {{-- Contenido --}}
                    <div id="contenedorDerecho">

                    </div>

                </div>

            </div>

        </div>

        {{-- jQuery v3.6.0 --}}
        <script src="{{ asset('vendor/daite/coopdigital/src/public/librerias/jquery/3.6.0/jquery.min.js') }}"></script>

        <!-- iMask v6.4.2 -->
        <script src="{{ asset('vendor/daite/coopdigital/src/public/librerias/imask/6.4.2/imask.js') }}"></script>

        {{-- JS --}}
        <script src="{{ asset('vendor/daite/coopdigital/src/public/js/vista/recuperacionContrasena.js') }}"></script>

    </body>

@endsection
