@extends('layouts/blankLayout')

@section('title', 'Edit Biodata - Pages')

@section('page-style')
<!-- Page -->
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/page-auth.css')}}">
@endsection

@section('content')
<div class="container-xxl">
  <div class="authentication-wrapper authentication-basic container-p-y">
    <div class="authentication-inner">

      <!-- Register Card -->
      <div class="card">
        <div class="card-body">
          <!-- Logo -->
          <div class="app-brand justify-content-center">
            <a href="{{url('/')}}" class="app-brand-link gap-2">
              <span class="app-brand-logo demo">
                <img src="{{ asset('assets/img/logo/seiza.png') }}" alt="Logo" width="100">
              </span>
            </a>
          </div>
          <!-- /Logo -->
          <h4 class="mb-2">Form Registration</h4>
          <p class="mb-4">Please let us know you more!</p>

          <form id="formAuthentication" class="mb-3" action="{{url('/api/student/biodata/update')}}" method="POST"
            onsubmit="return validateForm()">
            @csrf
            <div class="mb-3">
              <label for="nik" class="form-label">NIK</label>
              <input type="text" class="form-control" id="nik" name="nik" placeholder="Enter your NIK"
                value="{{$user->biodata->nik}}" autofocus>
              <div class="invalid-feedback" id="nikError">NIK must be 16 digits.</div>
            </div>
            <div class="mb-3">
              <label for="tgl_lahir" class="form-label">TGL Lahir</label>
              <input type="date" class="form-control" id="tgl_lahir" name="tgl_lahir" placeholder=""
                value="{{$user->biodata->tgl_lahir}}" min="2005-01-01" max="2016-12-31" autofocus>
              <div class="invalid-feedback" id="dateError">Usia tidak sesuai</div>
            </div>
            <div class="mb-3">
              <label for="alamat" class="form-label">Alamat</label>
              <input type="text" class="form-control" id="alamat" name="alamat" placeholder="Enter your address"
                value="{{$user->biodata->alamat}}" autofocus>
            </div>
            <div class="mb-3 col-md-6">
              <label class="form-label" for="jenkel">Jenis Kelamin</label>
              <select id="jenkel" class="select2 form-select" name="jenkel">
                <option value="{{$user->biodata->jenkel}}" disabled selected>{{$user->biodata->jenkel}} (Select)
                </option>
                <option value="Laki-Laki">Laki-Laki</option>
                <option value="Perempuan">Perempuan</option>
              </select>
            </div>
            <div class="mb-3 col-md-6">
              <label class="form-label" for="religion">Agama</label>
              <select id="religion" class="select2 form-select" name="agama">
                <option value="{{$user->biodata->agama}}" disabled selected>{{$user->biodata->agama}} (Select)</option>
                <option value="Islam">Islam</option>
                <option value="Kristen">Kristen</option>
                <option value="Hindu">Hindu</option>
                <option value="Buddha">Buddha</option>
              </select>
            </div>
            <div class="mb-3 col-md-6">
              <label class="form-label" for="level">Jenjang</label>
              <select id="level" class="select2 form-select" name="jenjang">
                <option value="{{$user->biodata->jenjang}}" disabled selected>{{$user->biodata->jenjang}} (Select)
                </option>
                <option value="SD">SD</option>
                <option value="SMP">SMP</option>
                <option value="SMA">SMA</option>
              </select>
            </div>
            <div class="mb-3">
              <label for="nama_ortu" class="form-label">Nama Ortu</label>
              <input type="text" class="form-control" id="nama_ortu" name="nama_ortu"
                placeholder="Enter your parent name" value="{{$user->biodata->nama_ortu}}" autofocus>
            </div>
            <div class="mb-3">
              <label for="parent_phone" class="form-label">Telepon Ortu</label>
              <input type="text" class="form-control" id="parent_phone" name="no_telp"
                placeholder="Enter your parent phone number" value="{{$user->biodata->no_telp}}" autofocus>
              <div class="invalid-feedback" id="phoneError">Phone number must be between 12 or 13 digits.</div>
            </div>
            <div class="mb-3">
              <label for="parent_job" class="form-label">Pekerjaan Ortu</label>
              <input type="text" class="form-control" id="parent_job" name="kerja_ortu"
                placeholder="Enter your parent job" value="{{$user->biodata->kerja_ortu}}" autofocus>
            </div>

            <div>
              @if($errors->any())
          <div class="alert alert-danger" role="alert">
          {{$errors->first()}}
          </div>
        @endif
            </div>

            <button class="btn btn-primary d-grid w-100" type="submit">
              Submit
            </button>
          </form>

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

<script>
  function validateForm() {
    let valid = true;

    const nik = document.getElementById('nik').value;
    const phone = document.getElementById('parent_phone').value;
    const tglLahir = document.getElementById('tgl_lahir').value;
    const nikError = document.getElementById('nikError');
    const phoneError = document.getElementById('phoneError');
    const dateError = document.getElementById('dateError');

    // Check if NIK is a number and has 16 digits
    if (isNaN(nik) || nik.length !== 16) {
      nikError.style.display = 'block';
      valid = false;
    } else {
      nikError.style.display = 'none';
    }

    // Check if phone number is a number and has 12 to 13 digits
    if (isNaN(phone) || phone.length < 12 || phone.length > 13) {
      phoneError.style.display = 'block';
      valid = false;
    } else {
      phoneError.style.display = 'none';
    }

    // Check if birth date is between 2005 and 2016
    const minDate = new Date('2005-01-01');
    const maxDate = new Date('2016-12-31');
    const birthDate = new Date(tglLahir);
    if (birthDate < minDate || birthDate > maxDate) {
      dateError.textContent = 'Usia tidak sesuai';
      dateError.style.display = 'block';
      valid = false;
    } else {
      dateError.style.display = 'none';
    }

    // Check if all fields are filled
    const formFields = document.querySelectorAll('#formAuthentication input, #formAuthentication select');
    formFields.forEach(field => {
      if (field.value === '') {
        field.classList.add('is-invalid');
        valid = false;
      } else {
        field.classList.remove('is-invalid');
      }
    });

    if (!valid) {
      alert('Please fill out all fields and ensure all inputs are valid.');
    }

    return valid;
  }
</script>

@endsection