@extends('layouts.master')

@section('content')
  <div class="container">
    @include('layouts.page-header')
    <div class="row">
      <div class="col-md-8 offset-md-2">
        @if ($error ?? false)
          <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ $error }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        @endif
        @if ($success ?? false)
          <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ $success }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        @endif
        <form action="" method="POST" id="userForm">
          @csrf

          @if($userDetails)
            <input type="hidden" name="_method" value="PATCH">
          @endif
          <div class="mb-1 row">
            <label for="customer" class="col-sm-4 col-form-label text-sm-end">Client</label>
            <div class="col-sm-8">
              <input required type="flexdatalist" placeholder="Search or add new client" class="form-control form-control-sm flexdatalist" data-min-length="0" list="hiringOrgs" name="customer" id="customer" value="{{ $userDetails->hiring_organization ?? '' }}">
              <datalist id="hiringOrgs">
                @foreach($hiringOrgs as $hiringOrg)
                  <option value="{{ $hiringOrg }}">{{ $hiringOrg }}</option>
                @endforeach
            </datalist>
            </div>
          </div>

          <div class="mb-1 row">
            <label for="username" class="col-sm-4 col-form-label text-sm-end text-sm-end">Full Name</label>
            <div class="col-sm-8">
              <input required name="username" id="username" type="text" class="form-control form-control-sm" value="{{ $userDetails->name ?? '' }}">
            </div>
          </div>

          <div class="mb-1 row">
            <label for="login" class="col-sm-4 col-form-label text-sm-end text-sm-end">Username</label>
            <div class="col-sm-8">
              <input autocomplete="off" required name="login" id="login" type="text" class="form-control form-control-sm" value="{{ $userDetails->login ?? '' }}">
            </div>
          </div>

          <div class="mb-1 row">
            <label for="password" class="col-sm-4 col-form-label text-sm-end text-sm-end">Password</label>
            <div class="col-sm-8">
              <input autocomplete="off" name="password" id="password" type="password" class="form-control form-control-sm">
            </div>
          </div>

          <div class="mb-1 row">
            <label for="confirmPassword" class="col-sm-4 col-form-label text-sm-end text-sm-end">Confirm Password</label>
            <div class="col-sm-8">
              <input name="confirmPassword" id="confirmPassword" type="password" class="form-control form-control-sm">
            </div>
          </div>

          <div class="mb-1 row">
            <label for="email" class="col-sm-4 col-form-label text-sm-end text-sm-end">Email Address</label>
            <div class="col-sm-8">
              <input required name="email" id="email" type="email" class="form-control form-control-sm" value="{{ $userDetails->email ?? '' }}" autocomplete="off">
            </div>
            <div class="col-sm-8 offset-sm-4">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="shouldEmailCredentails" id="shouldEmailCredentails">
                <label class="form-check-label" for="shouldEmailCredentails">
                  Email ID and Password
                </label>
              </div>
            </div>
          </div>

          <div class="mb-1 row internalAdminContainer {{ $userDetails ? ($userDetails->role !== App\Models\User::ROLE_EXTERNAL_ADMIN ? 'd-none' : '') : 'd-none' }}">
            <label for="internalUserId" class="col-sm-4 col-form-label text-sm-end">Internal Admin</label>
            <div class="col-sm-8">
              <select class="form-select form-select-sm" name="internalUserId" id="internalUserId">
                <option value="" selected>Select a User</option>
                @foreach($internalUsers as $internalUser)
                  <option value="{{ $internalUser->id }}" {{ $userDetails ? ($userDetails->internal_admin_id === $internalUser->id ? 'selected' : '') : '' }}>{{ $internalUser->first_name }} {{ $internalUser->last_name }} - {{ $internalUser->login }}</option>
                @endforeach
              </select>
            </div>
          </div>

          <div class="mb-1 row text-center mt-4">
            <div class="form-check col-sm-12">

              <input type="radio" class="btn-check role-radio" name="role" id="role1" value="{{ App\Models\User::ROLE_ASSESSOR }}" autocomplete="off" {{ $userDetails ? ($userDetails->role === App\Models\User::ROLE_ASSESSOR ? 'checked' : '') : 'checked' }}>
              <label class="btn btn-sm btn-outline-primary" for="role1">{{ App\Models\User::getRolesDescriptions(App\Models\User::ROLE_ASSESSOR) }}</label>

              <input type="radio" class="btn-check role-radio" name="role" id="role2" value="{{ App\Models\User::ROLE_EXTERNAL_ADMIN }}" autocomplete="off" {{ $userDetails ? ($userDetails->role === App\Models\User::ROLE_EXTERNAL_ADMIN ? 'checked' : '') : '' }}>
              <label class="btn btn-sm btn-outline-primary" for="role2">{{ App\Models\User::getRolesDescriptions(App\Models\User::ROLE_EXTERNAL_ADMIN) }}</label>

              <input type="radio" class="btn-check role-radio" name="role" id="role3" value="{{ App\Models\User::ROLE_ADMIN }}" autocomplete="off" {{ $userDetails ? ($userDetails->role === App\Models\User::ROLE_ADMIN ? 'checked' : '') : '' }}>
              <label class="btn btn-sm btn-outline-primary" for="role3">{{ App\Models\User::getRolesDescriptions(App\Models\User::ROLE_ADMIN) }}</label>
    
            </div>
          </div>

          <div class="mt-4 row">
            <div class="col text-center">
              <div class="d-grid gap-2 d-lg-block">
                <button type="submit" id="saveUser" class="btn btn-primary btn-lg">Save</button>
                <button type="button" id="cancel" class="btn btn-primary btn-lg">Cancel</button>
              </div>
            </div>
          </div>

        </form>
      </div>
    </div>
  </div>
@stop

@section('footer-scripts')
  <script type="text/javascript">
    $(document).ready(function() {
      var confirmPasswordTimer
      var confirmPasswordTimerTimeout = 2000

      $('#userForm').on('submit', function() {
        $('#global-loading').removeClass('d-none').addClass('d-block')
        var shouldSubmit = true

        @if(!$userDetails)
        if ($('#password').val().length < 5 || ($('#password').val() !== '' && $('#confirmPassword').val() !== $('#password').val())) {
          shouldSubmit = false
          $('#confirmPassword').addClass('is-invalid')
          $('#password').addClass('is-invalid')
        }
        @endif
        
        if (shouldSubmit) {
          return true
        } else {
          $('#global-loading').addClass('d-none').removeClass('d-block')
          return false
        }
      })

      $('#cancel').on('click', function() {
        window.location.replace('/dashboard')
      })

      $('#role1, #role2, #role3').on('click', function() {
        if ($('#role2').is(':checked')) {
          $('.internalAdminContainer').removeClass('d-none')
        } else {
          $('.internalAdminContainer').addClass('d-none')
        }
      })

      $('#login').on('focus', function() {
        if (!$('#login').val()) {
          var username = $('#username').val().split(' ')
          if ($('#username').val()) {
            $('#login').val(username[0].charAt(0).toLowerCase() + username[1].toLowerCase() + Math.floor(Math.random() * 100))
          }
        }
      })

      $('#password').on('keyup', function() {
        $('#password').removeClass('is-invalid')
        if ($('#confirmPassword').val() === $('#password').val()) {
          $('#confirmPassword').removeClass('is-invalid')
        }
      })

      $('#confirmPassword').on('keyup', function() {
        if (confirmPasswordTimer) {
          clearTimeout(confirmPasswordTimer)
        }

        confirmPasswordTimer = setTimeout(function() {
          if ($('#confirmPassword').val() === $('#password').val()) {
            $('#confirmPassword').removeClass('is-invalid')
          } else {
            $('#confirmPassword').addClass('is-invalid')
          }
        }, confirmPasswordTimerTimeout);

        if ($('#confirmPassword').val() === $('#password').val()) {
          $('#confirmPassword').removeClass('is-invalid')
        }
      })
    })
  </script>
@endsection