@extends('auth.layouts.master')

@section('title')
  Reset Username
@endsection

@section('head-scripts')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
@endsection

@section('content')
<nav class="navbar pt-5 pb-0 mb-0">
  <div class="container d-flex justify-content-center">
    <a class="navbar-brand logo-register" href="{{route('index')}}">
          <img src="{{asset('images/reef-logo.png')}}" alt="" class="img-fluid">
        </a>
  </div>
</nav>
  <div class="container">
    <div class="row">
      <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
        <div class="card card-signin my-5">
          <div class="card-body">
            <h5 class="card-title text-center">Create password</h5>
                    <form method="POST" action="{{ route('update_password') }}">
                        @csrf

                        <input type="hidden" name="token" value="{{ $token }}">

                        <div class="form-group row">
                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">

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

                        <div class="form-group row">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>

                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                            </div>
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Create password
                                </button>
                            </div>
                        </div>
                    </form>
                  </div>
                </div>
              </div>
           </div>
        </div>
@endsection


@section('modals')
    <div class="modal register-success-modal" id="password-success" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <button type="button" class="btn-close" data-bs-dismiss="password-success" aria-label="Close" id="close"></button>
                <div class="modal-body">
                    <h3 class="mb-3 text-center">SUCCESS!</h3>
                    <p class="mb-0 text-center">Your password Has been reset successfully.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="close">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('scripts')
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
    @if(session()->has('success'))
        <script type="text/javascript">
            $(document).ready(function(){
                let modal = $(document).find('#password-success');
                if(modal.length > 0){
                    modal.show();
                }
            })
            
            document.querySelector('#close').addEventListener('click', () => {
              let modal = $(document).find('#password-success');
                  modal.hide();
              });
        </script>
    @endif
@endpush