@extends('layouts.app')
@section('nosidebar', true)

@section('header-bg', asset('img/bg-beasiswa.jpg'))
@section('title', 'Form Pengajuan Beasiswa')

<style>
    .btn-add-transkrip,
    .btn-remove-transkrip {
        height: 45px;
        border-radius: 0 0.375rem 0.375rem 0;
        min-width: 45px;
    }

    .transkrip-item .input-group {
        margin-bottom: 0;
    }
</style>

@section('content')
    <div class="container mt-5" style="margin-top: 230px; position: relative; z-index: 1;">
        <!-- Header Atas -->
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="d-flex justify-content-between align-items-center px-5 py-4 shadow-sm mb-5"
                    style="background-color: #ffffff;
                    border-radius: 24px 24px 0 0;
                    margin: 0 -100px;
                    padding: 1.2rem 100px;">
                    <div class="d-flex align-items-center">
                        <div class="me-2">
                            <img src="{{ asset('img/logo.png') }}" alt="Logo" height="30">
                        </div>
                        <span class="fw-bold text-teal-700">MSJ Beasiswa</span>
                    </div>
                    <div class="fw-bold" style="color: #028284;">PT MULTI SPUNINDO JAYA Tbk</div>
                </div>
            </div>
        </div>

        <!-- Card Form -->
        <div class="row justify-content-center mt-4">
            <div class="col-lg-12">
                {{-- <div class="card shadow-lg border-0 rounded-4" style="background-color: #cae9e93b"> --}}
                <div class="card shadow-lg border-0 rounded-4"
                    style="background-color: #cae9e93b;
                                    margin-left: -100px;
                                    margin-right: -100px;
                                    border-radius: 24px;">
                    <div class="card-body p-5">
                        <!-- Judul -->
                        <div class="text-center mb-4">
                            <h5 class="fw-bold text-dark">PENGAJUAN TUNJANGAN BIAYA PENDIDIKAN</h5>
                        </div>

                        <!-- Periode Info -->
                        <div class="card border-0 shadow-sm mb-4"
                            style="background: linear-gradient(135deg, #028284 0%, #028284 100%);">
                            <div class="card-body py-3">
                                <div class="text-center text-white ">
                                    <h6 class="fw-bold mb-1" style="color:#fff !important;">{{ $periode->nama_periode }}
                                    </h6>
                                    <p class="mb-0" style="font-size: 0.9rem; ">
                                        Periode: {{ \Carbon\Carbon::parse($periode->tanggal_mulai)->format('d/m/Y') }}
                                        - {{ \Carbon\Carbon::parse($periode->tanggal_berakhir)->format('d/m/Y') }}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <form id="formBeasiswa" enctype="multipart/form-data" novalidate>
                            @csrf
                            <input type="hidden" name="id_periode" value="{{ $periode->id_periode }}">

                            <!-- Wajib Diisi Notice -->
                            <div class="mb-4">
                                <p class="text-danger mb-2 fw-semibold">(*) Wajib Diisi</p>
                            </div>
                            <div class="mb-4">
                                <div
                                    class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 p-3 bg-white border rounded-3 shadow-sm">
                                    <div class="d-flex align-items-start gap-2">
                                        <i class="fas fa-info-circle text-success mt-1"></i>
                                        <div>
                                            <div class="fw-semibold text-dark">
                                                Ambil data pengajuan sebelumnya
                                            </div>
                                            <small class="text-muted">
                                                Pilih karyawan terlebih dahulu, lalu klik tombol ini untuk menyalin data
                                                terakhir.
                                                Lampiran tetap wajib diunggah ulang.
                                            </small>
                                        </div>
                                    </div>

                                    <button type="button" class="btn btn-outline-success" id="btnAmbilHistory">
                                        <i class="fas fa-history me-1"></i> Ambil History
                                    </button>
                                </div>
                            </div>
                            <!-- Informasi Orang Tua/Wali Section -->
                            <div class="card border-0 shadow-sm mb-4" style="background: white;">
                                <div class="card-header border-0 py-3" style="background-color: #bbd6d4ff;">
                                    <h6 class="mb-0 fw-bold text-black">
                                        <i class="fas fa-info-circle me-2"></i>Informasi Orang Tua/Wali
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <!-- Nama Karyawan -->
                                            <div class="mb-3">
                                                <label class="form-label fw-semibold text-dark">Nama Karyawan <span
                                                        class="text-danger">*</span></label>
                                                <div class="input-group">
                                                    <input type="hidden" name="nik" id="nik" required>
                                                    <input type="text" class="form-control border-2" id="nama_karyawan"
                                                        name="nama_karyawan" placeholder="Pilih Nama Karyawan" readonly
                                                        required>
                                                    <button class="input-group-text bg-primary text-light" type="button"
                                                        data-bs-toggle="modal" data-bs-target="#karyawanModal"
                                                        style="cursor: pointer; border-radius:0;">
                                                        <i class="fas fa-search"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <!-- Bagian (Auto-filled) -->
                                            <div class="mb-3">
                                                <label class="form-label fw-semibold text-dark">Bagian</label>
                                                <input type="text" id="bagian" name="bagian"
                                                    class="form-control border-2" readonly
                                                    style="border-color: #dee2e6; height: 45px;">
                                            </div>
                                            <!-- KTP -->
                                            <div class="mb-3">
                                                <label class="form-label fw-semibold text-dark">KTP</label>
                                                <input type="text" id="ktp" name="ktp"
                                                    class="form-control border-2" readonly
                                                    style="border-color: #dee2e6; height: 45px;">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <!-- Department (Auto-filled) -->
                                            <div class="mb-3">
                                                <label class="form-label fw-semibold text-dark">Department</label>
                                                <input type="text" id="department" name="department"
                                                    class="form-control border-2" readonly
                                                    style="border-color: #dee2e6; height: 45px;">
                                            </div>
                                            <!-- Nomor Telepon -->
                                            <div class="mb-3">
                                                <label class="form-label fw-semibold text-dark">Nomor Telepon</label>
                                                <input type="text" id="no_telp" name="nomor_telepon"
                                                    class="form-control border-2" maxlength="15"
                                                    placeholder="Masukkan nomor telepon" required style="height: 45px;"
                                                    inputmode="numeric"
                                                    oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                                <small class="text-muted">Hanya boleh angka (0–9)</small>
                                            </div>
                                            <!-- Alamat -->
                                            <div class="mb-3">
                                                    <label class="form-label fw-semibold text-dark">Alamat</label>
                                                    <textarea id="alamat" name="alamat" class="form-control border-2" placeholder="Masukkan alamat lengkap" required
                                                        style="height: 130px; resize:none; text-transform: uppercase;"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Informasi Anak Section -->
                            <div class="card border-0 shadow-sm mb-4" style="background: white;">
                                <div class="card-header border-0 py-3" style="background-color: #bbd6d4ff;">
                                    <h6 class="mb-0 fw-bold text-black">
                                        <i class="fas fa-child me-2"></i>Informasi Anak
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <!--Nama Anak -->
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label fw-semibold text-dark">Nama Anak <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" class="form-control border-2" name="nama_anak"
                                                placeholder="Cth. Jenny Doe" required
                                                style="border-color: #dee2e6; height: 45px;">
                                            <small class="text-muted">*Sesuai KK</small>
                                        </div>

                                        <!-- Nama Anak Sesuai Rekening -->
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label fw-semibold text-dark">Nama Anak Sesuai Rekening <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" class="form-control border-2"
                                                name="nama_anak_sesuai_rekening" placeholder="Cth. Jenny Doe" required
                                                style="border-color: #dee2e6; height: 45px;">
                                            <small class="text-muted">*Sesuai Buku Rekening Anak</small>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <!-- Nama Bank -->
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label fw-semibold text-dark">Nama Bank <span
                                                    class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="text" name="nama_bank" id="nama_bank"
                                                    class="form-control border-2" placeholder="Pilih bank" readonly>
                                                <input type="hidden" name="id_bank" id="id_bank">
                                                <button class="input-group-text bg-primary text-light" type="button"
                                                    data-bs-toggle="modal" data-bs-target="#bankModal"
                                                    style="cursor: pointer; border-radius:0;">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                            </div>
                                            <small class="text-muted">*Sesuai Nama Bank Anak</small>
                                        </div>

                                        <!-- Nomor Rekening Anak -->
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label fw-semibold text-dark">Nomor Rekening Anak <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" class="form-control border-2"
                                                name="nomor_rekening_anak" placeholder="Masukkan nomor rekening" required>
                                            <small id="info-digit-rekening" class="text-muted mt-1"
                                                style="display:block;">
                                                Pilih bank terlebih dahulu
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Pendidikan Anak Section -->
                            <div class="card border-0 shadow-sm mb-4" style="background: white;">
                                <div class="card-header border-0 py-3" style="background-color: #bbd6d4ff;">
                                    <h6 class="mb-0 fw-bold text-black">
                                        <i class="fas fa-graduation-cap me-2"></i>Pendidikan Anak
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <!-- Jenjang Pendidikan -->
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label fw-semibold text-dark">Jenis Pendidikan <span
                                                    class="text-danger">*</span></label>
                                            <div class="d-flex gap-3 mt-2">
                                                @foreach ($jenis_pendidikan as $value => $name)
                                                    <div class="form-check form-check">
                                                        <input class="form-check-input" type="radio"
                                                            name="jenis_pendidikan" id="jenis_{{ $value }}"
                                                            value="{{ $value }}" required>
                                                        <label class="form-check-label"
                                                            for="jenis_{{ $value }}">{{ $name }}</label>
                                                    </div>
                                                @endforeach
                                            </div>
                                            @error('jenis_pendidikan')
                                                <small class="text-danger d-block mt-1">{{ $message }}</small>
                                            @enderror
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label fw-semibold text-dark">Jenjang Pendidikan <span
                                                    class="text-danger">*</span></label>
                                            <select class="form-select border-2" name="jenjang_pendidikan" required
                                                style="border-color: #dee2e6; height: 45px;">
                                                <option value="">Pilih Jenjang Pendidikan</option>
                                                @foreach ($jenjang_pendidikan as $value => $name)
                                                    <option value="{{ $value }}">{{ $name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label fw-semibold text-dark">Kelas / Semester bagi Mahasiswa
                                                <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control border-2" name="kelas"
                                                placeholder="Cth. 12" required
                                                style="border-color: #dee2e6; height: 45px;">
                                        </div>

                                        <!-- Jenis Semester -->
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label fw-semibold text-dark">Jenis Semester <span
                                                    class="text-danger">*</span></label>
                                            <select class="form-select border-2" name="jenis_semester" required
                                                style="border-color: #dee2e6; height: 45px;">
                                                <option value="">Pilih Jenis Semester</option>
                                                @foreach ($semester as $value => $name)
                                                    <option value="{{ $value }}">{{ $name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <!--  Universitas/Sekolah -->
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label fw-semibold text-dark">Universitas/Sekolah <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" class="form-control border-2" name="nama_sekolah_univ"
                                                placeholder="Cth. SDN 1 SIDOARJO" required
                                                style="border-color: #dee2e6; height: 45px;">
                                            <small class="text-muted">
                                                Masukkan Nama Lengkap Sekolah/Universitas<br>
                                            </small>
                                        </div>

                                        <!-- Indeks Prestasi/Nilai Rapor -->
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label fw-semibold text-dark">Indeks prestasi/Nilai rapor
                                                <span class="text-danger">*</span></label>
                                            <input type="number" class="form-control border-2" name="indeks_prestasi"
                                                id="indeks_prestasi" placeholder="Cth. 92.8" step="0.01"
                                                min="0" required style="border-color: #dee2e6; height: 45px;">
                                        </div>
                                    </div>


                                    <!-- Nominal Beasiswa -->
                                    <div class="row">
                                        <div class="col-12 mb-3">
                                            <label class="form-label fw-semibold text-dark">
                                                Nominal Pendidikan <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" class="form-control border-2" name="nominal_beasiswa"
                                                id="nominal_beasiswa" placeholder="Akan terisi otomatis untuk negeri"
                                                required readonly
                                                style="border-color: #dee2e6; height: 45px; background-color: #f8f9fa;"
                                                inputmode="numeric">
                                            <small class="text-muted">
                                                <strong>Ketentuan:</strong><br>
                                                • <strong>Negeri:</strong> Nominal beasiswa akan muncul otomatis ketika
                                                meilih jenjang pendidikan<br>
                                                • <strong>Negeri:</strong> SD: Rp 1.000.000 | SMP: Rp 1.500.000 | SMA: Rp
                                                2.000.000 | D1-S1: Rp 3.000.000<br>
                                                • <strong>Swasta:</strong> Masukkan nominal SPP/UKT (SD–SMA: per bulan,
                                                D1–S1: per semester)<br>
                                                • <strong>Swasta:</strong> Nominal beasiswa: SD–SMA = 6× SPP bulanan, D1–S1
                                                = 1× SPP semester<br>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Berkas Section -->
                            <div class="card border-0 shadow-sm mb-4" style="background: white;">
                                <div class="card-header border-0 py-3" style="background-color: #bbd6d4ff;">
                                    <h6 class="mb-0 fw-bold text-black">
                                        <i class="fas fa-folder me-2"></i>Berkas
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <!-- KK -->
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label fw-semibold text-dark">KK <span
                                                    class="text-danger">*</span></label>
                                            <input type="file" class="form-control border-2" name="kk"
                                                accept=".pdf,.jpg,.jpeg,.png" required
                                                style="border-color: #dee2e6; height: 45px; padding-top: 10px;">
                                            <small style="color:#23614e;">Maksimal Size : 4096 KB<br>Format File :
                                                pdf,jpg,jpeg,png</small>
                                        </div>

                                        <!-- Halaman Depan Buku Tabungan Anak -->
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label fw-semibold text-dark">Halaman Depan Buku Tabungan
                                                Anak <span class="text-danger">*</span></label>
                                            <input type="file" class="form-control border-2"
                                                name="halaman_depan_buku_tabungan" accept=".pdf,.jpg,.jpeg,.png" required
                                                style="border-color: #dee2e6; height: 45px; padding-top: 10px;">
                                            <small style="color:#23614e;">Maksimal Size : 4096 KB<br>Format File :
                                                pdf,jpg,jpeg,png</small>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <!-- Surat Keterangan Aktif Sekolah/Universitas -->
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label fw-semibold text-dark">Surat Keterangan Aktif
                                                Sekolah/Universitas <span class="text-danger">*</span></label>
                                            <input type="file" class="form-control border-2"
                                                name="surat_keterangan_aktif" accept=".pdf,.jpg,.jpeg,.png" required
                                                style="border-color: #dee2e6; height: 45px; padding-top: 10px;">
                                            <small style="color:#23614e;">Maksimal Size : 4096 KB<br>Format File :
                                                pdf,jpg,jpeg,png</small>
                                        </div>

                                        <!--Rapor/Transkrip Nilai -->
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label fw-semibold text-dark">Transkrip Nilai (Dokumen dengan
                                                legalisir stempel basah) <span class="text-danger">*</span></label>
                                            <div id="transkripWrapper">
                                                <div class="transkrip-item mb-2">
                                                    <div class="input-group">
                                                        <input type="file" class="form-control border-2"
                                                            name="rapor_transkrip_nilai[]" accept=".pdf,.jpg,.jpeg,.png"
                                                            required
                                                            style="border-color: #dee2e6; height: 45px; padding-top: 10px;">
                                                        <button type="button" class="btn btn-success btn-add-transkrip"
                                                            title="Tambah file">
                                                            <i class="fas fa-plus"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <small style="color:#23614e;">Maksimal Size : 4096 KB per file<br>Format File :
                                                pdf,jpg,jpeg,png</small>
                                        </div>
                                    </div>

                                    <!--Bukti Pembayaran SPP -->
                                    <div class="row" id="buktiPembayaranWrapper"></div>
                                    {{-- <div class="col-md-6 mb-3">
                                        <label class="form-label fw-semibold text-dark">Bukti Pembayaran SPP 1 Semester (6 bulan) <span class="text-danger">*</span></label>
                                        <input type="file" class="form-control border-2" name="bukti_pembayaran_spp" accept=".pdf" required
                                                style="border-color: #dee2e6; height: 45px; padding-top: 10px;">
                                        <small style="color:#23614e;">Maksimal Size : 4096 KB<br>Format File : .pdf</small>
                                    </div> --}}
                                </div>
                            </div>

                            <!-- Verifikasi Email Section -->
                            <div class="card border-0 shadow-sm mb-4" style="background: white;">
                                <div class="card-header border-0 py-3" style="background-color: #bbd6d4ff;">
                                    <h6 class="mb-0 fw-bold text-black">
                                        <i class="fas fa-envelope me-2"></i>Verifikasi Email
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        {{-- Input Email --}}
                                        <div class="col-md-8 mb-3">
                                            <label class="form-label fw-semibold text-dark">
                                                Email <span class="text-danger">*</span>
                                            </label>
                                            <input type="email" id="email_karyawan" name="email_karyawan"
                                                class="form-control border-2" required>
                                        </div>

                                        {{-- Tombol Kirim OTP --}}
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label invisible">.</label>
                                            <button type="button" class="btn btn-outline-primary w-100" id="btnKirimOTP"
                                                style="height: 45px;">
                                                <i class="fas fa-paper-plane me-1"></i>Kirim OTP
                                            </button>
                                        </div>

                                        {{-- Input OTP --}}
                                        <div class="col-md-8 mb-3">
                                            <label class="form-label fw-semibold text-dark">
                                                Masukkan Kode OTP <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" class="form-control border-2" name="otp"
                                                id="otp" placeholder="Masukkan kode OTP yang dikirim ke email"
                                                required style="border-color: #dee2e6; height: 45px;">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Submit Button -->
                            <div class="text-center mt-4">
                                <button type="submit" class="btn btn-lg px-5 py-3 text-white fw-bold shadow-lg w-100"
                                    style="background: linear-gradient(135deg, #028284 0%, #028284 100%);
                                        border: none;
                                        border-radius: 10px;">
                                    <i class="fas fa-paper-plane me-2"></i>Kirim Pengajuan
                                </button>
                            </div>
                        </form>
                        {{-- @endif --}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Karyawan --}}
    <div class="modal fade" id="karyawanModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">List Karyawan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body table-responsive">
                    <table class="table table-hover display" id="list_karyawan">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th width="20px">Action</th>
                                <th>NIK</th>
                                <th>KTP</th>
                                <th>Nama</th>
                                <th>Department</th>
                                <th>Bagian</th>
                                <th>Position</th>
                                <th>Email</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($karyawan as $kar)
                                <tr>
                                    <td width="20px">
                                        <button type="button" class="btn btn-sm btn-primary select-karyawan"
                                            data-nik="{{ $kar->nik }}" data-nama="{{ $kar->name }}"
                                            data-ktp="{{ $kar->ktp ?? 'Unknown' }}"
                                            data-dept="{{ $kar->department_name ?? 'Unknown' }}"
                                            data-bag="{{ $kar->bagian ?? 'Unknown' }}"
                                            data-telp="{{ $kar->no_telp ?? '' }}" data-alamat="{{ $kar->alamat ?? '' }}"
                                            data-email="{{ $kar->email ?? '' }}" data-bs-dismiss="modal">
                                            <i class="bi bi-check-circle me-1"></i> Select
                                        </button>

                                    </td>
                                    <td>{{ $kar->nik }}</td>
                                    <td>{{ $kar->ktp ?? '_' }}</td>
                                    <td>{{ $kar->name }}</td>
                                    <td>{{ $kar->department_name ?? '_' }}</td>
                                    <td>{{ $kar->bagian ?? '-' }}</td>
                                    <td>{{ $kar->position ?? '-' }}</td>
                                    <td>{{ $kar->email ?? '-' }}</td>
                                    <td>{{ $kar->status ?? '-' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Bank -->
    <div class="modal fade" id="bankModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">List Bank</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body table-responsive">
                    <table class="table table-hover display" id="list_bank">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th width="20px">Action</th>
                                <th>Nama Bank</th>
                                <th>Jumlah Digit Rekening</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($bank as $b)
                                <tr>
                                    <td width="20px">
                                        <span class="btn badge bg-primary"
                                            onclick="select_bank('{{ $b->id_bank }}', '{{ $b->alias_bank }}', '{{ $b->jumlah_digit_rek }}')">
                                            <i class="bi bi-check-circle me-1"></i> Select
                                        </span>
                                    </td>
                                    <td>{{ $b->alias_bank }}</td>
                                    <td>{{ $b->jumlah_digit_rek }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal History Beasiswa -->
    <div class="modal fade" id="historyModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pilih History Pengajuan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body table-responsive">
                    <table class="table table-hover align-middle">
                        <thead style="background-color: #00b7bd4f;">
                            <tr>
                                <th>Action</th>
                                <th>Periode</th>
                                <th>Nama Anak</th>
                                <th>Jenjang</th>
                                <th>Jenis</th>
                                <th>Sekolah/Universitas</th>
                                <th>Nominal</th>
                                <th>Tanggal Pengajuan</th>
                            </tr>
                        </thead>
                        <tbody id="historyTableBody">
                            <tr>
                                <td colspan="8" class="text-center text-muted">
                                    Belum ada data history
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="modal-footer">
                    <small class="text-muted me-auto">
                        Pilih salah satu history untuk disalin ke form. Lampiran tetap wajib
                        diunggah ulang.
                    </small>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading Modal -->
    <div class="modal fade" id="loadingModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-body text-center py-5">
                    <div class="spinner-border text-success mb-3" role="status" style="width: 3rem; height: 3rem;">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <h6 class="fw-bold text-dark">Mengirim pengajuan beasiswa...</h6>
                    <p class="text-muted mb-0">Mohon tunggu sebentar</p>
                </div>
            </div>
        </div>
    </div>

    <button type="button" id="btnPanduan" class="btn-panduan-float" title="Panduan Pengisian Form">
        <i class="fas fa-book"></i>
    </button>

    <script>
        let historyBeasiswaList = [];

        function escapeHtml(value) {
            return $('<div>').text(value ?? '').html();
        }

        function formatRupiah(value) {
            let angka = parseInt(value || 0);
            return 'Rp ' + angka.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
        }

        function normalizeNamaAnak(nama) {
            return (nama || '').toString().trim().toUpperCase();
        }

        function ambilHistoryTerbaruPerAnak(histories) {
            let grouped = {};

            histories.forEach(function(h) {
                let namaAnak = normalizeNamaAnak(h.nama_anak_kk);

                if (!namaAnak) return;

                // Karena controller sudah orderByDesc created_at,
                // data pertama adalah history terbaru untuk anak tersebut.
                if (!grouped[namaAnak]) {
                    grouped[namaAnak] = h;
                }
            });

            return Object.values(grouped);
        }

        function triggerNativeChange(el) {
            if (!el) return;
            el.dispatchEvent(new Event('change', {
                bubbles: true
            }));
        }

        function isiFormDariHistory(h) {
            // Orang tua / wali
            if (h.notelp_karyawan) {
                $('#no_telp').val(h.notelp_karyawan);
            }

            if (h.alamat_karyawan) {
                $('#alamat').val(h.alamat_karyawan).trigger('input');
            }

            if (h.email_karyawan) {
                $('#email_karyawan').val(h.email_karyawan);
            }

            // Anak
            $('input[name="nama_anak"]').val(h.nama_anak_kk || '').trigger('input');
            $('input[name="nama_anak_sesuai_rekening"]').val(h.nama_anak_rekening || '').trigger('input');

            // Bank
            $('#id_bank').val(h.id_bank || '');
            $('#nama_bank').val(h.alias_bank || '');

            let noRekInput = $('input[name="nomor_rekening_anak"]');
            noRekInput.val(h.no_rek || '');

            if (h.jumlah_digit_rek) {
                noRekInput
                    .attr('maxlength', h.jumlah_digit_rek)
                    .attr('minlength', h.jumlah_digit_rek);

                $('#info-digit-rekening')
                    .text(`Jumlah digit nomor rekening ${h.alias_bank} adalah ${h.jumlah_digit_rek}`)
                    .removeClass('text-muted');
            }

            // Jenis pendidikan radio
            if (h.jenis_pendidikan) {
                const jenisEl = document.querySelector(
                    `input[name="jenis_pendidikan"][value="${h.jenis_pendidikan}"]`
                );

                if (jenisEl) {
                    jenisEl.checked = true;
                    triggerNativeChange(jenisEl);
                }
            }

            // Jenjang pendidikan
            if (h.jenjang_pendidikan) {
                const jenjangEl = document.querySelector('select[name="jenjang_pendidikan"]');

                if (jenjangEl) {
                    jenjangEl.value = h.jenjang_pendidikan;
                    triggerNativeChange(jenjangEl);
                }
            }

            // Pendidikan
            $('input[name="kelas"]').val('');
            $('select[name="jenis_semester"]').val('').trigger('change');
            $('input[name="nama_sekolah_univ"]').val(h.nama_sekolah_univ || '').trigger('input');
            $('#indeks_prestasi').val('').trigger('input');

            // Nominal
            let jenjang = normalizeJenjang(h.jenjang_pendidikan);
            let jenis = (h.jenis_pendidikan || '').toLowerCase();

            setTimeout(function() {
                // Jalankan hitung nominal resmi dari script utama
                if (typeof window.hitungNominalBeasiswa === 'function') {
                    window.hitungNominalBeasiswa();
                }

                // Kalau NEGERI, berhenti di sini.
                // Nominal akan otomatis dari ketentuan dan tetap readonly.
                if (jenis.includes('negeri')) {
                    $('#nominal_beasiswa')
                        .prop('readonly', true)
                        .css({
                            'background-color': '#f8f9fa',
                            'border-color': '#dee2e6',
                            'height': '45px'
                        });

                    return;
                }

                // Kalau SWASTA, baru isi nominal dari history
                let nominalUntukForm = h.nominal_beasiswa || '';

                // Swasta SD/SMP/SMA: isi SPP per bulan, bukan total 6 bulan
                if (
                    jenis.includes('swasta') && ['sd', 'smp', 'sma'].includes(jenjang) &&
                    parseInt(h.spp_perbulan || 0) > 0
                ) {
                    nominalUntukForm = h.spp_perbulan;
                }

                $('#nominal_beasiswa')
                    .prop('readonly', false)
                    .css({
                        'background-color': '#fff',
                        'border-color': '#dee2e6',
                        'height': '45px'
                    })
                    .val(nominalUntukForm)
                    .trigger('input');
            }, 300);
        }

        function renderHistoryModal(histories) {
            let rows = '';

            histories.forEach(function(h, index) {
                rows += `
    <tr>
        <td>
            <button type="button"
                    class="btn btn-sm btn-primary btn-pilih-history"
                    data-index="${index}">
                <i class="fas fa-check me-1"></i> Pilih
            </button>
        </td>
        <td>${escapeHtml(h.nama_periode)}</td>
        <td>${escapeHtml(h.nama_anak_kk)}</td>
        <td>${escapeHtml(h.jenjang_pendidikan)}</td>
        <td>${escapeHtml(h.jenis_pendidikan)}</td>
        <td>${escapeHtml(h.nama_sekolah_univ)}</td>
        <td>${formatRupiah(h.nominal_beasiswa)}</td>
        <td>${escapeHtml(h.created_at)}</td>
    </tr>
`;
            });

            $('#historyTableBody').html(rows);

            const modal = new bootstrap.Modal(document.getElementById('historyModal'));
            modal.show();
        }

        $('#btnAmbilHistory').on('click', function() {
            let nik = $('#nik').val();

            if (!nik) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Karyawan belum dipilih',
                    text: 'Silakan pilih karyawan terlebih dahulu sebelum mengambil history pengajuan.',
                    confirmButtonColor: '#ffc107'
                });

                return;
            }

            let idPeriode = $('input[name="id_periode"]').val();

            let btn = $(this);
            let oldHtml = btn.html();

            btn.prop('disabled', true).html(
                '<span class="spinner-border spinner-border-sm me-2"></span>Mengambil...'
            );

            let url = "{{ route('beasiswa.history', ['nik' => '__NIK__']) }}";
            url = url.replace('__NIK__', encodeURIComponent(nik));

            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    id_periode: idPeriode
                },
                success: function(res) {
                    if (res.status === 'empty') {
                        Swal.fire({
                            icon: 'info',
                            title: 'History Tidak Ada',
                            text: res.message,
                            confirmButtonColor: '#028284'
                        });
                        return;
                    }

                    if (res.status !== 'success') {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: res.message || 'History gagal diambil.',
                            confirmButtonColor: '#dc3545'
                        });
                        return;
                    }

                    let semuaHistory = res.data || [];
                    let historyTerbaruPerAnak = ambilHistoryTerbaruPerAnak(semuaHistory);

                    if (historyTerbaruPerAnak.length === 0) {
                        Swal.fire({
                            icon: 'info',
                            title: 'History Tidak Ada',
                            text: 'Belum ada data anak pada history pengajuan sebelumnya.',
                            confirmButtonColor: '#028284'
                        });
                        return;
                    }

                    if (historyTerbaruPerAnak.length === 1) {
                        isiFormDariHistory(historyTerbaruPerAnak[0]);

                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: `Data ${historyTerbaruPerAnak[0].nama_anak_kk} berhasil disalin dari history sebelumnya.`,
                            confirmButtonColor: '#28a745'
                        });

                        return;
                    }

                    historyBeasiswaList = historyTerbaruPerAnak;
                    renderHistoryModal(historyTerbaruPerAnak);
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: xhr.responseJSON?.message ||
                            'Terjadi kesalahan saat mengambil history.',
                        confirmButtonColor: '#dc3545'
                    });
                },
                complete: function() {
                    btn.prop('disabled', false).html(oldHtml);
                }
            });
        });

        $(document).on('click', '.btn-pilih-history', function() {
            let index = $(this).data('index');
            let selectedHistory = historyBeasiswaList[index];

            if (!selectedHistory) {
                Swal.fire({
                    icon: 'error',
                    title: 'Data Tidak Valid',
                    text: 'History yang dipilih tidak ditemukan.',
                    confirmButtonColor: '#dc3545'
                });
                return;
            }

            isiFormDariHistory(selectedHistory);

            $('#historyModal').modal('hide');

            Swal.fire({
                icon: 'success',
                title: 'Berhasil',
                text: `Data ${selectedHistory.nama_anak_kk} berhasil disalin ke form.`,
                confirmButtonColor: '#28a745'
            });
        });
        /* =========================
           FUNCTION SELECT MODAL
        ========================= */

        // Select modal karyawan
        function select_karyawan(nik, name, department, notelp, alamat, email) {
            $('#nik').val(nik);
            $('#nama_karyawan').val(name);
            $('#department').val(department);
            $('#no_telp').val(notelp);
            $('#alamat').val(alamat);
            $('#email_karyawan').val(email);
            $('#karyawanModal').modal('hide');
        }

        // Select modal bank
        let bankData = @json($bank);

        function select_bank(id_bank, alias_bank, digitRek) {
            $('#id_bank').val(id_bank);
            $('#nama_bank').val(alias_bank);

            let noRekInput = $('input[name="nomor_rekening_anak"]');

            // Set validasi input rekening
            noRekInput
                .val('')
                .attr('maxlength', digitRek)
                .attr('minlength', digitRek);

            // Update info teks
            $('#info-digit-rekening')
                .text(`Jumlah digit nomor rekening ${alias_bank} adalah ${digitRek}`)
                .removeClass('text-muted');

            $('#bankModal').modal('hide');
        }

        function normalizeJenjang(val) {
            if (!val) return '';
            let v = val.toString().trim().toLowerCase();
            v = v.replace(/\s|-/g, '');
            if (v === 'div') v = 'd4';
            if (v === 'diii') v = 'd3';
            if (v === 'dii') v = 'd2';
            if (v === 'di') v = 'd1';
            return v;
        }

        /* =========================
           SCRIPT NOMINAL BEASISWA
        ========================= */
        document.addEventListener('DOMContentLoaded', function() {
            const jenjangEl = document.querySelector('select[name="jenjang_pendidikan"]');
            const nominalEl = document.querySelector('input[name="nominal_beasiswa"]');
            const indeksEl = document.querySelector('input[name="indeks_prestasi"]');
            const indeksHelpEl = document.getElementById('indeks_help');

            if (!jenjangEl || !nominalEl || !indeksEl || !document.querySelectorAll(
                    'input[name="jenis_pendidikan"]').length) {
                console.error('Beberapa element tidak ditemukan!');
                return;
            }

            function formatNumber(num) {
                return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
            }

            function unformatNumber(str) {
                return str.toString().replace(/\./g, '');
            }

            nominalEl.addEventListener('input', function(e) {
                let jenis = '';
                document.querySelectorAll('input[name="jenis_pendidikan"]').forEach(el => {
                    if (el.checked) jenis = el.value.toLowerCase();
                });

                // Untuk swasta, biarkan user input bebas
                if (jenis.includes('swasta') && !nominalEl.readOnly) {
                    // Optional: Visual feedback saja tanpa mengubah input
                    let inputValue = this.value;
                    let numericValue = parseInt(inputValue.replace(/[^\d]/g, ''));

                    // Visual feedback border color berdasarkan validasi
                    if (inputValue && !isNaN(numericValue)) {
                        this.style.borderColor = numericValue >= 100000 ? '#28a745' : '#dc3545';
                    } else {
                        this.style.borderColor = '#dee2e6';
                    }

                    return;
                }
            });

            // Handle keydown untuk mencegah input karakter invalid
            nominalEl.addEventListener('keydown', function(e) {
                let jenis = '';
                document.querySelectorAll('input[name="jenis_pendidikan"]').forEach(el => {
                    if (el.checked) jenis = el.value.toLowerCase();
                });

                // Hanya validasi untuk swasta dan jika field tidak readonly
                if (jenis.includes('swasta') && !nominalEl.readOnly) {
                    // Allow: backspace, delete, tab, escape, enter, home, end, left, right
                    if ([8, 9, 27, 13, 46, 35, 36, 37, 39].indexOf(e.keyCode) !== -1 ||
                        // Allow: Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
                        (e.keyCode === 65 && e.ctrlKey === true) ||
                        (e.keyCode === 67 && e.ctrlKey === true) ||
                        (e.keyCode === 86 && e.ctrlKey === true) ||
                        (e.keyCode === 88 && e.ctrlKey === true)) {
                        return;
                    }
                    // Allow numbers and period/dot (titik)
                    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) &&
                        (e.keyCode < 96 || e.keyCode > 105) &&
                        e.keyCode !== 190 && e.keyCode !== 110) { // 190 = period, 110 = numpad period
                        e.preventDefault();
                    }
                }
            });

            // Handle paste event
            nominalEl.addEventListener('paste', function(e) {
                let jenis = '';
                document.querySelectorAll('input[name="jenis_pendidikan"]').forEach(el => {
                    if (el.checked) jenis = el.value.toLowerCase();
                });

                if (jenis.includes('swasta') && !nominalEl.readOnly) {
                    e.preventDefault();

                    // Get pasted data
                    const paste = (e.clipboardData || window.clipboardData).getData('text');

                    // Remove all characters except digits and periods
                    const cleanPaste = paste.replace(/[^\d.]/g, '');

                    if (cleanPaste.length > 0) {
                        // Get current cursor position
                        const start = this.selectionStart;
                        const end = this.selectionEnd;

                        // Get current value
                        const currentValue = this.value;

                        // Insert the clean paste at cursor position
                        const beforeCursor = currentValue.substring(0, start);
                        const afterCursor = currentValue.substring(end);
                        const newValue = beforeCursor + cleanPaste + afterCursor;

                        // Set the new value
                        this.value = newValue;

                        // Set cursor position
                        const newPosition = (beforeCursor + cleanPaste).length;
                        setTimeout(() => {
                            this.setSelectionRange(newPosition, newPosition);
                        }, 0);
                    }
                }
            });


            const form = nominalEl.closest('form');
            if (form) {
                form.addEventListener('submit', function() {
                    if (!nominalEl.readOnly) {
                        nominalEl.value = unformatNumber(nominalEl.value);
                    }
                });
            }



            function makeFieldEditable() {
                nominalEl.removeAttribute('readonly');
                nominalEl.readOnly = false;
                nominalEl.disabled = false;
                nominalEl.removeAttribute('style');
                nominalEl.style.backgroundColor = '#fff';
                nominalEl.style.borderColor = '#dee2e6';
                nominalEl.style.height = '45px';
            }

            function makeFieldReadonly() {
                nominalEl.setAttribute('readonly', true);
                nominalEl.readOnly = true;
                nominalEl.disabled = false;
                nominalEl.style.backgroundColor = '#f8f9fa';
                nominalEl.style.borderColor = '#dee2e6';
                nominalEl.style.height = '45px';
            }

            function hitungNominal() {
                let jenjang = normalizeJenjang(jenjangEl.value);
                let jenis = '';
                document.querySelectorAll('input[name="jenis_pendidikan"]').forEach(el => {
                    if (el.checked) jenis = el.value.toLowerCase();
                });

                // Atur placeholder & aturan indeks
                if (!jenjang) {
                    indeksEl.min = '0';
                    indeksEl.max = '';
                    indeksEl.step = '0.01';
                    indeksEl.placeholder = 'Isi nilai sesuai jenjang';
                    if (indeksHelpEl) indeksHelpEl.textContent =
                        'SD - SMA: min. 92 | D1-S1 Negeri: min. 3.30 | D1-S1 Swasta: min. 3.50';
                } else {
                    let isSekolah = ['sd', 'smp', 'sma'].includes(jenjang);
                    if (isSekolah) {
                        indeksEl.min = '92';
                        indeksEl.max = '100';
                        indeksEl.step = '0.01';
                        indeksEl.placeholder = 'Nilai rapor 0-100 (min. 92)';
                        if (indeksHelpEl) indeksHelpEl.textContent =
                            'Wajib nilai rapor minimal 92 untuk SD-SMA';
                    } else if (['d1', 'd2', 'd3', 'd4', 's1'].includes(jenjang)) {
                        indeksEl.max = '4';
                        indeksEl.step = '0.01';
                        if (jenis.includes('negeri')) {
                            indeksEl.min = '3.30';
                            indeksEl.placeholder = 'IPK 0-4 (min. 3.30 untuk Negeri)';
                            if (indeksHelpEl) indeksHelpEl.textContent = 'D1-S1 Negeri: IPK minimal 3.30';
                        } else if (jenis.includes('swasta')) {
                            indeksEl.min = '3.50';
                            indeksEl.placeholder = 'IPK 0-4 (min. 3.50 untuk Swasta)';
                            if (indeksHelpEl) indeksHelpEl.textContent = 'D1-S1 Swasta: IPK minimal 3.50';
                        } else {
                            indeksEl.min = '0';
                            indeksEl.placeholder = 'IPK 0-4 (pilih jenis pendidikan)';
                            if (indeksHelpEl) indeksHelpEl.textContent =
                                'Pilih jenis pendidikan untuk validasi IPK';
                        }
                    } else {
                        indeksEl.min = '0';
                        indeksEl.max = '';
                        indeksEl.step = '0.01';
                        indeksEl.placeholder = 'Isi nilai sesuai jenjang';
                        if (indeksHelpEl) indeksHelpEl.textContent =
                            'SD - SMA: min. 92 | D1-S1 Negeri: min. 3.30 | D1-S1 Swasta: min. 3.50';
                    }
                }

                // Reset nilai
                nominalEl.value = '';

                // Jika belum pilih jenjang / jenis
                if (!jenjang || !jenis) {
                    makeFieldEditable();
                    nominalEl.placeholder = 'Pilih jenjang dan jenis pendidikan terlebih dahulu';
                    return;
                }

                // Negeri
                if (jenis.includes('negeri')) {
                    let nominal = 0;
                    if (jenjang === 'sd') nominal = 1000000;
                    else if (jenjang === 'smp') nominal = 1500000;
                    else if (jenjang === 'sma') nominal = 2000000;
                    else if (['d1', 'd2', 'd3', 'd4', 's1'].includes(jenjang)) nominal = 3000000;

                    nominalEl.value = nominal;
                    makeFieldReadonly();
                    nominalEl.placeholder = 'Nominal otomatis untuk pendidikan negeri';
                }
                // Swasta
                else if (jenis.includes('swasta')) {
                    makeFieldEditable();
                    nominalEl.value = '';
                    if (['sd', 'smp', 'sma'].includes(jenjang)) {
                        nominalEl.placeholder = 'Masukkan SPP per bulan';
                    } else if (['d1', 'd2', 'd3', 'd4', 's1'].includes(jenjang)) {
                        nominalEl.placeholder = 'Masukkan SPP/UKT per semester';
                    } else {
                        nominalEl.placeholder = 'Masukkan nominal beasiswa';
                    }
                }
                // Lainnya
                else {
                    makeFieldEditable();
                    nominalEl.placeholder = 'Masukkan nominal beasiswa';
                }
            }

            window.hitungNominalBeasiswa = hitungNominal;

            // Event listeners
            jenjangEl.addEventListener('change', () => setTimeout(hitungNominal, 100));
            document.querySelectorAll('input[name="jenis_pendidikan"]').forEach(el => {
                el.addEventListener('change', () => setTimeout(hitungNominal, 100));
            });

            // Initial call
            setTimeout(hitungNominal, 200);
        });

        /* =========================
           SCRIPT VALIDASI BERKAS
        ========================= */
        document.addEventListener("DOMContentLoaded", function() {
            const jenisEls = document.querySelectorAll('input[name="jenis_pendidikan"]');
            const jenjangEl = document.querySelector('select[name="jenjang_pendidikan"]');
            const wrapper = document.getElementById("buktiPembayaranWrapper");

            function renderBuktiInputs() {
                wrapper.innerHTML = "";
                const jenis = document.querySelector('input[name="jenis_pendidikan"]:checked')?.value
                    ?.toLowerCase();
                const jenjang = normalizeJenjang(jenjangEl.value);

                if (!jenis || !jenjang) return;

                // Negeri → tidak ada input
                if (jenis.includes("negeri")) return;

                // Swasta SD-SMA/SMK → 6 input
                if (jenis.includes("swasta") && ["sd", "smp", "sma"].includes(jenjang)) {
                    for (let i = 1; i <= 6; i++) {
                        wrapper.innerHTML += `
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold text-dark">Bukti Pembayaran SPP Bulan ${i} <span class="text-danger">*</span></label>
                        <input type="file" class="form-control border-2"
                            name="bukti_spp_bulan_${i}"
                            accept=".pdf,.jpg,.jpeg,.png" required
                            style="border-color: #dee2e6; height: 45px; padding-top: 10px;">
                        <small style="color:#23614e;">Maksimal 4MB | Format: PDF/jpg/jpeg/png</small>
                    </div>
                `;
                    }
                }

                // Swasta D1-S1 → 1 input
                if (jenis.includes("swasta") && ["d1", "d2", "d3", "d4", "s1"].includes(jenjang)) {
                    wrapper.innerHTML = `
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-semibold text-dark">Bukti Pembayaran UKT <span class="text-danger">*</span></label>
                    <input type="file" class="form-control border-2"
                        name="bukti_spp"
                        accept=".pdf,.jpg,.jpeg,.png" required
                        style="border-color: #dee2e6; height: 45px; padding-top: 10px;">
                    <small style="color:#23614e;">Maksimal 4MB | Format: PDF/jpg/jpeg/png</small>
                </div>
            `;
                }
            }

            jenisEls.forEach(el => el.addEventListener("change", renderBuktiInputs));
            jenjangEl.addEventListener("change", renderBuktiInputs);
        });

        $(document).ready(function() {
            function renderTranskripButton(type) {
                const isAdd = type === 'add';
                const btnClass = isAdd ? 'btn-success btn-add-transkrip' : 'btn-danger btn-remove-transkrip';
                const iconClass = isAdd ? 'fas fa-plus' : 'fas fa-minus';
                const title = isAdd ? 'Tambah file' : 'Hapus file';

                return `
            <button type="button" class="btn ${btnClass}" title="${title}">
                <i class="${iconClass}"></i>
            </button>
        `;
            }

            function updateTranskripButtons() {
                const items = $('#transkripWrapper .transkrip-item');

                items.each(function(index) {
                    const isLastItem = index === items.length - 1;
                    const buttonType = isLastItem ? 'add' : 'remove';

                    $(this)
                        .find('.btn-add-transkrip, .btn-remove-transkrip')
                        .remove();
                    $(this).find('.input-group').append(renderTranskripButton(buttonType));
                });
            }

            updateTranskripButtons();

            $(document).on('click', '.btn-add-transkrip', function() {
                const newItem = `
            <div class="transkrip-item mb-2">
                <div class="input-group">
                    <input type="file" class="form-control border-2" name="rapor_transkrip_nilai[]" accept=".pdf,.jpg,.jpeg,.png"
                            style="border-color: #dee2e6; height: 45px; padding-top: 10px;">
                </div>
            </div>
        `;
                $('#transkripWrapper').append(newItem);
                updateTranskripButtons();
            });

            $(document).on('click', '.btn-remove-transkrip', function() {
                $(this).closest('.transkrip-item').remove();
                updateTranskripButtons();
            });
        });


        /* =========================
           SCRIPT JQUERY + VALIDASI FORM
        ========================= */
        $(document).ready(function() {
            $('#list_trbea_bank').DataTable();

            $('#nomor_telepon').on('input', function() {
                let value = $(this).val();

                // Hanya angka (hapus selain angka)
                value = value.replace(/[^0-9]/g, '');

                // Maksimal 15 digit (hard cut)
                if (value.length > 15) {
                    value = value.substring(0, 15);
                }

                $(this).val(value);
            });

            function getMinNilai(jenjang, jenis) {
                jenjang = normalizeJenjang(jenjang); // Asumsi normalizeJenjang() udah ada di code mu
                if (['sd', 'smp', 'sma'].includes(jenjang)) return 92;
                if (['d1', 'd2', 'd3', 'd4', 's1'].includes(jenjang)) {
                    return (jenis.toLowerCase().includes('negeri')) ? 3.30 : 3.50;
                }
                return 0;
            }

            function getMaxNilai(jenjang) {
                const normalizedJenjang = normalizeJenjang(jenjang);
                if (['sd', 'smp', 'sma'].includes(normalizedJenjang)) return 100;
                if (['d1', 'd2', 'd3', 'd4', 's1'].includes(normalizedJenjang)) return 4.00;
                return 100;
            }

            // Single input handler untuk indeks_prestasi (merged)
            $('#indeks_prestasi').on('input', function() {
                let inputValue = $(this).val().trim();
                let nilai = parseFloat(inputValue);
                let jenjang = $('select[name="jenjang_pendidikan"]').val();
                let jenis = $('input[name="jenis_pendidikan"]:checked').val() || '';

                let minNilai = getMinNilai(jenjang, jenis);
                let maxNilai = getMaxNilai(jenjang);

                // Validasi format IPK untuk perguruan tinggi (hanya jika ada input)
                if (inputValue && ['d1', 'd2', 'd3', 'd4', 's1'].includes(normalizeJenjang(jenjang))) {
                    if (!inputValue.includes('.')) {
                        $(this).addClass('border-warning').removeClass('border-success border-danger');
                        return;
                    }
                }

                // Visual feedback border (hanya jika ada nilai valid)
                if (inputValue && !isNaN(nilai)) {
                    if (nilai < minNilai || nilai > maxNilai) {
                        $(this).addClass('border-danger').removeClass('border-success border-warning');
                    } else {
                        $(this).addClass('border-success').removeClass('border-danger border-warning');
                    }
                } else if (inputValue) {
                    // Ada input tapi invalid (e.g., non-numeric)
                    $(this).addClass('border-warning').removeClass('border-success border-danger');
                } else {
                    // Kosong: no border class
                    $(this).removeClass('border-danger border-success border-warning');
                }
            });

            // Single blur handler untuk indeks_prestasi (merged, hanya alert jika ada nilai tapi invalid)
            $('#indeks_prestasi').on('blur', function() {
                let inputValue = $(this).val().trim();
                let nilai = parseFloat(inputValue);
                let jenjang = $('select[name="jenjang_pendidikan"]').val();
                let jenis = $('input[name="jenis_pendidikan"]:checked').val() || '';

                // Jika kosong atau belum pilih jenjang/jenis, skip alert
                if (!inputValue || !jenjang || !jenis) {
                    return;
                }

                // Validasi format IPK untuk perguruan tinggi (hanya jika ada input)
                if (['d1', 'd2', 'd3', 'd4', 's1'].includes(normalizeJenjang(jenjang))) {
                    if (!inputValue.includes('.')) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Format IPK Salah!',
                            text: 'IPK harus menggunakan titik desimal (contoh: 3.75)',
                            confirmButtonColor: '#ffc107'
                        }).then(() => {
                            setTimeout(() => $(this).focus(), 0);
                        });
                        return;
                    }
                }

                // Hanya lanjut jika nilai valid (bukan NaN)
                if (isNaN(nilai)) {
                    return;
                }

                let minNilai = getMinNilai(jenjang, jenis);
                let maxNilai = getMaxNilai(jenjang);
                let displayMaxNilai = ['d1', 'd2', 'd3', 'd4', 's1'].includes(normalizeJenjang(jenjang)) ?
                    maxNilai.toFixed(2) : maxNilai;
                let displayJenjang = jenjang.toUpperCase().replace(/^\w/, c => c
                    .toUpperCase()); // Capitalize first letter

                if (nilai > maxNilai) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops!',
                        text: `Nilai maksimal ${displayMaxNilai} untuk jenjang ${displayJenjang} ${jenis}!`,
                        confirmButtonColor: '#dc3545'
                    }).then(() => {
                        setTimeout(() => $(this).focus(), 0);
                    });
                } else if (nilai < minNilai) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops!',
                        text: `Nilai minimal ${minNilai} untuk jenjang ${displayJenjang} ${jenis}!`,
                        confirmButtonColor: '#dc3545'
                    }).then(() => {
                        setTimeout(() => $(this).focus(), 0);
                    });
                }
            });


            /* -------------------------
               DataTable Bank & Karyawan
            ------------------------- */
            $('#list_bank').DataTable({
                pageLength: 5,
                responsive: true,
                searching: true,
                ordering: true,
                language: {
                    search: "Cari bank:",
                    lengthMenu: "Tampilkan _MENU_ bank",
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ bank",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(difilter dari _MAX_ total bank)",
                    paginate: {
                        first: "Pertama",
                        last: "Terakhir",
                        next: "Selanjutnya",
                        previous: "Sebelumnya"
                    }
                }
            });

            $('#list_karyawan').DataTable({
                pageLength: 5,
                responsive: true,
                searching: true,
                ordering: true,
                language: {
                    search: "Cari karyawan:",
                    lengthMenu: "Tampilkan _MENU_ karyawan",
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ karyawan",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(difilter dari _MAX_ total karyawan)",
                    paginate: {
                        first: "Pertama",
                        last: "Terakhir",
                        next: "Selanjutnya",
                        previous: "Sebelumnya"
                    }
                }
            });

            $(document).on('click', '.select-karyawan', function() {
                let nik = $(this).data('nik');
                let ktp = $(this).data('ktp');
                let nama = $(this).data('nama');
                let dept = $(this).data('dept');
                let bagian = $(this).data('bag');
                let telp = $(this).data('telp');
                let alamat = $(this).data('alamat');
                let email = $(this).data('email');

                $('#nik').val(nik);
                $('#nama_karyawan').val(nama.toUpperCase());
                $('#department').val(dept.toUpperCase());
                $('#bagian').val(bagian ? bagian.toUpperCase() : '');
                $('#ktp').val(ktp);
                $('#no_telp').val(telp);
                $('#alamat').val(alamat);
                $('#email_karyawan').val(email);

                $('#nama_karyawan').addClass('border-success');
                setTimeout(() => $('#nama_karyawan').removeClass('border-success'), 800);
            });

            $('#no_telp').on('input', function() {
                let value = $(this).val();
                value = value.replace(/[^0-9]/g, ''); // Hanya angka
                if (value.length > 15) {
                    value = value.substring(0, 15); // Max 15
                }
                $(this).val(value);
            });

            $('input[name="nomor_rekening_anak"]').on('input', function() {
                let input = $(this);
                let value = input.val();

                input.val(value.replace(/\D/g, ''));
                let maxLength = parseInt(input.attr('maxlength'));
                if (value.length > maxLength) {
                    input.val(value.slice(0, maxLength));
                }
            });

            $('#kelas').on('input', function() {
                let val = $(this).val().replace(/^0+/, '');
                val = val.replace(/[^0-9]/g, '');
                if (val.length > 2) {
                    val = val.substring(0, 2);
                }
                $(this).val(val);
            }).on('blur', function() {
                let val = $(this).val();
                if (val && (parseInt(val) < 1 || parseInt(val) > 12)) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Invalid!',
                        text: 'Kelas/semester harus antara 1-12!',
                        confirmButtonColor: '#dc3545'
                    }).then(() => $(this).focus());
                }
            });

            /* -------------------------
            OTP Handler
            ------------------------- */
            let otpTimer;
            let expiryTime; // Variabel baru untuk simpan waktu expiry real
            let isSendingOtp = false;
            const btnKirim = $('#btnKirimOTP');
            const btnDefaultHtml = '<i class="fas fa-paper-plane me-1"></i>Kirim OTP';

            function startOtpCountdown() {
                clearInterval(otpTimer);
                expiryTime = Date.now() + 120 * 1000; // 300 detik dari sekarang (waktu expiry real)
                $('#otp-countdown').show();
                btnKirim.prop('disabled', true);

                const updateLabels = () => {
                    const timeLeftMs = expiryTime - Date.now(); // Hitung ulang dari waktu real
                    if (timeLeftMs <= 0) {
                        clearInterval(otpTimer);
                        Swal.fire({
                            icon: 'warning',
                            title: 'OTP Kadaluarsa',
                            text: 'Kode OTP telah kadaluarsa. Silakan kirim ulang OTP.',
                            confirmButtonColor: '#ffc107'
                        });
                        $('#otp-countdown').hide();
                        $('#otp').val('').prop('disabled', true);
                        btnKirim.prop('disabled', false).html(btnDefaultHtml);
                        return;
                    }

                    const timeLeft = Math.ceil(timeLeftMs / 1000); // Convert ke detik
                    const minutes = Math.floor(timeLeft / 60);
                    const seconds = timeLeft % 60;
                    $('#countdown-timer').text(`${minutes}:${seconds.toString().padStart(2, '0')}`);
                    btnKirim.html(
                        `<i class="fas fa-redo me-1"></i>Kirim Ulang OTP (${minutes}:${seconds.toString().padStart(2, '0')})`
                    );
                };

                updateLabels(); // Update pertama

                otpTimer = setInterval(updateLabels, 1000);
            }

            $('#btnKirimOTP').click(function() {
                if (isSendingOtp) return;

                let email = $('#email_karyawan').val().trim();
                // if (!email) {
                //     Swal.fire('Oops!', 'Email wajib diisi dulu', 'warning');
                //     return;
                // }

                if (!email) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Email kosong!',
                        text: 'Email wajib diisi terlebih dahulu',
                        confirmButtonColor: '#ffc107'
                    });
                    $('#email_karyawan').focus();
                    return;
                }

                // const emailRegex= /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                // if (!emailRegex.test(email)) {
                //     Swal.fire({
                //         icon: 'warning',
                //         title: 'Format Email tidak valid!',
                //         text: 'Masukkan alamat email yang benar (contoh: nama@gmail.com)',
                //         confirmButtonColor: '#dc3545'
                //     });
                //     $('#email_karyawan').focus();
                //     return;
                // }

                // const commonTypos = {
                //     'gamil.com': 'gmail.com',
                //     'gnail.com': 'gmail.com',
                //     'gmial.com': 'gmail.com',
                //     'yahooo.com': 'yahoo.com',
                //     'yaho.com': 'yahoo.com',
                //     'outlok.com': 'outlook.com',
                //     'hotmial.com': 'hotmail.com'
                // }

                // const domain = email.split('@')[1];

                // if (commonTypos[domain]) {
                //     Swal.fire({
                //         icon: 'warning',
                //         title: 'Email Mungkin Salah!',
                //         html: `Domain email <strong>${domain}</strong> tidak umum.<br>Apakah Anda maksud <strong>${commonTypos[domain]}</strong>?`,
                //         showCancelButton: true,
                //         confirmButtonText: 'Ya, Perbaiki',
                //         cancelButtonText: 'Tidak, Lanjutkan',
                //         confirmButtonColor: '#ffc107',
                //         cancelButtonColor: '#6c757d'
                //     }).then((result) => {
                //         if (result.isConfirmed) {
                //             $('#email_karyawan').val(`${email.split('@')[0]}@${commonTypos[domain]}`).focus();
                //             return;
                //         }
                //         // Jika user pilih lanjutkan, kirim OTP
                //         sendOtpRequest(email);
                //     });
                //     return;
                // }

                sendOtpRequest(email);
            });

            function sendOtpRequest(email) {
                isSendingOtp = true;
                btnKirim.prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Mengirim...'
                );

                $.ajax({
                    url: "{{ route('beasiswa.sendOtp') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        email: email
                    },
                    success: function(res) {
                        if (res.status === 'success') {
                            clearInterval(otpTimer);
                            startOtpCountdown();
                            $('#otp').prop('disabled', false).val('');
                            Swal.fire('Berhasil!', res.message, 'success');
                        } else {
                            btnKirim.prop('disabled', false).html(btnDefaultHtml);
                            Swal.fire('Gagal!', res.message, 'error');
                        }
                        isSendingOtp = false;
                    },
                    error: function(xhr) {
                        isSendingOtp = false;
                        btnKirim.prop('disabled', false).html(btnDefaultHtml);

                        let errorMessage =
                            "Terjadi kesalahan saat mengirim OTP. Silahkan cek kembali email Anda.";
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        Swal.fire('Error!',
                            'Terjadi kesalahan saat mengirim OTP. Silahkan cek kembali email Anda.',
                            'error');
                    },
                });
            }

            document.addEventListener('visibilitychange', () => {
                if (document.visibilityState === 'visible' && expiryTime) {
                    const updateLabels = () => {};
                    updateLabels();
                }
            });


            /* -------------------------
               Cek Field Kosong
            ------------------------- */
            $(document).ready(function() {

                // Validasi file inputs (kosong, ukuran, format)
                $(document).on('change', 'input[type="file"]', function(e) {
                    let file = this.files[0];
                    let label = $('label[for="' + this.id + '"]').text().trim() || $(this).attr(
                        'name').replace(/_/g, ' ').toUpperCase();
                    let isRequired = $(this).prop('required');

                    // Cek file kosong
                    if (!file && isRequired) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'File Kurang!',
                            text: `${label} wajib diupload!`,
                            confirmButtonColor: '#ffc107'
                        }).then(() => {
                            setTimeout(() => $(this).focus(), 0);
                        });
                        return;
                    }

                    // Cek ukuran dan format jika ada file
                    if (file) {
                        if (file.size > 4096 * 1024) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: `Ukuran file ${label} maksimal 4MB`,
                                confirmButtonColor: '#dc3545'
                            }).then(() => {
                                $(this).val(''); // Kosongkan input tanpa trigger change
                                setTimeout(() => $(this).focus(), 0);
                            });
                            return;
                        }
                        if (!/\.(pdf|jpg|jpeg|png)$/i.test(file.name)) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: `File ${label} harus berformat PDF/jpg/jpeg/png`,
                                confirmButtonColor: '#dc3545'
                            }).then(() => {
                                $(this).val(''); // Kosongkan input tanpa trigger change
                                setTimeout(() => $(this).focus(), 0);
                            });
                            return;
                        }
                    }
                });

                // Tambahan: Validasi kelas (regex no awal 0, max 1-12)
                $('input[name="kelas"]').on('input', function() {
                    let val = $(this).val().replace(/^0+/, '').replace(/[^0-9]/g, '').substring(0,
                        2);
                    $(this).val(val);
                }).on('blur', function() {
                    // let val = $(this).val();
                    // if (val && (parseInt(val) < 1 || parseInt(val) > 12)) {
                    //     Swal.fire({
                    //         icon: 'error',
                    //         title: 'Invalid!',
                    //         text: 'Kelas / Semester harus antara 1-12!',
                    //         confirmButtonColor: '#dc3545'
                    //     }).then(() => $(this).focus());
                    //}
                });
            });


            /* -------------------------
               Form Submission
            ------------------------- */
            $('#formBeasiswa').on('submit', function(e) {
                e.preventDefault();
                e.stopImmediatePropagation();

                if ($(this).data('submitting')) {
                    return false;
                }

                const $btnSubmit = $(this).find('button[type="submit"]');
                const originalButtonHtml = $btnSubmit.html();

                let indeksInput = $('#indeks_prestasi');
                let inputValue = indeksInput.val().trim();
                let nilai = parseFloat(inputValue);
                let jenjang = $('select[name="jenjang_pendidikan"]').val();
                let jenis = $('input[name="jenis_pendidikan"]:checked').val() || '';
                // let firstInvalidField = null;

                // ===== VALIDASI FRONTEND (SEBELUM AJAX) =====
                // VALIDASI 1: Format IPK

                let errors = [];
                let firstInvalidField = null;

                function getFieldLabel($field) {
                    let fieldName = $field.attr("name");
                    let label = $('label[for="' + $field.attr("id") + '"]')
                        .text()
                        .replace("*", "")
                        .trim();

                    if (!label) {
                        // Fallback ke name attribute
                        label = fieldName
                            .replace(/_/g, " ")
                            .replace(/\b\w/g, (l) => l.toUpperCase());
                    }

                    return label;
                }


                // Validasi input text & select required
                $(this)
                    .find(
                        'input[required]:not([type="radio"]):not([type="file"]), select[required], textarea[required]'
                    )
                    .each(function() {
                        if (!$(this).val() || $(this).val().trim() === "") {
                            let label = getFieldLabel($(this));
                            errors.push(`${label} wajib diisi`);
                            if (!firstInvalidField) {
                                firstInvalidField = $(this);
                            }
                        }

                        if ($(this).attr('name') === 'nomor_telepon' && $(this).val()) {
                            let notelp = $(this).val().replace(/[^0-9]/g, '');
                            if (notelp.length < 10) {
                                errors.push('Nomor Telepon minimal 10 digit');
                            } else if (notelp.length > 15) {
                                errors.push('Nomor Telepon maksimal 15 digit');
                            }
                        }
                    });

                // Validasi radio button required
                let radioChecked = {};
                $(this)
                    .find('input[type="radio"][required]')
                    .each(function() {
                        const name = $(this).attr("name");
                        if (!radioChecked[name]) {
                            radioChecked[name] = $(`input[name="${name}"]:checked`).length > 0;
                            if (!radioChecked[name]) {
                                let label = getFieldLabel($(this));
                                errors.push(`${label} wajib dipilih`);
                                if (!firstInvalidField) {
                                    firstInvalidField = $(this);
                                }
                            }
                        }
                    });

                // Validasi file required
                $(this)
                    .find('input[type="file"][required]')
                    .each(function() {
                        if (!this.files || this.files.length === 0) {
                            let label = getFieldLabel($(this));
                            errors.push(`${label} wajib diupload`);
                            if (!firstInvalidField) {
                                firstInvalidField = $(this);
                            }
                        }
                    });

                if (errors.length > 0) {
                    let errorList = errors.map((err) => `• ${err}`).join("<br>");
                    Swal.fire({
                        icon: "warning",
                        title: "Data Belum Lengkap!",
                        html: `<div style="text-align: center;">${errorList}</div>`,
                        confirmButtonColor: "#ffc107",
                        width: "600px",
                    }).then(() => {
                        if (firstInvalidField) {
                            $("html, body").animate({
                                    scrollTop: firstInvalidField.offset().top - 120,
                                },
                                500
                            );
                            firstInvalidField.focus();
                        }
                    });
                    return false;
                }

                // VALIDASI 2: Cek ukuran dan format file
                $(this)
                    .find('input[type="file"]')
                    .each(function() {
                        if (this.files && this.files.length > 0) {
                            let file = this.files[0];
                            let label = getFieldLabel($(this));

                            if (file.size > 4096 * 1024) {
                                errors.push(`${label} - Ukuran file maksimal 4MB`);
                                if (!firstInvalidField) {
                                    firstInvalidField = $(this);
                                }
                            }

                            // Cek format file (pdf/jpg/jpeg/png)
                            let ext = file.name.toLowerCase().split('.').pop();
                            let allowed = ['pdf', 'jpg', 'jpeg', 'png'];

                            if (!allowed.includes(ext)) {
                                errors.push(`${label} - File harus berformat PDF/JPG/JPEG/PNG`);
                                if (!firstInvalidField) {
                                    firstInvalidField = $(this);
                                }
                            }

                        }
                    });

                if (errors.length > 0) {
                    let errorList = errors.map((err) => `• ${err}`).join("<br>");
                    Swal.fire({
                        icon: "error",
                        title: "File Tidak Valid!",
                        html: `<div style="text-align: center;">${errorList}</div>`,
                        confirmButtonColor: "#dc3545",
                        width: "600px",
                    }).then(() => {
                        if (firstInvalidField) {
                            $("html, body").animate({
                                    scrollTop: firstInvalidField.offset().top - 120,
                                },
                                500
                            );
                            firstInvalidField.focus();
                        }
                    });
                    return false; // STOP DI SINI
                }


                // VALIDASI Format IPK
                if (inputValue && jenjang && jenis) {
                    if (['d1', 'd2', 'd3', 'd4', 's1'].includes(normalizeJenjang(jenjang))) {
                        if (!inputValue.includes('.')) {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Format IPK Salah!',
                                text: 'IPK harus menggunakan titik desimal (contoh: 3.75)',
                                confirmButtonColor: '#ffc107'
                            }).then(() => {
                                indeksInput.focus();
                            });
                            return false;
                        }
                    }

                    // VALIDASI Min/Max Nilai
                    if (!isNaN(nilai)) {
                        let minNilai = getMinNilai(jenjang, jenis);
                        let maxNilai = getMaxNilai(jenjang);
                        let displayMaxNilai = ['d1', 'd2', 'd3', 'd4', 's1'].includes(normalizeJenjang(
                            jenjang)) ? maxNilai.toFixed(2) : maxNilai;
                        let displayJenjang = jenjang.toUpperCase().replace(/^\w/, c => c.toUpperCase());

                        if (nilai > maxNilai) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops!',
                                text: `Nilai maksimal ${displayMaxNilai} untuk jenjang ${displayJenjang} ${jenis}!`,
                                confirmButtonColor: '#dc3545'
                            }).then(() => {
                                indeksInput.focus();
                            });
                            return false; // Stop submit
                        } else if (nilai < minNilai) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops!',
                                text: `Nilai minimal ${minNilai} untuk jenjang ${displayJenjang} ${jenis}!`,
                                confirmButtonColor: '#dc3545'
                            }).then(() => {
                                indeksInput.focus();
                            });
                            return false; // Stop submit
                        }
                    }
                }

                // ===== VALIDASI 4: OTP =====
                let otpValue = $('#otp').val().trim();
                if (!otpValue) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Kode OTP Kosong!',
                        text: 'Silakan masukkan kode OTP yang telah dikirim ke email Anda',
                        confirmButtonColor: '#ffc107'
                    }).then(() => {
                        $('#otp').focus();
                    });
                    return false; // STOP DI SINI
                }

                // ===== JIKA SEMUA VALIDASI LOLOS, BARU PROSES SUBMIT =====
                // Mark form as submitting (setelah validasi lolos)
                $(this).data("submitting", true);

                // Disable button submit
                $btnSubmit
                    .prop("disabled", true)
                    .html(
                        '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Mengirim...'
                    );

                // BARU tampilkan loading modal (setelah validasi lolos)
                $("#loadingModal").modal("show");

                var formData = new FormData(this);

                $.ajax({
                    url: "{{ route('store.form.beasiswa') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        $('#loadingModal').modal('hide');

                        if (response.status === 'success') {
                            Swal.fire({
                                title: 'Memproses PDF...',
                                text: 'Mohon tunggu, sedang menyiapkan file pengajuan Anda.',
                                allowOutsideClick: false,
                                didOpen: () => {
                                    Swal.showLoading();
                                }
                            });

                            let pdfUrl = "{{ url('/form-beasiswa/download-pdf') }}/" + response.data.id_pengajuan;
                            
                            let iframe = document.createElement('iframe');
                            iframe.style.display = 'none';
                            iframe.src = pdfUrl;
                            document.body.appendChild(iframe);

                            setTimeout(() => {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil!',
                                    text: response.message,
                                    confirmButtonColor: '#28a745',
                                    confirmButtonText: 'OK'
                                }).then((result) => {
                                    if (result.isConfirmed || result.isDismissed) {
                                        window.location.href = response.redirect;
                                    }
                                });
                            }, 2500);
                        } else {
                            $("#formBeasiswa").data("submitting", false);
                            $btnSubmit.prop("disabled", false).html(originalButtonHtml);

                            Swal.fire({
                                icon: "error",
                                title: "Coba lagi!",
                                text: response.message,
                                confirmButtonColor: "#dc3545",
                            });
                        }
                    },
                    error: function(xhr) {
                        $("#loadingModal").modal("hide");

                        $('.modal-backdrop').remove();
                        $('body').removeClass('modal-open').css('padding-right', '');

                        // Reset submit flag & button
                        $("#formBeasiswa").data("submitting", false);
                        $btnSubmit.prop("disabled", false).html(originalButtonHtml);

                        if (xhr.status === 422) {
                            let res = xhr.responseJSON;

                            if (res && res.errors) {
                                let firstInvalidField = null;
                                let errorMessages = [];

                                $.each(res.errors, function(field, messages) {
                                    if (!firstInvalidField) {
                                        let $input = $(`[name="${field}"]`);
                                        if ($input.length) {
                                            firstInvalidField = $input;
                                        }
                                    }
                                    // Ambil pesan pertama dari setiap field
                                    if (messages && messages.length > 0) {
                                        errorMessages.push(`• ${messages[0]}`);
                                    }
                                });

                                // Scroll ke field pertama yang error
                                if (firstInvalidField) {
                                    setTimeout(() => {
                                        $("html, body").animate({
                                                scrollTop: firstInvalidField
                                                    .offset().top - 120,
                                            },
                                            500
                                        );
                                        firstInvalidField.focus();
                                    }, 500);
                                }

                                let errorList = errorMessages.join("<br>");
                                Swal.fire({
                                    icon: "error",
                                    title: "Periksa Kembali Data Anda",
                                    html: `<div style="text-align: center;">${errorList}</div>`,
                                    confirmButtonColor: "#dc3545",
                                    width: "600px",
                                });
                                return;
                            }

                            if (res && res.message) {
                                Swal.fire({
                                    icon: "error",
                                    title: "Pengajuan Tidak dapat Diproses",
                                    text: res.message,
                                    confirmButtonColor: "#dc3545",
                                });
                                return;
                            }

                            Swal.fire({
                                icon: "error",
                                text: "Terjadi kesalahan validasi. Mohon periksa kembali data Anda.",
                                confirmButtonColor: "#dc3545",
                            });
                        } else {
                            Swal.fire({
                                icon: "error",
                                title: "Oops...",
                                text: xhr.responseJSON?.message ||
                                    "Terjadi kesalahan sistem. Silakan coba lagi.",
                                confirmButtonColor: "#dc3545",
                            });
                        }
                    },
                });

                return false;
            });

            // /* -------------------------
            //    Modal Fix
            // ------------------------- */
            // $('.modal').on('hidden.bs.modal', function () {
            //     $('body').removeClass('modal-open');
            //     $('.modal-backdrop').remove();
            // });

            $(document).on('input', 'input[type="text"], textarea', function() {
                this.value = this.value.toUpperCase();
            });


            $('#btnPanduan').on('click', function() {
                Swal.fire({
                    icon: 'info',
                    title: 'Panduan Pengisian Form',
                    html: `
                <p style="font-size: 16px; line-height: 1.6; margin-bottom: 20px;">
                    Berikut adalah panduan untuk mengisi form pengajuan beasiswa.<br>
                    <a href="{{ asset('storage/pdf/panduan_beasiswa.pdf') }}"
                       download="Panduan_Pengisian_Form_Beasiswa.pdf"
                       style="color: #028284; font-weight: bold; text-decoration: underline;">
                        Klik disini
                    </a> untuk mengunduh panduan lengkap (PDF).
                </p>
            `,
                    confirmButtonText: 'Mengerti',
                    confirmButtonColor: '#028284',
                    width: '600px',
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    }
                });
            });
        });


        $(document).ready(function() {
            // Force cleanup modal backdrop saat ada modal yang di-hide
            $('#loadingModal').on('hidden.bs.modal', function() {
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open').css({
                    'overflow': '',
                    'padding-right': ''
                });
            });

            // Prevent multiple modal backdrops
            $(document).on('show.bs.modal', '.modal', function() {
                const openModals = $('.modal.show').length;
                if (openModals > 0) {
                    $('.modal-backdrop').not(':first').remove();
                }
            });
        });
    </script>





    <style>
        .text-teal-600 {
            color: #23614e;
        }

        .text-teal-700 {
            color: #23614e;
        }

        /* Reset dan override semua styling input group yang ada */
        .input-group {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: stretch;
            width: 100%;
            border: 2px solid #dee2e6 !important;
            border-radius: 4px !important;
            overflow: hidden;
        }

        /* Input styling - hapus semua border konflik */
        .input-group .form-control {
            position: relative;
            flex: 1 1 auto;
            width: 1%;
            min-width: 0;
            padding: 0.625rem 0.75rem !important;
            height: 45px !important;
            border: none !important;
            background-color: #fff !important;
            border-radius: 0 !important;
            margin: 0 !important;
            z-index: 1;

        }

        /* Button styling - hapus semua border konflik */
        .input-group .btn {
            position: relative;
            padding: 0.625rem 0.75rem !important;
            height: 45px !important;
            border: none !important;
            background-color: #fff !important;
            border-left: 1px solid #dee2e6 !important;
            border-radius: 0 !important;
            margin: 0 !important;
            z-index: 2;
            color: #007bff;
        }

        .input-group .btn:hover {
            background-color: #f8f9fa !important;
            color: #0056b3;
        }

        /* Styling untuk readonly input */
        .input-group .form-control[readonly] {
            background-color: #fff !important;
            opacity: 1 !important;
            cursor: pointer;
        }

        /* Focus state untuk input group */
        .input-group:focus-within {
            border-color: #23614e !important;
            box-shadow: 0 0 0 0.2rem rgba(35, 97, 78, 0.25) !important;
        }

        .input-group:focus-within .form-control {
            outline: none !important;
            box-shadow: none !important;
        }

        .input-group:focus-within .btn {
            border-left-color: #23614e !important;
        }

        /* Override Bootstrap default styles yang mungkin mengganggu */
        .input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
            margin-left: 0 !important;
            border-left: 1px solid #dee2e6 !important;
        }

        .input-group>.form-control:not(:last-child) {
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }

        .input-group>.form-control:not(:first-child) {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
        }

        /* Tambahan untuk memastikan ukuran yang konsisten dengan field lain */
        .form-control,
        .form-select {
            height: 45px !important;
            padding: 0.625rem 0.75rem !important;
            border: 2px solid #dee2e6 !important;
            border-radius: 4px !important;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #23614e !important;
            box-shadow: 0 0 0 0.2rem rgba(35, 97, 78, 0.25) !important;
        }

        /* Khusus untuk textarea */
        textarea.form-control {
            height: auto !important;
            min-height: 80px !important;
            resize: vertical;
        }

        /* Pastikan error message selalu terlihat */
        .error-message {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: relative !important;
            z-index: 999 !important;
            margin-top: 4px !important;
            margin-bottom: 4px !important;
            font-size: 12px !important;
            line-height: 1.4 !important;
            color: #dc3545 !important;
            font-weight: 500 !important;
        }

        .modal {
            z-index: 1050;
        }

        .modal-backdrop {
            z-index: 1040;
        }

        .modal-open {
            overflow: hidden;
        }


        .modal .dataTables_wrapper {
            overflow-x: auto;
        }

        .modal .table-responsive {
            border: none;
        }

        .form-select:focus,
        .form-control:focus {
            border-color: #23614e !important;
            box-shadow: 0 0 0 0.2rem rgba(35, 97, 78, 0.25) !important;
        }

        .card {
            transition: all 0.3s ease;
        }

        .card:hover {
            transform: translateY(-2px);
        }

        .form-label {
            margin-bottom: 8px;
        }

        .text-danger {
            font-weight: 600 !important;
        }

        .alert-info {
            border-left: 4px solid #23614e;
        }

        /* Custom scrollbar for textarea */
        textarea::-webkit-scrollbar {
            width: 8px;
        }

        textarea::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        textarea::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 10px;
        }

        textarea::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }


        .input-group .form-control:not(:last-child) {
            border-right: 0;
        }

        .input-group .btn {
            border-left: 0;
        }

        /*  Styling untuk dropdown yang konsisten */
        .form-select,
        .form-control {
            border: 2px solid #dee2e6;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        .form-select:focus,
        .form-control:focus {
            border-color: #23614e;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(35, 97, 78, 0.25);
        }

        /* Optimasi loading modal - instant hide */
        #loadingModal.modal {
            transition: opacity 0.1s linear !important;
        }

        #loadingModal .modal-dialog {
            transition: transform 0.1s ease-out !important;
        }

        .modal-backdrop {
            transition: opacity 0.1s linear !important;
        }

        /* Paksa remove transition saat hide */
        .modal.hide {
            display: none !important;
        }

        /* FIX RESPONSIVE - DESAIN DESKTOP TETAP 100% SAMA, CUMA MOBILE YANG DISESUAIKAN */
        @media (max-width: 1399.98px) {
            div[style*="margin: 0 -100px"] {
                margin-left: -50px !important;
                margin-right: -50px !important;
                padding-left: 50px !important;
                padding-right: 50px !important;
            }


            div[style*="margin-left: -100px"][style*="margin-right: -100px"] {
                margin-left: -50px !important;
                margin-right: -50px !important;
            }
        }

        @media (max-width: 1199.98px) {
            div[style*="margin: 0 -100px"] {
                margin-left: -30px !important;
                margin-right: -30px !important;
                padding-left: 30px !important;
                padding-right: 30px !important;
                border-radius: 16px !important;
            }

            div[style*="margin-left: -100px"][style*="margin-right: -100px"] {
                margin-left: -30px !important;
                margin-right: -30px !important;
                border-radius: 16px !important;
            }
        }

        @media (max-width: 991.98px) {

            div[style*="margin: 0 -100px"],
            div[style*="margin-left: -100px"] {
                margin-left: 0 !important;
                margin-right: 0 !important;
                padding-left: 20px !important;
                padding-right: 20px !important;
                border-radius: 12px !important;
            }

            /* Kurangi margin-top di HP biar ga terlalu jauh dari atas */
            .container.mt-5[style*="margin-top: 230px"] {
                margin-top: 120px !important;
            }
        }

        @media (max-width: 575.98px) {

            div[style*="margin: 0 -100px"],
            div[style*="margin-left: -100px"] {
                padding-left: 15px !important;
                padding-right: 15px !important;
                border-radius: 8px !important;
            }

            .container.mt-5[style*="margin-top: 230px"] {
                margin-top: 100px !important;
            }

            /* Biar card header ga terlalu lebar di HP */
            .card-header.py-3 {
                padding-left: 15px !important;
                padding-right: 15px !important;
            }
        }

        .btn-panduan-float {
            position: fixed;
            bottom: 100px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #028284 0%, #023d3e 100%);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(2, 130, 132, 0.4);
            transition: all 0.3s ease;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-panduan-float:hover {
            transform: scale(1.1) translateY(-3px);
            box-shadow: 0 6px 20px rgba(2, 130, 132, 0.6);
            background: linear-gradient(135deg, #023d3e 0%, #028284 100%);
        }

        .btn-panduan-float:active {
            transform: scale(0.95);
        }

        .btn-panduan-float i {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }
        }

        @media (max-width: 767.98px) {
            .btn-panduan-float {
                width: 50px;
                height: 50px;
                font-size: 20px;
                bottom: 20px;
                right: 20px;
            }
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translate3d(0, -100%, 0);
            }

            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        @keyframes fadeOutUp {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
                transform: translate3d(0, -100%, 0);
            }
        }

        .animate__animated {
            animation-duration: 0.5s;
        }

        .animate__fadeInDown {
            animation-name: fadeInDown;
        }

        .animate__fadeOutUp {
            animation-name: fadeOutUp;
        }
    </style>

@endsection