@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">
                                    <a class="btn btn-success me-md-2 square" href="{{ route('home.auth') }}">Cek
                                        Pendaftaran</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </section>

    <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>
                </div>
            </div>
        </div>
    </section>

    <section class="mt-5 mb-5">
        <div class="container single-card card-style-one">
            <div class="card-content">
                <h4 class="card-title">
                    <h2 class="text-center" href="javascript:void(0)">Assalamualaikum Wr.Wb</h2>
                    <hr>
                </h4>
                <p class="mb-5 text text-center">
                <div class="alert alert-warning text-center" role="alert">
                    Isi Form dibawah ini dengan lengkap dan benar, jika sudah silahkan klik tombol
                    <strong>Submit</strong> untuk menyelesaikan pendaftaran santri baru.
                </div>
                </p>

                <div class="container form-validation">
                    <form class="form-valide" action="{{ route('home.register.store') }}" method="post" id="userForm"
                        novalidate enctype="multipart/form-data">
                        @csrf
                        @method('POST')

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label" for="val-email">Tanggal Masuk Santri<span
                                    class="text-danger">*</span></label>
                            <div class="col">
                                <p class="text fw-bold">
                                    {{ date('d-m-Y') }}
                                </p>
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label" for="nama_santri">Nama Santri <span
                                    class="text-danger">*</span></label>
                            <div class="col">
                                <input type="text" class="form-control @error('nama_santri') is-invalid @enderror"
                                    id="nama_santri" name="nama_santri" placeholder="Masukkan Nama Santri"
                                    value="{{ old('nama_santri') }}">
                                @error('nama_santri')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label" for="jenis_kelamin">Jenis Kelamin<span
                                    class="text-danger">*</span></label>
                            <div class="col">
                                <select class="form-select @error('jenis_kelamin') is-invalid @enderror" id="jenis_kelamin"
                                    name="jenis_kelamin">
                                    <option selected value="">Pilih Jenis Kelamin</option>
                                    <option value="Laki-laki" {{ old('jenis_kelamin') == 'Laki-laki' ? 'selected' : '' }}>
                                        Laki-laki</option>
                                    <option value="Perempuan" {{ old('jenis_kelamin') == 'Perempuan' ? 'selected' : '' }}>
                                        Perempuan</option>
                                </select>
                                @error('jenis_kelamin')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label" for="tempat_lahir">Tempat Lahir <span
                                    class="text-danger">*</span></label>
                            <div class="col">
                                <input type="text" class="form-control @error('tempat_lahir') is-invalid @enderror"
                                    id="tempat_lahir" name="tempat_lahir" placeholder="Masukkan Tempat Lahir"
                                    value="{{ old('tempat_lahir') }}">
                                @error('tempat_lahir')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label" for="tanggal_lahir">Tanggal Lahir <span
                                    class="text-danger">*</span></label>
                            <div class="col">
                                <input type="date" class="form-control @error('tanggal_lahir') is-invalid @enderror"
                                    id="tanggal_lahir" name="tanggal_lahir" value="{{ old('tanggal_lahir') }}">
                                @error('tanggal_lahir')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label" for="val-confirm-password">Status Kewarganegaraan</label>
                            <div class="col">
                                <div class="d-flex flex-column flex-md-row gap-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="status_kewarganegaraan" id="wni"
                                            value="WNI" {{ old('status_kewarganegaraan', 'WNI') == 'WNI' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="wni">
                                            WNI (Warga Negara Indonesia)
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="status_kewarganegaraan" id="wna"
                                            value="WNA" {{ old('status_kewarganegaraan') == 'WNA' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="wna">
                                            WNA (Warga Negara Asing) / Foreign Citizen
                                        </label>
                                    </div>
                                </div>
                                @error('status_kewarganegaraan')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- WNI Fields -->
                        <div class="wni-fields">
                            <div class="mb-3 row">
                                <label class="col-lg-4 col-form-label" for="no_kk">No KK Santri <span
                                        class="text-danger">*</span></label>
                                <div class="col">
                                    <input type="number" class="form-control @error('no_kk') is-invalid @enderror"
                                        id="no_kk" name="no_kk" placeholder="Masukkan No. KK Santri"
                                        value="{{ old('no_kk') }}">
                                    @error('no_kk')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <label class="col-lg-4 col-form-label" for="nik_santri">NIK Santri <span
                                        class="text-danger">*</span></label>
                                <div class="col">
                                    <input type="number" class="form-control @error('nik_santri') is-invalid @enderror"
                                        id="nik_santri" name="nik_santri" placeholder="Masukkan NIK Santri"
                                        value="{{ old('nik_santri') }}">
                                    @error('nik_santri')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- WNA Fields -->
                        <div class="wna-fields" style="display: none;">
                            <div class="mb-3 row">
                                <label class="col-lg-4 col-form-label" for="no_passport_santri">No Passport (Khusus
                                    WNA/Foreign
                                    Citizen)<span class="text-danger">*</span></label>
                                <div class="col">
                                    <input type="text"
                                        class="form-control @error('no_passport_santri') is-invalid @enderror"
                                        id="no_passport_santri" name="no_passport_santri"
                                        placeholder="Masukkan No Passport Santri" value="{{ old('no_passport_santri') }}">
                                    @error('no_passport_santri')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <label class="col-lg-4 col-form-label" for="alamat_tinggal_negara_asal">Alamat lengkap
                                    Negara Asal
                                    (khusus WNA/ Foreign Citizen)<span class="text-danger">*</span></label>
                                <div class="col">
                                    <input type="text"
                                        class="form-control @error('alamat_tinggal_negara_asal') is-invalid @enderror"
                                        id="alamat_tinggal_negara_asal" name="alamat_tinggal_negara_asal"
                                        placeholder="Masukkan Alamat Lengkap di negara asal"
                                        value="{{ old('alamat_tinggal_negara_asal') }}">
                                    @error('alamat_tinggal_negara_asal')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <hr>

                        <!-- Wilayah Indonesia Fields (hanya untuk WNI) -->
                        <div class="wni-fields">
                            <div class="mb-3 row">
                                <label class="col-lg-4 col-form-label">Provinsi</label>
                                <div class="col">
                                    <select class="form-select @error('provinsi_santri') is-invalid @enderror"
                                        id="provinsi_santri" name="provinsi_santri">
                                        <option value="">Pilih Provinsi</option>
                                    </select>
                                    @error('provinsi_santri')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <label class="col-lg-4 col-form-label">Kabupaten/Kota</label>
                                <div class="col">
                                    <select class="form-select @error('kabupaten_santri') is-invalid @enderror"
                                        id="kabupaten_santri" name="kabupaten_santri">
                                        <option value="">Pilih Kabupaten</option>
                                    </select>
                                    @error('kabupaten_santri')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <label class="col-lg-4 col-form-label">Kecamatan</label>
                                <div class="col">
                                    <select class="form-select @error('kecamatan_santri') is-invalid @enderror"
                                        id="kecamatan_santri" name="kecamatan_santri">
                                        <option value="">Pilih Kecamatan</option>
                                    </select>
                                    @error('kecamatan_santri')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <label class="col-lg-4 col-form-label">Desa/Kelurahan</label>
                                <div class="col">
                                    <select class="form-select @error('desa_kelurahan_santri') is-invalid @enderror"
                                        id="desa_kelurahan_santri" name="desa_kelurahan_santri">
                                        <option value="">Pilih Desa/Kelurahan</option>
                                    </select>
                                    @error('desa_kelurahan_santri')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <label class="col-lg-4 col-form-label">Dusun</label>
                                <div class="col">
                                    <input type="text" class="form-control @error('alamat_dusun') is-invalid @enderror"
                                        id="alamat_dusun" name="alamat_dusun" placeholder="Masukkan Dusun"
                                        value="{{ old('alamat_dusun') }}">
                                    @error('alamat_dusun')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <hr>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label">Lembaga Pendidikan yang dipilih<span
                                    class="text-danger">*</span></label>
                            <div class="col">
                                <select class="form-select @error('lembaga_pendidikan') is-invalid @enderror"
                                    id="lembaga_pendidikan" name="lembaga_pendidikan">
                                    <option value="">Pilih Lembaga Pendidikan</option>
                                    @foreach ($lembaga as $lg)
                                        <option value="{{ $lg->id_lembaga }}" {{ old('lembaga_pendidikan') == $lg->id_lembaga ? 'selected' : '' }}>
                                            {{ $lg->nama_lembaga }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('lembaga_pendidikan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <hr>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label">Nama Ayah <span class="text-danger">*</span></label>
                            <div class="col">
                                <input type="text" class="form-control @error('nama_ayah') is-invalid @enderror"
                                    id="nama_ayah" name="nama_ayah" placeholder="Masukkan Nama Ayah"
                                    value="{{ old('nama_ayah') }}">
                                @error('nama_ayah')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label">Pekerjaan Ayah <span class="text-danger">*</span></label>
                            <div class="col">
                                <input type="text" class="form-control @error('pekerjaan_ayah') is-invalid @enderror"
                                    id="pekerjaan_ayah" name="pekerjaan_ayah" placeholder="Masukkan Pekerjaan Ayah"
                                    value="{{ old('pekerjaan_ayah') }}">
                                @error('pekerjaan_ayah')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label">Nama Ibu <span class="text-danger">*</span></label>
                            <div class="col">
                                <input type="text" class="form-control @error('nama_ibu') is-invalid @enderror"
                                    id="nama_ibu" name="nama_ibu" placeholder="Masukkan Nama Ibu"
                                    value="{{ old('nama_ibu') }}">
                                @error('nama_ibu')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label">Pekerjaan Ibu <span class="text-danger">*</span></label>
                            <div class="col">
                                <input type="text" class="form-control @error('pekerjaan_ibu') is-invalid @enderror"
                                    id="pekerjaan_ibu" name="pekerjaan_ibu" placeholder="Masukkan Pekerjaan Ibu"
                                    value="{{ old('pekerjaan_ibu') }}">
                                @error('pekerjaan_ibu')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label">No HP<span class="text-danger">*</span></label>
                            <div class="col">
                                <input type="text" class="form-control @error('no_hp') is-invalid @enderror" id="no_hp"
                                    name="no_hp" placeholder="Masukkan No HP cth: 08123456xxx" value="{{ old('no_hp') }}">
                                @error('no_hp')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- File Upload dengan Preview -->
                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label">Foto Santri <span class="text-danger">*</span></label>
                            <div class="col">
                                <input type="file" class="form-control @error('foto_santri') is-invalid @enderror"
                                    id="foto_santri" name="foto_santri" accept="image/*">
                                @error('foto_santri')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div id="foto_santri_preview" class="mt-2"></div>
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-lg-4 col-form-label">Scan Kartu Keluarga<span
                                    class="text-danger">*</span></label>
                            <div class="col">
                                <input type="file" accept=".pdf,.jpg,.jpeg,.png"
                                    class="form-control @error('scan_kk') is-invalid @enderror" id="scan_kk" name="scan_kk">
                                @error('scan_kk')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div id="scan_kk_preview" class="mt-2"></div>
                            </div>
                        </div>

                        <div class="mb-3 row wni-fields">
                            <label class="col-lg-4 col-form-label">Scan Akta Kelahiran<span
                                    class="text-danger">*</span></label>
                            <div class="col">
                                <input type="file" accept=".pdf,.jpg,.jpeg,.png"
                                    class="form-control @error('scan_akta') is-invalid @enderror" id="scan_akta"
                                    name="scan_akta">
                                @error('scan_akta')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div id="scan_akta_preview" class="mt-2"></div>
                            </div>
                        </div>

                        <div class="mb-3 row wni-fields">
                            <label class="col-lg-4 col-form-label">Scan KTP Wali/Orang Tua<span
                                    class="text-danger">*</span></label>
                            <div class="col">
                                <input type="file" accept=".pdf,.jpg,.jpeg,.png"
                                    class="form-control @error('scan_ktp_ortu') is-invalid @enderror" id="scan_ktp_ortu"
                                    name="scan_ktp_ortu">
                                @error('scan_ktp_ortu')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div id="scan_ktp_ortu_preview" class="mt-2"></div>
                            </div>
                        </div>

                        <hr>

                        <div class="mb-3 row">
                            <div class="col-lg-8 ms-auto">
                                <button type="button" class="btn btn-success" onclick="confirmSubmit()">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Modal Preview -->
    <div class="modal fade" id="modalPreview" tabindex="-1" aria-labelledby="modalPreviewLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalPreviewLabel">Preview Lampiran</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <div id="previewContent">
                        <img id="previewImage" src="" alt="Preview"
                            style="max-width: 100%; max-height: 70vh; display: none;">
                        <iframe id="previewPdf" src=""
                            style="width: 100%; height: 70vh; border: none; display: none;"></iframe>
                        <div id="previewText" style="display: none;">File tidak dapat ditampilkan. Silakan download untuk
                            melihat file.</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <a id="downloadLink" href="#" class="btn btn-primary" download>
                        <i class="fas fa-download"></i> Download
                    </a>
                </div>
            </div>
        </div>
    </div>

    <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>
                        </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>
                    </div>
                </div>
            </div>
        </div>

        <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>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <script>
        // Preview file saat upload
        function previewFile(input, previewId) {
            const previewDiv = $('#' + previewId);
            previewDiv.empty();

            if (input.files && input.files[0]) {
                const file = input.files[0];
                const fileType = file.type;
                const fileUrl = URL.createObjectURL(file);

                const container = $('<div class="preview-container"></div>');

                if (fileType.startsWith('image/')) {
                    const img = $('<img>', {
                        src: fileUrl,
                        style: 'max-width: 150px; max-height: 150px; object-fit: cover; cursor: pointer; margin-right: 10px;',
                        click: function () { showPreview(fileUrl, file.name); }
                    });
                    container.append(img);
                } else if (fileType === 'application/pdf') {
                    const icon = $('<i>', {
                        class: 'fas fa-file-pdf fa-3x text-danger',
                        style: 'cursor: pointer; margin-right: 10px;',
                        click: function () { showPreview(fileUrl, file.name); }
                    });
                    container.append(icon);
                } else {
                    const text = $('<p>').text('File: ' + file.name);
                    container.append(text);
                }

                const removeBtn = $('<button>', {
                    type: 'button',
                    class: 'btn btn-sm btn-danger',
                    text: 'Hapus',
                    click: function () {
                        input.value = '';
                        previewDiv.empty();
                    }
                });
                container.append(removeBtn);

                previewDiv.append(container);
            }
        }

        // Show preview modal
        function showPreview(fileUrl, fileName) {
            $('#downloadLink').attr('href', fileUrl);

            const fileExtension = fileUrl.split('.').pop().toLowerCase();

            $('#previewImage').hide();
            $('#previewPdf').hide();
            $('#previewText').hide();

            if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(fileExtension)) {
                $('#previewImage').attr('src', fileUrl).show();
                $('#modalPreviewLabel').text('Preview: ' + fileName);
            } else if (fileExtension === 'pdf') {
                $('#previewPdf').attr('src', fileUrl).show();
                $('#modalPreviewLabel').text('Preview: ' + fileName);
            } else {
                $('#previewText').show();
                $('#modalPreviewLabel').text('Preview: ' + fileName + ' (Tidak dapat ditampilkan)');
            }

            $('#modalPreview').modal('show');
        }

        // Toggle fields based on citizenship
        function toggleCitizenshipFields() {
            const isWNA = $('#wna').is(':checked');

            if (isWNA) {
                $('.wni-fields').hide();
                $('.wna-fields').show();
                // Disable WNI fields
                $('#no_kk, #nik_santri, #provinsi_santri, #kabupaten_santri, #kecamatan_santri, #desa_kelurahan_santri, #alamat_dusun').prop('disabled', true);
                // Enable WNA fields
                $('#no_passport_santri, #alamat_tinggal_negara_asal').prop('disabled', false);
            } else {
                $('.wni-fields').show();
                $('.wna-fields').hide();
                // Enable WNI fields
                $('#no_kk, #nik_santri, #provinsi_santri, #kabupaten_santri, #kecamatan_santri, #desa_kelurahan_santri, #alamat_dusun').prop('disabled', false);
                // Disable WNA fields
                $('#no_passport_santri, #alamat_tinggal_negara_asal').prop('disabled', true);
            }
        }

        $(document).ready(function () {
            // Initialize toggle
            toggleCitizenshipFields();

            // Event listeners for radio buttons
            $('input[name="status_kewarganegaraan"]').change(function () {
                toggleCitizenshipFields();
            });

            // File preview events
            $('#foto_santri').on('change', function () {
                previewFile(this, 'foto_santri_preview');
            });

            $('#scan_kk').on('change', function () {
                previewFile(this, 'scan_kk_preview');
            });

            $('#scan_akta').on('change', function () {
                previewFile(this, 'scan_akta_preview');
            });

            $('#scan_ktp_ortu').on('change', function () {
                previewFile(this, 'scan_ktp_ortu_preview');
            });

            // 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="">Pilih Kabupaten</option>');
                $('#kecamatan_santri').empty().append('<option value="">Pilih Kecamatan</option>');
                $('#desa_kelurahan_santri').empty().append('<option value="">Pilih Desa/Kelurahan</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="">Pilih Kecamatan</option>');
                $('#desa_kelurahan_santri').empty().append('<option value="">Pilih Desa/Kelurahan</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="">Pilih Desa/Kelurahan</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>');
                        });
                    });
                }
            });
        });

        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>

@endsection