@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


<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>
  @section('content')
  <div class="container">
    <div class="row">
      <div class="col-sm-9 col-md-7 mx-auto">
        <div class="card card-signin my-5">
          <div class="card-body">
            <h5 class="card-title text-center">Reset Username</h5>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    <form method="POST" action="{{ route('create_reset_username') }}">
                        @csrf

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

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

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

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



@section('modals')
    <div class="modal register-success-modal" id="reset-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="reset-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 account details has been successfully updated. </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('#reset-success');
                if(modal.length > 0){
                    modal.show();
                }
            })
            
            document.querySelector('#close').addEventListener('click', () => {
              let modal = $(document).find('#reset-success');
                  modal.hide();
              });
        </script>
    @endif
@endpush