@extends('server-side.layouts.server-app')
@section('title', 'Edit Data Guru | Skripsi Rindi')
@section('main-content')

<style>
    input[readonly] {
        background-color: #f8f9fa;
        cursor: not-allowed;
    }
</style>

<main id="main" class="main">
    <div class="pagetitle">
      <h1>Form Edit Guru</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{ url('dashboard') }}">Dashboard</a></li>
          <li class="breadcrumb-item">Guru</li>
          <li class="breadcrumb-item active">Edit Guru</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.update', $guru->id) }}" enctype="multipart/form-data" method="post" autocomplete="off">
                          @csrf
                            @method('PUT')
                        <div class="col-6">
                            <label for="inputUsername" class="form-label">*Username</label>
                            <input type="text" class="form-control" id="inputUsername" name="username" value="{{ $guru->user->username ?? old('username') }}" readonly>

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

                        <div class="col-6">
                            <label for="inputEmail" class="form-label">*Email</label>
                            <input type="text" class="form-control" id="inputEmail" name="email" value="{{ $guru->user->email ?? old('email') }}" readonly/>

                            @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="inputEmail" class="form-label">*Password</label>
                            <input type="password" class="form-control" id="inputEmail" name="password" value="{{ $guru->user->password ?? old('password') }}"/>

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

                        <div class="col-12">
                            <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="{{ $guru->nip ?? 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="{{ $guru->nama ?? 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="{{ $guru->tempat_lahir ?? 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="{{ $guru->no_hp ?? 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" oninput="this.value=this.value.replace(/[^a-zA-Z\s]/g, '')" value="{{ $guru->alamat ?? 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 text-center">
                                <option value="" disabled>~ Pilih Jenis Kelamin ~</option>
                                <option value="Pria" {{ $guru->jenis_kelamin == 'Pria' ? 'selected' : '' }}>Pria</option>
                                <option value="Wanita" {{ $guru->jenis_kelamin == 'Wanita' ? 'selected' : '' }}>Wanita</option>
                            </select>
                        </div>


                        <div class="col-6">
                            <label for="ktgBarang" class="form-label">*Jurusan</label>
                            <select name="jurusan_id" id="id_kategori" class="form-select text-center" required>
                                <option value="" disabled>~ Pilih Jurusan ~</option>
                                @forelse ($jurusan as $data)
                                    <option value="{{ $data->id_jurusan }}" {{ $guru->jurusan_id == $data->id_jurusan ? 'selected' : '' }}>
                                        {{ $data->nama_jurusan }}
                                    </option>
                                @empty
                                    <option value="" disabled>~ Belum ada data Jurusan ~</option>
                                @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="{{ $guru->tanggal_lahir ?? 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="inputRoleJuri1" name="status_juri" value="Juri 1" {{ $guru->status_juri === 'Juri 1' ? 'checked' : '' }}>
                                <label class="form-check-label" for="inputRoleJuri1">
                                    Tambahkan sebagai Juri 1
                                </label>
                            </div>
                        </div>

                        <div class="col-6">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="radio" id="inputRoleJuri2" name="status_juri" value="Juri 2" {{ $guru->status_juri === 'Juri 2' ? 'checked' : '' }}>
                                <label class="form-check-label" for="inputRoleJuri2">
                                    Tambahkan sebagai Juri 2
                                </label>
                            </div>
                        </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');

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

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