{{---- resources/views/admin/roles/_form.blade.php ----}}
@csrf

<div class="card-body">
  <div class="mb-3">
    <label for="name" class="form-label">Nama Role <span class="text-danger">*</span></label>
    <input type="text" autocomplete="off" class="form-control @error('name') is-invalid @enderror" 
           id="name" name="name" 
           value="{{ old('name', $role->name ?? null) }}" required autofocus>
    @error('name')
      <div class="invalid-feedback">{{ $message }}</div>
    @enderror
    <small class="form-text text-muted">Contoh: Admin, Guru, Siswa</small>
  </div>
</div>

<div class="card-footer text-end">
  <a href="{{ route('admin.roles.index') }}" class="btn btn-secondary btn-round">
    <i class="fa fa-arrow-left"></i> Kembali
  </a>
  <button type="submit" class="btn btn-primary btn-round" id="role-save-btn">
    <i class="fa fa-check"></i> Simpan Data
  </button>
</div>

@push('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const form = document.currentScript ? document.currentScript.closest('form') : null;
    const saveBtn = document.getElementById('role-save-btn');

    let parentForm = saveBtn ? saveBtn.closest('form') : null;
    if (!parentForm) {
      parentForm = document.querySelector('form[action*="roles"]') || null;
    }

    if (parentForm) {
      parentForm.addEventListener('submit', function(e){
        const nameInput = parentForm.querySelector('#name');
        if (nameInput) {
          nameInput.value = nameInput.value.trim();
          if (nameInput.value.length === 0) {
            e.preventDefault();
            nameInput.classList.add('is-invalid');
            if (!nameInput.nextElementSibling || !nameInput.nextElementSibling.classList.contains('invalid-feedback')) {
              const div = document.createElement('div');
              div.className = 'invalid-feedback';
              div.innerText = 'Nama role tidak boleh kosong.';
              nameInput.parentNode.appendChild(div);
            }
            nameInput.focus();
            return false;
          }
        }
        if (saveBtn) {
          saveBtn.disabled = true;
          saveBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Menyimpan...';
        }
      });
    }
  });
</script>
@endpush