@extends('layouts.master')

@section('content')
  <div class="container">
    @include('layouts.page-header')
    @include('pages.auth.user.delete-modal')
    <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="/user/management" method="POST" id="userManagementForm">
          @csrf

          <div class="mb-1 row">
            <label for="userType" class="col-sm-4 col-form-label text-sm-end">User Type</label>
            <div class="col-sm-8">
              <select required class="form-select form-select-sm" name="userType" id="userType">
                <option value="{{ App\Models\User::ROLE_ASSESSOR }}" selected>{{ App\Models\User::getRolesDescriptions(App\Models\User::ROLE_ASSESSOR) }}</option>
                <option value="{{ App\Models\User::ROLE_ADMIN }}">{{ App\Models\User::getRolesDescriptions(App\Models\User::ROLE_ADMIN) }}</option>
                <option value="{{ App\Models\User::ROLE_EXTERNAL_ADMIN }}">{{ App\Models\User::getRolesDescriptions(App\Models\User::ROLE_EXTERNAL_ADMIN) }}</option>
              </select>
            </div>
          </div>

          <div class="mb-1 row">
            <label for="userId" class="col-sm-4 col-form-label text-sm-end">Username</label>
            <div class="col-sm-8">
              <select required class="form-select form-select-sm" name="userId" id="userId">
                <option value="" selected>Select a User</option>
                @foreach($userAccounts as $userAccount)
                  <option class="userType-{{ $userAccount->role }} {{ $userAccount->role !== App\Models\User::ROLE_ASSESSOR ? 'd-none' : '' }}" value="{{ $userAccount->id }}">{{ $userAccount->login }}</option>
                @endforeach
              </select>
            </div>
          </div>

          <div class="mb-1 row d-none remainingAssessmentsContainer">
            <label for="remainingAssessments" class="col-sm-4 col-form-label text-sm-end">Remaining Assessments</label>
            <div class="col-sm-8">
              <input name="remainingAssessments" id="remainingAssessments" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="mb-1 row">
            <label for="newPassword" class="col-sm-4 col-form-label text-sm-end">New Password</label>
            <div class="col-sm-8">
              <input name="newPassword" id="newPassword" 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">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="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="deleteUser" class="btn btn-primary btn-lg">Delete User</button>
              </div>
            </div>
          </div>

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

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

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

        if ($('#newPassword').val().length < 5 || ($('#newPassword').val() !== '' && $('#confirmPassword').val() !== $('#newPassword').val())) {
          shouldSubmit = false
          $('#confirmPassword').addClass('is-invalid')
          $('#newPassword').addClass('is-invalid')
        }

        if ($('#userId').val() === '') {
          shouldSubmit = false
          $('#userId').addClass('is-invalid')
        }

        if (shouldSubmit) {
          return true
        } else {
          $('#global-loading').addClass('d-none').removeClass('d-block')
          return false
        }
      })

      $('#deleteUser').on('click', function() {
        $('#userIdDelete').val($(this).val())
        $('#textUserId').html('Are you sure you want to delete ' + $('#userId option:selected').text())
        if ($('#userId').val() === '') {
          shouldSubmit = false
          $('#userId').addClass('is-invalid')
        } else {
          $('#deleteUserModal').modal('show')
        }
      })

      $('#userType').on('change', function() {
        var userType = $(this).val()
        $('#userId option').addClass('d-none')
        $('#userId option.userType-' + userType).removeClass('d-none')
        if (userType === '{{ App\Models\User::ROLE_EXTERNAL_ADMIN }}') {
          $('.remainingAssessmentsContainer').removeClass('d-none')
        } else {
          $('.remainingAssessmentsContainer').addClass('d-none')
        }
      })

      $('#userId').on('change', function() {
        if ($(this).val() !== '') {
          $(this).removeClass('is-invalid')
        }
      })

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

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

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

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