@extends('layouts.app')

@section('content')        

        <section class="pt-md-4 pb-md-0 bg-dark">
          <div class="container">
            <div class="row justify-content-between align-items-center">
              <div class="col-lg-8 col-md-9">
                <div class="d-none d-md-block">
                  <br>
                </div>
                <h1 class="d-md-block" style="color: white;">Cambiar contraseña</h1>
                <p class="lead"></p>           
              </div>
              <div class="col-md-3 d-none d-md-none">
               
              </div>
            </div> 
            <br>           
          </div>
        </section>  
        <section>
          <div class="container">
            <div class="row card">
              <div class="col card-body">
                <form action="{{route('user.clave.update')}}" method="post">
                  @csrf                                
                  <div class="container">
                    <div class="row">
                      <div class="col-md-12">
                        @if(session('success'))
                          @if(session("mensaje") == 'Contraseña actualizada con éxito')
                            <div class="alert alert-success" role="alert">
                              {{session("mensaje")}}
                            </div>
                          @else
                            <div class="alert alert-danger" role="alert">
                              {{session("mensaje")}}
                            </div>
                          @endif
                        @endif
                      </div>
                                      <div class="col-sm-12">
                                        <div class="form-group">
                                          <label for="account-fn">Contraseña actual</label>
                                          <div class="password-toggle">
                                            <input class="form-control @error('clave') is-invalid @enderror" type="password" id="si-password" name="clave" placeholder="Introduzca su contraseña" required>
                                            @error('clave')
                                                    <span class="invalid-feedback" role="alert">
                                                      <strong>{{ $message }}</strong>
                                                    </span>
                                                  @enderror
                                          </div>
                                        </div>
                                      </div>
                                      <div class="col-sm-12">
                                        <div class="form-group">
                                          <label for="account-fn">Nueva contraseña</label>
                                          <div class="password-toggle">
                                            <input class="form-control @error('password') is-invalid @enderror" type="password" name="password" placeholder="Introduzca su nueva contraseña" required>
                                            
                                            @error('password')
                                                    <span class="invalid-feedback" role="alert">
                                                      <strong>{{ $message }}</strong>
                                                    </span>
                                                  @enderror
                                          </div>
                                        </div>
                                      </div>
                                      <div class="col-sm-12">
                                          <label for="su-password-confirm">Confirmar contraseña</label>
                                            <div class="password-toggle">
                                              <input class="form-control" type="password" id="su-password-confirm" placeholder="Confirme su contraseña" name="password_confirmation" required>                                                
                                            </div>
                                      </div>                                                     
                                    </div>                                   
                  </div>
                  <div class="row">
                                    <div class="col">
                                        <br>
                                        <button type="submit" class="btn btn-primary float-right">Actualizar</button>
                                    </div>
                  </div>
                </form>  
              </div>
            </div>            
          </div>
        </section>
@endsection