@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.sd.affirmasi.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 Dasar Jalur
                        Affirmasi</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 checked">
                                    <i class="ti-id-badge"></i>
                                </div>
                                No.Identitas
                            </a>
                        </li>
                        <li>
                            <a id="trigger" href="#biodata" data-toggle="tab">
                                <div
                                    class="icon-circle @if (isset($temp) && $temp['phone_number']) checked @endif @if (session('success')) checked @endif">
                                    <i class="ti-user"></i>
                                </div>
                                Biodata
                            </a>
                        </li>
                        <li>
                            <a href="#kirim-berkas" data-toggle="tab">
                                <div class="icon-circle @if (session('success')) checked @endif">
                                    <i class="ti-envelope"></i>
                                </div>
                                Kirim Berkas
                            </a>
                        </li>
                        <li>
                            <a href="#sekolah" data-toggle="tab">
                                <div class="icon-circle @if (session('success')) checked @endif">
                                    <i class="ti-home"></i>
                                </div>
                                Sekolah
                            </a>
                        </li>
                        <li>
                            <a href="#cek-ulang" data-toggle="tab">
                                <div class="icon-circle @if (session('success')) checked @endif">
                                    <i class="ti-reload"></i>
                                </div>
                                Cek Ulang
                            </a>
                        </li>

                    </ul>
                </div>
                <div class="tab-content">
                    <div class="tab-pane" id="no-identitas">
                        @include('registrasi.partials.no_identitas', [
                            'disabled' => session('success') != null,
                        ])
                    </div>

                    <div class="tab-pane @if (isset($temp) && $temp['phone_number']) active @endif" id="biodata">
                        @include('registrasi.SD.partials.biodata', [
                            'disabled' => session('success') != null,
                        ])
                    </div>

                    <div class="tab-pane" id="kirim-berkas">
                        @include('registrasi.SD.partials.kirim_berkas', [
                            'disabled' => session('success') != null,
                        ])
                    </div>
                    <div class="tab-pane" id="sekolah">

                        @include('registrasi.SD.partials.sekolah', [
                            'disabled' => session('success') != null,
                        ])
                    </div>
                    <div class="tab-pane" id="cek-ulang">
                        @include('registrasi.SD.partials.cek_ulang')


                    </div>

                </div>
                <div class="wizard-footer">
                    <div class="pull-right">
                        <input type="button" class="btn btn-next btn-fill btn-success btn-wd"
                            @if (!isset($temp)) disable @endif name="next" value="Next" />
                        <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;
            });





            // 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();



            // 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);
            });


            // 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("");
                }
            });



            // Initialize the map 1
            var map1 = L.map('map1').setView([-0.48904462972199686, 117.14990418194968],
                20); // Set initial coordinates and zoom level



            // Add a tile layer map 1
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map1);

            map1.locate({
                setView: true,
                maxZoom: 20
            });

            var map2 = L.map('map2').setView([-0.48904462972199686, 117.14990418194968], 20);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map2);

            // Resize Map 1
            $('.btn-wd').on('click', function(e) {

                if (map1 && map1.invalidateSize) {
                    setTimeout(function() {
                        map1.invalidateSize();
                    }, 100);
                }

                if (map2 && map2.invalidateSize) {
                    setTimeout(function() {
                        map2.invalidateSize();
                    }, 100);
                }
            });

            $('#btnGetLoc').on('click', function(e) {
                map1.locate({
                    setView: true,
                    maxZoom: 20
                });
                console.log("clicked");
            });

            const lat1 = document.getElementById('lat1');
            const lng1 = document.getElementById('lng1');
            var newMarker1 = null;
            var newMarker2 = null;

            function onLocationFound(e) {
                if (newMarker1 == null) {
                    newMarker1 = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map1);
                } else {
                    newMarker1.setLatLng([e.latlng.lat, e.latlng.lng]);
                }

                if (newMarker2 == null) {
                    newMarker2 = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map2);
                } else {
                    newMarker2.setLatLng([e.latlng.lat, e.latlng.lng]);
                }
                lat1.value = `${e.latlng.lat}`;
                lng1.value = `${e.latlng.lng}`;

                $("#cek_lintang").val(`${e.latlng.lat}`)
                $("#cek_bujur").val(`${e.latlng.lng}`)
                map2.flyTo([e.latlng.lat, e.latlng.lng], 20);

            }

            map1.on('locationfound', onLocationFound);





            function onMapClick(e) {

                // Membuat marker baru dan menambahkannya ke peta
                if (newMarker1 == null) {
                    newMarker1 = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map1);
                } else {
                    newMarker1.setLatLng([e.latlng.lat, e.latlng.lng]);
                }

                if (newMarker2 == null) {
                    newMarker2 = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map2);
                } else {
                    newMarker2.setLatLng([e.latlng.lat, e.latlng.lng]);
                }
                

                //map2 flyto and zoom
                map2.flyTo([e.latlng.lat, e.latlng.lng], 20);


                lat1.value = `${e.latlng.lat}`;
                lng1.value = `${e.latlng.lng}`;

                $("#cek_lintang").val(`${e.latlng.lat}`)
                $("#cek_bujur").val(`${e.latlng.lng}`)


            }

            map1.on('click', onMapClick);


        });
    </script>
@endpush