@extends('layouts.dashboard-layout')

@section('title', 'Usuarios')

@section('content_header')
    <h1>Cuenta de usuario</h1>
@stop

@section('content')
    {{-- @livewire('admin.user-edit', ['user' => $user]); --}}
    <div class="">
        <h4 class="py-3 mb-4">
            Configuraci&oacute;n de usuario
        </h4>

        <div class="row fv-plugins-icon-container">
            <div class="col-md-12">
                <ul class="nav nav-pills flex-column flex-md-row mb-4">
                    <li class="nav-item"><a class="nav-link" href="{{route('admin.users.account-settings-profile', $user)}}">
                            <i class="ti-xs ti ti-users me-1"></i> Cuenta</a></li>
                    <li class="nav-item"><a class="nav-link active" href="javascript:void(0);">
                            <i class="ti-xs ti ti-lock me-1"></i> Seguridad</a></li>
                </ul>
                <div class="card mb-4">
                    <h5 class="card-header">Cambiar contrase&ntilde;a</h5>
                    <div class="card-body">
                      <form id="formAccountSettings" method="GET" onsubmit="return false" class="fv-plugins-bootstrap5 fv-plugins-framework" novalidate="novalidate">
                        <div class="row">
                          <div class="mb-3 col-md-6 form-password-toggle fv-plugins-icon-container">
                            <label class="form-label" for="currentPassword">Contrase&ntilde;a actual</label>
                            <div class="input-group input-group-merge has-validation">
                              <input class="form-control" type="password" name="currentPassword" id="currentPassword" placeholder="············">
                              <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
                            </div><div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="mb-3 col-md-6 form-password-toggle fv-plugins-icon-container">
                            <label class="form-label" for="newPassword">Nueva contrase&ntilde;a</label>
                            <div class="input-group input-group-merge has-validation">
                              <input class="form-control" type="password" id="newPassword" name="newPassword" placeholder="············">
                              <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
                            </div><div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                          </div>
              
                          <div class="mb-3 col-md-6 form-password-toggle fv-plugins-icon-container">
                            <label class="form-label" for="confirmPassword">Confirmar nueva contrase&ntilde;a</label>
                            <div class="input-group input-group-merge has-validation">
                              <input class="form-control" type="password" name="confirmPassword" id="confirmPassword" placeholder="············">
                              <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
                            </div><div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                          </div>
                          <div class="col-12 mb-4">
                            <h6>Requerimientos de la constrase&ntilde;a:</h6>
                            <ul class="ps-3 mb-0">
                              <li class="mb-1">Debe tener al menos 8 caracteres</li>
                            </ul>
                          </div>
                          <div>
                            <button type="submit" class="btn btn-primary me-2 waves-effect waves-light">Guardar cambios</button>
                            <button type="reset" class="btn btn-label-secondary waves-effect">Cancelar</button>
                          </div>
                        </div>
                      <input type="hidden"></form>
                    </div>
                  </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    {{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
@stop

@section('js')
    {{-- <script> console.log('Hi!'); </script> --}}
@stop