@extends('admin.template.layout')

@section('css')
@endsection

@section('page-title')
@endsection

@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Content wrapper-->
        <div class="d-flex flex-column flex-column-fluid">

            <!--begin::Toolbar-->
            <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
                <!--begin::Toolbar container-->
                <div id="kt_app_toolbar_container" class="app-container container-fluid d-flex flex-stack">
                    <!--begin::Page title-->
                    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                        <!--begin::Title-->
                        <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                            Tambah Data Siswa</h1>
                        <!--end::Title-->
                        <!--begin::Breadcrumb-->
                        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted">
                                <a class="text-muted">Home / Siswa / Data Siswa / Tambah</a>
                            </li>
                            <!--begin::Item-->
                            <li class="breadcrumb-item text-muted"></li>
                            <!--end::Item-->
                        </ul>
                        <!--end::Breadcrumb-->
                    </div>
                    <!--end::Page title-->
                </div>
                <!--end::Toolbar container-->
            </div>
            <!--end::Toolbar-->
            <div class="app-main flex-column flex-row-fluid dashboard " id="detail">
                <!--begin::Content wrapper-->
                <div class="d-flex flex-column flex-column-fluid">

                    <div id="kt_app_content" class="app-content flex-column-fluid">
                        <!--begin::Content container-->
                        <div id="kt_app_content_container" class="app-container container-fluid">
                            <form method="POST" id="form" action="">
                                @csrf
                                <div class="row mt-3 mb-5 mb-xl-8">
                                    <div class="col-md-6 mt-4">
                                        <div class="card">
                                            <div class="card-header" style="background-color: #F87316">
                                                <div class="card-title text-white">Tanggal CV</div>
                                            </div>
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-sm-6 form-group row mb-4">
                                                        <label class="form-label required">Tanggal</label>
                                                        <div class="col">
                                                            <input class="form-control datePickr" name="tanggal_cv" value="" id="tanggal_cv-form" placeholder="Masukkan Tanggal" id="kt_datepicker_1"/>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6 form-group row mb-4">
                                                        <label class="form-label required">Tanggal (Jepang)</label>
                                                        <div class="col">
                                                            <input type="text" name="tanggal_cv_jepang" value="" id="tanggal_cv_jepang-form" class="form-control"
                                                                    placeholder="Masukkan Tanggal (Jepang)">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mt-4">
                                        <div class="card">
                                            <div class="card-header" style="background-color: #F87316">
                                                <div class="card-title text-white">Nomor</div>
                                            </div>
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-12 form-group row">
                                                        <label class="form-label">NIS <span class="text-danger">* digunakan sebagai login siswa</span></label>
                                                        <div class="mb-2">
                                                           <strong>NIS</strong> : {{ $nis }}
                                                        </div>
                                                        <div class="">
                                                            <strong>Username</strong> : {{ $nis }}
                                                        </div>
                                                        <div class="">
                                                            <strong>Password</strong> : {{ $nis }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12 mt-4">
                                        <div class="card">
                                            <div class="card-header" style="background-color: #F87316">
                                                <div class="card-title text-white">Data Siswa</div>
                                            </div>
                                            <div class="card-body row">
                                                <div class="col-md-6">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Nama Siswa</label>
                                                        <div class="col">
                                                            <input type="text" name="nama_siswa" id="nama_siswa-form" value="" class="form-control"
                                                            placeholder="Masukkan Nama Siswa">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Nama Siswa (Jepang)</label>
                                                        <div class="col">
                                                            <input type="text" name="nama_siswa_jepang" id="nama_siswa_jepang-form" value="" class="form-control"
                                                                    placeholder="Masukkan Nama Siswa (Jepang)">
                                                                </div>
                                                            </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Foto Pas <span class="text-muted fs-7">
                                                            JPEG, PNG, JPG, WEBP. Max 2MB
                                                        </span></label>
                                                        <div class="col">
                                                            <input type="file" class="form-control" value="" name="foto_pas"
                                                                    id="foto_pas-form" required />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Usia</label>
                                                        <div class="col">
                                                            <input type="text" name="usia" value="" id="usia-form" class="form-control"
                                                                    placeholder="Masukkan Usia">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Jenis Kelamin</label>
                                                        <label id="jenis_kelamin-form"></label>
                                                        <div class="d-flex gap-4">
                                                            <div class="form-check form-check-custom form-check-solid mb-2">
                                                                <input class="form-check-input" name="jenis_kelamin" type="radio" value="l"/>
                                                                <label class="form-check-label">
                                                                    Laki-laki
                                                                </label>
                                                            </div>
                                                            <div class="form-check form-check-custom form-check-solid mb-2">
                                                                <input class="form-check-input" name="jenis_kelamin" type="radio" value="p"/>
                                                                <label class="form-check-label">
                                                                    Perempuan
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Tanggal Lahir</label>
                                                        <div class="col">
                                                            <input type="text" name="tanggal_lahir" value="" id="tanggal_lahir-form" class="form-control datePickr"
                                                                    placeholder="Masukkan Tanggal Lahir">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Tanggal Lahir (Jepang)</label>
                                                        <div class="col">
                                                            <input type="text" name="tanggal_lahir_jepang" value="" id="tanggal_lahir_jepang-form" class="form-control"
                                                                    placeholder="Masukkan Tanggal Lahir (Jepang)">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Kontak Siswa</label>
                                                        <div class="col">
                                                            <input type="text" name="kontak" value="" id="kontak-form" class="form-control"
                                                                    placeholder="Masukkan Kontak">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Email Siswa</label>
                                                        <div class="col">
                                                            <input type="text" name="email" value="" id="email-form" class="form-control"
                                                                    placeholder="Masukkan Email">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Alamat</label>
                                                        <div class="col">
                                                            <textarea name="alamat" id="alamat-form" class="form-control" placeholder="Masukkan Alamat"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Tinggi Badan (CM)</label>
                                                        <div class="col input-group">
                                                            <input type="number" name="tinggi_badan" value="" id="tinggi_badan-form" class="form-control"
                                                                    placeholder="Masukkan Tinggi Badan">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Berat Badan (KG)</label>
                                                        <div class="col input-group">
                                                            <input type="number" name="berat_badan" value="" id="berat_badan-form" class="form-control"
                                                                    placeholder="Masukkan Berat Badan">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Golongan Darah</label>
                                                        <div class="col">
                                                            <input type="text" name="golongan_darah" value="" id="golongan_darah-form" class="form-control"
                                                                    placeholder="Masukkan Golongan Darah">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Status Pernikahan</label>
                                                        <label id="status_pernikahan-form"></label>
                                                        <div class="d-flex justify-content-between">
                                                            <div class="form-check form-check-custom form-check-solid mb-2">
                                                                <input class="form-check-input" name="status_pernikahan" type="radio" value="belum_menikah"/>
                                                                <label class="form-check-label" >
                                                                    Belum Menikah
                                                                </label>
                                                            </div>
                                                            <div class="form-check form-check-custom form-check-solid mb-2">
                                                                <input class="form-check-input" name="status_pernikahan" type="radio" value="sudah_menikah"/>
                                                                <label class="form-check-label" >
                                                                    Sudah Menikah
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Agama</label>
                                                        <div class="col">
                                                            <select name="agama" id="agama-form" class="form-select" data-control="select2" data-placeholder="Pilih Agama">
                                                                <option value=""></option>
                                                                <option value="islam">Islam</option>
                                                                <option value="kristen">Kristen</option>
                                                                <option value="katolik">Katolik</option>
                                                                <option value="hindu">Hindu</option>
                                                                <option value="budha">Budha</option>
                                                                <option value="konghucu">Konghucu</option>
                                                                <option value="lainnya">Lainnya</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Tangan Dominan</label>
                                                        <label id="tangan_dominan-form"></label>
                                                        <div class="d-flex gap-4">
                                                            <div class="form-check form-check-custom form-check-solid mb-2">
                                                                <input class="form-check-input" name="tangan_dominan" type="radio" value="kanan"/>
                                                                <label class="form-check-label" >
                                                                    Kanan
                                                                </label>
                                                            </div>
                                                            <div class="form-check form-check-custom form-check-solid mb-2">
                                                                <input class="form-check-input" name="tangan_dominan" type="radio" value="kiri"/>
                                                                <label class="form-check-label" >
                                                                    Kiri
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Ukuran Sepatu (CM)</label>
                                                        <div class="col input-group">
                                                            <input type="number" name="ukuran_sepatu" value="" class="form-control"
                                                                    placeholder="Masukkan Ukuran Sepatu" id="ukuran_sepatu-form">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Ukuran Celana (CM)</label>
                                                        <div class="col input-group">
                                                            <input type="number" name="ukuran_celana" value="" class="form-control"
                                                                    placeholder="Masukkan Ukuran Celana" id="ukuran_celana-form">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12 mt-4">
                                        <div class="card">
                                            <div class="card-header" style="background-color: #F87316">
                                                <div class="card-title text-white">Belajar Bahasa Jepang</div>
                                            </div>
                                            <div class="card-body row">
                                                <div class="col-md-3">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Berapa Bulan</label>
                                                        <div class="col">
                                                            <input type="number" name="belajar_bahasa_jepang" value="" id="belajar_bahasa_jepang-form" class="form-control"
                                                                    placeholder="Masukkan berapa bulan">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-9">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Buku yang Digunakan</label>
                                                        <div class="col">
                                                            <input type="text" name="buku_yang_digunakan" value="" id="buku_yang_digunakan-form" class="form-control"
                                                                    placeholder="Masukkan buku yang digunakan">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12 mt-4">
                                        <div class="card">
                                            <div class="card-header" style="background-color: #F87316">
                                                <div class="card-title text-white">Nomor Darurat</div>
                                            </div>
                                            <div class="card-body row">
                                                <div class="col-md-6">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Nomor Darurat</label>
                                                        <div class="col">
                                                            <input type="number" name="nomor_darurat" value="" id="nomor_darurat-form" class="form-control"
                                                                    placeholder="Masukkan nomor darurat">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group row mb-4">
                                                        <label class="form-label required">Hubungan Keluarga</label>
                                                        <div class="col">
                                                            <input class="form-control" type="text" id="nomor_darurat_milik-form" name="nomor_darurat_milik" placeholder="Contoh : Ayah (父), Ibu (母), Kakak (兄)">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card mt-1 mb-5 mb-xl-8">
                                    <div class="card-header" style="background-color: #F87316">
                                        <div class="card-title text-white">Riwayat Pendidikan</div>
                                    </div>
                                    <div class="card-body">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Tingkat</th>
                                                    <th>Nama Sekolah</th>
                                                    <th>Tahun Masuk</th>
                                                    <th>Tahun Masuk (Jepang)</th>
                                                    <th>Tahun Keluar</th>
                                                    <th>Tahun Keluar (Jepang)</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody id="riwayat_pendidikan_append">
                                                <tr>
                                                    <td>
                                                        <input type="text" name="tingkat_pendidikan[]" value="" class="form-control"
                                                                placeholder="Masukkan tingkat">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="nama_sekolah_pendidikan[]" value="" class="form-control"
                                                                placeholder="Masukkan nama sekolah">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="tahun_masuk_pendidikan[]" value="" class="form-control datePickrMonthYear"
                                                                placeholder="Masukkan tahun masuk">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="tahun_masuk_jepang_pendidikan[]" value="" class="form-control"
                                                                placeholder="Masukkan tahun masuk jepang">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="tahun_keluar_pendidikan[]" value="" class="form-control datePickrMonthYear"
                                                                placeholder="Masukkan tahun keluar">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="tahun_keluar_jepang_pendidikan[]" value="" class="form-control"
                                                                placeholder="Masukkan tahun keluar jepang">
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-icon btn-danger btn-sm" data-kt-action="field_remove">
                                                            <i class="ki-outline ki-trash fs-2 "></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <div>
                                            <button type="button" id="add_pendidikan" class="btn btn-icon btn-success btn-sm btn-remove" data-kt-action="field_add">
                                                <i class="ki-outline ki-plus fs-2"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="card mt-1 mb-5 mb-xl-8">
                                    <div class="card-header" style="background-color: #F87316">
                                        <div class="card-title text-white">Riwayat Pekerjaan</div>
                                    </div>
                                    <div class="card-body">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Nama Perusahaan</th>
                                                    <th>Sebagai</th>
                                                    <th>Tahun Masuk</th>
                                                    <th>Tahun Masuk (Jepang)</th>
                                                    <th>Tahun Keluar</th>
                                                    <th>Tahun Keluar (Jepang)</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody id="riwayat_pekerjaan_append">
                                                <tr>
                                                    <td>
                                                        <input type="text" name="nama_perusahaan[]" value="" class="form-control"
                                                                placeholder="Masukkan nama perusahaan">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="sebagai_perusahaan[]" value="" class="form-control"
                                                                placeholder="Masukkan sebagai">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="tahun_masuk_perusahaan[]" value="" class="form-control datePickrMonthYear"
                                                                placeholder="Masukkan tahun masuk">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="tahun_masuk_jepang_perusahaan[]" value="" class="form-control"
                                                                placeholder="Masukkan tahun masuk jepang">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="tahun_keluar_perusahaan[]" value="" class="form-control datePickrMonthYear"
                                                                placeholder="Masukkan tahun keluar">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="tahun_keluar_jepang_perusahaan[]" value="" class="form-control"
                                                                placeholder="Masukkan tahun keluar jepang">
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-icon btn-danger btn-sm btn-remove" data-kt-action="field_remove">
                                                            <i class="ki-outline ki-trash fs-2 "></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <div>
                                            <button type="button" id="add_pekerjaan" class="btn btn-icon btn-success btn-sm" data-kt-action="field_add">
                                                <i class="ki-outline ki-plus fs-2"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="card mt-1 mb-5 mb-xl-8">
                                    <div class="card-header" style="background-color: #F87316">
                                        <div class="card-title text-white">Susunan Keluarga</div>
                                    </div>
                                    <div class="card-body">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Nama</th>
                                                    <th>Hubungan</th>
                                                    <th>Usia</th>
                                                    <th>Profesi</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody id="susunan_keluarga_append">
                                                <tr>
                                                    <td>
                                                        <input type="text" name="nama_anggota_keluarga[]" value="" class="form-control"
                                                                placeholder="Masukkan nama">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="hubungan_anggota_keluarga[]" value="" class="form-control"
                                                                placeholder="Masukkan hubungan">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="usia_anggota_keluarga[]" value="" class="form-control"
                                                                placeholder="Masukkan usia">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="profesi_anggota_keluarga[]" value="" class="form-control"
                                                                placeholder="Masukkan profesi">
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-icon btn-danger btn-sm btn-remove" data-kt-action="field_remove">
                                                            <i class="ki-outline ki-trash fs-2 "></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <div>
                                            <button type="button" id="add_keluarga" class="btn btn-icon btn-success btn-sm" data-kt-action="field_add">
                                                <i class="ki-outline ki-plus fs-2"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="card mt-1 mb-5 mb-xl-8">
                                    <div class="card-header" style="background-color: #F87316">
                                        <div class="card-title text-white">Angket</div>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th></th>
                                                        <th style="max-width: 100px">質 問 ( PERTANYAAN )</th>
                                                        <th>回 答（ JAWABAN ）</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="susunan_keluarga_append">
                                                    @foreach ($angket as $key => $item)
                                                    <tr>
                                                        <td rowspan="2">
                                                            {{ $key + 1 }}
                                                            <input type="hidden" name="pertanyaan_id[]" value="{{ $item->id }}">
                                                        </td>
                                                        <td style="max-width: 100px">
                                                            {{ $item->name_jepang }}
                                                        </td>
                                                        <td>
                                                            <textarea name="jawaban_jepang[]" value="" class="form-control"
                                                                    placeholder="Masukkan Jawaban"></textarea>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="max-width: 100px">
                                                            {{ $item->name }}
                                                        </td>
                                                        <td>
                                                            <textarea name="jawaban[]" value="" class="form-control"
                                                                    placeholder="Masukkan Jawaban"></textarea>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body">
                                        <button type="button" id="btn-submit" class="btn btn-light-warning">Simpan</button>
                                        <button type="button" id="btn-cancel" class="btn btn-secondary">Batal</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
            <i class="ki-duotone ki-arrow-up">
                <span class="path1"></span>
                <span class="path2"></span>
            </i>
        </div>
    </div>
@endsection
@section('script')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/id.js"></script>

    <script>
        $(".datePickr").flatpickr();
        $(".datePickrMonthYear").flatpickr(
            {
                "dateFormat": "Y-m",
                "locale": "id"
            }
        );
        function resetErrors() {
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
        }

        function setErrors(errors) {

            resetErrors();
            $.each(errors, function(index, value) {
                $("#" + index + "-form").addClass('is-invalid');
                $("#" + index + "-form").after(`<div class="invalid-feedback">` + value + `</div>`);
            });

            Swal.fire({
                title: "Error!",
                text: "Terdapat kesalahan dalam pengisian form",
                icon: "error"
            });
        }
        function initSelect2(route, selectElement, params = null) {
            var id = null
            if (params != null) {
                id = params
            }
            $(selectElement).select2({
                ajax: {
                    url: route,
                    dataType: 'json',
                    data: function(params) {
                        return {
                            q: params.term,
                            id: id
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.results
                        };
                    },
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                            'content')
                    },
                    allowClear: true
                }
            });
        }
        function formatAndValidateInput(input) {
            input.value = input.value.replace(/[^0-9]/g, '');
        }

        $(document).ready(function() {
            // Remove row on trash icon click
            $(document).on('click', '[data-kt-action="field_remove"]', function () {
                $(this).closest('tr').remove();
            });

            // Append for Riwayat Pendidikan
            $(document).on('click', '#add_pendidikan', function () {
                $('#riwayat_pendidikan_append').append(`
                    <tr>
                        <td><input type="text" name="tingkat_pendidikan[]" class="form-control" placeholder="Masukkan tingkat"></td>
                        <td><input type="text" name="nama_sekolah_pendidikan[]" class="form-control" placeholder="Masukkan nama sekolah"></td>
                        <td><input type="text" name="tahun_masuk_pendidikan[]" class="form-control datePickrMonthYear" placeholder="Masukkan tahun masuk"></td>
                        <td><input type="text" name="tahun_masuk_jepang_pendidikan[]" class="form-control" placeholder="Masukkan tahun masuk jepang"></td>
                        <td><input type="text" name="tahun_keluar_pendidikan[]" class="form-control datePickrMonthYear" placeholder="Masukkan tahun keluar"></td>
                        <td><input type="text" name="tahun_keluar_jepang_pendidikan[]" class="form-control" placeholder="Masukkan tahun keluar jepang"></td>
                        <td><button type="button" class="btn btn-icon btn-danger btn-sm" data-kt-action="field_remove"><i class="ki-outline ki-trash fs-2 "></i></button></td>
                    </tr>
                `);
                $(".datePickrMonthYear").flatpickr(
                    {
                        "dateFormat": "Y-m",
                        "locale": "id"
                    }
                );
            });

            // Append for Riwayat Pekerjaan
            $(document).on('click', '#add_pekerjaan', function () {
                $('#riwayat_pekerjaan_append').append(`
                    <tr>
                        <td><input type="text" name="nama_perusahaan[]" class="form-control" placeholder="Masukkan nama perusahaan"></td>
                        <td><input type="text" name="sebagai_perusahaan[]" class="form-control" placeholder="Masukkan sebagai"></td>
                        <td><input type="text" name="tahun_masuk_perusahaan[]" class="form-control datePickrMonthYear" placeholder="Masukkan tahun masuk"></td>
                        <td><input type="text" name="tahun_masuk_jepang_perusahaan[]" class="form-control" placeholder="Masukkan tahun masuk jepang"></td>
                        <td><input type="text" name="tahun_keluar_perusahaan[]" class="form-control datePickrMonthYear" placeholder="Masukkan tahun keluar"></td>
                        <td><input type="text" name="tahun_keluar_jepang_perusahaan[]" class="form-control" placeholder="Masukkan tahun keluar jepang"></td>
                        <td><button type="button" class="btn btn-icon btn-danger btn-sm" data-kt-action="field_remove"><i class="ki-outline ki-trash fs-2 "></i></button></td>
                    </tr>
                `);
                $(".datePickrMonthYear").flatpickr(
                    {
                        "dateFormat": "Y-m",
                        "locale": "id"
                    }
                );
            });

            // Append for Susunan Keluarga
            $(document).on('click', '#add_keluarga', function () {
                $('#susunan_keluarga_append').append(`
                    <tr>
                        <td><input type="text" name="nama_anggota_keluarga[]" class="form-control" placeholder="Masukkan nama"></td>
                        <td><input type="text" name="hubungan_anggota_keluarga[]" class="form-control" placeholder="Masukkan hubungan"></td>
                        <td><input type="text" name="usia_anggota_keluarga[]" class="form-control" placeholder="Masukkan usia"></td>
                        <td><input type="text" name="profesi_anggota_keluarga[]" class="form-control" placeholder="Masukkan profesi"></td>
                        <td><button type="button" class="btn btn-icon btn-danger btn-sm" data-kt-action="field_remove"><i class="ki-outline ki-trash fs-2 "></i></button></td>
                    </tr>
                `);
            });

            $('input[name="type_izin_days"]').on('input', function() {
                formatAndValidateInput(this)
            });

            $(".tanggal").flatpickr({
                locale: "id", // format date indonesia
            });

            function clearError() {
                $('.invalid-feedback').remove();
                $('.is-invalid').removeClass('is-invalid');
            }

            function errorForm(errors) {
                clearError();
                jQuery.each(errors, function(key, value) {
                    $('#' + key).addClass('is-invalid');
                    $('#' + key).after('<span style="color:red" class="invalid-feedback">' + value +
                        '</span>');
                });
            }

            var form = $('#form');

            $('#btn-submit').click(function(e) {
                e.preventDefault();

                Swal.fire({
                    title: 'Konfirmasi',
                    text: 'Apakah Anda yakin ingin menyimpan?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya',
                    cancelButtonText: 'Tidak'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Create a new FormData object to include form data
                        var formData = new FormData(form[0]);

                        // Add the CSRF token to the form data
                        formData.append('_token', $('input[name="_token"]').val());

                        // Perform AJAX form submission
                        $.ajax({
                            url: '{{ route('master-data-siswa.store') }}',
                            method: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            beforeSend: function() {
                                clearError(); // Clear any previous validation errors
                                Swal.fire({ title : 'Silahkan tunggu', allowOutsideClick: false, allowEscapeKey: false});
                                Swal.showLoading();
                            },
                            success: function(response) {

                                if (response.status == 'error') {
                                    // console.log(response.pesan);

                                    setErrors(response.pesan);
                                    return;
                                }

                                if (response.status == true) {
                                    Swal.fire({
                                        text: "Data berhasil disimpan",
                                        icon: "success",
                                    }).then(() => {
                                        window.location.href =
                                            `{{ route('master-data-siswa.index') }}`;
                                    });
                                } else {

                                    errorForm(response.pesan);
                                }
                            },
                            error: function(xhr) {
                                Swal.fire({
                                    title: 'Gagal!',
                                    text: xhr.responseJSON.message,
                                    icon: 'warning'
                                });
                            },
                            complete: function() {
                                Swal.hideLoading();
                            }
                        });
                    }
                });
            });

            $('#btn-cancel').click(function() {
                Swal.fire({
                    title: 'Konfirmasi',
                    text: 'Apakah Anda yakin ingin membatalkan?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya',
                    cancelButtonText: 'Tidak'
                }).then((result) => {
                    if (result.isConfirmed) {
                        location.reload();
                    }
                });
            });
        });
    </script>
@endsection