@extends('layout.layout')

 @section('content')

 @if($errors->any())
 <div class="alert alert-success  text-white text-center" role="alert"
     style="color:#fff !important;font-weight:bold;background: green !important;">
     <p>{{$errors->first()}}</p>
     <button type="button" class="btn-close btn-alerta" data-bs-dismiss="alert" aria-label="Close"
         style="background: none !important;border:none !important;float:right;font-weight:bold;color:#fff;margin-top:-37px;">x</button>
 </div>
 @endif
 <form class="form-forget-password" id="submit_form" method="POST" action="">
     @csrf
     <div class="input-container-forgot-password">
         <div class="input-field-forget-password">
             <div id="errors-forggot-pass"></div>
             <span>Forgot Password</span>
         </div>
         <div class="input-field-forget-password">
             @if(Session::has('success'))
             <div style="color:green;">
                 {{Session::get('success')}}
             </div>
             @endif
         </div>
 
         <div class="input-field-forget-password">
             <input type="text" name="email" placeholder="Email address" value="" required>
             @error('email')
             <div style="color: red;">{{ $message }}</div>
             @enderror
         </div>
         <div class="input-field-forget-password">
             <button type="submit" class="submit">Reset password</button>
         </div>

     </div>
 </form>


 @push('js')

 <script>
     $(document).ready(function () {

         $("#submit_form").on('submit', function (e) {

             e.preventDefault();

             $.ajax({
                 url: $(this).attr('action'),
                 method: $(this).attr('method'),
                 data: new FormData(this),
                 processData: false,
                 dataType: 'json',
                 headers: {
                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                 },
                 contentType: false,

                 success: function (data) {
                         $('#submit_form')[0].reset();
                         $("#errors-forggot-pass").html(data.mesaj);
                         $("#errors-forggot-pass").fadeTo(2000, 500).slideUp(500);
                         $("#errors-forggot-pass").slideUp(500);
                 },
                 error: function(error){
                    $("#errors-forggot-pass").html(error.responseJSON.fail);
                    $("#errors-forggot-pass").fadeTo(2000, 500).slideUp(500);
                    $("#errors-forggot-pass").slideUp(500);
                 }

             });

         });

     });

 </script>


 @endpush

 @endsection