@extends('layouts.app')

@section('content')

<div class="container p-5 bg-light rounded-4">

    <form class="needs-validation" id="form_password" novalidate>

        @csrf

        <div class="d-flex justify-content-center justify-content-sm-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3">
            <h3 class="h2">Actualización de datos del usuario.</h3>
        </div>

        <div class="row g-2 mb-3">

            <div class="col-md">
                <div class="form-floating">
                    <input type="text" name="name" class="form-control rounded-3" placeholder="Nombre y apellido" value="{{ Auth::user()->name }}" disabled>
                    <label for="floatingInput">Nombre y apellido</label>
                </div>
            </div>
            <div class="col-md">
                <div class="form-floating">
                    <input type="text" name="username" class="form-control rounded-3" placeholder="Usuario" value="{{ Auth::user()->username }}" disabled>
                    <label for="floatingInput">Usuario</label>
                </div>
            </div>

        </div>

        <div class="row g-2 mb-3">

            <div class="col-md">
                <div class="form-floating">
                    <input type="password" name="password" class="form-control rounded-3" placeholder="Contraseña" required>
                    <label for="floatingInput">Contraseña</label>
                    <div class="invalid-feedback" role="alert">
                        <strong id="pass_msg">Contraseña no válida</strong>
                    </div>
                </div>
            </div>
            <div class="col-md">
                <div class="form-floating">
                    <input type="password" name="password_confirm" class="form-control rounded-3" placeholder="Confirmar contraseña" required>
                    <label for="floatingInput">Confirmar contraseña</label>
                    <div class="invalid-feedback" role="alert">
                        <strong id="pass_msg_confirm"></strong>
                    </div>
                </div>
            </div>

        </div>

        <div class="alert alert-primary alert-dismissible fade show g-2 mb-3" role="alert">
            
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            <div>
                <b><i class="bi bi-info-circle-fill"></i></b> Su nueva contraseña debe cumplir con las siguientes especificaciones:
                <ol start="1">
                    <li>Debe tener por lo menos 8 caracteres.</li>
                    <li>Se deben incluir letras mayúsculas y minúsculas (a-z y A-Z).</li>
                    <li>Se debe incluir un número (del 0 al 9).</li>
                    <li>Se debe incluir un carácter especial (!, @, #,%, etc.).</li>
                </ol>
            </div>
            
        </div>

        <div class="d-grid gap-2 col-6 mx-auto">
            <button type="submit" class="btn btn-primary" id="btnForm" disabled>Guardar</button>
        </div>

    </form>

</div>

<x-alert-placeholder></x-alert-placeholder>
<x-spinner></x-spinner>

@vite(['resources/js/restablecerContrasena.js'])

@endsection