@extends('auth.layouts.master')

@section('title')
  Register
@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">Register</h5>
            <form id="form-login" action="{{ route('auth.finished-company-user-registration') }}" method="POST">
              {{ csrf_field() }}
              <div class="form-group pb-2">
                <label for="username">Email</label>
                <input type="text" class="form-control" id="username" name="username" placeholder="email" required>
              </div>
              <div class="form-group pb-2">
                <label for="password">Password</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
              </div>
              <div class="form-group pb-2">
                <label for="password">Confirm password</label>
                <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Password" required>
              </div>
              <input type="hidden" value="{{$token}}" name="token">
              <input type="hidden" value="1" name="freelancer">

              @if(isset($companyUsers))
                <input type="hidden" value="1" name="company_user_id">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" required>
                  <label class="form-check-label pb-2" for="defaultCheck1"><small>I have read and agree to the <a class="font-italic text-underline" href="https://reef.rocks/terms-of-use-for-Reef" target="_blank">Terms</a>  and  <a class="font-italic text-underline" href= "https://reef.rocks/privacy-policy" target="_blank"> Privacy Policy</a> . </small></label>
                </div>
              @endif
              <button type="submit" id="btn-login" class="btn btn-primary"> Submit </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

@endsection


@section('modals')
    <div class="modal register-success-modal" id="register-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="register-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 has been successfully created. Please check your email and download the app.</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('#register-success');
                if(modal.length > 0){
                    modal.show();
                }
            })
            
            document.querySelector('#close').addEventListener('click', () => {
              let modal = $(document).find('#register-success');
                  modal.hide();
              });
        </script>
    @endif
@endpush