@extends('layout_dashboard.layout')
@section('title', ' Edit Data Santri Baru Sistem PSB Al-Qodiri Jember')
@section('content')
    <div class="content-body">

        <div class=" container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h4>Edit Data Santri</h4>
                            <hr>

                            <div class="form-validation">
                                <form class="form-valide" action="{{ route('update_santri', $santri->id) }}" method="post"
                                    id="userform" enctype="multipart/form-data">
                                    @csrf
                                    @method("PUT")

                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label" for="val-email">NIS<span
                                                class="text-danger">*</span></label>
                                        <div class="col-lg-6">
                                            <input type="text" class="form-control" disabled id="NIS" name="NIS"
                                                value="{{ $santri->nis_sipptren }}"
                                                placeholder="Bagian ini akan didapatkan dari sipptren">
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label" for="nama_santri">Nama Santri <span
                                                class="text-danger">*</span></label>
                                        <div class="col-lg-6">
                                            <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', $santri->nama_lengkap_santri) }}">
                                            @error('nama_santri')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label" for="tanggal_masuk_santri">Tanggal Masuk
                                            Santri <span class="text-danger">*</span></label>
                                        <div class="col-lg-6">
                                            <input type="date"
                                                class="form-control @error('tanggal_masuk_santri') is-invalid @enderror"
                                                readonly id="tanggal_masuk_santri" name="tanggal_masuk_santri"
                                                value="{{ old('tanggal_masuk_santri', $santri->tanggal_masuk ? $santri->tanggal_masuk->format('Y-m-d') : '') }}">
                                            @error('tanggal_masuk_santri')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label" for="jenis_kelamin">Jenis Kelamin<span
                                                class="text-danger">*</span></label>
                                        <div class="col-lg-6">
                                            <select class="form-control @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', $santri->jenis_kelamin) == 'Laki-laki' ? 'selected' : '' }}>Laki-laki
                                                </option>
                                                <option value="Perempuan" {{ old('jenis_kelamin', $santri->jenis_kelamin) == 'Perempuan' ? 'selected' : '' }}>Perempuan
                                                </option>
                                            </select>
                                            @error('jenis_kelamin')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label" for="tempat_lahir">Tempat Lahir <span
                                                class="text-danger">*</span></label>
                                        <div class="col-lg-6">
                                            <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', $santri->tempat_lahir) }}">
                                            @error('tempat_lahir')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label" for="tanggal_lahir">Tanggal Lahir <span
                                                class="text-danger">*</span></label>
                                        <div class="col-lg-6">
                                            <input type="date"
                                                class="form-control @error('tanggal_lahir') is-invalid @enderror"
                                                id="tanggal_lahir" name="tanggal_lahir"
                                                value="{{ old('tanggal_lahir', $santri->tanggal_lahir ? $santri->tanggal_lahir->format('Y-m-d') : '') }}">
                                            @error('tanggal_lahir')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label" for="status_kewarganegaraan">Status
                                            Kewarganegaraan<span class="text-danger">*</span></label>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label class="radio-inline mr-3">
                                                    <input id="wni" type="radio" name="status_kewarganegaraan" value="WNI"
                                                        {{ old('status_kewarganegaraan', $santri->status_kewarganegaraan ?? 'WNI') == 'WNI' ? 'checked' : '' }}> WNI (Warga Negara Indonesia)
                                                </label>
                                                <label class="radio-inline mr-3">
                                                    <input id="wna" type="radio" name="status_kewarganegaraan" value="WNA"
                                                        {{ old('status_kewarganegaraan', $santri->status_kewarganegaraan ?? '') == 'WNA' ? 'checked' : '' }}> WNA (Warga Negara Asing)/ Foreign
                                                    Citizen
                                                </label>
                                            </div>
                                            @error('status_kewarganegaraan')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- WNI Fields -->
                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label" for="no_kk">No KK Santri <span
                                                class="text-danger">*</span></label>
                                        <div class="col-lg-6">
                                            <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', $santri->no_kk) }}">
                                            @error('no_kk')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label" for="nik_santri">NIK Santri <span
                                                class="text-danger">*</span></label>
                                        <div class="col-lg-6">
                                            <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', $santri->nik_santri) }}">
                                            @error('nik_santri')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- WNA Fields -->
                                    <div class="form-group 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-lg-6">
                                            <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"
                                                value="{{ old('no_passport_santri', $santri->no_passport_santri) }}">
                                            @error('no_passport_santri')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <hr>

                                    <div class="form-group 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-lg-6">
                                            <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"
                                                value="{{ old('alamat_tinggal_negara_asal', $santri->alamat_tinggal_negara) }}">
                                            @error('alamat_tinggal_negara_asal')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- Wilayah Indonesia Fields -->
                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label">Provinsi</label>
                                        <div class="col-lg-6">
                                            <select class="form-control @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="form-group row">
                                        <label class="col-lg-4 col-form-label">Kabupaten/Kota</label>
                                        <div class="col-lg-6">
                                            <select class="form-control @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="form-group row">
                                        <label class="col-lg-4 col-form-label">Kecamatan</label>
                                        <div class="col-lg-6">
                                            <select class="form-control @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="form-group row">
                                        <label class="col-lg-4 col-form-label">Desa/Kelurahan</label>
                                        <div class="col-lg-6">
                                            <select
                                                class="form-control @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="form-group row">
                                        <label class="col-lg-4 col-form-label">Dusun</label>
                                        <div class="col-lg-6">
                                            <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', $santri->alamat_dusun) }}">
                                            @error('alamat_dusun')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <hr>

                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label">Lembaga Pendidikan yang dipilih<span
                                                class="text-danger">*</span></label>
                                        <div class="col-lg-6">
                                            <select class="form-control @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', $santri->pendidikan_dipilih) == $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="form-group row">
                                        <label class="col-lg-4 col-form-label">Nama Ayah <span
                                                class="text-danger">*</span></label>
                                        <div class="col-lg-6">
                                            <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', $santri->nama_ayah) }}">
                                            @error('nama_ayah')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label">Pekerjaan Ayah <span
                                                class="text-danger">*</span></label>
                                        <div class="col-lg-6">
                                            <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', $santri->pekerjaan_ayah) }}">
                                            @error('pekerjaan_ayah')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label">Nama Ibu <span
                                                class="text-danger">*</span></label>
                                        <div class="col-lg-6">
                                            <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', $santri->nama_ibu) }}">
                                            @error('nama_ibu')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label">Pekerjaan Ibu <span
                                                class="text-danger">*</span></label>
                                        <div class="col-lg-6">
                                            <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', $santri->pekerjaan_ibu) }}">
                                            @error('pekerjaan_ibu')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label">No HP<span
                                                class="text-danger">*</span></label>
                                        <div class="col-lg-6">
                                            <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', $santri->no_hp) }}">
                                            @error('no_hp')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label">Status Penyelesaian <span
                                                class="text-danger">*</span></label>
                                        <div class="col-lg-6">
                                            <select class="form-control @error('status_selesai') is-invalid @enderror"
                                                id="status_selesai" name="status_selesai">
                                                <option value="SUDAH SELESAI" {{ old('status_selesai', $santri->status_selesai) == 'SUDAH SELESAI' ? 'selected' : '' }}>Sudah
                                                    Selesai</option>
                                                <option value="BELUM SELESAI" {{ old('status_selesai', $santri->status_selesai) == 'BELUM SELESAI' ? 'selected' : '' }}>Belum
                                                    Selesai</option>
                                            </select>
                                            @error('status_selesai')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- Foto Santri dengan preview -->
                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label">Foto Santri</label>
                                        <div class="col-lg-6">
                                            <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">
                                                @if($santri->foto)
                                                    <div class="preview-container">
                                                        <img src="{{ asset('storage/' . $santri->foto) }}"
                                                            style="max-width: 200px; max-height: 200px; object-fit: cover; cursor: pointer;"
                                                            onclick="showPreview('{{ asset('storage/' . $santri->foto) }}', 'Foto Santri')">
                                                        <button type="button" class="btn btn-sm btn-danger mt-1"
                                                            onclick="removeFile('foto_santri', this)">Hapus</button>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Scan KK dengan preview -->
                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label">Scan Kartu Keluarga</label>
                                        <div class="col-lg-6">
                                            <input type="file" class="form-control @error('scan_kk') is-invalid @enderror"
                                                id="scan_kk" name="scan_kk" accept=".pdf,.jpg,.jpeg,.png">
                                            @error('scan_kk')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <div id="scan_kk_preview" class="mt-2">
                                                @if($santri->scan_kk)
                                                    <div class="preview-container">
                                                        @if(in_array(pathinfo($santri->scan_kk, PATHINFO_EXTENSION), ['jpg', 'jpeg', 'png', 'gif']))
                                                            <img src="{{ asset('storage/' . $santri->scan_kk) }}"
                                                                style="max-width: 200px; max-height: 200px; object-fit: cover; cursor: pointer;"
                                                                onclick="showPreview('{{ asset('storage/' . $santri->scan_kk) }}', 'Kartu Keluarga')">
                                                        @else
                                                            <i class="fas fa-file-pdf fa-3x text-danger" style="cursor: pointer;"
                                                                onclick="showPreview('{{ asset('storage/' . $santri->scan_kk) }}', 'Kartu Keluarga')"></i>
                                                        @endif
                                                        <button type="button" class="btn btn-sm btn-danger mt-1"
                                                            onclick="removeFile('scan_kk', this)">Hapus</button>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Scan Akta (hanya untuk WNI) -->
                                    <div class="form-group row wni-field">
                                        <label class="col-lg-4 col-form-label">Scan Akta Kelahiran</label>
                                        <div class="col-lg-6">
                                            <input type="file" class="form-control @error('scan_akta') is-invalid @enderror"
                                                id="scan_akta" name="scan_akta" accept=".pdf,.jpg,.jpeg,.png">
                                            @error('scan_akta')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <div id="scan_akta_preview" class="mt-2">
                                                @if($santri->akta_lahir)
                                                    <div class="preview-container">
                                                        @if(in_array(pathinfo($santri->akta_lahir, PATHINFO_EXTENSION), ['jpg', 'jpeg', 'png', 'gif']))
                                                            <img src="{{ asset('storage/' . $santri->akta_lahir) }}"
                                                                style="max-width: 200px; max-height: 200px; object-fit: cover; cursor: pointer;"
                                                                onclick="showPreview('{{ asset('storage/' . $santri->akta_lahir) }}', 'Akta Kelahiran')">
                                                        @else
                                                            <i class="fas fa-file-pdf fa-3x text-danger" style="cursor: pointer;"
                                                                onclick="showPreview('{{ asset('storage/' . $santri->akta_lahir) }}', 'Akta Kelahiran')"></i>
                                                        @endif
                                                        <button type="button" class="btn btn-sm btn-danger mt-1"
                                                            onclick="removeFile('scan_akta', this)">Hapus</button>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Scan KTP (hanya untuk WNI) -->
                                    <div class="form-group row wni-field">
                                        <label class="col-lg-4 col-form-label">Scan KTP Wali/Orangtua</label>
                                        <div class="col-lg-6">
                                            <input type="file" class="form-control @error('scan_ktp') is-invalid @enderror"
                                                id="scan_ktp" name="scan_ktp" accept=".pdf,.jpg,.jpeg,.png">
                                            @error('scan_ktp')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <div id="scan_ktp_preview" class="mt-2">
                                                @if($santri->ktp_ortu)
                                                    <div class="preview-container">
                                                        @if(in_array(pathinfo($santri->ktp_ortu, PATHINFO_EXTENSION), ['jpg', 'jpeg', 'png', 'gif']))
                                                            <img src="{{ asset('storage/' . $santri->ktp_ortu) }}"
                                                                style="max-width: 200px; max-height: 200px; object-fit: cover; cursor: pointer;"
                                                                onclick="showPreview('{{ asset('storage/' . $santri->ktp_ortu) }}', 'KTP Wali/Orangtua')">
                                                        @else
                                                            <i class="fas fa-file-pdf fa-3x text-danger" style="cursor: pointer;"
                                                                onclick="showPreview('{{ asset('storage/' . $santri->ktp_ortu) }}', 'KTP Wali/Orangtua')"></i>
                                                        @endif
                                                        <button type="button" class="btn btn-sm btn-danger mt-1"
                                                            onclick="removeFile('scan_ktp', this)">Hapus</button>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <hr>

                                    <div class="form-group row">
                                        <div class="col-lg-8 ml-auto">
                                            <button type="submit" class="btn btn-primary">Submit</button>
                                            <a href="{{ route('data_santri') }}" class="btn btn-secondary">Batal</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- #/ container -->
    </div>

    <!-- 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>

    <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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></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: 200px; max-height: 200px; object-fit: cover; cursor: pointer;',
                        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;',
                        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 mt-1',
                    text: 'Hapus',
                    click: function () { removeFilePreview(input, previewId); }
                });
                container.append(removeBtn);

                previewDiv.append(container);
            }
        }

        function removeFilePreview(input, previewId) {
            input.value = '';
            $('#' + previewId).empty();
        }

        function removeFile(fileName, btn) {
            $(btn).closest('.preview-container').remove();
            $('#' + fileName).val('');
        }

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

        // Event listeners untuk file input
        $(document).ready(function () {
            $('#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').on('change', function () {
                previewFile(this, 'scan_ktp_preview');
            });

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

                const wniFields = ['#no_kk', '#nik_santri', '#provinsi_santri', '#kabupaten_santri', '#kecamatan_santri', '#desa_kelurahan_santri', '#alamat_dusun'];
                const wnaFields = ['#no_passport_santri', '#alamat_tinggal_negara_asal'];
                const wniFileFields = ['.wni-field'];

                wniFields.forEach(field => {
                    $(field).prop('disabled', isWNA);
                    if (isWNA) {
                        if ($(field).is('select')) {
                            $(field).val('').trigger('change');
                        } else {
                            $(field).val('');
                        }
                    }
                });

                wnaFields.forEach(field => {
                    $(field).prop('disabled', !isWNA);
                    if (!isWNA) {
                        $(field).val('');
                    }
                });

                wniFileFields.forEach(selector => {
                    if (isWNA) {
                        $(selector).hide();
                    } else {
                        $(selector).show();
                    }
                });
            }

            toggleCitizenshipFields();

            $('input[name="status_kewarganegaraan"]').change(function () {
                toggleCitizenshipFields();
            });

            // Load wilayah data
            $.get('/get-provinces', function (data) {
                $.each(data, function (key, value) {
                    var selected = (value.code == '{{ $santri->alamat_provinsi }}') ? 'selected' : '';
                    $('#provinsi_santri').append('<option value="' + value.code + '" ' + selected + '>' + value.name + '</option>');
                });
                if ('{{ $santri->alamat_provinsi }}') {
                    $('#provinsi_santri').trigger('change');
                }
            });

            $('#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) {
                            var selected = (value.code == '{{ $santri->alamat_kabupaten }}') ? 'selected' : '';
                            $('#kabupaten_santri').append('<option value="' + value.code + '" ' + selected + '>' + value.name + '</option>');
                        });
                        if ('{{ $santri->alamat_kabupaten }}') {
                            $('#kabupaten_santri').trigger('change');
                        }
                    });
                }
            });

            $('#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) {
                            var selected = (value.code == '{{ $santri->alamat_kecamatan }}') ? 'selected' : '';
                            $('#kecamatan_santri').append('<option value="' + value.code + '" ' + selected + '>' + value.name + '</option>');
                        });
                        if ('{{ $santri->alamat_kecamatan }}') {
                            $('#kecamatan_santri').trigger('change');
                        }
                    });
                }
            });

            $('#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) {
                            var selected = (value.code == '{{ $santri->alamat_desa }}') ? 'selected' : '';
                            $('#desa_kelurahan_santri').append('<option value="' + value.code + '" ' + selected + '>' + value.name + '</option>');
                        });
                    });
                }
            });
        });
    </script>

@endsection