@extends('layouts.app')

@section('content')
    <section class="banner-hero-little mb-2 bg-blue">
        <div class="banner-content-title">
            <h5 class="text-yellow">Changer votre mot de passe</h5>
        </div>
    </section>


    <div class="container mb-5 mt-5">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card shadow-sm">
                    <div class="card-header bg-blue text-white" align="center">

                        <h5>Modifier le profil (Si une donnée n'est pas sujet de modofication, laisser telle quelle)</h5>
                        @if (session('message'))
                            <div class="alert alert-warning" role="alert">
                                {{ session('message') }}
                            </div>
                        @endif

                        @if (session('success'))
                            <div class="alert alert-success" role="alert">
                                {{ session('success') }}
                            </div>
                        @endif</span> 
                    </div>
                    <div class="card-body">  
                        <form class="invoice-form" method="POST" action="{{route('update_profil')}}">
                            @csrf
                            <div class="row justify-content-center">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Email </label>
                                        <input type="email"  class="form-control @error('email') is-invalid @enderror"  name="email" value="{{ Auth::user()->email }}" required autocomplete="devise" autofocus>

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

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Ancien mot de passe</label>
                                        <input id="myInput" type="password"  class="form-control @error('oldMp') is-invalid @enderror"  name="oldMp" required autocomplete="oldMp" autofocus>

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

                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Nouveau mot de passe</label>
                                        <input id="myInput2" type="password"  class="form-control @error('newMp') is-invalid @enderror"  name="newMp" required autocomplete="newMp" autofocus>

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

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Confirmer Nouveau mot de passe</label>
                                        <input id="myInput3" type="password"  class="form-control @error('cnMp') is-invalid @enderror"  name="cnMp" required autocomplete="cnMp" autofocus>

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

                            <input type="checkbox" onclick="myFunction()"> Voir le mot de passe

                            <div class="row justify-content-center mb-0 mt-2">
                                <button type="submit" class="btn btn-primary bg-yellow text-white">Enregistrer</button>
                            </div>
                        </form>  
                    </div>
                </div>
            </div>
        </div>
    </div>
    
@endsection

@section('footerjs')
    <script>
        function myFunction() {

          var x = document.getElementById("myInput");
          if (x.type === "password") {
            x.type = "text";
          } else {
            x.type = "password";
          }

          var y = document.getElementById("myInput2");
          if (y.type === "password") {
            y.type = "text";
          } else {
            y.type = "password";
          }

          var r = document.getElementById("myInput3");
          if (r.type === "password") {
            r.type = "text";
          } else {
            r.type = "password";
          }

        }
    </script>
@endsection