@extends('layout.super_admin')
@section('content')

  <main id="main" class="main">

    <div class="pagetitle">
      <h1>Tambah Akun Admin</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
          <li class="breadcrumb-item">Akun Admin</li>
          <li class="breadcrumb-item active">Form Tambah</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->

    <section class="section">
      <div class="row justify-content-center">
        <div class="col-lg-8">

          <style>
            .premium-form-card {
              border: none;
              border-radius: 16px;
              box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
              border-top: 4px solid #6366f1;
              background: #ffffff;
            }
            .form-label-premium {
              font-weight: 600;
              font-size: 12px;
              color: #344054;
              margin-bottom: 6px;
              display: block;
              text-transform: uppercase;
              letter-spacing: 0.5px;
            }
            .form-control-premium {
              border: 1px solid #d0d5dd;
              border-radius: 10px;
              padding: 10px 16px;
              font-size: 14px;
              color: #1d2939;
              background-color: #ffffff;
              transition: border-color 0.2s, box-shadow 0.2s;
            }
            .form-control-premium:focus {
              outline: none;
              border-color: #6366f1;
              box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
              background-color: #ffffff;
            }
            .form-select-premium {
              border: 1px solid #d0d5dd;
              border-radius: 10px;
              padding: 10px 16px;
              font-size: 14px;
              color: #1d2939;
              background-color: #ffffff;
              transition: border-color 0.2s, box-shadow 0.2s;
            }
            .form-select-premium:focus {
              outline: none;
              border-color: #6366f1;
              box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
            }
            .btn-pill {
              border-radius: 50px;
              font-weight: 600;
              font-size: 13px;
              padding: 10px 28px;
              transition: all 0.2s;
            }
            .btn-pill:hover {
              transform: translateY(-1px);
            }
          </style>

          <div class="card premium-form-card">
            <div class="card-body p-5">
              <h5 class="card-title text-center mb-4 text-dark font-weight-bold">Form Tambah Akun Admin</h5>

              <form class="row g-4" action="{{ route('super.account-admin-add-data') }}" method="POST">
                @csrf
                
                <div class="col-md-6">
                  <label for="nama" class="form-label-premium">Nama Lengkap</label>
                  <input type="text" name="nama" class="form-control form-control-premium w-100" id="nama" required placeholder="Masukkan Nama Lengkap">
                  <div class="invalid-feedback">Mohon, Masukkan Nama Lengkap!</div>
                </div>

                <div class="col-md-6">
                  <label for="email" class="form-label-premium">Alamat Email</label>
                  <input type="email" name="email" class="form-control form-control-premium w-100" id="email" required placeholder="name@example.com">
                  <div class="invalid-feedback">Mohon, Masukkan Email!</div>
                </div>

                <div class="col-md-6">
                  <label for="username" class="form-label-premium">Username</label>
                  <input type="text" name="username" class="form-control form-control-premium w-100" id="username" required placeholder="Masukkan Username">
                  <div class="invalid-feedback">Tolong masukkan Username!</div>
                </div>

                <div class="col-md-6">
                  <label for="yourPassword" class="form-label-premium">Password</label>
                  <input type="password" name="password" class="form-control form-control-premium w-100" id="yourPassword" required placeholder="••••••••">
                  <div class="invalid-feedback">Tolong masukkan Password!</div>
                </div>

                <div class="col-md-12">
                  <label for="role" class="form-label-premium">Tipe Admin</label>
                  <select name="role" id="role" class="form-select form-select-premium w-100" required onchange="toggleAdminType()">
                      <option value="admin_prodi">Admin Program Studi (Prodi)</option>
                      <option value="admin_fakultas">Admin Fakultas</option>
                  </select>
                </div>

                <div class="col-md-12" id="fakultas_container" style="display: none;">
                  <label for="fakultas_id" class="form-label-premium">Fakultas</label>
                  <select name="fakultas_id" id="fakultas_id" class="form-select form-select-premium w-100">
                      <option value="">-- Pilih Fakultas --</option>
                      @foreach($fakultas as $fak)
                          <option value="{{ $fak->id }}">{{ $fak->nama_fakultas }}</option>
                      @endforeach
                  </select>
                  <div class="invalid-feedback">Mohon, Pilih Fakultas!</div>
                </div>

                <div class="col-md-12" id="jurusan_container">
                  <label for="jurusan_id" class="form-label-premium">Program Studi / Jurusan</label>
                  <select name="jurusan_id" id="jurusan_id" class="form-select form-select-premium w-100">
                      <option value="">-- Pilih Program Studi --</option>
                      @foreach($jurusan as $jur)
                          <option value="{{ $jur->id }}">{{ $jur->nama_jurusan }}</option>
                      @endforeach
                  </select>
                  <div class="invalid-feedback">Mohon, Masukkan Jurusan!</div>
                </div>

                <script>
                  function toggleAdminType() {
                      var role = document.getElementById('role').value;
                      var fakultasContainer = document.getElementById('fakultas_container');
                      var jurusanContainer = document.getElementById('jurusan_container');
                      var fakultasSelect = document.getElementById('fakultas_id');
                      var jurusanSelect = document.getElementById('jurusan_id');

                      if (role === 'admin_fakultas') {
                          fakultasContainer.style.display = 'block';
                          jurusanContainer.style.display = 'none';
                          fakultasSelect.required = true;
                          jurusanSelect.required = false;
                          jurusanSelect.value = '';
                      } else {
                          fakultasContainer.style.display = 'none';
                          jurusanContainer.style.display = 'block';
                          fakultasSelect.required = false;
                          jurusanSelect.required = true;
                          fakultasSelect.value = '';
                      }
                  }
                  document.addEventListener('DOMContentLoaded', function() {
                      toggleAdminType();
                  });
                </script>
                
                <!-- Modal -->
                <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                      <div class="modal-content border-0 shadow">
                      <div class="modal-header bg-primary text-white">
                          <h5 class="modal-title font-weight-bold" id="exampleModalLongTitle"><i class="bi bi-question-circle me-2"></i>Konfirmasi</h5>
                          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                      <div class="modal-body text-dark py-4">
                          Apakah Anda yakin ingin mengirim data ini untuk menambahkan akun admin?
                      </div>
                      <div class="modal-footer bg-light">
                          <button type="button" class="btn btn-secondary btn-pill" data-bs-dismiss="modal">Batal</button>
                          <button type="submit" class="btn btn-primary btn-pill">Ya, Simpan</button>
                      </div>
                      </div>
                  </div>
                </div>
                
                <div class="col-12 d-flex justify-content-end gap-2 mt-5">
                  <button type="button" class="btn btn-primary btn-pill shadow-sm" data-bs-toggle="modal" data-bs-target="#exampleModalLong">Submit</button>
                  <button type="reset" class="btn btn-outline-secondary btn-pill">Reset</button>
                </div>
              </form><!-- Vertical Form -->

            </div>
          </div>

        </div>
      </div>
    </section>

  </main><!-- End #main -->
@endsection