@extends('registrasi.layouts.main')

@push('styles')
    <link rel="stylesheet" type="text/css" href="{{ url('https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css') }}">
    {{-- CSS --}}
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    
@endpush

@push('scripts')
<script src="{{ asset('assets/plugin/assets/js/jquery.validate.min.js') }}" type="text/javascript"></script>

<script type="text/javascript" charset="utf8" src="{{ url('https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js') }}"></script>

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
@endpush

@section('content')
    <div class="wizard-container">
        <div class="card wizard-card " style="border: 1px solid #333;padding:5%" data-color="green" id="wizardProfile">
            <form id="pendaftaranForm" action="{{ route('registrasi.smp.zonasi.store') }}" method="post"
                enctype="multipart/form-data">
                {{ csrf_field() }}

                <div class=" text-left" style="display: flex;justify-content:space-between;">
                    <h3 style="font-weight: bold;">Pendaftaran Calon Peserta Didik <br> Sekolah Menengah Pertama Jalur
                        Zonasi</h3>
                    <div style="display: flex;min-width:250px;">
                        <img src="{{ asset('assets/content/images/logo3.png') }}" style="height: 60px" alt="">
                        <h5 style="font-weight:bold; margin-right:3%">DINAS PENDIDIKAN <br> KOTA
                            SAMARINDA</h5>
                    </div>
                </div>
                <div>
                    <i>Sudah mendaftar?,<a class="text-color" href="{{ route('cekPengumuman') }}">Cek Hasil
                            PPDB</a></i>
                </div>
                <div class="wizard-navigation">
                    <div class="progress-with-circle">
                        <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="6"
                            style="width: 21%;"></div>
                    </div>
                    <ul>
                        <li>
                            <a href="#no-identitas" data-toggle="tab">
                                <div class="icon-circle">
                                    <i class="ti-id-badge"></i>
                                </div>
                                No.Identitas
                            </a>
                        </li>
                        <li>
                            <a id="trigger" href="#biodata" data-toggle="tab">
                                <div class="icon-circle">
                                    <i class="ti-user"></i>
                                </div>
                                Biodata
                            </a>
                        </li>
                        <li>
                            <a href="#kirim-berkas" data-toggle="tab">
                                <div class="icon-circle">
                                    <i class="ti-envelope"></i>
                                </div>
                                Kirim Berkas
                            </a>
                        </li>
                        <li>
                            <a href="#sekolah" data-toggle="tab">
                                <div class="icon-circle">
                                    <i class="ti-home"></i>
                                </div>
                                Sekolah
                            </a>
                        </li>
                        <li>
                            <a href="#cek-ulang" data-toggle="tab">
                                <div class="icon-circle">
                                    <i class="ti-reload"></i>
                                </div>
                                Cek Ulang
                            </a>
                        </li>
                        {{-- <li>
                        <a href="#selesai" data-toggle="tab">
                            <div class="icon-circle">
                                <i class="ti-package"></i>
                            </div>
                            Selesai
                        </a>
                    </li> --}}
                    </ul>
                </div>
                <div class="tab-content">
                    <div class="tab-pane" id="no-identitas">
                        @include('registrasi.partials.no_identitas')
                    </div>

                    <div class="tab-pane" id="biodata">
                        @include('registrasi.smp.partials.biodata')
                    </div>


                    <div class="tab-pane" id="kirim-berkas">
                        @include('registrasi.smp.partials.kirim_berkas')

                    </div>
                    <div class="tab-pane" id="sekolah">
                        @include('registrasi.smp.partials.sekolah')

                    </div>
                    <div class="tab-pane" id="cek-ulang">
                        @include('registrasi.smp.partials.cek_ulang')

                    </div>
                    {{-- <div class="tab-pane" id="selesai">
                    <div class="row"style="border:solid 1px #333; border-radius:20px; mmargin-top: 20px;">
                        <h3 style="text-align: center;text-weight:bold">Nomor Pendaftaran Anda</h3>
                        <h1 style="text-align: center;text-weight:bold">1233948234729837</h1>
                        <div style="text-align: center;">
                            <a class="btn
                            btn-primary btn-fill"
                                href=""> <i class="bi bi-printer" style="margin: 10px"></i>print</a>
                            <a class="btn btn-success btn-fill" href=""><i class="bi bi-download"
                                    style="margin: 10px"></i>download</a>
                            <a class="btn btn-default btn-fill" href=""><i class="bi bi-download"
                                    style="margin: 10px"></i>salin</a>
                        </div>
                        <div
                            style="display:flex;justify-content:center; align-items:center;flex-direction:column">
                            <h3 class="ret-dot" style="color: red;">Perhatikan!!</h3>
                            <ul>
                                <li>Simpan No. Pendaftaran yang tertera di atas</li>
                                <li>Data anda sedang di verifikasi admin</li>
                                <li>Pastikan nomor Whatsapp Anda aktif</li>
                                <li>1 Nomor Whatsapp hanya untuk 1 Calon Peserta Didik</li>
                                <li>Untuk Kendala Pendaftaran harap lapor ke <strong>AdminWA</strong></li>
                            </ul>
                        </div>
                    </div>
                </div> --}}
                </div>
                <div class="wizard-footer">
                    <div class="pull-right">
                        <input type="button" class="btn btn-next btn-fill btn-success btn-wd" name="next"
                            value="Next" @if (!isset($temp) && (isset($temp) && $temp['nik'] == ""))
                                disable 
                            @endif />
                        <input type="submit" class="btn btn-finish btn-fill btn-success btn-wd" name="finish"
                            value="Finish" />
                    </div>
                    <div class="pull-left">
                        <input type="button" class="btn btn-previous btn-default btn-wd" name="previous"
                            value="Previous" />
                    </div>
                    <div class="clearfix"></div>
                </div>
            </form>
        </div>
    </div>
@endsection



@push('scripts')

    
    <script>
        $(document).ready(function() {
            /*  Activate the tooltips      */
            $('[rel="tooltip"]').tooltip();

            // Code for the Validator
            var $validator = $('.wizard-card form').validate({
                rules: {
                    firstname: {
                        required: true,
                        minlength: 3
                    },
                    lastname: {
                        required: true,
                        minlength: 3
                    },
                    email: {
                        required: true
                    }
                },
            });

            // Wizard Initialization
            $('.wizard-card').bootstrapWizard({
                'tabClass': 'nav nav-pills',
                'nextSelector': '.btn-next',
                'previousSelector': '.btn-previous',

                onNext: function(tab, navigation, index) {
                    // console.log(index);
                    // //submit form in index 4
                    // const form = $('#pendaftaranForm');
                    // if (index == 5) {
                    //     form.submit();
                    //     return false;
                    // } else {
                    //     var $valid = $('.wizard-card form').valid();
                    //     if (!$valid) {
                    //         $validator.focusInvalid();
                    //         return false;
                    //     }
                    //     return true;
                    // }
                    var $valid = $('.wizard-card form').valid();
                    if (!$valid) {
                        $validator.focusInvalid();
                        return false;
                    }
                    return true;
                },

                onInit: function(tab, navigation, index) {

                    //check number of tabs and fill the entire row
                    var $total = navigation.find('li').length;
                    $width = 100 / $total;

                    navigation.find('li').css('width', $width + '%');

                },

                onTabClick: function(tab, navigation, index) {

                    var $valid = $('.wizard-card form').valid();

                    if (!$valid) {
                        return false;
                    } else {
                        return true;
                    }

                },

                onTabShow: function(tab, navigation, index) {
                    var $total = navigation.find('li').length;
                    var $current = index + 1;

                    var $wizard = navigation.closest('.wizard-card');

                    // If it's the last tab then hide the last button and show the finish instead
                    if ($current >= $total) {
                        $($wizard).find('.btn-next').hide();
                        $($wizard).find('.btn-finish').show();
                    } else {
                        $($wizard).find('.btn-next').show();
                        $($wizard).find('.btn-finish').hide();
                    }

                    //update progress
                    var move_distance = 100 / $total;
                    move_distance = move_distance * (index) + move_distance / 2;

                    $wizard.find($('.progress-bar')).css({
                        width: move_distance + '%'
                    });
                    //e.relatedTarget // previous tab

                    $wizard.find($('.wizard-card .nav-pills li.active a .icon-circle')).addClass(
                        'checked');

                }
            });


            // Prepare the preview for profile picture
            $("#wizard-picture").change(function() {
                readURL(this);
            });

            $('[data-toggle="wizard-radio"]').click(function() {
                wizard = $(this).closest('.wizard-card');
                wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
                $(this).addClass('active');
                $(wizard).find('[type="radio"]').removeAttr('checked');
                $(this).find('[type="radio"]').attr('checked', 'true');
            });

            $('[data-toggle="wizard-checkbox"]').click(function() {
                if ($(this).hasClass('active')) {
                    $(this).removeClass('active');
                    $(this).find('[type="checkbox"]').removeAttr('checked');
                } else {
                    $(this).addClass('active');
                    $(this).find('[type="checkbox"]').attr('checked', 'true');
                }
            });

            $('.set-full-height').css('height', 'auto');

        });
    </script>
    @if (isset($temp) && $temp['nik'] != "")
        <script>
            $(document).ready(function() {
                $('.wizard-card').bootstrapWizard('show', 1);
            });
        </script>
    @endif
    <script>
        

        $(document).ready(function() {
            window.onbeforeunload = function() {
                return "Anda akan diminta mengunggah berkas lagi, yakin ingin keluar?";
            };
            // Disable Wizard Navigation
            $('.wizard-navigation a').on('click', function(e) {
                return false;
            });
            

            // Otp Input Script (Auto Next when fill the otp input)
            $('.otp-input-box').on('input', function(e) {
                var $this = $(this);
                var maxLength = parseInt($this.attr('maxlength'));
                var currentIndex = $('.otp-input-box').index($this);

                if ($this.val().length >= maxLength) {
                    if (currentIndex < $('.otp-input-box').length - 1) {
                        $($('.otp-input-box')[currentIndex + 1]).focus();
                    }
                }
            });

            $('.otp-input-box').on('keydown', function(e) {
                var $this = $(this);
                var currentIndex = $('.otp-input-box').index($this);

                if (e.keyCode === 8 && currentIndex > 0 && $this.val().length ===
                    0) { // Backspace key and empty input
                    $($('.otp-input-box')[currentIndex - 1]).focus();
                }
            });

            // Api Call Data Wilayah
            $("#kabupaten_id").change(function(e) {
                const kabupaten_id = $(this).val();
                $.ajax({
                    type: "get",
                    url: "{{ url('api/kecamatan') }}" + "/" + kabupaten_id,
                    success: function(res) {
                        if (res.status == "success") {
                            let option = '<option value="">Pilih Kecamatan</option>';
                            res.data.forEach((data) => {
                                option +=
                                    `<option value="${data.id}">${data.nama_kecamatan}</option>`;
                            });

                            $('select[id="kecamatan_id"]').html(option);
                            $('select[id="kelurahan_id"]').html(
                                `<option value="">Pilih Kecamatan Terlebih Dahulu</option>`);
                        } else {
                            alert("gagal.. : " + res.message);
                        }
                    }
                });
            });

            $("#kecamatan_id").change(function(e) {
                const kecamatan_id = $(this).val();
                $.ajax({
                    type: "get",
                    url: "{{ url('api/kelurahan') }}" + "/" + kecamatan_id,
                    success: function(res) {
                        if (res.status == "success") {
                            let option = '<option value="">Pilih Kelurahan</option>';
                            res.data.forEach((data) => {
                                option +=
                                    `<option value="${data.id}">${data.nama_kelurahan}</option>`;
                            });

                            $('select[id="kelurahan_id"]').html(option);
                        } else {
                            alert("gagal.. : " + res.message);
                        }
                    }
                });
            });

            $('.schoolTable').DataTable();

            // Otomatis Fill +628 in nomor wa input
            $('#no_wa').val('+628');
            $('#no_wa').on('input', function() {
                var value = $(this).val();
                if (value.length < 4) {
                    $(this).val('+628');
                }
            });

            // Script Pilih Sekolah
            var selectedSchoolIds = [];
            var selectedSchoolNames = [];
            var selectedSchoolNpsn = [];
            var selectedSchoolAlamats = [];

            $(document).on('click', '.select-school-btn', function() {
                if ($(this).hasClass("active-btn-school")) {
                    $(this).removeClass("active-btn-school");
                } else {
                    $(this).addClass("active-btn-school");
                }

                var schoolId = $(this).data('school-id');
                var schoolName = $(this).data('school-name');
                var schoolNpsn = $(this).data('school-npsn');
                var schoolAlamat = $(this).data('school-alamat');

                var index = selectedSchoolIds.indexOf(schoolId);
                if (index === -1) {
                    selectedSchoolIds.push(schoolId);
                    selectedSchoolNames.push(schoolName);
                    selectedSchoolNpsn.push(schoolNpsn);
                    selectedSchoolAlamats.push(schoolAlamat);

                    $('#pendaftaranForm').append('<input type="hidden" name="selected_schools[]" value="' +
                        schoolId + '">');

                    // Insert selected school data into the table
                    var newRow = '<tr>' +
                        '<td>' + schoolName + '</td>' +
                        '<td>' + schoolNpsn + '</td>' +
                        '<td>' + schoolAlamat + '</td>' +
                        '</tr>';
                    $('#evaluasiSchoolTable').append(newRow);
                } else {
                    // Remove school data if it's already selected
                    selectedSchoolIds.splice(index, 1);
                    selectedSchoolNames.splice(index, 1);
                    selectedSchoolNpsn.splice(index, 1);
                    selectedSchoolAlamats.splice(index, 1);
                    $('#evaluasiSchoolTable').find('tr:eq(' + index + ')').remove();
                    $("input[name='selected_schools[]'][value='" + schoolId + "']").remove();
                }
                console.log(selectedSchoolIds);
            });
            // $(document).on('click', '.select-school-btn', function() {
            //     if ($(this).hasClass("active-btn-school")) {
            //         $(this).removeClass("active-btn-school");
            //     } else {
            //         $(this).addClass("active-btn-school");
            //     }

            //     // Clear existing hidden input fields
            //     $('#pendaftaranForm').find('input[name="selected_schools[]"]').remove();

            //     // Create an array to store selected school IDs
            //     var selectedSchoolIds = [];

            //     // Iterate over all selected school buttons
            //     $('.select-school-btn.active-btn-school').each(function() {
            //         selectedSchoolIds.push($(this).data('school-id'));
            //     });

            //     // Add hidden input fields for each selected school ID
            //     selectedSchoolIds.forEach(function(schoolId) {
            //         $('#pendaftaranForm').append('<input type="hidden" name="selected_schools[]" value="' + schoolId + '">');
            //     });

            //     // Clear existing table rows
            //     var table = $('#evaluasiSchoolTable').DataTable();
            //     table.clear().draw();

            //     // Add selected schools to the table
            //     selectedSchoolIds.forEach(function(schoolId) {
            //         var schoolName = $('.select-school-btn[data-school-id="' + schoolId + '"]').data('school-name');
            //         var schoolNpsn = $('.select-school-btn[data-school-id="' + schoolId + '"]').data('school-npsn');
            //         var schoolAddress = $('.select-school-btn[data-school-id="' + schoolId + '"]').data('school-alamat');

            //         table.row.add([
            //             schoolName,
            //             schoolNpsn,
            //             schoolAddress
            //         ]).draw(false);
            //     });

            //     console.log(selectedSchoolIds);
            // });


            // Cek Ulang Wizard Form
            $("input[name='nik']").change(function(e) {
                $("#cek_nik").val($(this).val())
            });

            $("input[name='nama']").change(function(e) {
                $("#cek_nama").val($(this).val())
            });

            $("input[name='jenis_kelamin']").change(function(e) {
                if ($(this).val() == "L") {
                    $("#cek_jenis_kelamin").val("Laki-laki")
                } else {
                    $("#cek_jenis_kelamin").val("Perempuan")
                }
            });

            $("input[name='tempat_lahir']").change(function(e) {
                $("#cek_tempat_lahir").val($(this).val())
            });

            $("input[name='tanggal_lahir']").change(function(e) {
                $("#cek_tanggal_lahir").val($(this).val())
            });

            $("select[name='kabupaten_id']").change(function(e) {
                var kabupaten = $(this).find(":selected").text();
                $("#cek_kabupaten").val(kabupaten)
            });

            $("select[name='kecamatan_id']").change(function(e) {
                var kecamatan = $(this).find(":selected").text();
                $("#cek_kecamatan").val(kecamatan)
            });

            $("select[name='kelurahan_id']").change(function(e) {
                var kelurahan = $(this).find(":selected").text();
                $("#cek_kelurahan").val(kelurahan)
            });

            $("input[name='rt']").change(function(e) {
                $("#cek_rt").val($(this).val())
            });

            $("input[name='alamat']").change(function(e) {
                $("#cek_alamat").val($(this).val())
            });

            $("input[name='rw']").change(function(e) {
                $("#cek_rw").val($(this).val())
            });

            $("input[name='no_kk']").change(function(e) {
                $("#cek_no_kk").val($(this).val())
            });

            $("input[name='nama_ortu']").change(function(e) {
                $("#cek_nama_ortu").val($(this).val())
            });

            $("input[name='no_akta_kelahiran']").change(function(e) {
                $("#cek_no_akta_kelahiran").val($(this).val())
            });

            $("input[name='kartu_keluarga']").change(function(e) {
                console.log($(this).val());
                if ($(this).val() != "" && $(this).val() != null) {
                    $("#cek_kartu_keluarga").val("ADA");
                } else {
                    $("#cek_kartu_keluarga").val("");
                }
            });

            $("input[name='surat_keterangan_ortu']").change(function(e) {
                console.log($(this).val());
                if ($(this).val() != "" && $(this).val() != null) {
                    $("#cek_surat_keterangan_ortu").val("ADA");
                } else {
                    $("#cek_surat_keterangan_ortu").val("");
                }
            });

            $("input[name='kartu_keluarga_lama']").change(function(e) {
                console.log($(this).val());
                if ($(this).val() != "" && $(this).val() != null) {
                    $("#cek_kartu_keluarga_lama").val("ADA");
                } else {
                    $("#cek_kartu_keluarga_lama").val("");
                }
            });

            $("input[name='surat_keterangan_panti']").change(function(e) {
                console.log($(this).val());
                if ($(this).val() != "" && $(this).val() != null) {
                    $("#cek_surat_keterangan_panti").val("ADA");
                } else {
                    $("#cek_surat_keterangan_panti").val("");
                }
            });

        });
    </script>
@endpush