<?= $this->extend('template_front'); ?>

<?= $this->section('content'); ?>

<!-- ini buat spasi antara navbar dan greeting section -->
<div class="margin-bottom-100"></div>

<!-- Start Table-peserta -->
<section class="table-peserta margin-top-100 margin-bottom-100">

    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <h2 style="text-align: center; text-transform: uppercase;">Upload Berkas pendaftaran Madrasah Istiqlal Jakarta</h2>

                <hr>
            </div>

        </div>

        <div class="row">
            <div class="col-md-4">
                <h4 class="text-center">Klik Tombol di bawah untuk cek syarat upload berkas file</h4>
                <div class="accordion mb-4" id="accordionExample">
                    <div class="card bg-success" style="margin:0;padding:0;">
                        <div class="card-header" id="headingOne">
                            <h2 class="mb-0">
                                <button class="btn btn-link btn-block text-left collapsed text-white" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                    Syarat Upload Berkas KB / RA
                                </button>
                            </h2>
                        </div>

                        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                            <div class="card-body text-white">
                                <ol>
                                    <li>Akta Kelahiran</li>
                                    <li>Kartu keluarga (KK)</li>
                                    <li>Pas foto 4x6 background merah</li>
                                    <li>Foto Keluarga</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <div class="card bg-danger" style="margin:0;padding:0;">
                        <div class="card-header" id="headingTwo">
                            <h2 class="mb-0">
                                <button class="btn btn-link btn-block text-left collapsed text-decoration-none text-white" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    Syarat Upload Berkas MI
                                </button>
                            </h2>
                        </div>

                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                            <div class="card-body text-white">
                                <ol>
                                    <li>Akta Kelahiran</li>
                                    <li>Kartu keluarga (KK)</li>
                                    <li>Pas foto 4x6 background merah</li>
                                    <li>Foto Keluarga</li>
                                </ol>
                                <br>
                                <hr>
                                <p>Berkas Tambahan Khusus siswa pindahan</p>
                                <ol>
                                    <li>Raport 2 tahun terakhir Jenjang SD/MI atau sederajat</li>
                                    <li>Surat keterangan pindah dari Dinas Pendidikan Setempat</li>
                                    <li>Surat keterangan pindah dari sekolah asal</li>
                                    <li>Surat Permohonan dari orang tua</li>
                                    <li>Surat keterangan kelakuan baik (dari sekolah asal)</li>
                                    <li> File format data siswa model 8355 (dari sekolah asal)</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <div class="card bg-primary" style="margin:0;padding:0;">
                        <div class="card-header" id="headingThree">
                            <h2 class="mb-0">
                                <button class="btn btn-link btn-block text-left collapsed text-decoration-none text-white" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    Syarat Upload Berkas MTs
                                </button>
                            </h2>
                        </div>

                        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                            <div class="card-body text-white">
                                <ol>
                                    <li>Akta Kelahiran</li>
                                    <li>Kartu keluarga (KK)</li>
                                    <li>Pas foto 4x6 background merah</li>
                                    <li>Legalisasi (basah) NISN</li>
                                    <li>Ijazah Legalisasi (basah) (menyusul)</li>
                                    <li>Legalisasi rapor kelas akhir semester 1 dan 2</li>

                                </ol>
                                <br>
                                <hr>
                                <p>Berkas Tambahan Khusus siswa pindahan</p>
                                <ol>
                                    <li>Raport 2 tahun terakhir Jenjang SMP/MTs atau sederajat</li>
                                    <li>Surat keterangan pindah dari Dinas Pendidikan Setempat</li>
                                    <li>Surat keterangan pindah dari sekolah asal</li>
                                    <li>Surat Permohonan dari orang tua</li>
                                    <li>Surat keterangan kelakuan baik (dari sekolah asal)</li>
                                    <li> File format data siswa model 8355 (dari sekolah asal)</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <div class="card bg-secondary" style="margin:0;padding:0;">
                        <div class="card-header" id="headingFour">
                            <h2 class="mb-0">
                                <button class="btn btn-link btn-block text-left collapsed text-decoration-none text-white" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                    Syarat Upload Berkas MA
                                </button>
                            </h2>
                        </div>

                        <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
                            <div class="card-body text-white">
                                <ol>
                                    <ol>
                                        <li>Akta Kelahiran</li>
                                        <li>Kartu keluarga (KK)</li>
                                        <li>Pas foto 4x6 background merah</li>
                                        <li>Legalisasi (basah) NISN</li>
                                        <li>Ijazah Legalisasi (basah) (menyusul)</li>
                                        <li>Legalisasi rapor kelas akhir semester 1 dan 2</li>

                                    </ol>
                                    <br>
                                    <hr>
                                    <p>Berkas Tambahan Khusus siswa pindahan</p>
                                    <ol>
                                        <li>Raport 2 tahun terakhir Jenjang SMA/MA atau sederajat</li>
                                        <li>Surat keterangan pindah dari Dinas Pendidikan Setempat</li>
                                        <li>Surat keterangan pindah dari sekolah asal</li>
                                        <li>Surat Permohonan dari orang tua</li>
                                        <li>Surat keterangan kelakuan baik (dari sekolah asal)</li>
                                        <li> File format data siswa model 8355 (dari sekolah asal)</li>
                                    </ol>
                                </ol>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-md-8">
                <div class="row">
                    <div class="col">
                        <div class="alert alert-success" role="alert">
                            <h5 class="alert-heading">Cara Upload Dokumen</h5>
                            <ol>
                                <li>Pastikan PC/laptop sudah terinstall aplikasi winrar atau sejenisnya</li>
                                <li>Jadikan berkas/file dalam 1 folder</li>
                                <li>Ubah folder tersebut menjadi format zip atau rar</li>
                                <li>Isi data di bawah sesuai calon peserta didik masing-masing</li>
                                <li>Upload file zip atau rar dengan syarat ukuran file kurang dari 30mb</li>
                            </ol>

                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="alert-container"></div>
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <form action="" method="post" id="uploaddataberkas" enctype="multipart/form-data">
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="Nama">Ketikkan Nama Calon Peserta didik</label><br>
                                    <select class="namacek custom-select" name="ceknama" id="ceknama">
                                        <option selected disabled>-- Nama Calon Peserta Didik --</option>
                                        <?php foreach ($capes as $capes) : ?>
                                            <option value="<?= $capes['nama_lengkap']; ?>"><?= $capes['nama_lengkap']; ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>

                            <input type="hidden" class="form-control" name="nik">
                            <div class="form-group row">
                                <label for="nik" class="col-sm-2 col-form-label">NIK</label>
                                <div class="col-sm-10">
                                    <input type="text" disabled class="form-control" id="ceknik">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="no_va" class="col-sm-2 col-form-label">No. Pembayaran</label>
                                <div class="col-sm-10">
                                    <input type="text" disabled class="form-control" id="no_va">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="namalengkap" class="col-sm-2 col-form-label">Nama Lengkap</label>
                                <div class="col-sm-10">
                                    <input type="text" disabled class="form-control" id="namalengkap">
                                    <input type="hidden" class="form-control" name="namalengkap">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="kelas" class="col-sm-2 col-form-label">Kelas</label>
                                <div class="col-sm-10">
                                    <input type="text" disabled class="form-control" id="kelas">

                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="divisi" class="col-sm-2 col-form-label">Divisi</label>
                                <div class="col-sm-10">
                                    <input type="text" disabled class="form-control" id="divisi">
                                </div>
                            </div>
                            <div class="form-group row">
                                <!-- <p>Silahkan Cek data diatas. Jika sudah sesuai silahkan upload berkas pada tombol di bawah ini!</p> -->
                                <label class="col-sm-12 col-form-label">Silahkan Cek data diatas. Jika sudah sesuai silahkan upload berkas pada tombol di bawah ini!</label>
                                <!-- <div class="col-sm-10">
                            <input type="text" disabled class="form-control" id="namalengkap">
                        </div> -->
                            </div>
                            <div class="form-group row">
                                <label for="file" class="col-sm-2 col-form-label">File Upload</label>
                                <div class="col-sm-10">
                                    <input type="file" class="form-control" name="fileupload">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="email" class="col-sm-2 col-form-label">Email Terdaftar</label>
                                <div class="col-sm-10">
                                    <input type="email" class="form-control" name="email">
                                </div>
                            </div>
                            <!-- <div class="progress" id="progressDivId">
                                <div class="progress-bar progress-bar-striped" id="progressupload" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                    <div id="textprogress"></div>
                                </div>
                            </div><br> -->
                            <div class="form-group row">
                                <div class="col-sm-10">
                                    <button type="submit" class="btn btn-primary" id="upload">Upload</button>
                                    <!-- <button type="submit" class="btn btn-primary" disabled>
                                <div class="spinner-border" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </button> -->
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>



    </div>

</section>
<!-- /End Table-peserta -->

<script>
    $(document).ready(function() {

        $('.namacek').select2();


        $("#ceknama").change(function() {
            let ceknama = $("#ceknama").val();
            // alert(ceknama)

            $.ajax({
                url: "<?= base_url(); ?>/home/ceknamaupload",
                type: "post",
                data: {
                    ceknama: ceknama
                },
                async: true,
                dataType: "json",

                success: function(data) {
                    // console.log(data.satuan)
                    if (data.responce == 'success') {
                        // console.log(data)
                        $("input[name='nik']").val(data.capesnama.nik);
                        $("input[name='namalengkap']").val(data.capesnama.nama_lengkap);
                        $("#ceknik").val(data.capesnama.nik);
                        $("#no_va").val(data.capesnama.no_va);
                        $("#namalengkap").val(data.capesnama.nama_lengkap);
                        $("#divisi").val(data.capesnama.divisi);
                        $("#kelas").val(data.capesnama.kelas);

                    } else {
                        // console.log(data.responce)
                        alert("Data tidak ditemukan")
                    }
                }
            });
        })

        $("#uploaddataberkas").submit(function(event) {
            event.preventDefault();
            // console.log($("input[name='nik']").val())


            Swal.fire({
                title: 'Apa kamu yakin Data dan file sudah benar?',
                text: "kamu hanya bisa sekali untuk mengupload berkasnya",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Benar!'
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        url: '<?= base_url(); ?>/home/uploaddataberkas',
                        type: 'post',
                        // data: $(this).serialize(),
                        data: new FormData(this),
                        dataType: 'json',
                        cache: false,
                        processData: false,
                        contentType: false,
                        beforeSend: function() {

                            // setting a timeout
                            $('#upload').attr('disabled');
                            $("#upload").html(`<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>`);


                        },
                        success: function(data) {
                            if (data.responce == "success") {
                                // console.log(data.update);
                                // toastr["success"](data.pesan);

                                //         let alert = `<div class="alert alert-success">
                                // <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Berkas berhasil diupload</div>`;

                                //         $('.alert-container').html(alert);

                                Swal.fire({
                                    position: 'center',
                                    icon: 'success',
                                    title: 'Selamat !! Upload berkas telah berhasil',
                                    showConfirmButton: false,
                                    timer: 1500
                                })

                                $("input[name='nik']").val('');
                                $("#ceknik").val('');
                                $("#no_va").val('');
                                $("#namalengkap").val('');
                                $("#kelas").val('');
                                $("#divisi").val('');

                                setTimeout(function() {
                                    /* show the alert for 3sec and then reload the page. */
                                    location.reload();
                                }, 1500);


                                // window.location.reload();
                            } else {
                                toastr["error"](data.pesan);
                                // console.log(data);
                            }
                        },
                        complete: function(data) {
                            $('#upload').removeAttr('disabled');
                            $("#upload").html(`Upload`);

                            if (data.responce == 'success') {

                                $('#uploaddataberkas')[0].reset();
                            }
                        },
                    });

                }
            })

        });

    });
</script>

<?= $this->endSection(); ?>