@extends('home_layout/layout')
@section('title', 'Formulir Pendaftaran Santri Baru PP.Al-Qodiri Jember')
@section('content')
    <section class="navbar-area navbar-two">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <nav class="navbar navbar-expand-lg fixed-top">
                        <a class="navbar-brand" href="javascript:void(0)">
                            <img src="{{asset('home_asset/assets/images/logo.png')  }}" width="200px" alt="Logo" />
                        </a>

                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTwo"
                            aria-controls="navbarTwo" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                        </button>

                        <div class="collapse navbar-collapse sub-menu-bar" id="navbarTwo">
                            <ul class="navbar-nav m-auto">
                                <li class="nav-item">
                                    <a href="{{ route('home.index') }}#home">Beranda</a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('home.index') }}#about">Tentang</a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('home.index') }}#lembaga_pendidikan">Lembaga Pendidikan</a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('home.index') }}#alur">Alur Pendaftaran</a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('home.informasi') }}">Info</a>
                                </li>
                                {{-- <li class="mt-3 ms-3">
                                    <form action="{{ route('logout') }}" method="POST" class="d-inline">
                                        @csrf
                                        <button type="submit" class="btn btn-danger me-md-2 square">Logout</button>
                                    </form>
                                </li> --}}
                            </ul>
                        </div>

                        <!-- <div class="navbar-btn d-none d-sm-inline-block">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              </div> -->
                    </nav>
                </div>
            </div>
        </div>
    </section>



    {{-- header --}}

    <section class="mt-5 pt-5 bg-success">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 mt-5 mb-5 ">
                    <h1 class="text-center text-light fw-bold">Formulir Pendaftaran Santri Baru</h1>
                    {{-- <h2 class="text-center text-light">Silakan pilih menu yang tersedia</h2> --}}
                </div>


            </div>
        </div>
    </section>


    <section class="mt-5 mb-5">
        <div class="container single-card card-style-one">
            <div class="card-content">
                <h2 class="text-center">Assalamualaikum Wr.Wb</h2>
                <hr>
                <p class="mb-5 text text-center">

                <div class="alert alert-success text-center" role="alert">
                    Pendaftaran telah berhasil dilakukan, silakan mengunduh bukti Pendaftaran pada link di bawah ini! </div>

                </p>

                <div class="container">
                    <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>No Registrasi Pendaftaran</strong></label>
                        <div class="col">
                            <p class="form-control-plaintext fw-bold">
                                {{ $data_santri->no_induk_santri ?? '-' }} |
                                @if ($data_santri->status_santri == 'AKTIF')
                                    <span class="badge bg-success">Aktif</span>
                                @else
                                    <span class="badge bg-danger">Tidak Aktif</span>
                                @endif
                            </p>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>NIS</strong></label>
                        <div class="col">
                            <p class="form-control-plaintext">
                                {!! $data_santri->nis_sipptren ?? '<span class="fst-italic">Nomor Akan Muncul Saat Sudah Melakukan validasi</span>' !!}
                            </p>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>Nama Santri</strong></label>
                        <div class="col">
                            <p class="form-control-plaintext">{{ $data_santri->nama_lengkap_santri ?? '-' }}</p>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>Tanggal Masuk Santri</strong></label>
                        <div class="col">
                            <p class="form-control-plaintext">
                                @if($data_santri->tanggal_masuk)
                                    {{ $data_santri->tanggal_masuk->format('d-m-Y') }}
                                @else
                                    -
                                @endif
                            </p>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>Jenis Kelamin</strong></label>
                        <div class="col">
                            <p class="form-control-plaintext">{{ $data_santri->jenis_kelamin ?? '-' }}</p>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>Tempat Lahir</strong></label>
                        <div class="col">
                            <p class="form-control-plaintext">{{ $data_santri->tempat_lahir ?? '-' }}</p>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>Tanggal Lahir</strong></label>
                        <div class="col">
                            <p class="form-control-plaintext">
                                @if($data_santri->tanggal_lahir)
                                    {{ $data_santri->tanggal_lahir->format('d-m-Y') }}
                                @else
                                    -
                                @endif
                            </p>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>Status Kewarganegaraan</strong></label>
                        <div class="col">
                            <p class="form-control-plaintext">
                                @if($data_santri->status_kewarganegaraan == 'WNI')
                                    Warga Negara Indonesia (WNI)

                                @else
                                    Warga Negara Asing (WNA) / Foreign Citizen
                                @endif


                        </div>
                    </div>
                    @if ($data_santri->status_kewarganegaraan == 'WNA')
                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label"><strong>No Passport</strong></label>
                            <div class="col">
                                <p class="form-control-plaintext">{{ $data_santri->no_passport_santri ?? '-' }}</p>
                            </div>
                        </div>

                    @else
                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label"><strong>No KK</strong></label>
                            <div class="col">
                                <p class="form-control-plaintext">{{ Str::mask($data_santri->no_kk, '*', 4) }}</p>
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label"><strong>NIK Santri</strong></label>
                            <div class="col">
                                <p class="form-control-plaintext">{{ Str::mask($data_santri->nik_santri, '*', 4) }}</p>
                            </div>
                        </div>

                    @endif

                    <hr>


                    @if ($data_santri->status_kewarganegaraan == 'WNA')
                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label"><strong>Alamat Lengkap di Negara Asal</strong></label>
                            <div class="col">
                                <p class="form-control-plaintext">{{ $data_santri->alamat_tinggal_negara_asal ?? '-' }}</p>
                            </div>
                        </div>

                    @else

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label"><strong>Provinsi</strong></label>
                            <div class="col">
                                <p class="form-control-plaintext">{{ $data_santri->nama_provinsi ?? '-' }}</p>
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label"><strong>Kabupaten/Kota</strong></label>
                            <div class="col">
                                <p class="form-control-plaintext">{{ $data_santri->nama_kabupaten ?? '-' }}</p>
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label"><strong>Kecamatan</strong></label>
                            <div class="col">
                                <p class="form-control-plaintext">{{ $data_santri->nama_kecamatan ?? '-' }}</p>
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label"><strong>Desa/Kelurahan</strong></label>
                            <div class="col">
                                <p class="form-control-plaintext">{{ $data_santri->nama_desa ?? '-' }}</p>
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label"><strong>Dusun</strong></label>
                            <div class="col">
                                <p class="form-control-plaintext">{{ $data_santri->alamat_dusun ?? '-' }}</p>
                            </div>
                        </div>

                    @endif

                    <hr>

                    <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>Lembaga Pendidikan</strong></label>
                        <div class="col">
                            <p class="form-control-plaintext">
                                @php
                                    $lembagaSelected = $lembaga->firstWhere('id_lembaga', $data_santri->pendidikan_dipilih);
                                @endphp
                                {{ $lembagaSelected->nama_lembaga ?? '-' }}
                            </p>
                        </div>
                    </div>

                    <hr>

                    <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>Nama Ayah</strong></label>
                        <div class="col">
                            <p class="form-control-plaintext">{{ $data_santri->nama_ayah ?? '-' }}</p>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>Pekerjaan Ayah</strong></label>
                        <div class="col">
                            <p class="form-control-plaintext">{{ $data_santri->pekerjaan_ayah ?? '-' }}</p>
                        </div>
                    </div>



                    <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>Nama Ibu</strong></label>
                        <div class="col">
                            <p class="form-control-plaintext">{{ $data_santri->nama_ibu ?? '-' }}</p>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>Pekerjaan Ibu</strong></label>
                        <div class="col">
                            <p class="form-control-plaintext">{{ $data_santri->pekerjaan_ibu ?? '-' }}</p>
                        </div>
                    </div>


                    <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>No HP</strong></label>
                        <div class="col">
                            <p class="form-control-plaintext">{{ Str::mask($data_santri->no_hp, '*', 4) }}</p>
                        </div>
                    </div>

                    {{-- <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>Status</strong></label>
                        <div class="col">
                            <p class="form-control-plaintext">{{ $data_santri->status ?? '-' }}</p>
                        </div>
                    </div> --}}

                    <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>Foto Santri</strong></label>
                        <div class="col">
                            @if($data_santri->foto)
                                <img src="{{ asset('storage/' . $data_santri->foto) }}" alt="Foto Santri"
                                    style="max-width: 200px;">
                            @else
                                <p class="form-control-plaintext">-</p>
                            @endif
                        </div>
                    </div>
                    <hr>
                    <div class="mb-3 row">
                        <label class="col-lg-4 col-form-label"><strong>Link Bukti Pendaftaran</strong></label>
                        <div class="col-lg-4">


                            <button type="button" class="btn btn-success" data-bs-toggle="modal"
                                data-bs-target="#modal-bukti">
                                Lihat Bukti Pendaftaran
                            </button>



                            <!--<a href="{{ route('download_pdf') }}" class="btn btn-success">Download-->
                            <!--    Bukti Pendaftaran</a> -->
                        </div>
                    </div>
                    <hr>

                    <div class="alert alert-info" role="alert">
                        <h5 class="alert-heading"><i class="fas fa-info-circle me-2"></i>Informasi Penting</h5>
                        <hr>
                        Untuk validasi, silakan hubungi admin dengan menunjukkan bukti pendaftaran
                        yang telah diunduh beserta dokumen persyaratan lainnya yang diperlukan. Untuk informasi lebih
                        lanjut, Anda dapat menghubungi admin melalui kontak yang tersedia.



                    </div>


                </div>
            </div>
        </div>
    </section>






    <footer style="background-color: #009343" class="footer-area footer-two">
        <div class="footer-widget">
            <div class="container">
                <div class="row">
                    <div class="col-xl-6 col-lg-4 col-sm-12">
                        <div class="f-about">
                            <div class="footer-logo">
                                <a href="javascript:void(0)">
                                    <img src="{{ asset('home_asset/assets/images/logo.png') }}" alt="Logo" />
                                </a>
                            </div>
                            <p class="text text-light">Alamat : Jl. Manggar No.139A, Gebang Poreng, Gebang, Kec.
                                Patrang, Kabupaten Jember, Jawa Timur 68117</p>
                            <!-- <ul class="social">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  </ul> -->
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-2 col-sm-4">
                        <div class="footer-link">
                            <h6 class="footer-title text-light">Social Media</h6>
                            <ul>
                                <li><a class="text-light" href="javascript:void(0)">Instagram</a></li>
                                <li><a class="text-light" href="javascript:void(0)">Facebook</a></li>
                                <li><a class="text-light" href="javascript:void(0)">Youtube</a></li>
                                <li><a class="text-light" href="javascript:void(0)">Tiktok</a></li>
                            </ul>
                        </div>
                        <!-- footer link -->
                    </div>

                    <!-- <div class="col-xl-2 col-lg-3 col-sm-4">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <div class="footer-link">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <h6 class="footer-title text-light">Help & Suuport</h6>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <ul>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <li><a class="text-light" href="javascript:void(0)">Support Center</a></li>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <li><a class="text-light" href="javascript:void(0)">FAQ</a></li>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <li><a class="text-light" href="javascript:void(0)">Terms & Conditions</a></li>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </ul>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              </div>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            </div> -->
                </div>
                <!-- row -->
            </div>
            <!-- container -->
        </div>
        <!-- footer widget -->

        <div class="footer-copyright">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="copyright text-center">
                            <p class="text text-light">Copyright © 2025 Pondok Pesantren Al-Qodiri Jember All Rights
                                Reserved</p>
                        </div>
                        <!-- copyright -->
                    </div>
                </div>
                <!-- row -->
            </div>
            <!-- container -->
        </div>
        <!-- footer copyright -->
    </footer>
    <!-- footer -->



    {{-- modal bukti daftar --}}
    <!-- Modal -->
    <div class="modal fade" id="modal-bukti" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Bukti Pendaftaran</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <div id="pdf-viewer"></div>

                </div>
                <div class="modal-footer">

                    <a href="{{ route('download_bukti', $data_santri->id) }}" class="btn btn-success">Download
                        Bukti Pendaftaran</a>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


    {{-- JS wilayah --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.19.5/jquery.validate.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        function confirmSubmit() {
            Swal.fire({
                title: 'Apakah Anda yakin?',
                text: "Data santri akan diperbarui dan data tidak dapat diubah, silakan cek kembali isi dari formulir anda",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, simpan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('userForm').submit();
                }
            });
        }
    </script>


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

            // Fetch provinces
            $.get('/get-provinces', function (data) {
                $.each(data, function (key, value) {
                    $('#provinsi_santri').append('<option value="' + value.code + '">' + value.name + '</option>');
                });
            });

            // Province change event
            $('#provinsi_santri').change(function () {
                var province_id = $(this).val();
                $('#kabupaten_santri').empty().append('<option value="">Please select</option>');
                $('#kecamatan_santri').empty().append('<option value="">Please select</option>');
                $('#desa_kelurahan_santri').empty().append('<option value="">Please select</option>');

                if (province_id) {
                    $.get('/get-cities?province_code=' + province_id, function (data) {
                        $.each(data, function (key, value) {
                            $('#kabupaten_santri').append('<option value="' + value.code + '">' + value.name + '</option>');
                        });
                    });
                }
            });

            // City change event
            $('#kabupaten_santri').change(function () {
                var city_id = $(this).val();
                $('#kecamatan_santri').empty().append('<option value="">Please select</option>');
                $('#desa_kelurahan_santri').empty().append('<option value="">Please select</option>');

                if (city_id) {
                    $.get('/get-districts?city_code=' + city_id, function (data) {
                        $.each(data, function (key, value) {
                            $('#kecamatan_santri').append('<option value="' + value.code + '">' + value.name + '</option>');
                        });
                    });
                }
            });

            // District change event
            $('#kecamatan_santri').change(function () {
                var district_id = $(this).val();
                $('#desa_kelurahan_santri').empty().append('<option value="">Please select</option>');

                if (district_id) {
                    $.get('/get-villages?district_code=' + district_id, function (data) {
                        $.each(data, function (key, value) {
                            $('#desa_kelurahan_santri').append('<option value="' + value.code + '">' + value.name + '</option>');
                        });
                    });
                }
            });

        });
    </script>





    {{--
    <script>
        $(document).ready(function () {
            // Fetch provinces
            $.get('/get-provinces', function (data) {
                $.each(data, function (key, value) {
                    var selected = (value.code == '{{ $data_santri->alamat_provinsi }}') ? 'selected' : '';
                    $('#provinsi_santri').append('<option value="' + value.code + '" ' + selected + '>' + value.name + '</option>');
                });

                // Trigger change event to load cities if province is already selected
                if ('{{ $data_santri->alamat_provinsi }}') {
                    $('#provinsi_santri').trigger('change');
                }
            });

            // Province change event
            $('#provinsi_santri').change(function () {
                var province_id = $(this).val();
                $('#kabupaten_santri').empty().append('<option value="">Please select</option>');
                $('#kecamatan_santri').empty().append('<option value="">Please select</option>');
                $('#desa_kelurahan_santri').empty().append('<option value="">Please select</option>');

                if (province_id) {
                    $.get('/get-cities?province_code=' + province_id, function (data) {
                        $.each(data, function (key, value) {
                            var selected = (value.code == '{{ $data_santri->alamat_kabupaten }}') ? 'selected' : '';
                            $('#kabupaten_santri').append('<option value="' + value.code + '" ' + selected + '>' + value.name + '</option>');
                        });

                        // Trigger change event to load districts if city is already selected
                        if ('{{ $data_santri->alamat_kabupaten }}') {
                            $('#kabupaten_santri').trigger('change');
                        }
                    });
                }
            });

            // City change event
            $('#kabupaten_santri').change(function () {
                var city_id = $(this).val();
                $('#kecamatan_santri').empty().append('<option value="">Please select</option>');
                $('#desa_kelurahan_santri').empty().append('<option value="">Please select</option>');

                if (city_id) {
                    $.get('/get-districts?city_code=' + city_id, function (data) {
                        $.each(data, function (key, value) {
                            var selected = (value.code == '{{ $data_santri->alamat_kecamatan }}') ? 'selected' : '';
                            $('#kecamatan_santri').append('<option value="' + value.code + '" ' + selected + '>' + value.name + '</option>');
                        });

                        // Trigger change event to load villages if district is already selected
                        if ('{{ $data_santri->alamat_kecamatan }}') {
                            $('#kecamatan_santri').trigger('change');
                        }
                    });
                }
            });

            // District change event
            $('#kecamatan_santri').change(function () {
                var district_id = $(this).val();
                $('#desa_kelurahan_santri').empty().append('<option value="">Please select</option>');

                if (district_id) {
                    $.get('/get-villages?district_code=' + district_id, function (data) {
                        $.each(data, function (key, value) {
                            var selected = (value.code == '{{ $data_santri->alamat_desa }}') ? 'selected' : '';
                            $('#desa_kelurahan_santri').append('<option value="' + value.code + '" ' + selected + '>' + value.name + '</option>');
                        });
                    });
                }
            });
        });
    </script> --}}



    <script>
        $(document).ready(function () {
            $('#userForm').validate({
                rules: {
                    nama_santri: {
                        required: true,
                        minlength: 3
                    },
                    jenis_kelamin: {
                        required: true
                    },
                    tempat_lahir: {
                        required: true
                    },
                    tanggal_lahir: {
                        required: true,
                        date: true
                    },
                    status_kewarganegaraan: {
                        required: true
                    },
                    // WNI fields
                    no_kk: {
                        required: function () {
                            return $('#wni').is(':checked');
                        }
                    },
                    nik_santri: {
                        required: function () {
                            return $('#wni').is(':checked');
                        },
                        minlength: 16,
                        maxlength: 16,
                        number: true
                    },
                    provinsi_santri: {
                        required: function () {
                            return $('#wni').is(':checked');
                        }
                    },
                    kabupaten_santri: {
                        required: function () {
                            return $('#wni').is(':checked');
                        }
                    },
                    kecamatan_santri: {
                        required: function () {
                            return $('#wni').is(':checked');
                        }
                    },
                    desa_kelurahan_santri: {
                        required: function () {
                            return $('#wni').is(':checked');
                        }
                    },
                    alamat_dusun: {
                        required: function () {
                            return $('#wni').is(':checked');
                        }
                    },
                    // WNA fields
                    alamat_tinggal_negara_asal: {
                        required: function () {
                            return $('#wna').is(':checked');
                        }
                    },
                    no_passport_santri: {
                        required: function () {
                            return $('#wna').is(':checked');
                        }
                    },
                    lembaga_pendidikan: {
                        required: true
                    },
                    nama_ayah: {
                        required: true
                    },
                    pekerjaan_ayah: {
                        required: true
                    },
                    nama_ibu: {
                        required: true
                    },
                    pekerjaan_ibu: {
                        required: true
                    },
                    no_hp: {
                        required: true,
                        minlength: 10,
                        number: true
                    },
                    foto_santri: {
                        extension: "jpg|jpeg|png"
                    }
                },
                messages: {
                    nama_santri: {
                        required: "Nama santri harus diisi",
                        minlength: "Nama minimal 3 karakter"
                    },
                    jenis_kelamin: {
                        required: "Jenis kelamin harus dipilih"
                    },
                    tempat_lahir: {
                        required: "Tempat lahir harus diisi"
                    },
                    tanggal_lahir: {
                        required: "Tanggal lahir harus diisi",
                        date: "Masukkan tanggal yang valid"
                    },
                    status_kewarganegaraan: {
                        required: "Status kewarganegaraan harus dipilih"
                    },
                    no_kk: {
                        required: "No KK harus diisi (khusus WNI)"
                    },
                    nik_santri: {
                        required: "NIK santri harus diisi (khusus WNI)",
                        minlength: "NIK harus 16 digit",
                        maxlength: "NIK harus 16 digit",
                        number: "Hanya boleh berisi angka"
                    },
                    provinsi_santri: {
                        required: "Provinsi harus dipilih (khusus WNI)"
                    },
                    kabupaten_santri: {
                        required: "Kabupaten harus dipilih (khusus WNI)"
                    },
                    kecamatan_santri: {
                        required: "Kecamatan harus dipilih (khusus WNI)"
                    },
                    desa_kelurahan_santri: {
                        required: "Desa/Kelurahan harus dipilih (khusus WNI)"
                    },
                    alamat_dusun: {
                        required: "Alamat dusun harus diisi (khusus WNI)"
                    },
                    alamat_tinggal_negara_asal: {
                        required: "Alamat negara asal harus diisi (khusus WNA)"
                    },
                    no_passport_santri: {
                        required: "No Passport harus diisi (khusus WNA)"
                    },
                    lembaga_pendidikan: {
                        required: "Lembaga pendidikan harus dipilih"
                    },
                    nama_ayah: {
                        required: "Nama ayah harus diisi"
                    },
                    pekerjaan_ayah: {
                        required: "Pekerjaan ayah harus diisi"
                    },
                    nama_ibu: {
                        required: "Nama ibu harus diisi"
                    },
                    pekerjaan_ibu: {
                        required: "Pekerjaan ibu harus diisi"
                    },
                    no_hp: {
                        required: "Nomor HP harus diisi",
                        minlength: "Nomor HP minimal 10 digit",
                        number: "Hanya boleh berisi angka"
                    },
                    foto_santri: {
                        extension: "Hanya file dengan format jpg, jpeg, atau png yang diperbolehkan"
                    }
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    if (element.closest('.col').length) {
                        element.closest('.col').append(error);
                    } else {
                        element.after(error);
                    }
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });
        });

        $(document).ready(function () {
            // Fungsi untuk mengatur semua field terkait kewarganegaraan
            function toggleCitizenshipFields() {
                const isWNA = $('#wna').is(':checked');

                // Field-field untuk WNI (akan di-disable jika WNA)
                const wniFields = [
                    '#no_kk',
                    '#nik_santri',
                    '#provinsi_santri',
                    '#kabupaten_santri',
                    '#kecamatan_santri',
                    '#desa_kelurahan_santri',
                    '#alamat_dusun'
                ];

                // Field-field untuk WNA (akan di-disable jika WNI)
                const wnaFields = [
                    '#alamat_tinggal_negara_asal',
                    '#no_passport_santri' // Saya menambahkan ini karena ada di HTML Anda
                ];

                // Atur field WNI
                $.each(wniFields, function (index, field) {
                    $(field).prop('disabled', isWNA);

                    if (isWNA) {
                        if ($(field).is('select')) {
                            $(field).val('').trigger('change');
                        } else {
                            $(field).val('');
                        }
                    }
                });

                // Atur field WNA
                $.each(wnaFields, function (index, field) {
                    $(field).prop('disabled', !isWNA);

                    if (!isWNA) {
                        if ($(field).is('select')) {
                            $(field).val('').trigger('change');
                        } else {
                            $(field).val('');
                        }
                    }
                });
            }

            // Jalankan saat halaman dimuat pertama kali
            toggleCitizenshipFields();

            // Jalankan saat radio button diubah
            $('input[name="status_kewarganegaraan"]').change(function () {
                toggleCitizenshipFields();
            });
        });




    </script>


    {{-- PDF VIEWER --}}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
    <script>
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';

        fetch("{{ route('download_bukti', $data_santri->id) }}")
            .then(response => response.blob())
            .then(blob => {
                const url = URL.createObjectURL(blob);
                pdfjsLib.getDocument(url).promise.then(function (pdf) {
                    pdf.getPage(1).then(function (page) {
                        const scale = 1.5;
                        const viewport = page.getViewport({ scale: scale });

                        const canvas = document.createElement('canvas');
                        const context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;

                        document.getElementById('pdf-viewer').appendChild(canvas);

                        page.render({
                            canvasContext: context,
                            viewport: viewport
                        });
                    });
                });
            });
    </script>



@endsection