@extends('layouts.app')

@section('content')
<div class="container-fluid" style="height: 100vh;margin-top:70px;padding: 20px; overflow-x:hidden;">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <form class="mx-auto" method="POST" action="{{ route('change_password.store') }}" style="">
                @csrf
                <div class="form-group row colorabc1">
                    <label for="current-password" class="col-md-4 col-form-label text-md-right fts-14 font-weight-bold" style="text-align: end;">
                        Mot de passe actuel
                    </label>

                    <div class="col-md-8 align-self-center">
                        <input id="current-password" type="password" placeholder="Mot de passe" class="form-control @error('current-password') is-invalid @enderror" name="current-password" required autocomplete="current-password">

                        @error('current-password')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                </div>

                <div class="form-group row colorabc1">
                    <label for="new-password" class="col-md-4 col-form-label text-md-right fts-14 font-weight-bold" style="text-align: end;">
                        Nouveau mot de passe
                    </label>
                    <div class="col-md-8 align-self-center">
                        <input id="new-password" type="password" placeholder="Mot de passe" class="form-control @error('new-password') is-invalid @enderror" name="new-password" required autocomplete="new-password">

                        @error('new-password')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                </div>

                <div class="form-group row align-self-center colorabc1">
                    <label for="new-password_confirmation" class="col-md-4 col-form-label text-md-right fts-14 font-weight-bold" style="text-align: end;">
                        Confirmation nouveau mot de passe
                    </label>
                    <div class="col-md-8 align-self-center">
                        <input id="new-password_confirmation" type="password" placeholder="Mot de passe" class="form-control @error('new-password_confirmation') is-invalid @enderror" name="new-password_confirmation" required autocomplete="new-password">

                        @error('new-password_confirmation')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                </div>

                <div class="form-group row mb-0 text-left">
                    <div class="col-md-12 d-flex justify-center">
                        <button type="submit" class="mf_btn my-4 mx-auto" style="padding:10px;">
                            Modifier le mot de passe
                        </button>
                    </div>
                </div>

            </form>

        </div>
    </div>
</div>

@endsection