@extends('server-side.layouts.server-app')
@section('title', 'Tambah Data Juri | Skripsi Rindi')
@section('main-content')
<main id="main" class="main">
    <div class="pagetitle">
      <h1>Form Tambah Juri</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{ url('dashboard') }}">Dashboard</a></li>
          <li class="breadcrumb-item">Juri</li>
          <li class="breadcrumb-item active">Tambah Juri</li>
        </ol>
      </nav>
    </div>
    <!-- End Page Title -->
    <section class="section">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Lengkapi data di bawah ini!</h5>
                        <!-- Vertical Form -->
                        <form class="row g-3" action="{{ route('guru.store') }}" enctype="multipart/form-data" method="post" autocomplete="off">
                          @csrf
                        <div class="col-6">
                            <label for="inputUsername" class="form-label">*Username</label>
                            <input type="text" class="form-control" id="inputUsername" name="username" value="{{old('username')}}"/>

                            @error('username')
                              <strong class="fw-bold d-block text-danger mt-2">
                                <small>&nbsp;* {{ $message }}</small>
                              </strong>
                            @enderror
                        </div>

                        <div class="col-6" hidden>
                            <label for="inputEmail" class="form-label">*Email</label>
                            <input type="text" class="form-control" id="inputEmail" name="email"/>

                            @error('nis')
                              <strong class="fw-bold d-block text-danger mt-2">
                                <small>&nbsp;* {{ $message }}</small>
                              </strong>
                            @enderror
                        </div>

                        <div class="col-6" hidden>
                            <label for="inputEmail" class="form-label">*Password</label>
                            <input type="password" class="form-control" id="inputEmail" name="password"/>

                            @error('nis')
                              <strong class="fw-bold d-block text-danger mt-2">
                                <small>&nbsp;* {{ $message }}</small>
                              </strong>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label for="inputNip" class="form-label">*NIP</label>
                            <input type="text" class="form-control" id="inputNip" name="nip"  oninput="this.value=this.value.replace(/[^0-9]/, '')" value="{{old('nip')}}"/>

                            @error('nip')
                                <strong class="fw-bold d-block text-danger mt-2">
                                <small>&nbsp;* {{ $message }}</small>
                                </strong>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label for="nama" class="form-label">*Nama</label>
                            <input type="text" class="form-control" id="nama" name="nama" oninput="this.value=this.value.replace(/[^a-zA-Z\s]/g, '')" value="{{old('nama')}}"/>

                            @error('nama')
                                <strong class="fw-bold d-block text-danger mt-2">
                                <small>&nbsp;* {{ $message }}</small>
                                </strong>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label for="inputTempatlahir" class="form-label">*Tempat Lahir</label>
                            <input type="text" class="form-control" id="inputTempatlahir" name="tempat_lahir" oninput="this.value=this.value.replace(/[^a-zA-Z\s]/g, '')" value="{{old('tempat_lahir')}}"/>

                            @error('tempat_lahir')
                                <strong class="fw-bold d-block text-danger mt-2">
                                <small>&nbsp;* {{ $message }}</small>
                                </strong>
                            @enderror
                        </div>




                        <div class="col-6">
                            <label for="inputNohp" class="form-label">*Nomor Handphone</label>
                            <input type="text" class="form-control" id="inputNohp" name="no_hp" oninput="this.value=this.value.replace(/[^0-9]/, '')" value="{{old('no_hp')}}"/>

                            @error('no_hp')
                                <strong class="fw-bold d-block text-danger mt-2">
                                <small>&nbsp;* {{ $message }}</small>
                                </strong>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label for="inputAlamat" class="form-label">*alamat</label>
                            <input type="text" class="form-control" id="inputAlamat" name="alamat" value="{{old('alamat')}}"/>

                            @error('alamat')
                                <strong class="fw-bold d-block text-danger mt-2">
                                <small>&nbsp;* {{ $message }}</small>
                                </strong>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label class="form-label">*Jenis Kelamin</label>
                            <select name="jenis_kelamin" class="form-select">
                                <option value="">~ Pilih Jenis Kelamin ~</option>
                                <option value="Pria">Pria</option>
                                <option value="Pria">Wanita</option>
                            </select>
                            @error('jenis_kelamin')
                                <strong class="fw-bold d-block text-danger mt-2">
                                <small>&nbsp;* {{ $message }}</small>
                                </strong>
                            @enderror
                        </div>

                        <div class="col-6">
                            <label for="ktgBarang" class="form-label">*Jurusan</label>
                            <select name="jurusan_id" id="id_kategori" class="form-select">
                                <option value="" id="ktgtest">~ Pilih Jurusan ~</option>
                                @forelse ($jurusan as $data)
                                <option value="{{ $data->id_jurusan }}">{{ $data->nama_jurusan}}</option>
                                @empty
                                <option value="">~ belum ada data Jurusan ~</option>
                                <script>
                                    document.getElementById('ktgtest').remove();
                                </script>
                                @endforelse
                            </select>
                            @error('jurusan_id')
                                <strong class="fw-bold d-block text-danger mt-2">
                                <small>&nbsp;* {{ $message }}</small>
                                </strong>
                            @enderror
                        </div>

                          <div class="col-6">
                            <label for="inputTTL" class="form-label">*Tanggal Lahir</label>
                            <input type="date" class="form-control" id="inputTTL" name="tanggal_lahir" value="{{old('tanggal_lahir')}}"/>
                            @error('tanggal_lahir')
                                <strong class="fw-bold d-block text-danger mt-2">
                                <small>&nbsp;* {{ $message }}</small>
                                </strong>
                            @enderror
                        </div>


                        <div class="col-6">
                            <label for="foto" class="form-label">*Foto</label>
                            <input type="file" class="form-control" id="foto" name="foto" value="{{old('foto')}}"/>

                            @error('foto')
                                <strong class="fw-bold d-block text-danger mt-2">
                                <small>&nbsp;* {{ $message }}</small>
                                </strong>
                            @enderror
                        </div>

                        <div class="col-6">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="radio" id="inputRoleJuri" name="status_juri" value="Juri 1">
                                <label class="form-check-label" for="inputRoleJuri">
                                    Tambahkan sebagai Juri 1
                                </label>
                            </div>

                            @error('status_juri')
                                <strong class="fw-bold d-block text-danger mt-2">
                                <small>&nbsp;* {{ $message }}</small>
                                </strong>
                            @enderror
                        </div>

                        <div class="col-6">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="radio" id="inputRoleAdmin" name="status_juri" value="Juri 2">
                                <label class="form-check-label" for="inputRoleAdmin">
                                    Tambahkan sebagai Juri 2
                                </label>
                            </div>

                            @error('status_juri')
                                <strong class="fw-bold d-block text-danger mt-2">
                                <small>&nbsp;* {{ $message }}</small>
                                </strong>
                            @enderror
                        </div>


                        <div>
                            <button type="submit" class="btn btn-primary">
                                Submit
                            </button>
                            <button type="reset" class="btn btn-secondary">
                                Reset
                            </button>
                        </div>
                        </form>

                        <!-- Vertical Form -->
                    </div>
                </div>
            </div>
        </div>
    </section>
  </main>
@endsection

@push('scripts')

<script>
    const checkboxJuri = document.getElementById('inputRoleJuri');
    const checkboxAdmin = document.getElementById('inputRoleAdmin');

    checkboxguru.addEventListener('change', function() {
        if (this.checked) {
            checkboxAdmin.checked = false;
        }
    });

    checkboxAdmin.addEventListener('change', function() {
        if (this.checked) {
            checkboxguru.checked = false;
        }
    });
</script>
@endpush