@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @php
        /*
        |--------------------------------------------------------------------------
        | AMBIL DATA BEASISWA
        |--------------------------------------------------------------------------
        */

        try {
            $id = decrypt($idencrypt);

            $beasiswa = DB::table('trs_pengajuan_beasiswa as tb')
                ->leftJoin('mst_periode_beasiswa as periode', 'tb.id_periode', '=', 'periode.id_periode')
                ->leftJoin('mst_karyawan as kar', 'tb.nik', '=', 'kar.nik')
                ->leftJoin('mst_bank as bank', 'tb.id_bank', '=', 'bank.id_bank')
                ->leftJoin('mst_department as dept', 'kar.department', '=', 'dept.id')
                ->leftJoin('trs_lampiran as lam', 'tb.id_trs_beasiswa', '=', 'lam.id_trs_beasiswa')
                ->select(
                    'tb.id_trs_beasiswa as id_pengajuan',
                    'lam.id_trs_beasiswa as id_lampiran',
                    'tb.*',
                    'periode.nama_periode as nama_periode',
                    'kar.*',
                    'lam.*',
                    'bank.name as nama_bank',
                    'bank.alias_bank',
                    'bank.jumlah_digit_rek',
                    'bank.id_bank',

                    'dept.name as dept',
                )
                ->where('tb.id_trs_beasiswa', $id)
                ->first();
        } catch (\Throwable $e) {
            $beasiswa = null;
        }

        /*
        |--------------------------------------------------------------------------
        | DEFAULT VARIABLE
        |--------------------------------------------------------------------------
        |
        | Dibuat default supaya Blade tidak pernah kena
        | Undefined variable.
        |--------------------------------------------------------------------------
        */

        $canEditForm = false;

        $canApprove = false;

        $canRequestRevision = false;

        $isWaitingRevision = false;

        $isRevisionEmailFailed = false;

        $isHrdPending = false;

        $isHrdRejected = false;

        $revisionButtonText = 'Ajukan Revisi';

        $revisionStatus = 'none';

        $revisionEmailSent = false;

        $trsStatus = '';

        $currentRole = strtolower(trim((string) ($user->idroles ?? '')));

        /*
        |--------------------------------------------------------------------------
        | HITUNG HAK AKSI
        |--------------------------------------------------------------------------
        */

        if ($beasiswa) {
            /*
            |--------------------------------------------------------------------------
            | BASIC
            |--------------------------------------------------------------------------
            */

            $dmenu = 'trbea';

            $idencrypt = encrypt($beasiswa->id_pengajuan);

            $url_menu = '/trbea';

            /*
            |--------------------------------------------------------------------------
            | STATUS
            |--------------------------------------------------------------------------
            */

            $revisionStatus = strtolower(trim((string) ($beasiswa->revision_status ?? 'none')));

            $trsStatus = strtolower(trim((string) ($beasiswa->trs_status ?? '')));

            /*
            |--------------------------------------------------------------------------
            | STATUS EMAIL REVISI
            |--------------------------------------------------------------------------
            */

            $revisionEmailSent = !empty($beasiswa->revision_email_sent_at);

            /*
            |--------------------------------------------------------------------------
            | MENUNGGU REVISI
            |--------------------------------------------------------------------------
            */

            $isWaitingRevision = $revisionStatus === 'requested' && $revisionEmailSent;

            /*
            |--------------------------------------------------------------------------
            | EMAIL REVISI GAGAL
            |--------------------------------------------------------------------------
            */

            $isRevisionEmailFailed = $revisionStatus === 'requested' && !$revisionEmailSent;

            /*
            |--------------------------------------------------------------------------
            | HRD MASIH PENDING
            |--------------------------------------------------------------------------
            */

            $isHrdPending =
                (string) ($beasiswa->is_approved_by_hrd ?? '0') === '0' &&
                (string) ($beasiswa->isactive ?? '1') === '1';

            /*
            |--------------------------------------------------------------------------
            | HRD SUDAH REJECT
            |--------------------------------------------------------------------------
            |
            | Tetap boleh Ajukan Revisi untuk kasus
            | sebelumnya salah memilih Reject.
            |--------------------------------------------------------------------------
            */

            $isHrdRejected =
                (string) ($beasiswa->is_approved_by_hrd ?? '0') === '2' &&
                $trsStatus === 'canceled' &&
                (string) ($beasiswa->isactive ?? '1') === '0';

            /*
            |--------------------------------------------------------------------------
            | BOLEH AJUKAN REVISI
            |--------------------------------------------------------------------------
            */

            $canRequestRevision =
                in_array($currentRole, ['hrdcek', 'admins'], true) &&
                ($isHrdPending || $isHrdRejected) &&
                (string) ($beasiswa->is_finished_by_finance ?? '0') !== '1' &&
                (string) ($beasiswa->is_rejected_by_finance ?? '0') !== '1' &&
                !$isWaitingRevision &&
                $revisionStatus !== 'submitted';

            /*
            |--------------------------------------------------------------------------
            | LABEL TOMBOL REVISI
            |--------------------------------------------------------------------------
            */

            if ($isRevisionEmailFailed) {
                $revisionButtonText = 'Kirim Ulang Permintaan Revisi';
            } elseif ($isHrdRejected) {
                $revisionButtonText = 'Ajukan Revisi';
            } else {
                $revisionButtonText = 'Ajukan Revisi';
            }

            /*
            |--------------------------------------------------------------------------
            | BOLEH EDIT / SIMPAN
            |--------------------------------------------------------------------------
            |
            | Kalau sedang menunggu revisi user:
            | - tidak boleh edit
            | - tidak boleh simpan
            |--------------------------------------------------------------------------
            */

            $canEditForm = (string) ($authorize->edit ?? '0') === '1' && !$isWaitingRevision;

            /*
            |--------------------------------------------------------------------------
            | APPROVAL
            |--------------------------------------------------------------------------
            */

            if ($currentRole === 'admins') {
                $canApprove =
                    (string) $beasiswa->is_approved_by_hrd === '0' ||
                    ((string) $beasiswa->is_approved_by_hrd === '1' &&
                        (string) $beasiswa->is_approved_by_headhrd === '0') ||
                    ((string) $beasiswa->is_approved_by_headhrd === '1' &&
                        (string) $beasiswa->is_approved_by_sp === '0');
            } elseif ($currentRole === 'hrdcek' && (string) $beasiswa->is_approved_by_hrd === '0') {
                $canApprove = true;
            } elseif (
                $currentRole === 'headhr' &&
                (string) $beasiswa->is_approved_by_hrd === '1' &&
                (string) $beasiswa->is_approved_by_headhrd === '0'
            ) {
                $canApprove = true;
            } elseif (
                $currentRole === 'sp' &&
                (string) $beasiswa->is_approved_by_headhrd === '1' &&
                (string) $beasiswa->is_approved_by_sp === '0'
            ) {
                $canApprove = true;
            }

            /*
            |--------------------------------------------------------------------------
            | LOCK APPROVAL SELAMA REVISI
            |--------------------------------------------------------------------------
            */

            if ($isWaitingRevision) {
                $canApprove = false;
            }
        }
    @endphp
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="kembali('{{ $idencrypt }}')">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($canEditForm)
                            <button type="button" class="btn btn-primary mb-0 js-form-save" id="{{ $dmenu }}-save">
                                <i class="fas fa-floppy-disk me-1"></i>

                                <span class="font-weight-bold">
                                    Simpan
                                </span>
                            </button>
                        @endif


                        @if ($canRequestRevision)
                            <button type="button" class="btn btn-warning mb-0 js-revision-btn">
                                <i class="fas fa-pen-to-square me-1"></i>

                                <span class="font-weight-bold">
                                    {{ $revisionButtonText }}
                                </span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu . '/' . $idencrypt) }}"
                        enctype="multipart/form-data" id="{{ $dmenu }}-form">
                        @csrf
                        @method('PUT')
                        <div class="card-body">
                            @if ($errors->any())
                                <div class="alert alert-danger text-white" role="alert">
                                    <strong>Perubahan belum tersimpan:</strong>
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <div class="row">
                                <div class="col-md-6">
                                    <p class="text-capitalize text-base">
                                        Edit {{ $title_menu }} :
                                        <span class="fw-bold fs-5" style="color: black !important;">
                                            {{ $list->id_pengajuan }}
                                        </span>
                                    </p>
                                </div>
                                <div class="col-md-6 d-flex justify-content-end align-items-start">
                                    @if ($user->idroles == 'hrdcek' || $user->idroles == 'admins')
                                        @if ($list->is_approved_by_hrd == '1')
                                            <span class="badge bg-success">SETUJU</span>
                                        @elseif($list->is_approved_by_hrd == '2')
                                            <span class="badge bg-danger">TOLAK</span>
                                        @else
                                            <span class="badge"
                                                style="color: white; background-color: #ff9800">PENDING</span>
                                        @endif
                                    @elseif ($user->idroles == 'headhr' || $user->idroles == 'admins')
                                        @if ($list->is_approved_by_headhrd == '1')
                                            <span class="badge bg-success">SETUJU</span>
                                        @elseif($list->is_approved_by_headhrd == '2')
                                            <span class="badge bg-danger">TOLAK</span>
                                        @else
                                            <span class="badge"
                                                style="color: white; background-color: #ff9800">PENDING</span>
                                        @endif
                                    @elseif ($user->idroles == 'sp' || $user->idroles == 'admins')
                                        @if ($list->is_approved_by_sp == '1')
                                            <span class="badge bg-success">SETUJU</span>
                                        @elseif($list->is_approved_by_sp == '2')
                                            <span class="badge bg-danger">TOLAK</span>
                                        @else
                                            <span class="badge"
                                                style="color: white; background-color: #ff9800">PENDING</span>
                                        @endif
                                    @endif
                                </div>
                            </div>
                            <hr class="horizontal dark mt-0">

                            <input type="hidden" name="role" value="{{ $user->idroles }}">

                            @if ($beasiswa)
                                <div class="row g-0">
                                    <!-- Keterangan Section -->
                                    <div class="card border-0 shadow-sm mb-4" style="background: white;">
                                        <div class="card-header border-0 py-3 d-flex justify-content-between align-items-center"
                                            style="background-color: #E6F3F3">
                                            <h6 class="mb-0 fw-bold text-primary">
                                                <i class="fas fa-shield-alt me-2"></i>Status Approval
                                            </h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table table-bordered table-striped mb-4">
                                                    <thead style="background-color: #00b7bd4f;">
                                                        <tr>
                                                            <th class="text-dark" style="width: 20%;">Role</th>
                                                            <th class="text-dark" style="width: 15%;">Status</th>
                                                            <th class="text-dark" style="width: 20%;">Tanggal Approval
                                                            </th>
                                                            <th class="text-dark" style="width: 45%;">Notes</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>HRD Checker</td>
                                                            <td>
                                                                @if ($beasiswa->is_approved_by_hrd == '1')
                                                                    <span class="badge bg-success">SETUJU</span>
                                                                @elseif($beasiswa->is_approved_by_hrd == '2')
                                                                    <span class="badge bg-danger">TOLAK</span>
                                                                @else
                                                                    <span class="badge"
                                                                        style="color: white; background-color: #ff9800">PENDING</span>
                                                                @endif
                                                            </td>
                                                            <td>{{ $beasiswa->hrd_approved_at ?? '-' }}</td>
                                                            <td>{{ $beasiswa->hrd_notes ?? '-' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Head of HRD</td>
                                                            <td>
                                                                @if ($beasiswa->is_approved_by_headhrd == '1')
                                                                    <span class="badge bg-success">SETUJU</span>
                                                                @elseif($beasiswa->is_approved_by_headhrd == '2')
                                                                    <span class="badge bg-danger">TOLAK</span>
                                                                @else
                                                                    <span class="badge"
                                                                        style="color: white; background-color: #ff9800">PENDING</span>
                                                                @endif
                                                            </td>
                                                            <td>{{ $beasiswa->headhrd_approved_at ?? '-' }}</td>
                                                            <td>{{ $beasiswa->headhrd_notes ?? '-' }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Ketua Serikat Pekerja</td>
                                                            <td>
                                                                @if ($beasiswa->is_approved_by_sp == '1')
                                                                    <span class="badge bg-success">SETUJU</span>
                                                                @elseif($beasiswa->is_approved_by_sp == '2')
                                                                    <span class="badge bg-danger">TOLAK</span>
                                                                @else
                                                                    <span class="badge"
                                                                        style="color: white; background-color: #ff9800">PENDING</span>
                                                                @endif
                                                            </td>
                                                            <td>{{ $beasiswa->sp_approved_at ?? '-' }}</td>
                                                            <td>{{ $beasiswa->sp_notes ?? '-' }}</td>
                                                        </tr>
                                                        @if ($user->idroles == 'hrdcek' && @$beasiswa->is_rejected_by_finance == '1')
                                                            <tr style="background-color: #fff3cd;">
                                                                <td>Finance</td>
                                                                <td>
                                                                    <span class="badge bg-danger text-white">TOLAK</span>
                                                                </td>
                                                                <td>{{ $beasiswa->finance_rejected_at ?? '-' }}</td>
                                                                <td>{{ $beasiswa->finance_notes ?? '-' }}</td>
                                                            </tr>
                                                        @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                        </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: #E6F3F3">
                                            <h6 class="mb-0 fw-bold text-primary">
                                                <i class="fas fa-info-circle me-2"></i>Informasi Orang Tua/Wali
                                            </h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <!-- Nama Karyawan -->
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-semibold text-dark">Nama Karyawan</label>
                                                    <input type="hidden" name="nik" id="nik"
                                                        value="{{ $beasiswa->nik }}" required>
                                                    <input type="text" class="form-control ps-3 ms-0" id="nama_karyawan"
                                                        value="{{ $beasiswa->name }}"
                                                        style="border-color: #dee2e6 !important; height: 45px; text-transform: uppercase;"
                                                        readonly>
                                                </div>

                                                <!-- Department -->
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-semibold text-dark">Department</label>
                                                    <input type="text" class="form-control border-2 error-field"
                                                        name="department" value="{{ old('dept', $beasiswa->dept) }}"
                                                        required
                                                        style="border-color: #dee2e6 !important; height: 45px; text-transform: uppercase;"
                                                        readonly>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <!-- Nomor Telepon -->
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-semibold text-dark">Nomor Telepon</label>
                                                    <input type="tel" class="form-control border-2 error-field"
                                                        name="nomor_telepon"
                                                        value="{{ old('nomor_telepon', $beasiswa->notelp_karyawan) }}"
                                                        required style="border-color: #dee2e6 !important; height: 45px;"
                                                        readonly>
                                                </div>

                                                <!-- Email -->
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-semibold text-dark">Email</label>
                                                    <input type="email" class="form-control border-2 error-field"
                                                        name="email"
                                                        value="{{ old('email', $beasiswa->email_karyawan) }}" required
                                                        style="border-color: #dee2e6 !important; height: 45px;" readonly>
                                                </div>
                                            </div>

                                            <!-- Alamat -->
                                            <div>
                                                <label class="form-label fw-semibold text-dark">Alamat</label>
                                                <textarea class="form-control border-2 error-field" name="alamat" rows="2" required
                                                    style="border-color: #dee2e6 !important; resize: vertical; text-transform: uppercase;" readonly>{{ old('alamat', $beasiswa->alamat_karyawan) }}</textarea>
                                            </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: #E6F3F3">
                                            <h6 class="mb-0 fw-bold text-primary">
                                                <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</label>
                                                    <input type="text" class="form-control border-2 error-field"
                                                        name="nama_anak_kk"
                                                        value="{{ old('nama_anak_kk', $beasiswa->nama_anak_kk) }}"
                                                        required
                                                        style="border-color: #dee2e6 !important; height: 45px; text-transform: uppercase;">
                                                    <p class="text-secondary text-xs pt-1 px-1">*) Sesuai KK</p>
                                                </div>

                                                <!-- Nama Anak Sesuai Rekening -->
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-semibold text-dark">Nama Anak Sesuai
                                                        Rekening</label>
                                                    <input type="text" class="form-control border-2 error-field"
                                                        name="nama_anak_rekening"
                                                        value="{{ old('nama_anak_rekening', $beasiswa->nama_anak_rekening) }}"
                                                        required
                                                        style="border-color: #dee2e6 !important; height: 45px; text-transform: uppercase;">
                                                    <p class="text-secondary text-xs pt-1 px-1">*) Sesuai Rekening</p>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <!-- Nama Bank -->
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-semibold text-dark">Nama Bank</label>
                                                    <div class="flex flex-col mb-2 input-group">
                                                        <input type="search" name="nama_bank" id="nama_bank"
                                                            class="form-control border-2"
                                                            value="{{ old('nama_bank', $beasiswa->alias_bank) }}" readonly
                                                            required>
                                                        <input type="hidden" name="id_bank" id="id_bank"
                                                            class="error-field"
                                                            value="{{ old('id_bank', $beasiswa->id_bank) }}">
                                                        <input type="hidden" name="jumlah_digit_rek"
                                                            id="jumlah_digit_rek"
                                                            value="{{ old('jumlah_digit_rek', $beasiswa->jumlah_digit_rek) }}">
                                                        <span class="input-group-text bg-primary text-light"
                                                            data-bs-toggle="modal" data-bs-target="#bankModal"
                                                            style="border-color:#d2d6da;border-left:3px solid #d2d6da;cursor: pointer;">
                                                            <i class="fas fa-search"></i>
                                                        </span>
                                                    </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" id="searchModalLabel">List Data
                                                                </h5>
                                                                <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal" aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </div>
                                                            @php
                                                                $bank = DB::table('mst_bank')
                                                                    ->where('isactive', '1')
                                                                    ->get();
                                                            @endphp
                                                            <div class="modal-body table-responsive">
                                                                <table class="table table-hover display"
                                                                    id="list_trbea_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_modal('{{ $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>

                                                <!-- Nomor Rekening Anak -->
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-semibold text-dark">Nomor Rekening
                                                        Anak</label>
                                                    <input type="text" class="form-control border-2 error-field"
                                                        name="nomor_rekening" id="nomor_rekening"
                                                        placeholder="Masukkan nomor rekening"
                                                        value="{{ old('nomor_rekening', $beasiswa->no_rek) }}" required
                                                        style="border-color: #dee2e6 !important; height: 45px;">
                                                    <p class="text-secondary text-xs pt-1 px-1" id="norek_helper"></p>
                                                </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: #E6F3F3">
                                            <h6 class="mb-0 fw-bold text-primary">
                                                <i class="fas fa-graduation-cap me-2"></i>Pendidikan Anak
                                            </h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <!-- Jenis Pendidikan -->
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-semibold text-dark">Jenis
                                                        Pendidikan</label>
                                                    <div class="d-flex flex-wrap gap-3">
                                                        @php
                                                            $jenjangs = DB::table('sys_enum')
                                                                ->select('value', 'name')
                                                                ->where('idenum', 'jenis_pendidikan')
                                                                ->where('isactive', '1')
                                                                ->get();
                                                        @endphp
                                                        @foreach ($jenjangs as $j)
                                                            <div class="form-check">
                                                                <input class="form-check-input error-field" type="radio"
                                                                    name="jenis_pendidikan"
                                                                    id="jenis_pendidikan_{{ $j->value }}"
                                                                    value="{{ $j->value }}"
                                                                    {{ old('jenis_pendidikan', $beasiswa->jenis_pendidikan) == $j->value ? 'checked' : '' }}
                                                                    required style="border-color: #dee2e6 !important;">
                                                                <label class="form-check-label"
                                                                    for="jenis_pendidikan_{{ $j->value }}">
                                                                    {{ $j->name }}
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>

                                                <!-- Jenjang Pendidikan -->
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-semibold text-dark">Jenjang
                                                        Pendidikan</label>
                                                    <select class="form-select border-2 error-field"
                                                        name="jenjang_pendidikan" id="jenjang_pendidikan" required
                                                        style="border-color: #dee2e6 !important; height: 45px;">
                                                        <option value="">-- Pilih Jenjang --</option>
                                                        @php
                                                            $jenjangs = DB::table('sys_enum')
                                                                ->select('value', 'name')
                                                                ->where('idenum', 'jenjang')
                                                                ->where('isactive', '1')
                                                                ->get();
                                                        @endphp
                                                        @foreach ($jenjangs as $j)
                                                            <option value="{{ $j->value }}"
                                                                {{ old('jenjang_pendidikan', $beasiswa->jenjang_pendidikan) == $j->value ? 'selected' : '' }}>
                                                                {{ $j->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <!-- Kelas -->
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-semibold text-dark">Kelas / Semester (bagi
                                                        mahasiswa)</label>
                                                    <input type="number" class="form-control border-2 error-field"
                                                        name="kelas" id="kelas" maxlength="2"
                                                        value="{{ old('kelas', $beasiswa->kelas) }}" required
                                                        style="border-color: #dee2e6 !important; height: 45px;">
                                                </div>

                                                <!-- Jenis Semester -->
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-semibold text-dark">Jenis Semester</label>
                                                    <select class="form-select border-2 error-field" name="jenis_semester"
                                                        required style="border-color: #dee2e6 !important; height: 45px;">
                                                        <option value="">-- Pilih Jenis --</option>
                                                        @php
                                                            $jenjangs = DB::table('sys_enum')
                                                                ->select('value', 'name')
                                                                ->where('idenum', 'jenis_semester')
                                                                ->where('isactive', '1')
                                                                ->get();
                                                        @endphp
                                                        @foreach ($jenjangs as $j)
                                                            <option value="{{ $j->value }}"
                                                                {{ old('jenis_semester', $beasiswa->jenis_semester) == $j->value ? 'selected' : '' }}>
                                                                {{ $j->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</label>
                                                    <input type="text" class="form-control border-2 error-field"
                                                        name="universitas_sekolah"
                                                        value="{{ old('universitas_sekolah', $beasiswa->nama_sekolah_univ) }}"
                                                        required
                                                        style="border-color: #dee2e6 !important; height: 45px; text-transform: uppercase;">
                                                    <p class="text-secondary text-xs pt-1 px-1">*) Nama Lengkap
                                                        Sekolah/Universitas</p>
                                                </div>

                                                <!-- Indeks Prestasi/Nilai Rapor -->
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-semibold text-dark">Indeks Prestasi/Nilai
                                                        Rapor</label>
                                                    <input type="number" class="form-control border-2 error-field"
                                                        name="indeks_prestasi"
                                                        value="{{ old('indeks_prestasi', $beasiswa->nilai_anak ?? 0) }}"
                                                        step="0.01" min="0" max="100" required
                                                        style="border-color: #dee2e6 !important; height: 45px;">
                                                    <p class="text-secondary text-xs pt-1 px-1" id="rapor_helper">
                                                        {{ '*) SD-SMA: min. 92 | D1-S1 Negeri: min. 3.30 | D1-S1 Swasta: min. 3.50' }}
                                                    </p>
                                                </div>
                                            </div>

                                            <!-- Nominal Beasiswa -->
                                            <div class="row" id="nominal_beasiswa_container"></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: #E6F3F3">
                                            <h6 class="mb-0 fw-bold text-primary">
                                                <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</label>
                                                    <div class="mb-2">
                                                        <button type="button" class="btn btn-sm btn-outline-primary"
                                                            onclick="lihatFile('kartu_keluarga/{{ $beasiswa->kartu_keluarga }}', 'kartu_keluarga')">
                                                            Lihat
                                                        </button>
                                                    </div>
                                                    <input type="file" class="form-control border-2 error-field"
                                                        name="kartu_keluarga" accept=".pdf,.jpg,.jpeg,.png"
                                                        style="border-color: #dee2e6 !important; height: 45px; padding-top: 10px;">
                                                    <small style="color:#028284;">Maksimal Size: 4096 KB<br> Format File:
                                                        .pdf / .jpg / .jpeg / .png</small><br>
                                                    <small class="file-replace-info">
                                                        <i class="fas fa-info-circle me-1"></i>
                                                        Jika mengunggah file baru, file lama akan otomatis diperbarui
                                                        setelah data disimpan.
                                                    </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</label>
                                                    <div class="mb-2">
                                                        <button type="button" class="btn btn-sm btn-outline-primary"
                                                            onclick="lihatFile('buku_tabungan/{{ $beasiswa->buku_tabungan }}', 'buku_tabungan')">
                                                            Lihat
                                                        </button>
                                                    </div>
                                                    <input type="file" class="form-control border-2 error-field"
                                                        name="buku_tabungan" accept=".pdf,.jpg,.jpeg,.png"
                                                        style="border-color: #dee2e6 !important; height: 45px; padding-top: 10px;">
                                                    <small style="color:#028284;">Maksimal Size: 4096 KB<br> Format File:
                                                        .pdf / .jpg / .jpeg / .png</small><br>
                                                    <small class="file-replace-info">
                                                        <i class="fas fa-info-circle me-1"></i>
                                                        Jika mengunggah file baru, file lama akan otomatis diperbarui
                                                        setelah data disimpan.
                                                    </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</label>
                                                    <div class="mb-2">
                                                        <button type="button" class="btn btn-sm btn-outline-primary"
                                                            onclick="lihatFile('surat_keterangan_aktif/{{ $beasiswa->surat_keterangan_aktif }}', 'surat_keterangan_aktif')">
                                                            Lihat
                                                        </button>
                                                    </div>
                                                    <input type="file" class="form-control border-2 error-field"
                                                        name="surat_keterangan_aktif" accept=".pdf,.jpg,.jpeg,.png"
                                                        style="border-color: #dee2e6 !important; height: 45px; padding-top: 10px;">
                                                    <small style="color:#028284;">Maksimal Size: 4096 KB<br> Format File:
                                                        .pdf / .jpg / .jpeg / .png</small><br>
                                                    <small class="file-replace-info">
                                                        <i class="fas fa-info-circle me-1"></i>
                                                        Jika mengunggah file baru, file lama akan otomatis diperbarui
                                                        setelah data disimpan.
                                                    </small>
                                                </div>

                                                <!-- Rapor/Transkrip Nilai -->
                                                <div class="col-md-6 mb-3">
                                                    <label class="form-label fw-semibold text-dark">Rapor/Transkrip Nilai
                                                        (Dokumen dengan legalisir stempel basah)</label>
                                                    <div class="mb-2">
                                                        @php
                                                            $transkrip_files = $beasiswa->transkrip_nilai
                                                                ? explode(',', $beasiswa->transkrip_nilai)
                                                                : [];
                                                        @endphp
                                                        <div id="transkripExistingList" class="d-flex flex-column gap-2">
                                                            @forelse ($transkrip_files as $index => $file)
                                                                @php
                                                                    $file = trim($file);
                                                                @endphp
                                                                <div class="transkrip-item d-flex flex-wrap align-items-center justify-content-between gap-2 border rounded px-2 py-2"
                                                                    data-file="{{ $file }}">
                                                                    <div class="d-flex align-items-center gap-2">
                                                                        <span class="badge bg-secondary transkrip-number">
                                                                            File {{ $index + 1 }}
                                                                        </span>
                                                                        <span
                                                                            class="text-xs text-break transkrip-file-name">
                                                                            {{ $file }}
                                                                        </span>
                                                                        <span
                                                                            class="badge bg-danger d-none transkrip-delete-badge">
                                                                            Akan dihapus
                                                                        </span>
                                                                    </div>

                                                                    <div class="d-flex align-items-center gap-1">
                                                                        <button type="button"
                                                                            class="btn btn-sm btn-outline-primary mb-0 transkrip-view-btn"
                                                                            onclick="lihatFile('transkrip_nilai/{{ $file }}', 'transkrip_nilai')">
                                                                            <i class="fas fa-eye me-1"></i>Lihat
                                                                        </button>
                                                                        <button type="button"
                                                                            class="btn btn-link text-danger p-1 mb-0 transkrip-delete-btn transkrip-delete-icon"
                                                                            onclick="toggleDeleteTranskrip(this)"
                                                                            title="Hapus file"
                                                                            aria-label="Hapus file {{ $index + 1 }}">
                                                                            <i class="fas fa-times-circle"></i>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            @empty
                                                                <span class="text-secondary text-xs">Belum ada file
                                                                    tersimpan.</span>
                                                            @endforelse
                                                        </div>
                                                        <div id="deletedTranskripInputs"></div>

                                                        <!-- Preview file baru: hanya tersimpan di browser sampai form disimpan -->
                                                        <div id="transkripNewPreviewWrapper" class="mt-3 d-none">
                                                            <div
                                                                class="d-flex align-items-center justify-content-between mb-2">
                                                                <span class="fw-semibold text-dark text-sm">
                                                                    <i class="fas fa-paperclip me-1 text-primary"></i>File
                                                                    baru dipilih
                                                                </span>
                                                                <span class="badge bg-primary"
                                                                    id="transkripNewPreviewCount">0 file</span>
                                                            </div>
                                                            <div id="transkripNewPreviewList"
                                                                class="d-flex flex-column gap-2"></div>
                                                        </div>
                                                    </div>
                                                    <input type="file" class="form-control border-2 error-field"
                                                        id="transkrip_nilai_input" name="transkrip_nilai[]"
                                                        accept=".pdf,.jpg,.jpeg,.png"
                                                        style="border-color: #dee2e6 !important; height: 45px; padding-top: 10px;"
                                                        multiple>
                                                    <small style="color:#028284;">Maksimal Size per file: 4096 KB<br>
                                                        Format File:
                                                        .pdf / .jpg / .jpeg / .png</small>
                                                    <br>
                                                    <small class="file-replace-info">
                                                        <i class="fas fa-info-circle me-1"></i>
                                                        Bisa upload lebih dari 1 file.
                                                        Klik ikon × jika file tidak jadi diupload.</small>
                                                </div>
                                            </div>


                                            <div id="buktiContainer" class="buktiContainer">

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

                                    <!-- Tombol aksi bagian bawah -->
                                    <div class="d-flex justify-content-end gap-2 flex-wrap mt-3">
                                        {{-- Tombol aksi bagian bawah --}}
                                        @if ($canEditForm || $canRequestRevision || $isRevisionEmailFailed || $canApprove)
                                            <div
                                                class="
                                                    d-flex
                                                    justify-content-end
                                                    align-items-center
                                                    gap-2
                                                    flex-wrap
                                                    mt-3
                                                ">

                                                {{-- Simpan --}}
                                                @if ($canEditForm)
                                                    <button type="button" class="btn btn-primary js-form-save mb-0"
                                                        id="{{ $dmenu }}-save-bottom">
                                                        <i class="fas fa-floppy-disk me-1"></i>
                                                        Simpan
                                                    </button>
                                                @endif


                                                {{-- Minta / Ajukan / Kirim ulang revisi --}}
                                                @if ($canRequestRevision)
                                                    <button type="button" class="btn btn-warning mb-0 js-revision-btn">
                                                        <i class="fas fa-pen-to-square me-1"></i>

                                                        {{ $revisionButtonText }}
                                                    </button>
                                                @endif


                                                {{-- Approval --}}
                                                @if ($canApprove)
                                                    <button type="button" class="btn btn-primary mb-0" id="approve-btn"
                                                        data-action="approve">
                                                        <i class="fas fa-check me-1"></i>
                                                        Approve
                                                    </button>

                                                    <button type="button" class="btn btn-outline-danger mb-0"
                                                        id="reject-btn" data-action="reject">
                                                        <i class="fas fa-times me-1"></i>
                                                        Reject
                                                    </button>
                                                @endif

                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @else
                                <div class="alert alert-danger">
                                    Data beasiswa tidak ditemukan!
                                </div>
                            @endif
                        </div>
                    </form>
                </div>
                <div class="row px-2 py-2">
                    <div class="col-lg">
                        <div class="nav-wrapper">
                            <code>Note: <i aria-hidden="true" style="" class="fas fa-circle text-dark"></i> Data
                                primary key</code>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal preview gambar dengan fitur rotate -->
    <div class="modal fade" id="imageViewerModal" 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 text-capitalize" id="imageViewerTitle">Preview Gambar</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body p-2" style="background:#f4f5f7; overflow:auto;">
                    <div class="d-flex justify-content-center align-items-center" style="min-height:65vh; overflow:auto;">
                        <img id="imageViewerImage" src="" alt="Preview lampiran"
                            style="max-width:95%; max-height:65vh; object-fit:contain;
                                transform-origin:center center; transition:transform .2s ease;">
                    </div>
                </div>

                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-outline-secondary" onclick="openPreviewImageOriginal()">
                        <i class="fas fa-up-right-from-square me-1"></i>Buka Asli
                    </button>

                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-outline-primary" onclick="rotatePreviewImage(-90)">
                            <i class="fas fa-rotate-left me-1"></i>Putar Kiri
                        </button>
                        <button type="button" class="btn btn-outline-primary" onclick="resetPreviewImage()">
                            <i class="fas fa-arrows-rotate me-1"></i>Reset
                        </button>
                        <button type="button" class="btn btn-outline-primary" onclick="rotatePreviewImage(90)">
                            <i class="fas fa-rotate-right me-1"></i>Putar Kanan
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu)
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection

@push('css')
    <style>
        .text-teal-600 {
            color: #028284;
        }

        .text-teal-700 {
            color: #028284;
        }

        .form-select:focus,
        .form-control:focus,
        .form-check-input:focus {
            border-color: #028284 !important;
            box-shadow: 0 0 0 0.2rem rgba(32, 201, 151, 0.25) !important;
        }

        .card {
            transition: all 0.3s ease;
        }

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

        .form-control:focus,
        .form-select:focus {
            border-color: #ceecd5 !important;
            box-shadow: 0 rgb(174, 204, 181)rem rgba(40, 167, 69, 0.25) !important;
        }

        .btn-outline-success:hover {
            background-color: #028284;
            border-color: #028284;
        }

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

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

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


        .file-replace-info {
            display: block;
            margin-top: 4px;
            color: #dc7200;
            font-weight: 600;
            line-height: 1.4;
        }

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

        .custom-swal {
            background-color: #e6f3f3 !important;
            border-radius: 24px !important;
            padding: 20px !important;
        }

        .swal-title {
            color: #21252 !important;
            font-size: 1.5rem !important;
            font-weight: bold !important;
            margin-bottom: 10px !important;
        }

        .swal-content {
            color: #6c757d !important;
            font-size: 0.9rem !important;
            margin-bottom: 15px;
        }

        .swal-input {
            background-color: #E6F3F3;
            border-left: 1px #028284;
            border-radius: 5px;
            padding: 10px;
            width: 100%;
            height: 100px;
            resize: none;
            color: #666;
        }

        .swal-input::placeholder {
            color: #999;
        }

        .swal-confirm,
        .swal-cancel {
            background-color: #028284;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            color: white;
            font-weight: bold;
        }

        .swal-cancel {
            background-color: #028284;
            margin-right: 10px;
        }

        .swal-confirm:focus,
        .swal-cancel:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(2, 130, 132, 0.5);
        }

        .transkrip-delete-icon {
            border: 0 !important;
            box-shadow: none !important;
            font-size: 1.15rem;
            line-height: 1;
            text-decoration: none !important;
        }

        .transkrip-delete-icon:hover,
        .transkrip-delete-icon:focus {
            transform: scale(1.12);
            box-shadow: none !important;
        }

        .transkrip-marked-delete {
            background-color: #fff5f5;
        }

        .transkrip-new-item {
            background: #f8fffe;
            border: 1px solid #bfe4df !important;
        }

        .transkrip-new-file-icon {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f3f6f9;
            border: 1px solid #dee2e6;
            font-size: 1.25rem;
        }

        .transkrip-new-remove-btn {
            border: 0 !important;
            box-shadow: none !important;
            font-size: 1.1rem;
            line-height: 1;
        }

        .transkrip-new-remove-btn:hover,
        .transkrip-new-remove-btn:focus {
            transform: scale(1.12);
            box-shadow: none !important;
        }
    </style>
@endpush

@push('js')
    <script>
        $(document).ready(function() {

            @if ($isWaitingRevision)

                const revisionNotes =
                    @json($beasiswa->revision_notes ?? ($list->revision_notes ?? ''));

                const safeRevisionNotes =
                    $('<div>')
                    .text(revisionNotes)
                    .html()
                    .replace(/\n/g, '<br>');

                Swal.fire({
                    icon: 'info',

                    iconColor: '#028284',

                    title: 'Menunggu Revisi dari Karyawan',

                    html: `
            <div class="text-start">

                <p class="mb-3">
                    Permintaan revisi telah berhasil dikirim
                    kepada karyawan.
                </p>

                ${
                    revisionNotes
                        ? `
                                <div
                                    class="p-3 rounded mb-3"
                                    style="
                                        background-color: #f8f9fa;
                                        border-left: 4px solid #028284;
                                    "
                                >
                                    <div
                                        class="fw-semibold mb-1"
                                        style="color: #028284;"
                                    >
                                        <i class="fas fa-pen-to-square me-1"></i>
                                        Catatan Revisi
                                    </div>

                                    <div class="text-muted">
                                        ${safeRevisionNotes}
                                    </div>
                                </div>
                            `
                        : ''
                }

                <div
                    class="text-muted"
                    style="
                        font-size: 13px;
                        line-height: 1.6;
                    "
                >
                    <i
                        class="fas fa-circle-info me-1"
                        style="color: #028284;"
                    ></i>

                    Pengajuan tidak dapat diedit atau diproses
                    approval sampai karyawan mengirim hasil revisi.
                </div>

            </div>
        `,

                    confirmButtonText: 'OK',

                    confirmButtonColor: '#028284',

                    width: 520,

                    allowOutsideClick: false,

                    allowEscapeKey: false
                });
            @endif
            $('#list_trbea_bank').DataTable();

            // Bank selection from modal
            window.select_bank_modal = function(id_bank, alias_bank, jumlah_digit) {
                $('#id_bank').val(id_bank);
                $('#nama_bank').val(alias_bank);
                $('#jumlah_digit_rek').val(jumlah_digit);
                const nomorRekInput = $('#nomor_rekening');
                nomorRekInput.attr('maxlength', jumlah_digit);
                nomorRekInput.attr('minlength', jumlah_digit);
                const helper = $('#norek_helper');
                helper.text(`*) Nomor rekening harus ${jumlah_digit} digit`)
                    .removeClass('text-secondary text-success')
                    .addClass('text-danger');
                nomorRekInput.removeClass('border-danger border-success');
                nomorRekInput.trigger('input');
                $('#bankModal').modal('hide');
            };

            // Validate account number
            function validateNoRek() {
                const nomorRekInput = $('#nomor_rekening');
                let val = nomorRekInput.val();
                const maxDigit = parseInt($('#jumlah_digit_rek').val());
                const helper = $('#norek_helper');

                if (!maxDigit) {
                    helper.text('*) Pilih bank terlebih dahulu')
                        .removeClass('text-danger text-success')
                        .addClass('text-secondary');
                    nomorRekInput.removeClass('border-danger border-success');
                    return;
                }

                if (val.length > maxDigit) {
                    val = val.substring(0, maxDigit);
                    nomorRekInput.val(val);
                }

                if (val.length < maxDigit) {
                    helper.text(`*) Nomor rekening kurang dari ${maxDigit} digit`)
                        .removeClass('text-success text-secondary')
                        .addClass('text-danger');
                    nomorRekInput.addClass('border-danger').removeClass('border-success');
                } else if (val.length === maxDigit) {
                    helper.text(`*) Nomor rekening sesuai ${maxDigit} digit`)
                        .removeClass('text-danger text-secondary')
                        .addClass('text-success');
                    nomorRekInput.addClass('border-success').removeClass('border-danger');
                }
            }

            $('#nomor_rekening').on('input', validateNoRek);

            $('#nomor_rekening').on('blur', function() {
                if ($(this).hasClass('border-success')) {
                    $(this).removeClass('border-success');
                }
            });

            // First load: check account number from DB
            $(window).on('load', function() {
                validateNoRek();
            });

            // Menghapus awalan 0 pada field kelas
            $('#kelas').on('input', function() {
                let val = $(this).val().replace(/^0+/, ''); // Menghapus 0 di awal
                val = val.replace(/[^0-9]/g, ''); // Hanya izinkan angka

                if (val.length > 2) {
                    val = val.substring(0, 2); // Batasi maksimal 2 digit
                }
                $(this).val(val); // Update nilai input
            });

            // Validate and set decimal for indeks_prestasi
            const jenjangRapor = document.querySelector('[name="jenjang_pendidikan"]');
            const jenisRapor = document.querySelectorAll('[name="jenis_pendidikan"]');
            const inputRapor = document.querySelector('input[name="indeks_prestasi"]');
            const helperRapor = document.getElementById('rapor_helper');

            const defaultHelperText =
                "*) SD-SMA: min. 92, max. 100 | D1-S1 Negeri: min. 3.30, max. 4.00 | D1-S1 Swasta: min. 3.50, max. 4.00";

            function getMinNilai(jenjang, jenis) {
                if (['sd', 'smp', 'sma'].includes(jenjang)) return 92;
                if (['d1', 'd2', 'd3', 'd4', 's1'].includes(jenjang)) {
                    return (jenis === 'swasta') ? 3.5 : 3.3;
                }
                return 0;
            }

            function getMaxNilai(jenjang) {
                if (['sd', 'smp', 'sma'].includes(jenjang)) return 100;
                if (['d1', 'd2', 'd3', 'd4', 's1'].includes(jenjang)) return 4.0;
                return Infinity;
            }

            function updateInputAttributes() {
                const jenjang = jenjangRapor.value;
                const jenis = Array.from(jenisRapor).find(radio => radio.checked)?.value;
                const minNilai = getMinNilai(jenjang, jenis);
                const maxNilai = getMaxNilai(jenjang);
                inputRapor.setAttribute('min', minNilai);
                inputRapor.setAttribute('max', maxNilai);
            }

            inputRapor.addEventListener('blur', function() {
                const jenjang = jenjangRapor.value;
                let value = parseFloat(inputRapor.value);
                if (!isNaN(value)) {
                    if (value < 0) {
                        inputRapor.value = '';
                        helperRapor.textContent = 'Nilai tidak boleh negatif';
                        helperRapor.classList.add('text-danger');
                        helperRapor.classList.remove('text-secondary');
                        inputRapor.classList.add('border-danger');
                        inputRapor.classList.remove('border-success');
                    } else if (['d1', 'd2', 'd3', 'd4', 's1'].includes(jenjang)) {
                        inputRapor.value = value.toFixed(2);
                    } else {
                        inputRapor.value = value;
                    }
                }
            });

            inputRapor.addEventListener('keypress', function(e) {
                if (e.key === '-') {
                    e.preventDefault();
                }
            });

            function validasiRapor(firstLoad = false) {
                const jenjang = jenjangRapor.value;
                const jenis = Array.from(jenisRapor).find(radio => radio.checked)?.value;
                const minNilai = getMinNilai(jenjang, jenis);
                const maxNilai = getMaxNilai(jenjang);
                const currentValue = parseFloat(inputRapor.value);

                if (!isNaN(currentValue)) {
                    if (currentValue < 0) {
                        helperRapor.textContent = 'Nilai tidak boleh negatif';
                        helperRapor.classList.add('text-danger');
                        helperRapor.classList.remove('text-secondary');
                        inputRapor.classList.add('border-danger');
                        inputRapor.classList.remove('border-success');
                    } else if (currentValue < minNilai) {
                        helperRapor.textContent =
                            `*) Nilai minimal untuk ${jenjang.toUpperCase()} (${jenis}) adalah ${minNilai}`;
                        helperRapor.classList.add('text-danger');
                        helperRapor.classList.remove('text-secondary');
                        inputRapor.classList.add('border-danger');
                        inputRapor.classList.remove('border-success');
                    } else if (currentValue > maxNilai) {
                        helperRapor.textContent =
                            `*) Nilai maksimal untuk ${jenjang.toUpperCase()} adalah ${maxNilai}`;
                        helperRapor.classList.add('text-danger');
                        helperRapor.classList.remove('text-secondary');
                        inputRapor.classList.add('border-danger');
                        inputRapor.classList.remove('border-success');
                    } else {
                        helperRapor.textContent = defaultHelperText;
                        helperRapor.classList.remove('text-danger');
                        helperRapor.classList.add('text-secondary');
                        inputRapor.classList.remove('border-danger');
                        inputRapor.classList.add('border-success');
                    }
                } else if (firstLoad) {
                    helperRapor.textContent =
                        `*) Nilai minimal untuk ${jenjang.toUpperCase()} (${jenis}) adalah ${minNilai}`;
                    helperRapor.classList.add('text-danger');
                    helperRapor.classList.remove('text-secondary');
                    inputRapor.classList.add('border-danger');
                }
            }

            inputRapor.addEventListener('input', () => validasiRapor(false));
            jenjangRapor.addEventListener('change', () => {
                validasiRapor(false);
                updateInputAttributes();
            });
            jenisRapor.forEach(radio => {
                radio.addEventListener('change', () => {
                    validasiRapor(false);
                    updateInputAttributes();
                });
            });
            window.addEventListener('load', () => {
                validasiRapor(true);
                updateInputAttributes();
            });

            // Autofill nominal beasiswa
            const jenjangEl = document.querySelector('[name="jenjang_pendidikan"]');
            const jenisEl = document.querySelectorAll('[name="jenis_pendidikan"]');
            const nominalContainer = document.getElementById('nominal_beasiswa_container');
            const buktiContainer = document.getElementById('buktiContainer');

            const nominalMapping = {
                'sd': 1000000,
                'smp': 1500000,
                'sma': 2000000,
                'd1': 3000000,
                'd2': 3000000,
                'd3': 3000000,
                'd4': 3000000,
                's1': 3000000
            };

            const nominal_beasiswa = '{{ $beasiswa->nominal_beasiswa ?? 0 }}';
            const spp_perbulan = '{{ $beasiswa->spp_perbulan ?? 0 }}';

            // function input field bukti_spp
            const spp_semester = '{{ $beasiswa->bukti_spp }}';
            const spp_bulan_1 = '{{ $beasiswa->bukti_spp_bulan_1 }}';
            const spp_bulan_2 = '{{ $beasiswa->bukti_spp_bulan_2 }}';
            const spp_bulan_3 = '{{ $beasiswa->bukti_spp_bulan_3 }}';
            const spp_bulan_4 = '{{ $beasiswa->bukti_spp_bulan_4 }}';
            const spp_bulan_5 = '{{ $beasiswa->bukti_spp_bulan_5 }}';
            const spp_bulan_6 = '{{ $beasiswa->bukti_spp_bulan_6 }}';


            let prevJenis = Array.from(jenisEl).find(radio => radio.checked)?.value;

            function updateNominalAndBuktiSpp(firstLoad = false) {
                const jenjang = jenjangEl.value;
                const jenis = Array.from(jenisEl).find(radio => radio.checked)?.value || prevJenis || '';
                nominalContainer.innerHTML = ''; // Clear container
                buktiContainer.innerHTML = '';

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

                function parseNumber(value) {
                    return parseFloat(value.replace(/\./g, '')) || 0;
                }

                function validateNominal(input, helperId, fieldName, isMonthly = false) {
                    const value = parseNumber(input.value);
                    const $helper = document.getElementById(helperId);
                    if (!$helper) {
                        console.error(`Helper element #${helperId} not found in DOM`);
                        return false;
                    }
                    input.classList.remove('border-danger', 'border-success');
                    $helper.classList.remove('text-danger', 'text-secondary', 'text-success');

                    if (isNaN(value) || value < 0) {
                        $helper.textContent = `*) ${fieldName} harus berupa angka positif`;
                        $helper.classList.add('text-danger');
                        input.classList.add('border-danger');
                        return false;
                    } else if (value === 0 && jenis === 'swasta') {
                        $helper.textContent = `*) ${fieldName} tidak boleh 0`;
                        $helper.classList.add('text-danger');
                        input.classList.add('border-danger');
                        return false;
                    }
                    $helper.textContent = $helper.dataset.defaultText || `*) Nominal ${fieldName.toLowerCase()}`;
                    $helper.classList.add('text-secondary');
                    input.classList.add('border-success');
                    return true;
                }

                if (jenis === 'swasta' && ['sd', 'smp', 'sma'].includes(jenjang)) {

                    // ////////////////////////  UPDATE NOMINAL SPP ////////////////////////////////////////////////////

                    // SD-SMA Swasta: SPP per bulan and total
                    const monthlyValue = parseFloat(spp_perbulan) || 0;
                    const totalValue = monthlyValue * 6;

                    nominalContainer.innerHTML = `
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold text-dark">SPP per Bulan</label>
                            <input type="text" class="form-control border-2 error-field currency-input"
                                name="display_spp_perbulan" id="spp_perbulan"
                                value="${formatNumber(monthlyValue)}"
                                style="border-color: #dee2e6 !important; height: 45px;" required>
                            <input type="hidden" name="spp_perbulan" id="spp_perbulan_raw" value="${monthlyValue}">
                            <p class="text-secondary text-xs pt-1 px-1" id="nominal_helper_bulan" data-default-text="*) Nominal SPP per bulan">
                                *) Nominal SPP per bulan
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold text-dark">Total Nominal Beasiswa</label>
                            <input type="text" class="form-control border-2 error-field currency-input"
                                name="display_nominal_beasiswa" id="total_nominal_beasiswa"
                                value="${formatNumber(totalValue)}"
                                style="border-color: #dee2e6 !important; height: 45px;" readonly>
                            <input type="hidden" name="nominal_beasiswa" id="total_nominal_beasiswa_raw" value="${totalValue}">
                            <p class="text-secondary text-xs pt-1 px-1" id="nominal_helper_total" data-default-text="*) Total beasiswa (6 × SPP per bulan)">
                                *) Total beasiswa (6 × SPP per bulan)
                            </p>
                        </div>
                        `;

                    const monthlyInput = document.getElementById('spp_perbulan');
                    const totalInput = document.getElementById('total_nominal_beasiswa');
                    const monthlyRawInput = document.getElementById('spp_perbulan_raw');
                    const totalRawInput = document.getElementById('total_nominal_beasiswa_raw');

                    if (monthlyInput && totalInput && monthlyRawInput && totalRawInput) {
                        validateNominal(monthlyInput, 'nominal_helper_bulan', 'SPP per Bulan', true);
                        validateNominal(totalInput, 'nominal_helper_total', 'Total Beasiswa', false);

                        monthlyInput.addEventListener('input', function() {
                            let value = this.value.replace(/[^0-9]/g, '');
                            let numericValue = parseNumber(value);
                            this.value = formatNumber(numericValue);
                            monthlyRawInput.value = numericValue;
                            totalInput.value = formatNumber(numericValue * 6);
                            totalRawInput.value = numericValue * 6;
                            validateNominal(this, 'nominal_helper_bulan', 'SPP per Bulan', true);
                            validateNominal(totalInput, 'nominal_helper_total', 'Total Beasiswa', false);
                        });
                    }

                    ///////////////////////////////////////////// UPDATE FILE BUKTI SPP ////////////////////////////////////////////////////////

                    buktiContainer.innerHTML = `
                        <div class="row">
                           <!-- Bukti Pembayaran SPP 1 Semester (6 bulan) -->
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold text-dark">Bukti Pembayaran SPP Bulan ke-1</label>
                                    <div class="mb-2">
                                        <button type="button" class="btn btn-sm btn-outline-primary"
                                            onclick="lihatFile('bukti_spp_bulan_1/{{ $beasiswa->bukti_spp_bulan_1 }}', 'bukti_spp_bulan_1')"> Lihat
                                        </button>
                                    </div>
                                <input type="file" class="form-control border-2 error-field" name="bukti_spp_bulan_1" accept=".pdf,.jpg,.jpeg,.png"
                                    style="border-color: #dee2e6 !important; height: 45px; padding-top: 10px;">
                                    <small style="color:#028284;">Maksimal Size: 4096 KB<br>Format File: .pdf / .jpg / .jpeg / .png</small>
                                    <small class="file-replace-info">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Jika mengunggah file baru, file lama akan otomatis diperbarui setelah data disimpan.
                                    </small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold text-dark">Bukti Pembayaran SPP Bulan ke-2</label>
                                    <div class="mb-2">
                                        <button type="button" class="btn btn-sm btn-outline-primary"
                                            onclick="lihatFile('bukti_spp_bulan_2/{{ $beasiswa->bukti_spp_bulan_2 }}', 'bukti_spp_bulan_2')"> Lihat
                                        </button>
                                    </div>
                                <input type="file" class="form-control border-2 error-field" name="bukti_spp_bulan_2" accept=".pdf,.jpg,.jpeg,.png"
                                    style="border-color: #dee2e6 !important; height: 45px; padding-top: 10px;">
                                    <small style="color:#028284;">Maksimal Size: 4096 KB<br>Format File: .pdf / .jpg / .jpeg / .png</small>
                                    <small class="file-replace-info">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Jika mengunggah file baru, file lama akan otomatis diperbarui setelah data disimpan.
                                    </small>
                            </div>
                        </div>
                        <div class="row">
                        <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold text-dark">Bukti Pembayaran SPP Bulan ke-3</label>
                                    <div class="mb-2">
                                        <button type="button" class="btn btn-sm btn-outline-primary"
                                            onclick="lihatFile('bukti_spp_bulan_3/{{ $beasiswa->bukti_spp_bulan_3 }}', 'bukti_spp_bulan_3')"> Lihat
                                        </button>
                                    </div>
                                <input type="file" class="form-control border-2 error-field" name="bukti_spp_bulan_3" accept=".pdf,.jpg,.jpeg,.png"
                                    style="border-color: #dee2e6 !important; height: 45px; padding-top: 10px;">
                                    <small style="color:#028284;">Maksimal Size: 4096 KB<br>Format File: .pdf / .jpg / .jpeg / .png</small>
                                    <small class="file-replace-info">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Jika mengunggah file baru, file lama akan otomatis diperbarui setelah data disimpan.
                                    </small>
                            </div>
                        <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold text-dark">Bukti Pembayaran SPP Bulan ke-4</label>
                                    <div class="mb-2">
                                        <button type="button" class="btn btn-sm btn-outline-primary"
                                            onclick="lihatFile('bukti_spp_bulan_4/{{ $beasiswa->bukti_spp_bulan_4 }}', 'bukti_spp_bulan_4')"> Lihat
                                        </button>
                                    </div>
                                <input type="file" class="form-control border-2 error-field" name="bukti_spp_bulan_4" accept=".pdf,.jpg,.jpeg,.png"
                                    style="border-color: #dee2e6 !important; height: 45px; padding-top: 10px;">
                                    <small style="color:#028284;">Maksimal Size: 4096 KB<br>Format File: .pdf / .jpg / .jpeg / .png</small>
                                    <small class="file-replace-info">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Jika mengunggah file baru, file lama akan otomatis diperbarui setelah data disimpan.
                                    </small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold text-dark">Bukti Pembayaran SPP Bulan ke-5</label>
                                    <div class="mb-2">
                                        <button type="button" class="btn btn-sm btn-outline-primary"
                                            onclick="lihatFile('bukti_spp_bulan_5/{{ $beasiswa->bukti_spp_bulan_5 }}', 'bukti_spp_bulan_5')"> Lihat
                                        </button>
                                    </div>
                                <input type="file" class="form-control border-2 error-field" name="bukti_spp_bulan_5" accept=".pdf,.jpg,.jpeg,.png"
                                    style="border-color: #dee2e6 !important; height: 45px; padding-top: 10px;">
                                    <small style="color:#028284;">Maksimal Size: 4096 KB<br>Format File: .pdf / .jpg / .jpeg / .png</small>
                                    <small class="file-replace-info">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Jika mengunggah file baru, file lama akan otomatis diperbarui setelah data disimpan.
                                    </small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold text-dark">Bukti Pembayaran SPP Bulan ke-6</label>
                                    <div class="mb-2">
                                        <button type="button" class="btn btn-sm btn-outline-primary"
                                            onclick="lihatFile('bukti_spp_bulan_6/{{ $beasiswa->bukti_spp_bulan_6 }}', 'bukti_spp_bulan_6')"> Lihat
                                        </button>
                                    </div>
                                <input type="file" class="form-control border-2 error-field" name="bukti_spp_bulan_6" accept=".pdf,.jpg,.jpeg,.png"
                                    style="border-color: #dee2e6 !important; height: 45px; padding-top: 10px;">
                                    <small style="color:#028284;">Maksimal Size: 4096 KB<br>Format File: .pdf / .jpg / .jpeg / .png</small>
                                    <small class="file-replace-info">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Jika mengunggah file baru, file lama akan otomatis diperbarui setelah data disimpan.
                                    </small>
                            </div>
                        </div>
                    `;

                } else if (jenis === 'swasta' && ['d1', 'd2', 'd3', 'd4', 's1'].includes(jenjang)) {
                    // D1-S1 Swasta: SPP semester only
                    const totalValue = parseFloat(nominal_beasiswa) || 0;

                    nominalContainer.innerHTML = `
                            <div class="col-12 mb-3">
                                <label class="form-label fw-semibold text-dark">SPP Semester</label>
                                <input type="text" class="form-control border-2 error-field currency-input"
                                    name="display_nominal_beasiswa" id="total_nominal_beasiswa"
                                    value="${formatNumber(totalValue)}"
                                    style="border-color: #dee2e6 !important; height: 45px;" required>
                                <input type="hidden" name="nominal_beasiswa" id="total_nominal_beasiswa_raw" value="${totalValue}">
                                <input type="hidden" name="spp_perbulan" id="spp_perbulan_raw" value="0">
                                <p class="text-secondary text-xs pt-1 px-1" id="nominal_helper" data-default-text="*) Nominal SPP semester">
                                    *) Nominal SPP semester
                                </p>
                            </div>
                        `;

                    const semesterInput = document.getElementById('total_nominal_beasiswa');
                    const semesterRawInput = document.getElementById('total_nominal_beasiswa_raw');

                    if (semesterInput && semesterRawInput) {
                        validateNominal(semesterInput, 'nominal_helper', 'SPP Semester', false);
                        semesterInput.addEventListener('input', function() {
                            let value = this.value.replace(/[^0-9]/g, '');
                            let numericValue = parseNumber(value);
                            this.value = formatNumber(numericValue);
                            semesterRawInput.value = numericValue;
                            validateNominal(this, 'nominal_helper', 'SPP Semester', false);
                        });
                    }

                    ///////////////////////////////////////////// UPDATE FILE BUKTI SPP ////////////////////////////////////////////////////////
                    buktiContainer.innerHTML = `
                    <!-- Bukti Pembayaran SPP 1 Semester (6 bulan) -->
                        <div class="col-12 mb-3">
                          <label class="form-label fw-semibold text-dark">Bukti Pembayaran SPP 1 Semester (6 bulan)</label>
                            <div class="mb-2">
                                <button type="button" class="btn btn-sm btn-outline-primary"
                                    onclick="lihatFile('bukti_spp/{{ $beasiswa->bukti_spp }}', 'bukti_spp')"> Lihat
                                </button>
                            </div>
                            <input type="file" class="form-control border-2 error-field" name="bukti_spp" accept=".pdf,.jpg,.jpeg,.png"
                                style="border-color: #dee2e6 !important; height: 45px; padding-top: 10px;">
                                <small style="color:#028284;">Maksimal Size: 4096 KB<br>Format File: .pdf / .jpg / .jpeg / .png</small>
                                <small class="file-replace-info">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Jika mengunggah file baru, file lama akan otomatis diperbarui setelah data disimpan.
                                </small>
                         </div>
                    `;
                } else {
                    // Negeri: Fixed nominal beasiswa
                    const nominalValue = nominalMapping[jenjang] || 0;

                    nominalContainer.innerHTML = `
                        <div class="col-12 mb-3">
                            <label class="form-label fw-semibold text-dark">Nominal Beasiswa</label>
                            <input type="text" class="form-control border-2 error-field currency-input"
                                name="display_nominal_beasiswa" id="total_nominal_beasiswa"
                                value="${formatNumber(nominalValue)}"
                                style="border-color: #dee2e6 !important; height: 45px;" readonly required>
                            <input type="hidden" name="nominal_beasiswa" id="total_nominal_beasiswa_raw" value="${nominalValue}">
                            <input type="hidden" name="spp_perbulan" id="spp_perbulan_raw" value="0">
                            <p class="text-secondary text-xs pt-1 px-1" id="nominal_helper" data-default-text="*) Nominal beasiswa tetap sesuai jenjang pendidikan">
                                *) Nominal beasiswa tetap sesuai jenjang pendidikan
                            </p>
                        </div>
                    `;
                }

                // Re-apply disabled state if in show mode
                if ($('#{{ $dmenu }}-edit').is(':visible')) {
                    nominalContainer.querySelectorAll('input').forEach(input => input.setAttribute('disabled',
                        'disabled'));
                    nominalContainer.querySelectorAll('label').forEach(label => label.classList.add('disabled'));
                }

                prevJenis = jenis;
            }

            jenjangEl.addEventListener('change', () => updateNominalAndBuktiSpp(false));
            jenisEl.forEach(radio => {
                radio.addEventListener('change', () => updateNominalAndBuktiSpp(false));
            });
            updateNominalAndBuktiSpp(true);

            // File size validation for inputs with accept=".pdf"
            // ==============================
            // CONFIG
            // ==============================
            const maxFileSizeKB = 4096; // 2MB
            const maxFileSizeBytes = maxFileSizeKB * 1024;
            const allowedExt = ['pdf', 'jpg', 'jpeg', 'png'];

            // ==============================
            // HELPERS
            // ==============================
            function getExt(filename) {
                return (filename || '').split('.').pop().toLowerCase();
            }

            function showFileError($input, field, message) {
                Swal.fire({
                    icon: 'error',
                    title: 'File Tidak Valid',
                    text: message,
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#028284'
                });

                $input.val('');
                $input.removeClass('border-success').addClass('border-danger');

                const $errorMessage = $('<p>', {
                    class: 'error-message text-danger text-xs pt-1 px-1',
                    'data-field': field
                }).text(message);

                // hapus error lama khusus field ini
                $input.siblings('.error-message[data-field="' + field + '"]').remove();
                $input.after($errorMessage);
            }

            function clearFileError($input, field) {
                $input.removeClass('border-danger');
                $input.siblings('.error-message[data-field="' + field + '"]').remove();
            }

            function validateSingleFileInput($input) {
                const field = $input.attr('name');
                const fieldLabel = (field || '')
                    .replace(/\[\]/g, '')
                    .replace(/_/g, ' ');
                const files = Array.from($input[0].files || []);

                // kosong -> reset state
                if (files.length === 0) {
                    $input.removeClass('border-success border-danger');
                    clearFileError($input, field);
                    return true;
                }

                for (let index = 0; index < files.length; index++) {
                    const file = files[index];
                    const ext = getExt(file.name);
                    const fileNumber = files.length > 1 ? ` file ke-${index + 1}` : '';

                    if (!allowedExt.includes(ext)) {
                        showFileError(
                            $input,
                            field,
                            `Format${fileNumber} untuk ${fieldLabel} harus: ${allowedExt.join(', ')}`
                        );
                        return false;
                    }

                    if (file.size > maxFileSizeBytes) {
                        showFileError(
                            $input,
                            field,
                            `Ukuran${fileNumber} untuk ${fieldLabel} melebihi ${maxFileSizeKB} KB (4 MB).`
                        );
                        return false;
                    }
                }

                clearFileError($input, field);
                $input.removeClass('border-danger').addClass('border-success');
                return true;
            }

            // ==============================
            // FILE CHANGE HANDLER
            // (cukup 1 handler global biar ga dobel & aman untuk dynamic)
            // ==============================
            // File transkrip multiple ditangani khusus agar file dapat ditampilkan,
            // ditambah beberapa kali, dan dihapus satu per satu sebelum disimpan.
            $(document).on('change', 'input[type="file"].error-field', function() {
                if (this.id === 'transkrip_nilai_input') {
                    handleNewTranskripSelection(this);
                    return;
                }

                validateSingleFileInput($(this));
            });

            // ==============================
            // DAFTAR & REMOVE FILE TRANSKRIP BARU
            // File hanya berada di memori browser. Refresh halaman membatalkan pilihan.
            // DataTransfer dipakai agar file yang dihapus juga hilang dari input.files.
            // ==============================
            const newTranskripFiles = [];

            function getNewTranskripKey(file) {
                return `${file.name}__${file.size}__${file.lastModified}`;
            }

            function formatFileSize(bytes) {
                if (!Number.isFinite(bytes) || bytes <= 0) return '0 KB';
                const kb = bytes / 1024;
                if (kb < 1024) return `${kb.toFixed(kb >= 100 ? 0 : 1)} KB`;
                return `${(kb / 1024).toFixed(2)} MB`;
            }

            function syncNewTranskripInput() {
                const input = document.getElementById('transkrip_nilai_input');
                if (!input) return;

                const transfer = new DataTransfer();
                newTranskripFiles.forEach(file => transfer.items.add(file));
                input.files = transfer.files;
            }

            function renderNewTranskripPreview() {
                const wrapper = document.getElementById('transkripNewPreviewWrapper');
                const list = document.getElementById('transkripNewPreviewList');
                const count = document.getElementById('transkripNewPreviewCount');

                if (!wrapper || !list || !count) return;

                list.innerHTML = '';
                count.textContent = `${newTranskripFiles.length} file`;
                wrapper.classList.toggle('d-none', newTranskripFiles.length === 0);

                newTranskripFiles.forEach((file, index) => {
                    const ext = getExt(file.name);
                    const isImage = ['jpg', 'jpeg', 'png'].includes(ext);

                    const item = document.createElement('div');
                    item.className =
                        'transkrip-new-item d-flex align-items-center justify-content-between gap-2 rounded px-2 py-2';

                    const left = document.createElement('div');
                    left.className = 'd-flex align-items-center gap-2 min-w-0';

                    // Jangan render isi/thumbnail gambar agar file berukuran besar
                    // tidak memenuhi halaman. Tampilkan ikon jenis file saja.
                    const iconBox = document.createElement('div');
                    iconBox.className =
                        `transkrip-new-file-icon ${isImage ? 'text-primary' : 'text-danger'}`;
                    iconBox.innerHTML = isImage ?
                        '<i class="fas fa-file-image"></i>' :
                        '<i class="fas fa-file-pdf"></i>';
                    left.appendChild(iconBox);

                    const info = document.createElement('div');
                    info.className = 'min-w-0';

                    const name = document.createElement('div');
                    name.className = 'text-sm fw-semibold text-dark text-break';
                    name.textContent = file.name;

                    const meta = document.createElement('div');
                    meta.className = 'text-xs text-secondary';
                    meta.textContent =
                        `${ext.toUpperCase()} • ${formatFileSize(file.size)} • Belum disimpan`;

                    info.appendChild(name);
                    info.appendChild(meta);
                    left.appendChild(info);

                    const removeButton = document.createElement('button');
                    removeButton.type = 'button';
                    removeButton.className =
                        'btn btn-link text-danger p-1 mb-0 transkrip-new-remove-btn flex-shrink-0';
                    removeButton.title = 'Batalkan upload file ini';
                    removeButton.setAttribute('aria-label', `Batalkan upload ${file.name}`);
                    removeButton.innerHTML = '<i class="fas fa-times-circle"></i>';
                    removeButton.addEventListener('click', () => removeNewTranskrip(index));

                    item.appendChild(left);
                    item.appendChild(removeButton);
                    list.appendChild(item);
                });
            }

            function showNewTranskripErrors(messages) {
                if (!messages.length) return;

                Swal.fire({
                    icon: 'error',
                    title: 'Ada File Tidak Valid',
                    text: messages.join('\n'),
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#028284'
                });
            }

            window.handleNewTranskripSelection = function(input) {
                const selectedFiles = Array.from(input.files || []);
                const existingKeys = new Set(newTranskripFiles.map(getNewTranskripKey));
                const errors = [];

                selectedFiles.forEach(file => {
                    const ext = getExt(file.name);
                    const key = getNewTranskripKey(file);

                    if (!allowedExt.includes(ext)) {
                        errors.push(`${file.name}: format harus ${allowedExt.join(', ')}`);
                        return;
                    }

                    if (file.size > maxFileSizeBytes) {
                        errors.push(`${file.name}: ukuran melebihi ${maxFileSizeKB} KB (4 MB)`);
                        return;
                    }

                    if (existingKeys.has(key)) {
                        return;
                    }

                    newTranskripFiles.push(file);
                    existingKeys.add(key);
                });

                syncNewTranskripInput();
                renderNewTranskripPreview();
                validateSingleFileInput($(input));
                showNewTranskripErrors(errors);
            };

            window.removeNewTranskrip = function(index) {
                newTranskripFiles.splice(index, 1);

                syncNewTranskripInput();
                renderNewTranskripPreview();

                const input = document.getElementById('transkrip_nilai_input');
                if (input) {
                    validateSingleFileInput($(input));
                }
            };

            // ==============================
            // VIEW FILE (PDF & IMAGE)
            // ==============================
            let imageRotation = 0;
            let currentImageUrl = '';

            function applyImageRotation() {
                $('#imageViewerImage').css(
                    'transform',
                    `rotate(${imageRotation}deg)`
                );
            }

            window.rotatePreviewImage = function(degree) {
                imageRotation = (imageRotation + degree) % 360;
                applyImageRotation();
            };

            window.resetPreviewImage = function() {
                imageRotation = 0;
                applyImageRotation();
            };

            window.openPreviewImageOriginal = function() {
                if (currentImageUrl) {
                    window.open(currentImageUrl, '_blank');
                }
            };

            window.lihatFile = function(fileName, field) {
                if (!fileName || fileName.endsWith('/')) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'File Tidak Ada',
                        text: 'Belum ada file yang diupload untuk ' + (field || '').replace(/_/g, ' '),
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                const clean = (fileName || '').split('?')[0];
                const ext = getExt(clean);
                const url = `{{ url('storage') }}/${fileName}`;

                if (['jpg', 'jpeg', 'png'].includes(ext)) {
                    currentImageUrl = url;
                    imageRotation = 0;

                    $('#imageViewerTitle').text(
                        (field || 'gambar').replace(/_/g, ' ')
                    );
                    $('#imageViewerImage').attr('src', url);
                    applyImageRotation();

                    bootstrap.Modal
                        .getOrCreateInstance(document.getElementById('imageViewerModal'))
                        .show();
                    return;
                }

                // PDF tetap dibuka pada tab baru.
                window.open(url, '_blank');
            };

            $('#imageViewerModal').on('hidden.bs.modal', function() {
                $('#imageViewerImage').attr('src', '');
                currentImageUrl = '';
                imageRotation = 0;
            });

            // ==============================
            // MARK / CANCEL DELETE TRANSKRIP LAMA
            // Status penghapusan hanya disimpan di memori JavaScript.
            // Refresh halaman akan mengosongkan Set ini, sehingga file tampil kembali.
            // File fisik baru dihapus oleh controller setelah tombol Simpan ditekan.
            // ==============================
            const deletedTranskripFiles = new Set();

            function syncDeletedTranskripInputs() {
                const container = document.getElementById('deletedTranskripInputs');
                container.innerHTML = '';

                deletedTranskripFiles.forEach(fileName => {
                    const hiddenInput = document.createElement('input');
                    hiddenInput.type = 'hidden';
                    hiddenInput.name = 'hapus_transkrip_nilai[]';
                    hiddenInput.value = fileName;
                    container.appendChild(hiddenInput);
                });
            }

            function setTranskripDeleteState(item, marked) {
                const viewButton = item.querySelector('.transkrip-view-btn');
                const deleteButton = item.querySelector('.transkrip-delete-btn');
                const deleteBadge = item.querySelector('.transkrip-delete-badge');
                const fileName = item.querySelector('.transkrip-file-name');
                const icon = deleteButton.querySelector('i');

                item.classList.toggle('opacity-50', marked);
                item.classList.toggle('border-danger', marked);
                item.classList.toggle('transkrip-marked-delete', marked);
                fileName.classList.toggle('text-decoration-line-through', marked);
                viewButton.disabled = marked;
                deleteBadge.classList.toggle('d-none', !marked);

                deleteButton.classList.toggle('text-danger', !marked);
                deleteButton.classList.toggle('text-secondary', marked);
                deleteButton.title = marked ? 'Batalkan hapus' : 'Hapus file';
                deleteButton.setAttribute('aria-label', marked ? 'Batalkan hapus file' : 'Hapus file');

                icon.className = marked ?
                    'fas fa-rotate-left' :
                    'fas fa-times-circle';
            }

            window.toggleDeleteTranskrip = function(button) {
                const item = button.closest('.transkrip-item');
                const fileName = item?.dataset.file || '';

                if (!item || !fileName) {
                    return;
                }

                if (deletedTranskripFiles.has(fileName)) {
                    deletedTranskripFiles.delete(fileName);
                    setTranskripDeleteState(item, false);
                } else {
                    deletedTranskripFiles.add(fileName);
                    setTranskripDeleteState(item, true);
                }

                syncDeletedTranskripInputs();
            };

            // ==============================
            // CLIENT-SIDE VALIDATION BEFORE SUBMISSION
            // ==============================
            function validateForm(showSummary = false) {
                // Bentuk hidden input hanya saat form akan divalidasi/dikirim.
                syncDeletedTranskripInputs();

                let isValid = true;
                $('.error-message').remove();
                $('[name]').removeClass('border-danger');
                let firstInvalidField = null;

                // required non-file
                const requiredFields = $('#{{ $dmenu }}-form')
                    .find('input[required]:not([type="file"]), select[required], textarea[required]');

                requiredFields.each(function() {
                    const $input = $(this);
                    const field = $input.attr('name');

                    if (!$input.val() || !$input.val().toString().trim()) {
                        isValid = false;
                        $input.addClass('border-danger');

                        const $errorMessage = $('<p>', {
                            class: 'error-message text-danger text-xs pt-1 px-1',
                            'data-field': field
                        }).text(`*) ${field.replace(/_/g, ' ').toLowerCase()} tidak boleh kosong`);

                        $input.after($errorMessage);

                        if (!firstInvalidField) firstInvalidField = $input;
                    }
                });

                // radio jenis_pendidikan
                const jenisPendidikan = $('[name="jenis_pendidikan"]:checked').val();
                if (!jenisPendidikan) {
                    isValid = false;
                    const $radioGroup = $('.form-check-input[name="jenis_pendidikan"]');
                    $radioGroup.addClass('border-danger');

                    const $errorMessage = $('<p>', {
                        class: 'error-message text-danger text-xs pt-1 px-1',
                        'data-field': 'jenis_pendidikan'
                    }).text('*) Jenis pendidikan harus dipilih');

                    $radioGroup.closest('.d-flex').after($errorMessage);
                    if (!firstInvalidField) firstInvalidField = $radioGroup.first();
                }

                // VALIDASI SEMUA FILE INPUT (tidak pakai accept filter lagi)
                const fileInputs = $('#{{ $dmenu }}-form').find('input[type="file"].error-field');
                fileInputs.each(function() {
                    const ok = validateSingleFileInput($(this));
                    if (!ok) {
                        isValid = false;
                        if (!firstInvalidField) firstInvalidField = $(this);
                    }
                });

                // Minimal harus tetap ada 1 transkrip: file lama yang tidak dihapus atau file baru.
                const transkripInput = document.querySelector('input[name="transkrip_nilai[]"]');
                const existingTranskripCount = document.querySelectorAll('.transkrip-item').length;
                // Sumber utama status hapus adalah Set JavaScript, bukan database.
                const deletedTranskripCount = deletedTranskripFiles.size;
                const newTranskripCount = transkripInput?.files?.length || 0;
                const finalTranskripCount = existingTranskripCount - deletedTranskripCount + newTranskripCount;

                if (finalTranskripCount < 1) {
                    isValid = false;
                    const $transkripInput = $(transkripInput);
                    $transkripInput.addClass('border-danger');
                    $transkripInput.siblings('.error-message[data-field="transkrip_nilai"]').remove();
                    $transkripInput.after(
                        $('<p>', {
                            class: 'error-message text-danger text-xs pt-1 px-1',
                            'data-field': 'transkrip_nilai'
                        }).text('*) Minimal harus ada satu file rapor/transkrip nilai')
                    );
                    if (!firstInvalidField) firstInvalidField = $transkripInput;
                }

                // nomor rekening length
                const nomorRekInput = $('#nomor_rekening');
                const jumlahDigit = parseInt($('#jumlah_digit_rek').val());
                if (jumlahDigit && nomorRekInput.val().trim().length !== jumlahDigit) {
                    isValid = false;
                    nomorRekInput.addClass('border-danger');
                    nomorRekInput.after($('<p>', {
                        class: 'error-message text-danger text-xs pt-1 px-1'
                    }).text(`Nomor rekening harus terdiri dari ${jumlahDigit} digit.`));
                    if (!firstInvalidField) firstInvalidField = nomorRekInput;
                }

                // kelas (no leading zeros)
                const kelasInput = $('input[name="kelas"]');
                if (kelasInput.length) {
                    const kelasValue = kelasInput.val().trim();
                    const kelasNumber = parseInt(kelasValue, 10);
                    if (kelasValue && (kelasValue.match(/^0\d/) || isNaN(kelasNumber))) {
                        isValid = false;
                        kelasInput.addClass('border-danger');

                        const $errorMessage = $('<p>', {
                            class: 'error-message text-danger text-xs pt-1 px-1',
                            'data-field': 'kelas'
                        }).text('*) Kelas harus berupa angka tanpa nol di depan (contoh: 9, bukan 09)');

                        kelasInput.after($errorMessage);
                        if (!firstInvalidField) firstInvalidField = kelasInput;
                    }
                }

                // indeks_prestasi
                const inputRapor = $('input[name="indeks_prestasi"]');
                const jenjang = $('[name="jenjang_pendidikan"]').val();
                const jenis = $('[name="jenis_pendidikan"]:checked').val();
                const currentValue = parseFloat(inputRapor.val());
                const minNilai = getMinNilai(jenjang, jenis);
                const maxNilai = getMaxNilai(jenjang);

                if (!isNaN(currentValue)) {
                    if (currentValue < minNilai || currentValue > maxNilai) {
                        isValid = false;
                        inputRapor.addClass('border-danger');
                        inputRapor.after($('<p>', {
                            class: 'error-message text-danger text-xs pt-1 px-1'
                        }).text(`Nilai rapor/IPK harus antara ${minNilai} dan ${maxNilai}.`));
                        if (!firstInvalidField) firstInvalidField = inputRapor;
                    }
                } else if (inputRapor.attr('required')) {
                    isValid = false;
                    inputRapor.addClass('border-danger');
                    if (!firstInvalidField) firstInvalidField = inputRapor;
                }

                // spp_perbulan / nominal_beasiswa swasta
                if (jenis === 'swasta') {
                    if (['sd', 'smp', 'sma'].includes(jenjang)) {
                        const sppPerBulanInput = $('#spp_perbulan_raw');
                        const sppPerBulanValue = parseFloat(sppPerBulanInput.val()) || 0;
                        if (sppPerBulanValue === 0) {
                            isValid = false;
                            const $input = $('#spp_perbulan');
                            $input.addClass('border-danger');
                            $input.after($('<p>', {
                                class: 'error-message text-danger text-xs pt-1 px-1'
                            }).text('SPP per bulan harus lebih dari 0 untuk pendidikan swasta.'));
                            if (!firstInvalidField) firstInvalidField = $input;
                        }
                    } else if (['d1', 'd2', 'd3', 'd4', 's1'].includes(jenjang)) {
                        const nominalBeasiswaInput = $('#total_nominal_beasiswa_raw');
                        const nominalBeasiswaValue = parseFloat(nominalBeasiswaInput.val()) || 0;
                        if (nominalBeasiswaValue === 0) {
                            isValid = false;
                            const $input = $('#total_nominal_beasiswa');
                            $input.addClass('border-danger');
                            $input.after($('<p>', {
                                class: 'error-message text-danger text-xs pt-1 px-1'
                            }).text('Nominal beasiswa harus lebih dari 0 untuk pendidikan swasta.'));
                            if (!firstInvalidField) firstInvalidField = $input;
                        }
                    }
                }

                // scroll ke error pertama
                if (!isValid && firstInvalidField) {
                    firstInvalidField.focus();
                    $('html, body').animate({
                        scrollTop: firstInvalidField.offset().top - 100
                    }, 500);
                }

                if (!isValid && showSummary) {
                    const messages = $('#{{ $dmenu }}-form .error-message').map(function() {
                        return $(this).text();
                    }).get();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Perubahan belum tersimpan',
                        text: [...new Set(messages)].join('\n') || 'Periksa kembali kolom yang ditandai merah.',
                        confirmButtonText: 'Periksa kembali',
                        confirmButtonColor: '#028284'
                    });
                }

                return isValid;
            }


            // $('#buktiContainer').on('change', 'input[type="file"][accept=".pdf"]', function() {
            //     const $input = $(this);
            //     const field = $input.attr('name');
            //     const file = $input[0].files[0];
            //     const maxFileSizeKB = 2048;
            //     const maxFileSizeBytes = maxFileSizeKB * 1024; // Convert KB to bytes

            //     if (file && file.size > maxFileSizeBytes) {
            //         Swal.fire({
            //             icon: 'error',
            //             title: 'File Terlalu Besar',
            //             text: `Ukuran file untuk ${field.replace(/_/g, ' ')} melebihi batas maksimal 4 MB. Silakan pilih file yang lebih kecil.`,
            //             confirmButtonText: 'OK',
            //             confirmButtonColor: '#028284'
            //         });
            //         $input.val(''); // Clear the input
            //         $input.removeClass('border-success').addClass('border-danger');
            //         const $errorMessage = $('<p>', {
            //             class: 'error-message text-danger text-xs pt-1 px-1',
            //             'data-field': field
            //         }).text(`Ukuran file melebihi ${maxFileSizeKB} KB`);
            //         $input.siblings('.error-message').remove();
            //         $input.after($errorMessage);
            //     } else {
            //         $input.removeClass('border-danger');
            //         $input.siblings('.error-message[data-field="' + field + '"]').remove();
            //         if (file) {
            //             $input.addClass('border-success');
            //         }
            //     }
            // });

            // const maxFileSizeKB = 2048;

            // // File size validation for static file inputs (outside #buktiContainer)
            // $('input[type="file"][accept=".pdf"]:not(#buktiContainer input)').on('change', function() {
            //     const $input = $(this);
            //     const field = $input.attr('name');
            //     const file = $input[0].files[0];
            //     const maxFileSizeKB = 2048; // Maximum file size in KB (4MB)
            //     const maxFileSizeBytes = maxFileSizeKB * 1024; // Convert KB to bytes

            //     if (file && file.size > maxFileSizeBytes) {
            //         Swal.fire({
            //             icon: 'error',
            //             title: 'File Terlalu Besar',
            //             text: `Ukuran file untuk ${field.replace(/_/g, ' ')} melebihi batas maksimal 4 MB. Silakan pilih file yang lebih kecil.`,
            //             confirmButtonText: 'OK',
            //             confirmButtonColor: '#028284'
            //         });
            //         $input.val(''); // Clear the input
            //         $input.removeClass('border-success').addClass('border-danger');
            //         const $errorMessage = $('<p>', {
            //             class: 'error-message text-danger text-xs pt-1 px-1',
            //             'data-field': field
            //         }).text(`Ukuran file melebihi ${maxFileSizeKB} KB`);
            //         $input.siblings('.error-message').remove();
            //         $input.after($errorMessage);
            //     } else {
            //         $input.removeClass('border-danger');
            //         $input.siblings('.error-message[data-field="' + field + '"]').remove();
            //         if (file) {
            //             $input.addClass('border-success');
            //         }
            //     }
            // });

            // // View file
            // window.lihatFile = function(fileName, field) {
            //     if (!fileName) {
            //         Swal.fire({
            //             icon: 'warning',
            //             title: 'File Tidak Ada',
            //             text: 'Belum ada file yang diupload untuk ' + field.replace('_', ' '),
            //             confirmButtonText: 'OK'
            //         });
            //     } else {
            //         const url = '{{ url('storage') }}' + '/' + fileName;
            //         window.open(url, '_blank');
            //     }
            // };

            // // Client-side validation before submission
            // function validateForm() {

            //     let isValid = true;
            //     $('.error-message').remove();
            //     $('[name]').removeClass('border-danger');
            //     let firstInvalidField = null;

            //     // Check required fields
            //     const requiredFields = $('#{{ $dmenu }}-form').find(
            //         'input[required]:not([type="file"]), select[required], textarea[required]');
            //     if (requiredFields.length === 0) {
            //         console.warn('No required fields found in the form');
            //     }

            //     requiredFields.each(function() {
            //         const $input = $(this);
            //         const field = $input.attr('name');
            //         if (!$input.val().trim()) {
            //             isValid = false;
            //             $input.addClass('border-danger');
            //             const $errorMessage = $('<p>', {
            //                 class: 'error-message text-danger text-xs pt-1 px-1',
            //                 'data-field': field
            //             }).text(`*) ${field.replace(/_/g, ' ').toLowerCase()} tidak boleh kosong`);
            //             $input.after($errorMessage);
            //             if (!firstInvalidField) {
            //                 firstInvalidField = $input;
            //             }
            //         }
            //     });

            //     // Validate radio buttons
            //     const jenisPendidikan = $('[name="jenis_pendidikan"]:checked').val();
            //     if (!jenisPendidikan) {
            //         isValid = false;
            //         const $radioGroup = $('.form-check-input[name="jenis_pendidikan"]');
            //         $radioGroup.addClass('border-danger');
            //         const $errorMessage = $('<p>', {
            //             class: 'error-message text-danger text-xs pt-1 px-1',
            //             'data-field': 'jenis_pendidikan'
            //         }).text('*) Jenis pendidikan harus dipilih');
            //         $radioGroup.closest('.d-flex').after($errorMessage);
            //         if (!firstInvalidField) {
            //             firstInvalidField = $radioGroup.first();
            //         }
            //     }

            //     // Validate file sizes
            //     const fileInputs = $('#{{ $dmenu }}-form').find('input[type="file"][accept=".pdf"]');
            //     fileInputs.each(function() {
            //         const $input = $(this);
            //         const field = $input.attr('name');
            //         const file = $input[0].files[0];
            //         if (file && file.size > maxFileSizeKB * 1024) {
            //             isValid = false;
            //             $input.addClass('border-danger');
            //             if (!firstInvalidField) {
            //                 firstInvalidField = $input;
            //             }
            //         }
            //     });

            //     // Validate nomor_rekening
            //     const nomorRekInput = $('#nomor_rekening');
            //     const jumlahDigit = parseInt($('#jumlah_digit_rek').val());
            //     if (jumlahDigit && nomorRekInput.val().trim().length !== jumlahDigit) {
            //         isValid = false;
            //         nomorRekInput.addClass('border-danger');
            //         if (!firstInvalidField) {
            //             firstInvalidField = nomorRekInput;
            //         }
            //     }

            //     // Validate kelas (reject leading zeros like '09')
            //     const kelasInput = $('input[name="kelas"]');
            //     if (kelasInput.length) {
            //         const kelasValue = kelasInput.val().trim();
            //         const kelasNumber = parseInt(kelasValue, 10);
            //         if (kelasValue && (kelasValue.match(/^0\d/) || isNaN(kelasNumber))) {
            //             isValid = false;
            //             kelasInput.addClass('border-danger');
            //             const $errorMessage = $('<p>', {
            //                 class: 'error-message text-danger text-xs pt-1 px-1',
            //                 'data-field': 'kelas'
            //             }).text('*) Kelas harus berupa angka tanpa nol di depan (contoh: 9, bukan 09)');
            //             kelasInput.after($errorMessage);
            //             if (!firstInvalidField) {
            //                 firstInvalidField = kelasInput;
            //             }
            //         }
            //     }

            //     // Validate indeks_prestasi
            //     const inputRapor = $('input[name="indeks_prestasi"]');
            //     const jenjang = $('[name="jenjang_pendidikan"]').val();
            //     const jenis = $('[name="jenis_pendidikan"]:checked').val();
            //     const currentValue = parseFloat(inputRapor.val());
            //     const minNilai = getMinNilai(jenjang, jenis);
            //     const maxNilai = getMaxNilai(jenjang);
            //     if (!isNaN(currentValue)) {
            //         if (currentValue < minNilai || currentValue > maxNilai) {
            //             isValid = false;
            //             inputRapor.addClass('border-danger');
            //             if (!firstInvalidField) {
            //                 firstInvalidField = inputRapor;
            //             }
            //         }
            //     } else if (inputRapor.attr('required')) {
            //         isValid = false;
            //         inputRapor.addClass('border-danger');
            //         if (!firstInvalidField) {
            //             firstInvalidField = inputRapor;
            //         }
            //     }

            //     // Validate spp_perbulan and nominal_beasiswa for swasta
            //     if (jenis === 'swasta') {
            //         if (['sd', 'smp', 'sma'].includes(jenjang)) {
            //             const sppPerBulanInput = $('#spp_perbulan_raw');
            //             const sppPerBulanValue = parseFloat(sppPerBulanInput.val()) || 0;
            //             if (sppPerBulanValue === 0) {
            //                 isValid = false;
            //                 const $input = $('#spp_perbulan');
            //                 $input.addClass('border-danger');
            //                 if (!firstInvalidField) {
            //                     firstInvalidField = $input;
            //                 }
            //             }
            //         } else if (['d1', 'd2', 'd3', 'd4', 's1'].includes(jenjang)) {
            //             const nominalBeasiswaInput = $('#total_nominal_beasiswa_raw');
            //             const nominalBeasiswaValue = parseFloat(nominalBeasiswaInput.val()) || 0;
            //             if (nominalBeasiswaValue === 0) {
            //                 isValid = false;
            //                 const $input = $('#total_nominal_beasiswa');
            //                 $input.addClass('border-danger');
            //                 if (!firstInvalidField) {
            //                     firstInvalidField = $input;
            //                 }
            //             }
            //         }
            //     }

            //     if (!isValid && firstInvalidField) {
            //         firstInvalidField.focus();
            //         $('html, body').animate({
            //             scrollTop: firstInvalidField.offset().top - 100
            //         }, 500);
            //     }

            //     return isValid;
            // }

            // Handle form submission
            function formSubmit() {
                const form = document.getElementById('{{ $dmenu }}-form');

                if (!validateForm(true)) {
                    console.log('Form validation failed');
                    return;
                }

                $('.js-form-save').prop('disabled', true);
                console.log('Submitting form:', form);
                form.submit();
            }

            // Tombol Simpan atas dan bawah memakai handler yang sama.
            $('.js-form-save').on('click', formSubmit);

            // Prevent default form submission
            $('#{{ $dmenu }}-form').on('submit', function(e) {
                console.log('Form submission intercepted');
                e.preventDefault();
                formSubmit();
            });

            // Client-side validation untuk field non-file.
            // File memiliki handler sendiri agar input multiple tidak tervalidasi sebelum DataTransfer selesai disinkronkan.
            $('[name]').not('input[type="file"]').on('input change', function() {
                validateForm();
            });

            $('.js-revision-btn').on('click', function() {

                const button = $(this);

                const isHrdRejected =
                    @json($isHrdRejected);

                const isRevisionEmailFailed =
                    @json($isRevisionEmailFailed);


                /*
                |--------------------------------------------------------------------------
                | DEFAULT: Ajukan REVISI
                |--------------------------------------------------------------------------
                */
                let popupTitle =
                    'Kirim Permintaan Revisi';

                let popupDescription = `
    Tuliskan data atau dokumen yang perlu diperbaiki
    oleh karyawan pada pengajuan ini.
`;

                let confirmText =
                    'Kirim Permintaan Revisi';

                let loadingTitle =
                    'Mengirim permintaan revisi...';

                let successTitle =
                    'Permintaan Revisi Berhasil Dikirim';


                /*
                |--------------------------------------------------------------------------
                | SALAH REJECT → AJUKAN REVISI
                |--------------------------------------------------------------------------
                */
                if (isHrdRejected) {

                    popupTitle =
                        'Ajukan Revisi Pengajuan';

                    popupDescription = `
        Pengajuan ini sebelumnya telah ditolak oleh HRD.
        Tuliskan data atau dokumen yang perlu diperbaiki
        oleh karyawan agar pengajuan dapat dilanjutkan kembali.
    `;

                    confirmText =
                        'Ya, Ajukan Revisi';

                    loadingTitle =
                        'Mengajukan revisi...';

                    successTitle =
                        'Revisi Berhasil Diajukan';
                }


                /*
                |--------------------------------------------------------------------------
                | EMAIL SEBELUMNYA GAGAL
                |--------------------------------------------------------------------------
                */
                if (isRevisionEmailFailed) {

                    popupTitle =
                        'Kirim Ulang Permintaan Revisi';

                    popupDescription = `
        Permintaan revisi sebelumnya belum berhasil
        dikirim melalui email.

        Silakan periksa kembali catatan revisi
        sebelum dikirim kepada karyawan.
    `;

                    confirmText =
                        'Kirim Ulang';

                    loadingTitle =
                        'Mengirim ulang permintaan revisi...';

                    successTitle =
                        'Permintaan Revisi Berhasil Dikirim';
                }


                Swal.fire({

                    icon: 'warning',

                    title: popupTitle,

                    html: `
        <div class="text-start">

            <p class="mb-3">
                ${popupDescription}
            </p>

            <label
                for="revisionNotes"
                class="form-label fw-semibold"
            >
                Catatan revisi
            </label>

            <textarea
                id="revisionNotes"
                class="form-control"
                rows="4"
                maxlength="500"
                placeholder="Contoh: Mohon perbaiki nilai rapor dan unggah ulang bukti pembayaran SPP."
                style="
                    width:100%;
                    box-sizing:border-box;
                    resize:vertical;
                "
            ></textarea>

            <small class="text-muted">
                Maksimal 500 karakter.
            </small>

        </div>
    `,

                    showCancelButton: true,

                    confirmButtonText: confirmText,

                    cancelButtonText: 'Batal',

                    confirmButtonColor: '#028284',

                    cancelButtonColor: '#6c757d',

                    reverseButtons: true,

                    allowOutsideClick: false,

                    allowEscapeKey: false,

                    width: 540,

                    preConfirm: () => {

                        const notes =
                            document
                            .getElementById('revisionNotes')
                            .value
                            .trim();

                        if (!notes) {

                            Swal.showValidationMessage(
                                'Catatan revisi wajib diisi.'
                            );

                            return false;
                        }

                        return notes;
                    }

                }).then((result) => {

                    if (!result.isConfirmed) {
                        return;
                    }


                    /*
                    |--------------------------------------------------------------------------
                    | DISABLE ACTION
                    |--------------------------------------------------------------------------
                    */
                    $('.js-revision-btn')
                        .prop('disabled', true);

                    $('#approve-btn, #reject-btn')
                        .prop('disabled', true);

                    $('.js-form-save')
                        .prop('disabled', true);


                    /*
                    |--------------------------------------------------------------------------
                    | LOADING
                    |--------------------------------------------------------------------------
                    */
                    Swal.fire({

                        title: loadingTitle,

                        text: 'Mohon tunggu sebentar.',

                        allowOutsideClick: false,

                        allowEscapeKey: false,

                        showConfirmButton: false,

                        didOpen: () => {
                            Swal.showLoading();
                        }

                    });


                    /*
                    |--------------------------------------------------------------------------
                    | AJAX
                    |--------------------------------------------------------------------------
                    */
                    $.ajax({

                        url: "{{ url($url_menu . '/request-revision/' . $idencrypt) }}",

                        type: 'POST',

                        data: {

                            _token: $('meta[name="csrf-token"]')
                                .attr('content'),

                            notes: result.value

                        },

                        headers: {

                            'Accept': 'application/json',

                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]')
                                .attr('content')

                        },


                        success: function(response) {

                            Swal.fire({

                                icon: 'success',

                                title: successTitle,

                                text: response.message ||
                                    'Permintaan revisi berhasil dikirim kepada karyawan.',

                                confirmButtonColor: '#028284'

                            }).then(() => {

                                window.location.href =
                                    "{{ url($url_menu . '/' . $idencrypt) }}";

                            });

                        },


                        error: function(xhr) {

                            $('.js-revision-btn')
                                .prop('disabled', false);

                            $('#approve-btn, #reject-btn')
                                .prop('disabled', false);

                            $('.js-form-save')
                                .prop('disabled', false);


                            const message =
                                xhr.responseJSON?.message ||
                                'Permintaan revisi belum berhasil dikirim.';

                            const detail =
                                xhr.responseJSON?.error_detail ||
                                '';


                            Swal.fire({

                                icon: 'error',

                                title: 'Permintaan Revisi Belum Terkirim',

                                html: `
                    <p class="mb-2">
                        ${$('<div>')
                            .text(message)
                            .html()}
                    </p>

                    ${
                        detail
                            ? `
                                                <div
                                                    class="
                                                        alert
                                                        alert-light
                                                        text-start
                                                        mt-3
                                                        mb-0
                                                    "
                                                >
                                                    <strong>
                                                        Detail error:
                                                    </strong>

                                                    <br>

                                                    ${$('<div>')
                                                        .text(detail)
                                                        .html()}
                                                </div>
                                            `
                            : ''
                    }
                `,

                                confirmButtonColor: '#dc3545'

                            });

                        }

                    });

                });

            });

            // Approve/Reject buttons
            $('#approve-btn, #reject-btn').on('click', function() {
                const actionForm = $('#{{ $dmenu }}-form');
                const actionUrl = '{{ URL::to($url_menu . '/approval/' . $idencrypt) }}';
                const action = $(this).data('action');
                const button = $(this);
                const userRole = '{{ $user->idroles }}';
                const canEdit = ['admins', 'hrdcek'].includes(userRole);

                // Validate form only for roles with edit permissions if form is in edit mode
                if (!validateForm()) {
                    return;
                }

                // Disable all related buttons at the start
                $('#approve-btn, #reject-btn, #{{ $dmenu }}-edit').add('.js-form-save').prop(
                    'disabled', true);

                Swal.fire({
                    icon: action === 'reject' ? 'warning' : 'success',
                    iconColor: action === 'reject' ? '#ff0000' : '#028284',
                    title: action === 'reject' ? 'Reject Notes' : 'Approve Notes',
                    html: '<small>Silakan masukkan catatan sebagai alasan keputusan Anda</small>',
                    input: 'textarea',
                    inputPlaceholder: 'Tulis catatan',
                    inputAttributes: {
                        'aria-label': 'Tulis catatan'
                    },
                    inputValue: action === 'approve' ?
                        'Approved by {{ $user->firstname }}{{ $user->lastname ? ' ' . $user->lastname : '' }}' :
                        '',
                    showCancelButton: true,
                    confirmButtonText: 'Simpan',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#028284',
                    customClass: {
                        popup: 'custom-swal',
                        title: 'swal-title',
                        content: 'swal-content',
                        input: 'swal-input',
                        confirmButton: 'swal-confirm',
                        cancelButton: 'swal-cancel'
                    },
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    preConfirm: (value) => {
                        if (action === 'reject' && !value) {
                            Swal.showValidationMessage('Catatan wajib diisi jika menolak!');
                            return false;
                        }
                        return value;
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Explicitly close the first dialog
                        Swal.close();

                        // Show processing alert after clicking "Simpan"
                        Swal.fire({
                            title: 'Sedang memproses pengiriman...',
                            text: 'Harap tunggu sebentar.',
                            icon: 'info',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            showConfirmButton: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        const formData = new FormData();
                        formData.append('action', action);
                        formData.append('notes', result.value || '');
                        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

                        // Include form data only for roles with edit permissions if form is in edit mode
                        if (canEdit && $('.js-form-save').is(':visible')) {
                            // Temporarily enable disabled fields
                            actionForm.find('input:disabled, select:disabled, textarea:disabled')
                                .prop('disabled', false);
                            // Append form fields, excluding '_method'
                            const inputs = actionForm.serializeArray();
                            inputs.forEach(input => {
                                if (input.name !== '_method') {
                                    formData.append(input.name, input.value);
                                }
                            });
                            // Append seluruh file. Penting untuk input multiple seperti transkrip_nilai[].
                            actionForm.find('input[type="file"]').each(function() {
                                const inputName = this.name;

                                Array.from(this.files || []).forEach(file => {
                                    formData.append(inputName, file);
                                });
                            });
                            // Re-disable fields
                            actionForm.find('input:disabled, select:disabled, textarea:disabled')
                                .prop('disabled', true);
                        }

                        // Debug: Log FormData contents
                        for (let [key, value] of formData.entries()) {
                            console.log(key + ': ' + (value instanceof File ? value.name : value));
                        }

                        $.ajax({
                            url: actionUrl,
                            method: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            headers: {
                                'Accept': 'application/json'
                            },
                            timeout: 10000,
                            success: function(response) {
                                // Close processing alert
                                Swal.close();

                                let message = response.message;
                                if (action === 'reject' && ['headhr', 'sp'].includes(
                                        userRole)) {
                                    message +=
                                        ' Aplikasi telah dikembalikan ke HRD Checker untuk evaluasi ulang.';
                                }
                                Swal.fire({
                                    title: 'Success',
                                    text: message,
                                    icon: 'success',
                                    confirmButtonColor: '#028284',
                                    customClass: {
                                        popup: 'custom-swal',
                                        title: 'swal-title',
                                        htmlContainer: 'swal-content',
                                        confirmButton: 'swal-confirm'
                                    }
                                }).then(() => {
                                    // Keep buttons disabled after success
                                    $('#approve-btn, #reject-btn, #{{ $dmenu }}-edit')
                                        .add('.js-form-save')
                                        .prop('disabled', true);
                                    window.location.href =
                                        '{{ URL::to($url_menu) }}';
                                });
                            },
                            error: function(xhr) {
                                // Close processing alert
                                Swal.close();

                                console.error('AJAX Error:', {
                                    status: xhr.status,
                                    response: xhr.responseJSON,
                                    message: xhr.responseJSON?.message ||
                                        'No error message provided',
                                    errors: xhr.responseJSON?.errors || null
                                });
                                // Keep buttons disabled on error
                                $('#approve-btn, #reject-btn, #{{ $dmenu }}-edit')
                                    .add('.js-form-save')
                                    .prop('disabled', true);
                                let errorMessage = xhr.responseJSON?.message || xhr
                                    .responseJSON?.error ||
                                    'Unknown server error. Please check the server logs.';
                                if (xhr.status === 401) {
                                    errorMessage =
                                        'Unauthorized: Please log in and try again.';
                                } else if (xhr.status === 422) {
                                    errorMessage = 'Validation failed: ' + Object
                                        .values(xhr.responseJSON?.errors || {}).flat()
                                        .join(', ');
                                } else if (xhr.status === 500) {
                                    errorMessage =
                                        `Server error: ${xhr.responseJSON?.error || xhr.responseJSON?.message || 'Please check the server logs for details.'}`;
                                }
                                Swal.fire({
                                    title: 'Error',
                                    text: `Failed to ${action}: ${errorMessage}`,
                                    icon: 'error',
                                    confirmButtonColor: '#028284',
                                    customClass: {
                                        popup: 'custom-swal',
                                        title: 'swal-title',
                                        htmlContainer: 'swal-content',
                                        confirmButton: 'swal-confirm'
                                    }
                                });
                            },
                            // complete: function() {
                            //     // Close processing alert (just in case)
                            //     Swal.close();
                            //     // Keep buttons disabled after AJAX completes
                            //     $('#approve-btn, #reject-btn, #{{ $dmenu }}-edit').add('.js-form-save')
                            //         .prop('disabled', true);
                            // }
                        });
                    } else {
                        // Re-enable buttons if user cancels the Swal dialog
                        $('#approve-btn, #reject-btn, #{{ $dmenu }}-edit').add(
                                '.js-form-save')
                            .prop('disabled', false);
                    }
                });
            });

            function submitAction(actionForm, action, actionUrl, button) {
                $.ajax({
                    url: actionUrl,
                    method: 'POST',
                    data: actionForm.serialize(),
                    success: function(response) {
                        button.html(
                            `<i class="fas fa-${action === 'approve' ? 'check' : 'times'} me-1"></i> ${action.charAt(0).toUpperCase() + action.slice(1)}`
                        ).prop('disabled', false);
                        window.location.href = '{{ URL::to($url_menu) }}';
                    },
                    error: function(xhr) {
                        button.html(
                            `<i class="fas fa-${action === 'approve' ? 'check' : 'times'} me-1"></i> ${action.charAt(0).toUpperCase() + action.slice(1)}`
                        ).prop('disabled', false);
                        Swal.fire({
                            title: 'Error',
                            text: `Failed to ${action} form: ${xhr.responseJSON?.message || 'Unknown error'}`,
                            icon: 'error',
                            confirmButtonColor: '#028284'
                        });
                    }
                });
            }
        });

        function kembali(idencrypt) {

            const userRole = '{{ $user->idroles }}';

            // Ambil status approval dari data baris (pastikan ada di object row/data)
            const hrdStatus = '{{ $beasiswa->is_approved_by_hrd ?? '' }}';
            const headhrStatus = '{{ $beasiswa->is_approved_by_headhrd ?? '' }}';
            const spStatus = '{{ $beasiswa->is_approved_by_sp ?? '' }}';

            let isAlreadyProcessed = false;

            if (userRole === 'hrdcek') {
                // HRD Checker: sudah pernah dibuka/dilihat = sudah diproses (bisa approve/reject)
                isAlreadyProcessed = ['1', '2'].includes(hrdStatus);

            } else if (userRole === 'headhr') {

                isAlreadyProcessed = headhrStatus === '1' || headhrStatus === '2';

            } else if (userRole === 'sp') {

                isAlreadyProcessed = ['1', '2'].includes(spStatus);

            }

            if (isAlreadyProcessed) {
                console.log('Sudah diproses → langsung kembali tanpa update flag');

                // Simpan state DataTable kalau perlu
                const table = $('#list_trbea').DataTable();
                if (table && typeof table.page === 'function') {
                    sessionStorage.setItem('trbeaDataTableState', JSON.stringify(table.state()));
                }

                // Kembali ke halaman sebelumnya atau default
                const previousUrl = document.referrer || '{{ url($url_menu) }}';
                window.location.replace(previousUrl + (previousUrl.includes('?') ? '&' : '?') + 'refresh=true');
                return;
            }

            const button = $('button[onclick="kembali(\'' + idencrypt + '\')"]');
            button.prop('disabled', true);
            const url = '{{ url($url_menu . '/update-flag-view') }}/' + encodeURIComponent(idencrypt);

            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                cache: false,
                success: function(response) {
                    console.log('Flag view response:', response); // Debug
                    const table = $('#list_trbea').DataTable();
                    if (table && typeof table.page === 'function') {
                        sessionStorage.setItem('trbeaDataTableState', JSON.stringify(table.state()));
                    }
                    // Ambil URL halaman sebelumnya
                    const previousUrl = document.referrer || '{{ url($url_menu) }}';
                    // Redirect ke URL sebelumnya dengan reload
                    window.location.replace(previousUrl + (previousUrl.includes('?') ? '&' : '?') +
                        'refresh=true');
                },
                error: function(xhr) {
                    console.error('Error updating flag view:', xhr.responseJSON);
                    let message = xhr.responseJSON?.error || 'Terjadi kesalahan server';
                    Swal.fire({
                        title: 'Error',
                        text: 'Gagal memperbarui flag view: ' + message,
                        icon: 'error',
                        confirmButtonColor: '#028284',
                        customClass: {
                            popup: 'custom-swal',
                            title: 'swal-title',
                            htmlContainer: 'swal-content',
                            confirmButton: 'swal-confirm'
                        }
                    }).then(() => {
                        if (xhr.status === 404) {
                            window.location.href =
                                '{{ url($url_menu) }}'; // Redirect even if record not found
                        } else {
                            button.prop('disabled', false); // Re-enable button for other errors
                        }
                    });
                }
            });
        }
    </script>
@endpush