@extends('layouts.master')

@section('content')
    <div class="container">
      @include('layouts.page-header')
      <div class="row">
        <div class="col-md-8 offset-md-2">
          <form action="/assessment" method="POST">
            @csrf
            <div class="mb-1 row">
              <label for="id" class="col-sm-4 col-form-label">Assessment ID</label>
              <div class="col-sm-8">
                <input type="text" readonly class="form-control form-control-sm" name="id" id="id" value="{{ $assessmentId ?? '' }}">
              </div>
            </div>
            @if ($user->role !== App\Models\User::ROLE_EXTERNAL_ADMIN)
              <div class="mb-1 row">
                <label for="customerId" class="col-sm-4 col-form-label">Client</label>
                <div class="col-sm-8">
                  <select required class="form-select form-select-sm" name="customerId" id="customerId" aria-label="Default select example">
                    <option value="" selected>Select a Client</option>
                    @foreach ($clients as $client)
                      <option value="{{ $client->id }}">{{ $client->first_name }} {{ $client->last_name }}</option>
                    @endforeach
                  </select>
                </div>
              </div>
            @endif
            <div class="mb-1 row">
              <label for="hiringOrg" class="col-sm-4 col-form-label">Employment Org</label>
              <div class="col-sm-8">
                <input name="hiringOrg" required id="hiringOrg" type="text" class="form-control form-control-sm">
              </div>
            </div>
            <div class="mb-1 row">
              <label for="titlePosition" class="col-sm-4 col-form-label">Title Position</label>
              <div class="col-sm-8">
                <input name="titlePosition" required id="titlePosition" type="text" class="form-control form-control-sm">
              </div>
            </div>
            @if ($user->role === App\Models\User::ROLE_EXTERNAL_ADMIN)
              <div class="mb-1 row">
                <div class="col-sm-8 offset-sm-4">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="1" id="iSpecify">
                    <label class="form-check-label" for="iSpecify">
                      I will specify pre-assessment details
                    </label>
                  </div>
                </div>
              </div>
            @endif
            <div class="mb-1 row">
              <label for="managerName" class="col-sm-4 col-form-label">Manager's Full Name</label>
              <div class="col-sm-8">
                <input name="managerName" required id="managerName" type="text" class="form-control form-control-sm">
              </div>
            </div>
            <div class="mb-1 row">
              <label for="managerEmail" class="col-sm-4 col-form-label">Manager's Email</label>
              <div class="col-sm-8">
                <input name="managerEmail" required id="managerEmail" type="email" class="form-control form-control-sm">
              </div>
              @if ($user->role !== App\Models\User::ROLE_EXTERNAL_ADMIN)
                <div class="col-sm-8 offset-sm-4">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="shouldEmailPreAsmt" id="shouldEmailPreAsmt" checked>
                    <label class="form-check-label" for="shouldEmailPreAsmt">
                      Email Manager pre-assessment
                    </label>
                  </div>
                </div>
              @endif
            </div>
            <div class="mb-1 row">
              <label for="assesseeName" class="col-sm-4 col-form-label">Assessee's Full Name</label>
              <div class="col-sm-8">
                <input name="assesseeName" required id="assesseeName" type="text" class="form-control form-control-sm">
              </div>
            </div>
            <div class="mb-1 row">
              <label for="assesseeUsername" class="col-sm-4 col-form-label">Username</label>
              <div class="col-sm-8">
                <input name="assesseeUsername" required id="assesseeUsername" type="text" class="form-control form-control-sm">
              </div>
            </div>
            <div class="mb-1 row">
              <label for="assesseePassword" class="col-sm-4 col-form-label">Password</label>
              <div class="col-sm-8">
                <input name="assesseePassword" required value="{{ $generatedPassword }}" id="assesseePassword" type="text" class="form-control form-control-sm">
              </div>
            </div>
            <div class="mb-1 row">
              <label for="assesseeEmail" class="col-sm-4 col-form-label">Email</label>
              <div class="col-sm-8">
                <input name="assesseeEmail" required id="assesseeEmail" type="email" class="form-control form-control-sm">
              </div>
            </div>
            <div class="mb-1 row">
              <label class="col-sm-4 col-form-label">Gender</label>
              <div class="form-check col-sm-8">
                <input type="radio" class="btn-check" name="assesseeGender" id="gender1" value="male" autocomplete="off" required>
                <label class="btn btn-sm btn-outline-primary" for="gender1">Male</label>
  
                <input type="radio" class="btn-check" name="assesseeGender" id="gender2" value="female" autocomplete="off">
                <label class="btn btn-sm btn-outline-primary" for="gender2">Female</label>
              </div>
            </div>
            @if ($user->role !== App\Models\User::ROLE_EXTERNAL_ADMIN)
            <div class="mb-1 row">
              <label for="assessorId" class="col-sm-4 col-form-label">Assessor</label>
              <div class="col-sm-8">
                <select name="assessorId" required id="assessorId" class="form-select form-select-sm" aria-label="Default select example">
                  <option value="0" selected>Select an Assessor</option>
                  @foreach ($assessors as $assessor)
                    <option value="{{ $assessor->id }}">{{ $assessor->first_name }} {{ $assessor->last_name }}</option>
                  @endforeach
                </select>
              </div>
            </div>
            @endif
            <div class="mb-1 row">
              <label for="creatorId" class="col-sm-4 col-form-label">Created By</label>
              <div class="col-sm-8">
                <input type="hidden" readonly id="creatorId" name="creatorId" value="{{ $user->id }}">
                <input type="text" readonly class="form-control form-control-sm" value="{{ $user->first_name }} {{ $user->last_name}}">
              </div>
            </div>
            <div class="mb-1 row">
              <label for="comments" class="col-sm-4 col-form-label">Comments</label>
              <div class="col-sm-8">
                <textarea name="comments" id="comments" type="text" class="form-control form-control-sm" placeholder="Is there anything special you would like us to know?"></textarea>
              </div>
            </div>
            <div class="mt-4 row">
              <div class="col text-center">
                <div class="d-grid gap-2 d-lg-block">
                  <button type="submit" class="btn btn-primary btn-lg">Save</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
@stop

@section('footer-scripts')
  <script type="text/javascript">
    $(document).ready(function() {
      $('#iSpecify').change(function() {
        if ($(this).is(':checked')) {
          $('#managerName').val('{{ $user->first_name }} {{ $user->last_name }}')
          $('#managerEmail').val('{{ $user->email }}')
        } else {
          $('#managerName').val('')
          $('#managerEmail').val('')
        }
      });

      $('#assesseeUsername').on('focus', function() {
        if (!$(this).val()) {
          var username = $('#assesseeName').val().split(' ')
          if ($('#assesseeName').val()) {
            $(this).val(username[0].charAt(0).toLowerCase() + username[1].toLowerCase() + Math.floor(Math.random() * 100))
          }
        }
      })
    })
  </script>
@endsection