@extends('layouts.app')
@section('content')

    <!-- MAIN SECTION -->
    <article class="container mt-28">
      <h1
        class="text-xneutral-400 font-montserrat text-xl sm:text-2xl font-semibold"
      >
        Pendaftaran
      </h1>
      <p
        class="text-xneutral-200 font-montserrat text-sm sm:text-base font-semibold"
      >
        Bergabung bersama kami untuk Masa Depan yang gemilang
      </p>
       @if(session('success'))
          <div id="alert" style="background-color: #3b82f6" class="flex items-center text-white text-sm font-bold px-4 py-3" role="alert" >
            <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
              <path d="M10 15l-5-5h10l-5 5z" />
            </svg>
            <p>{{ session('success') }}</p>
          </div>
        <script>
          setTimeout(function(){
            var alert = document.getElementById('alert');
            if (alert){
              alert.style.opacity = '0';
              alert.style.transition = 'opacity 0.5s ease';
              setTimeout(function(){
                alert.style.display = 'none';
              }, 500)
            }
          }, 3000)
         </script>
        @endif

      <form
        action="{{ route('pendaftaran.store') }}"
        method="post"
        enctype="multipart/form-data"
        class="space-y-6 mt-[70px]"
      >
        <div
          class="grid grid-cols-1 sm:grid-cols-2 gap-12 md:gap-[124px] font-montserrat"
        >
          <div class="space-y-10">
            <div class="flex flex-col gap-3">
              <label
                for="nama-lengkap"
                class="font-semibold text-sm text-xneutral-400"
                >Nama Lengkap
                <span class="text-secondary-error">*</span>
              </label>
              <input
                type="text"
                id="nama-lengkap"
                name="Nama_Lengkap"
                placeholder="Masukan Nama Lengkap Anda"
                required
                class="border placeholder:font-semibold placeholder:text-xneutral-100 border-xneutral-100 py-[18px] px-6 rounded-lg"
              />
            </div>

            <div class="flex flex-col gap-3">
              <label
                for="NIK"
                class="font-semibold text-sm text-xneutral-400"
                >NIK
                <span class="text-secondary-error">*</span>
              </label>
              <input
                type="text"
                id="NIK"
                name="NIK"
                placeholder="Masukan NIK Anda"
                required
                class="border placeholder:font-semibold placeholder:text-xneutral-100 border-xneutral-100 py-[18px] px-6 rounded-lg"
              />
            </div>

            <div class="flex flex-col gap-3">
              <label
                for="alamat"
                class="font-semibold text-sm text-xneutral-400"
                >Alamat
                <span class="text-secondary-error">*</span>
              </label>
              <input
                type="text"
                id="alamat"
                name="Alamat"
                placeholder="Masukan Alamat Anda"
                required
                class="border placeholder:font-semibold placeholder:text-xneutral-100 border-xneutral-100 py-[18px] px-6 rounded-lg"
              />
            </div>

            <div class="flex flex-col gap-3">
              <label for="email" class="font-semibold text-sm text-xneutral-400"
                >Email
                <span class="text-secondary-error">*</span>
              </label>
              <input
                type="email"
                id="email"
                name="Email"
                placeholder="Masukan Email Anda"
                required
                class="border placeholder:font-semibold placeholder:text-xneutral-100 border-xneutral-100 py-[18px] px-6 rounded-lg"
              />
            </div>

            <div class="flex flex-col gap-3">
              <label for="jalur" class="font-semibold text-sm text-xneutral-400"
                >Jalur
                <span class="text-secondary-error">*</span>
              </label>
              <div class="flex items-center">
                <select
                  id="jalur"
                  name="Jalur"
                  required
                  class="border w-full peer placeholder:font-semibold appearance-none placeholder:text-xneutral-100 border-xneutral-100 py-[18px] px-6 rounded-lg"
                >
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="KIP-K"
                  >
                    KIP-K
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="Reguler"
                  >
                    Reguler
                  </option>
                </select>
                <i
                  class="bi bi-chevron-down pointer-events-none -ml-8 peer-focus:rotate-180 transition-all"
                ></i>
              </div>
            </div>
{{-- ------------------------------ --}}

            <div class="flex flex-col gap-3">
              <label for="sertifikat_prestasi">Sertifikat Prestasi</label>
              <input type="file" name="sertifikat_prestasi" id="sertifikat_prestasi"/>
            </div>

            <div class="flex flex-col gap-3">
              <label
                for="asal-sekolah"
                class="font-semibold text-sm text-xneutral-400"
                >No Pendaftaran KIP-K
                <span class="text-secondary-error">*</span>
              </label>
              <input
                type="text"
                id="pendaftarankipk"
                name="pendaftarankipk"
                class="border placeholder:font-semibold placeholder:text-xneutral-100 border-xneutral-100 py-[18px] px-6 rounded-lg"
              />
            </div>

            <div class="flex flex-col gap-3">
              <label for="foto" class="font-semibold text-sm text-xneutral-400"
                >Foto
                <span class="text-secondary-error">*</span>
              </label>
              <div class="flex gap-3 items-center w-full">
                <input
                  type="file"
                  id="foto"
                  name="image"
                  accept="Image/*"
                  required
                  placeholder="Masukkan foto Anda"
                  class="border w-full file:hidden placeholder:font-semibold placeholder:text-xneutral-100 border-xneutral-100 py-[18px] px-6 rounded-lg"
                />
                <button
                  type="button"
                  class="border text-nowrap bg-primary-200 text-xneutral-0 font-semibold py-[18px] px-6 rounded-lg"
                >
                  Upload Foto
                </button>
              </div>
            </div>
          </div>

          <div class="space-y-10">
            <div class="flex flex-col gap-3">
              <label
                for="nama-panggilan"
                class="font-semibold text-sm text-xneutral-400"
                >Nama Panggilan
                <span class="text-secondary-error">*</span>
              </label>
              <input
                type="text"
                id="nama-panggilan"
                name="Nama_Panggilan"
                placeholder="Masukan Nama Panggilan Anda"
                required
                class="border placeholder:font-semibold placeholder:text-xneutral-100 border-xneutral-100 py-[18px] px-6 rounded-lg"
              />
            </div>

            <div class="flex flex-col gap-3">
              <label
                for="asal-sekolah"
                class="font-semibold text-sm text-xneutral-400"
                >Asal Sekolah
                <span class="text-secondary-error">*</span>
              </label>
              <input
                type="text"
                id="asal-sekolah"
                name="Asal_Sekolah"
                placeholder="Masukan Asal Sekolah Anda"
                required
                class="border placeholder:font-semibold placeholder:text-xneutral-100 border-xneutral-100 py-[18px] px-6 rounded-lg"
              />
            </div>

            <div class="flex flex-col gap-3">
              <label
                for="nomor-hp"
                class="font-semibold text-sm text-xneutral-400"
                >Nomor HP
                <span class="text-secondary-error">*</span>
              </label>
              <input
                type="tel"
                id="nomor-hp"
                name="Nomor_Hp"
                placeholder="Masukan Nomor HP Anda"
                required
                class="border placeholder:font-semibold placeholder:text-xneutral-100 border-xneutral-100 py-[18px] px-6 rounded-lg"
              />
            </div>

            <div class="flex flex-col gap-3">
              <label
                for="program-studi-1"
                class="font-semibold text-sm text-xneutral-400"
                >Program Studi 1
                <span class="text-secondary-error">*</span>
              </label>
              <div class="flex items-center">
                <select
                  id="program-studi-1"
                  name="programStudi_1"
                  required
                  class="border peer appearance-none w-full placeholder:font-semibold placeholder:text-xneutral-100 border-xneutral-100 py-[18px] px-6 rounded-lg"
                >
                  <option value="">Pilih Program Studi 1</option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="Informatika"
                  >
                    S1 Informatika
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="Informatika"
                  >
                    S1 Informatika
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="pti"
                  >
                    S1 Pendidikan Teknologi Informasi
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="Akuntansi"
                  >
                    S1 Akuntansi
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="Manajemen"
                  >
                    S1 Manajemen
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="BisnisDigital"
                  >
                    S1 Bisnis Digital
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="Arsitektur"
                  >
                    S1 Arsitektur
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="Proteksi Tanaman"
                  >
                    S1 Proteksi Tanaman
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="Agribisnis"
                  >
                    S1 Agribisnis
                  </option>
                </select>
                <i
                  class="bi bi-chevron-down pointer-events-none -ml-8 peer-focus:rotate-180 transition-all"
                ></i>
              </div>
            </div>

            <div class="flex flex-col gap-3">
              <label
                for="program-studi-2"
                class="font-semibold text-sm text-xneutral-400"
                >Program Studi 2
                <span class="text-secondary-error">*</span>
              </label>
              <div class="flex items-center">
                <select
                  id="program-studi-2"
                  name="programStudi_2"
                  required
                  class="border peer appearance-none w-full placeholder:font-semibold placeholder:text-xneutral-100 border-xneutral-100 py-[18px] px-6 rounded-lg"
                >
                  <option value="">Pilih Program Studi 2</option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="Informatika"
                  >
                    S1 Informatika
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="Informatika"
                  >
                    S1 Informatika
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="pti"
                  >
                    S1 Pendidikan Teknologi Informasi
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="Akuntansi"
                  >
                    S1 Akuntansi
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="Manajemen"
                  >
                    S1 Manajemen
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="BisnisDigital"
                  >
                    S1 Bisnis Digital
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="Arsitektur"
                  >
                    S1 Arsitektur
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="Proteksi Tanaman"
                  >
                    S1 Proteksi Tanaman
                  </option>
                  <option
                    class="font-montserrat text-xneutral-300"
                    value="Agribisnis"
                  >
                    S1 Agribisnis
                  </option>
                </select>
                <i
                  class="bi bi-chevron-down pointer-events-none -ml-8 peer-focus:rotate-180 transition-all"
                ></i>
              </div>
            </div>
          </div>
        </div>

        <div
          class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-12 md:gap-[124px] !mt-[60px]"
        >
          <a
            href="index.html"
            class="px-6 py-[14px] w-full text-center font-montserrat text-neutral-0 bg-white border text-lg font-semibold border-primary-200 text-primary-200 rounded-full"
          >
            Kembali Ke Homepage
          </a>
          <button
            type="submit"
            class="px-6 py-[14px] text-center w-full font-montserrat text-neutral-0 bg-primary-200 border text-lg font-semibold border-primary-200 text-xneutral-0 rounded-full"
          >
            Daftar
          </button>
        </div>
      </form>
    </article>
@endsection