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

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

    <div class="pagetitle">
      <h1>Tambah Akun Assessor</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
          <li class="breadcrumb-item">Akun Assessor</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 #3b82f6;
              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: #3b82f6;
              box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
              background-color: #ffffff;
            }
            .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 Assessor</h5>

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

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

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

                <!-- 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 assessor?
                      </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