MIF_E31212371/resources/views/content/student/edit.blade.php

<!-- resources/views/student/edit.blade.php -->

@extends('layouts/contentNavbarLayout')

@section('title', 'Edit Student')

@section('content')
<div class="card">
    <h5 class="card-header">Form Edit Student</h5>
    <div class="card-body">
        <form id="formAuthentication" action="{{ route('student.update', $siswa->id) }}" method="POST"
            enctype="multipart/form-data" onsubmit="return validateForm()">
            @csrf
            <div class="mb-3">
                <label for="nama" class="form-label">Nama</label>
                <input type="text" class="form-control" id="nama" name="nama" value="{{ $siswa->nama }}">
            </div>

            <div class="mb-3">
                <label for="nik" class="form-label">NIK</label>
                <input type="text" class="form-control" id="nik" name="nik" value="{{ $siswa->nik }}">
                <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" value="{{ $siswa->tgl_lahir }}"
                    min="2005-01-01" max="2016-12-31">
                <div class="invalid-feedback" id="dateError">Usia tidak sesuai</div>
            </div>
            <div class="mb-3">
                <label for="jenkel" class="form-label">Jenis Kelamin</label>
                <select id="jenkel" class="select2 form-select" name="jenkel">
                    <option value="{{$siswa->jenkel}}" disabled selected>{{$siswa->jenkel}}</option>
                    <option value="Laki-Laki">Laki-Laki</option>
                    <option value="Perempuan">Perempuan</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="agama" class="form-label">Agama</label>
                <select id="agama" class="select2 form-select" name="agama">
                    <option value="{{$siswa->agama}}" disabled selected>{{$siswa->agama}}</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">
                <label for="jenjang" class="form-label">Jenjang</label>
                <select id="jenjang" class="select2 form-select" name="jenjang">
                    <option value="{{$siswa->jenjang}}" disabled selected>{{$siswa->jenjang}}</option>
                    <option value="SD">SD</option>
                    <option value="SMP">SMP</option>
                    <option value="SMA">SMA</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="alamat" class="form-label">Alamat</label>
                <input type="text" class="form-control" id="alamat" name="alamat" value="{{ $siswa->alamat }}">
            </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" value="{{ $siswa->nama_ortu }}">
            </div>
            <div class="mb-3">
                <label for="kerja_ortu" class="form-label">Kerja Ortu</label>
                <input type="text" class="form-control" id="kerja_ortu" name="kerja_ortu"
                    value="{{ $siswa->kerja_ortu }}">
            </div>
            <div class=" mb-3">
                <label for="no_hp" class="form-label">No.Hp</label>
                <input type="text" class="form-control" id="parent_phone" name="no_telp" value="{{ $siswa->no_telp }}">
                <div class="invalid-feedback" id="phoneError">Phone number must be between 12 or 13 digits.</div>
            </div>
            <div class="mb-3">
                <label for="kelas" class="form-label">Kelas</label>
                <select id="level" class="select2 form-select" name="level">
                    <option value="{{$siswa->level}}" disabled selected>{{$siswa->level}}</option>
                    <option value="Pre-Kids">Pre-Kids</option>
                    <option value="Beginner">Beginner</option>
                    <option value="Intermediate">Intermediate</option>
                </select>
            </div>

            <button type="submit" class="btn btn-primary">Update</button>
        </form>
    </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