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

@section('content')
    @php
        $revisionStatusTop = strtolower(trim((string) ($list->revision_status ?? 'none')));

        $revisionEmailSentTop = !empty($list->revision_email_sent_at);

        $isRevisionProcessActiveTop = $revisionStatusTop === 'requested';

        $isWaitingRevisionTop = $revisionStatusTop === 'requested' && $revisionEmailSentTop;
    @endphp
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        @if (!$fromDashboard)
            <div class="card-body p-3" id="navWrapper">
                <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>
                            <input type="hidden" id="beasiswa_id" value="{{ $idencrypt }}">
                            @if ($authorize->edit == '1')
                                @if (
                                    $list->isactive == '1' &&
                                        $beasiswa->periode_status == '1' &&
                                        $beasiswa->is_approved_by_sp != '1' &&
                                        !$isRevisionProcessActiveTop)
                                    <button class="btn btn-primary mb-0" style="display: none;"
                                        id="{{ $dmenu }}-save"><i class="fas fa-floppy-disk me-1"></i><span
                                            class="font-weight-bold">Simpan</span></button>
                                    <button class="btn btn-warning mb-0" id="{{ $dmenu }}-edit"><i
                                            class="fas fa-edit me-1"></i><span class="font-weight-bold">Edit</span></button>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </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
                        @if (in_array($user->idroles, ['admins', 'hrdcek']))
                            @method('PUT') <!-- Only include if update route expects PUT -->
                        @endif
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <p class="text-capitalize text-base">
                                        Detail {{ $title_menu }} :
                                        <span class="fw-bold fs-5" style="color: black !important;">
                                            {{ $beasiswa->id_pengajuan }}
                                        </span>
                                    </p>
                                </div>

                                <div class="col-md-6 d-flex justify-content-end align-items-start">
                                    @if ($user->idroles === 'admins')
                                        <div class="d-flex flex-wrap justify-content-end gap-2">
                                            <span class="badge bg-secondary">
                                                HRD:
                                                @if ($list->is_approved_by_hrd == '1')
                                                    SETUJU
                                                @elseif ($list->is_approved_by_hrd == '2')
                                                    TOLAK
                                                @else
                                                    PENDING
                                                @endif
                                            </span>

                                            <span class="badge bg-secondary">
                                                HEAD HRD:
                                                @if ($list->is_approved_by_headhrd == '1')
                                                    SETUJU
                                                @elseif ($list->is_approved_by_headhrd == '2')
                                                    TOLAK
                                                @else
                                                    PENDING
                                                @endif
                                            </span>

                                            <span class="badge bg-secondary">
                                                SP:
                                                @if ($list->is_approved_by_sp == '1')
                                                    SETUJU
                                                @elseif ($list->is_approved_by_sp == '2')
                                                    TOLAK
                                                @else
                                                    PENDING
                                                @endif
                                            </span>
                                        </div>
                                    @elseif ($user->idroles === 'hrdcek')
                                        @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')
                                        @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')
                                        @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">

                            @php
                                $dmenu = 'trbea';
                                $idencrypt = encrypt($list->id_trs_beasiswa);
                                $url_menu = '/trbea';

                                /*
                            |--------------------------------------------------------------------------
                            | Gunakan $list untuk seluruh kolom trs_pengajuan_beasiswa
                            |--------------------------------------------------------------------------
                            | $beasiswa berasal dari join tb.*, kar.*, dan lam.* sehingga kolom
                            | seperti isactive berpotensi tertimpa.
                            |--------------------------------------------------------------------------
                            */
                                $currentRole = strtolower(trim((string) $user->idroles));

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

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

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

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

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

                                /*
                                |--------------------------------------------------------------------------
                                | KONDISI HRD
                                |--------------------------------------------------------------------------
                                */

                                /*
                                 * Pengajuan masih berada di tahap HRD dan belum diputuskan.
                                 *
                                 * Kondisi ini menghasilkan 3 action:
                                 * - Ajukan Revisi
                                 * - Approve
                                 * - Reject
                                 */
                                $isHrdPending =
                                    (string) ($list->is_approved_by_hrd ?? '0') === '0' &&
                                    (string) ($list->isactive ?? '1') === '1';

                                /*
                                 * Pengajuan sebelumnya sudah ditolak HRD.
                                 *
                                 * Kondisi ini tetap boleh Ajukan Revisi jika ternyata
                                 * penolakan sebelumnya salah.
                                 */
                                $isHrdRejected =
                                    (string) ($list->is_approved_by_hrd ?? '0') === '2' &&
                                    $trsStatus === 'canceled' &&
                                    (string) ($list->isactive ?? '1') === '0';

                                /*
                                |--------------------------------------------------------------------------
                                | TOMBOL REVISI
                                |--------------------------------------------------------------------------
                                |
                                | Revisi boleh dilakukan:
                                |
                                | 1. Sebelum HRD memutuskan
                                | 2. Setelah HRD salah melakukan reject
                                |
                                | Hanya HRD Checker / Admin.
                                |--------------------------------------------------------------------------
                                */

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

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

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

                                /*
                            |--------------------------------------------------------------------------
                            | Hak approval normal
                            |--------------------------------------------------------------------------
                            */
                                $canApprove = false;

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

                                /*
                            |--------------------------------------------------------------------------
                            | Tidak boleh approve/reject saat menunggu revisi
                            |--------------------------------------------------------------------------
                            */
                                if ($isWaitingRevision) {
                                    $canApprove = false;
                                }
                            @endphp

                            <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-info-circle me-2"></i>Keterangan
                                            </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) }}" required
                                                            readonly>
                                                        <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 icon-modal-search"
                                                            data-bs-toggle="modal" data-bs-target="#bankModal"
                                                            style="border-color:#d2d6da;border-left:3px solid #d2d6da;cursor: pointer; display: none;">
                                                            <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>
                                                        {{-- <button type="button" class="btn btn-sm btn-outline-primary"
                                                            onclick="lihatFile('{{ $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>
                                                </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>
                                                </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>
                                                </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
                                                        @foreach ($transkrip_files as $index => $file)
                                                            <button type="button" class="btn btn-sm btn-outline-primary"
                                                                onclick="lihatFile('transkrip_nilai/{{ trim($file) }}', 'transkrip_nilai')">
                                                                Lihat {{ count($transkrip_files) > 1 ? $index + 1 : '' }}
                                                            </button>
                                                        @endforeach
                                                    </div>
                                                    <input type="file" class="form-control border-2 error-field"
                                                        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: 4096 KB<br>Format File:
                                                        .pdf / .jpg / .jpeg / .png</small>
                                                </div>

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

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

                                    <!-- Action Button -->
                                    @if ($canRequestRevision || $isRevisionEmailFailed || $canApprove)
                                        <div
                                            class="d-flex flex-column flex-md-row
                                            justify-content-end align-items-md-center
                                            gap-2 mt-3">

                                            {{-- Untuk data lama yang status requested tetapi email belum terkirim --}}
                                            @if ($isRevisionEmailFailed)
                                                <div class="alert alert-danger py-2 px-3 mb-0 me-md-auto">
                                                    <div class="fw-semibold">
                                                        <i class="fas fa-envelope-circle-xmark me-1"></i>
                                                        Email permintaan revisi belum terkirim
                                                    </div>

                                                    <small class="d-block mt-1">
                                                        Silakan kirim ulang permintaan revisi kepada karyawan.
                                                    </small>
                                                </div>
                                            @endif

                                            {{-- HRD Checker / Admin --}}
                                            @if ($canRequestRevision)
                                                <button type="button" class="btn btn-warning mb-0" id="revision-btn">

                                                    <i class="fas fa-pen-to-square me-1"></i>

                                                    {{ $revisionButtonText }}

                                                </button>
                                            @endif

                                            {{-- Approval normal --}}
                                            @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>
                            @else
                                <div class="alert alert-danger">
                                    Data beasiswa tidak ditemukan!
                                </div>
                            @endif
                        </div>
                        <div class="card-footer align-items-center pt-0 pb-2"></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>

    @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;
        }

        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);
        }
    </style>
@endpush

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

            // Set disable all input form initially (show mode)
            $('#{{ $dmenu }}-form').find('label').addClass('disabled');
            $('#{{ $dmenu }}-form').find('input').attr('disabled', 'disabled');
            $('#{{ $dmenu }}-form').find('select').attr('disabled', 'disabled');
            $('#{{ $dmenu }}-form').find('textarea').attr('disabled', 'disabled');
            $('#{{ $dmenu }}-form').find('input[key="true"]').parent('.form-group').css('display', '');
            $('#{{ $dmenu }}-form').find('select[key="true"]').parent('.form-group').css('display', '');
            $('.icon-modal-search').css('display', 'none');

            @if ($isWaitingRevision)

                const revisionNotes =
                    @json($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="mt-3 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
                });
            @endif
            // Function to enable input form (edit mode)
            function enable_text() {
                const isRevisionProcessActive =
                    @json($revisionStatus === 'requested');

                if (isRevisionProcessActive) {

                    Swal.fire({
                        icon: 'info',

                        title: 'Sedang Menunggu Revisi',

                        text: 'Pengajuan sedang menunggu revisi dari karyawan dan tidak dapat diedit terlebih dahulu.',

                        confirmButtonColor: '#028284'
                    });

                    return;
                }
                const trsStatus = '{{ $beasiswa->trs_status }}';
                if (trsStatus !== 'entry' && trsStatus !== 'rejected') {
                    Swal.fire({
                        title: 'Informasi',
                        text: 'Form tidak dapat diedit karena dalam proses approval Head HRD dan Ketua Serikat Pekerja.',
                        icon: 'info',
                        confirmButtonColor: '#028284',
                        customClass: {
                            popup: 'custom-swal',
                            title: 'swal-title',
                            htmlContainer: 'swal-content',
                            confirmButton: 'swal-confirm'
                        }
                    });
                    return;
                }

                $('#{{ $dmenu }}-form').find('label').removeClass('disabled');
                $('#{{ $dmenu }}-form').find('input').removeAttr('disabled');
                $('#{{ $dmenu }}-form').find('select').removeAttr('disabled');
                $('#{{ $dmenu }}-form').find('textarea').removeAttr('disabled');
                $('#{{ $dmenu }}-form').find('input[key="true"]').parent('.form-group').css('display',
                    'none');
                $('#{{ $dmenu }}-form').find('select[key="true"]').parent('.form-group').css('display',
                    'none');
                $('.icon-modal-search').css('display', 'inline-block');
                $('#{{ $dmenu }}-edit').css('display', 'none');
                $('#{{ $dmenu }}-save').css('display', 'inline-block');

                try {
                    if (typeof updateNominalAndBuktiSpp === 'function') {
                        updateNominalAndBuktiSpp(true); // Re-render nominal fields in edit mode

                    } else {

                    }
                } catch (e) {

                }
            }

            // Event button edit
            $('#{{ $dmenu }}-edit').click(function() {
                enable_text();
            });

            // Enable edit button click only for roles with edit permissions
            @if (in_array($user->idroles, ['admins', 'hrdcek']))
                $('#{{ $dmenu }}-edit').on('click', function() {
                    enable_text();
                });
            @else
                $('#{{ $dmenu }}-edit').hide();
                $('#{{ $dmenu }}-save').hide();
            @endif

            $('#list_trbea_bank').DataTable();

            // Display server-side validation errors
            const errors = @json($errors->messages());
            if (Object.keys(errors).length > 0) {
                $('.error-message').remove();
                $('[name]').removeClass('border-danger');
                let firstEmptyField = null;

                $.each(errors, function(field, messages) {
                    const $input = $(`[name="${field}"]`);
                    if ($input.length) {
                        $input.addClass('border-danger');
                        let $errorMessage = $input.siblings('.error-message');
                        if ($errorMessage.length === 0) {
                            $errorMessage = $('<p>', {
                                class: 'error-message text-danger text-xs pt-1 px-1',
                                'data-field': field
                            }).insertAfter($input);
                        }
                        $errorMessage.text(messages[0]);

                        const errorMessage = messages[0].toLowerCase();
                        const isEmptyError = errorMessage.includes('required') ||
                            errorMessage.includes('tidak boleh kosong') ||
                            errorMessage.includes('harus diisi');
                        if (isEmptyError && !firstEmptyField) {
                            firstEmptyField = $input;
                        }
                    }
                });

                if (firstEmptyField) {
                    firstEmptyField.focus();
                    $('html, body').animate({
                        scrollTop: firstEmptyField.offset().top - 100
                    }, 500);
                }
            }

            // Remove error messages on input
            $('[name]').on('input change', function() {
                const $input = $(this);
                const field = $input.attr('name');
                const $errorMessage = $input.siblings(`.error-message[data-field="${field}"]`);
                if ($input.val().trim() !== '' || ($input.is(':file') && $input[0].files.length > 0)) {
                    $input.removeClass('border-danger');
                    $errorMessage.remove();
                    if ($input.val().trim() !== '' || $input[0].files.length > 0) {
                        $input.addClass('border-success');
                    }
                }
            });

            // 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(); // Menghapus 0 di awal
                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');
                    nomorRekInput.val(val); // Update input value
                    return;
                }

                // Hanya izinkan angka
                val = val.replace(/[^0-9]/g, '');
                nomorRekInput.val(val); // Update input value setelah menghapus non-angka dan awalan 0

                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 dan batasi 2 digit 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>
                            </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>
                            </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>
                            </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>
                            </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>
                            </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>
                            </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>
                         </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>
                    `;
                }

                if (!$('#{{ $dmenu }}-save').is(':visible')) {
                    nominalContainer.querySelectorAll('input').forEach(input => input.setAttribute('disabled',
                        'disabled'));
                    nominalContainer.querySelectorAll('label').forEach(label => label.classList.add('disabled'));
                    buktiContainer.querySelectorAll('input').forEach(input => input.setAttribute('disabled',
                        'disabled'));
                    buktiContainer.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 MAX_FILE_SIZE_KB = 4096; // 4 MB
            const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_KB * 1024;
            const ALLOWED_EXT = ['pdf', 'jpg', 'jpeg', 'png'];

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

            function showFieldError($input, field, message) {
                $input.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 utk field ini
                $input.siblings('.error-message[data-field="' + field + '"]').remove();
                $input.after($errorMessage);
            }

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

            function validateFileInput($input, showSwal = true) {
                const field = $input.attr('name');
                const file = $input[0].files && $input[0].files[0];

                // kosong -> reset state
                if (!file) {
                    $input.removeClass('border-success border-danger');
                    clearFieldError($input, field);
                    return true;
                }

                // ext check
                const ext = getExt(file.name);
                if (!ALLOWED_EXT.includes(ext)) {
                    if (showSwal) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Format File Tidak Valid',
                            text: `Format file untuk ${field.replace(/_/g, ' ')} harus: ${ALLOWED_EXT.join(', ')}`,
                            confirmButtonText: 'OK',
                            confirmButtonColor: '#028284'
                        });
                    }
                    $input.val('');
                    $input.removeClass('border-success').addClass('border-danger');
                    showFieldError($input, field, `Format file harus: ${ALLOWED_EXT.join(', ')}`);
                    return false;
                }

                // size check
                if (file.size > MAX_FILE_SIZE_BYTES) {
                    if (showSwal) {
                        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('');
                    $input.removeClass('border-success').addClass('border-danger');
                    showFieldError($input, field, `Ukuran file melebihi ${MAX_FILE_SIZE_KB} KB (4 MB)`);
                    return false;
                }

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

            // ==============================
            // FILE CHANGE HANDLERS
            // ==============================

            // 1) Dynamic file inputs (di dalam #buktiContainer)
            $('#buktiContainer').on('change', 'input[type="file"].error-field', function() {
                validateFileInput($(this), true);
            });

            // 2) Static file inputs (di luar #buktiContainer)
            $('input[type="file"].error-field').not('#buktiContainer input').on('change', function() {
                validateFileInput($(this), true);
            });

            // ==============================
            // 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(/_/g, ' '),
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                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;

                // Required fields (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');
                        showFieldError($input, field,
                            `*) ${field.replace(/_/g, ' ').toLowerCase()} tidak boleh kosong`);
                        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();
                }

                // ✅ Validate ALL file inputs (pdf/jpg/jpeg/png + max 4MB)
                const fileInputs = $('#{{ $dmenu }}-form').find('input[type="file"].error-field');
                fileInputs.each(function() {
                    const ok = validateFileInput($(this), false); // false biar gak spam swal saat submit
                    if (!ok) {
                        isValid = false;
                        if (!firstInvalidField) firstInvalidField = $(this);
                    }
                });

                // nomor rekening digit
                const nomorRekInput = $('#nomor_rekening');
                const jumlahDigit = parseInt($('#jumlah_digit_rek').val(), 10);
                if (jumlahDigit && nomorRekInput.val().trim().length !== jumlahDigit) {
                    isValid = false;
                    nomorRekInput.addClass('border-danger');
                    showFieldError(nomorRekInput, 'nomor_rekening',
                        '*) Nomor rekening tidak sesuai dengan jumlah digit yang diizinkan');
                    if (!firstInvalidField) firstInvalidField = nomorRekInput;
                }

                // kelas (reject 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');
                        showFieldError(kelasInput, 'kelas',
                            '*) Kelas harus berupa angka tanpa nol di depan (contoh: 9, bukan 09)');
                        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');
                        showFieldError(inputRapor, 'indeks_prestasi',
                            `*) Nilai rapor/IPK harus antara ${minNilai} dan ${maxNilai}`);
                        if (!firstInvalidField) firstInvalidField = inputRapor;
                    }
                } else if (inputRapor.attr('required')) {
                    isValid = false;
                    inputRapor.addClass('border-danger');
                    showFieldError(inputRapor, 'indeks_prestasi', '*) Nilai rapor/IPK tidak boleh kosong');
                    if (!firstInvalidField) firstInvalidField = inputRapor;
                }

                // swasta: spp_perbulan / nominal_beasiswa
                if (jenis === 'swasta') {
                    if (['sd', 'smp', 'sma'].includes(jenjang)) {
                        const sppPerBulanValue = parseFloat($('#spp_perbulan_raw').val()) || 0;
                        if (sppPerBulanValue === 0) {
                            isValid = false;
                            const $input = $('#spp_perbulan');
                            $input.addClass('border-danger');
                            showFieldError($input, 'spp_perbulan',
                                '*) Biaya SPP per bulan tidak boleh kosong untuk sekolah swasta');
                            if (!firstInvalidField) firstInvalidField = $input;
                        }
                    } else if (['d1', 'd2', 'd3', 'd4', 's1'].includes(jenjang)) {
                        const nominalBeasiswaValue = parseFloat($('#total_nominal_beasiswa_raw').val()) || 0;
                        if (nominalBeasiswaValue === 0) {
                            isValid = false;
                            const $input = $('#total_nominal_beasiswa');
                            $input.addClass('border-danger');
                            showFieldError($input, 'total_nominal_beasiswa',
                                '*) Nominal beasiswa tidak boleh kosong untuk universitas swasta');
                            if (!firstInvalidField) firstInvalidField = $input;
                        }
                    }
                }

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

                return isValid;
            }

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

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

                saveBtn.disabled = true;
                saveBtn.innerHTML =
                    '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Menyimpan...';

                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(form);
                formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

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

                $.ajax({
                    url: '{{ URL::to($url_menu . '/' . $idencrypt) }}',
                    method: 'POST', // Use POST since Laravel's @method('PUT') spoofs PUT via POST
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'Accept': 'application/json'
                    },
                    timeout: 10000,
                    success: function(response) {
                        Swal.close();
                        console.log('Form submission success:', response);
                        Swal.fire({
                            title: 'Success',
                            text: response.message || 'Data berhasil disimpan!',
                            icon: 'success',
                            confirmButtonColor: '#028284',
                            customClass: {
                                popup: 'custom-swal',
                                title: 'swal-title',
                                htmlContainer: 'swal-content',
                                confirmButton: 'swal-confirm'
                            }
                        }).then(() => {
                            saveBtn.disabled = true;
                            saveBtn.innerHTML = 'Simpan';
                            window.location.href = '{{ URL::to($url_menu) }}';
                        });
                    },
                    error: function(xhr) {
                        Swal.close();
                        console.error('Form submission error:', {
                            status: xhr.status,
                            response: xhr.responseJSON,
                            message: xhr.responseJSON?.message || 'No error message provided',
                            errors: xhr.responseJSON?.errors || null
                        });

                        let errorMessage = xhr.responseJSON?.message || xhr.responseJSON?.error ||
                            'Unknown server error. Please check the server logs.';
                        if (xhr.status === 419) {
                            errorMessage =
                                'Sesi telah kedaluwarsa. Silakan refresh halaman dan coba lagi.';
                        } 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: `Gagal menyimpan data: ${errorMessage}`,
                            icon: 'error',
                            confirmButtonColor: '#028284',
                            customClass: {
                                popup: 'custom-swal',
                                title: 'swal-title',
                                htmlContainer: 'swal-content',
                                confirmButton: 'swal-confirm'
                            }
                        });

                        saveBtn.disabled = false;
                        saveBtn.innerHTML = 'Simpan';
                    }
                });
            }

            // Client-side validation for real-time feedback
            $('[name]').on('input change', function() {
                validateForm();
            });

            @if (in_array($user->idroles, ['admins', 'hrdcek']))
                $('#{{ $dmenu }}-save').on('click', formSubmit);

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

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

                if (canEdit && $('#{{ $dmenu }}-save').is(':visible') && !validateForm()) {
                    return;
                }

                $('#approve-btn, #reject-btn, #{{ $dmenu }}-save, #{{ $dmenu }}-edit')
                    .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 alasan Anda',
                    inputAttributes: {
                        'aria-label': 'Tulis alasan Anda'
                    },
                    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) {
                        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'));

                        if (canEdit && $('#{{ $dmenu }}-save').is(':visible')) {
                            actionForm.find('input:disabled, select:disabled, textarea:disabled')
                                .prop('disabled', false);
                            const inputs = actionForm.serializeArray();
                            inputs.forEach(input => {
                                if (input.name !== '_method') {
                                    formData.append(input.name, input.value);
                                }
                            });
                            actionForm.find('input[type="file"]').each(function() {
                                if (this.files.length > 0) {
                                    formData.append(this.name, this.files[0]);
                                }
                            });
                            actionForm.find('input:disabled, select:disabled, textarea:disabled')
                                .prop('disabled', true);
                        }

                        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: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                    'content'),
                                'Accept': 'application/json'
                            },
                            timeout: 10000,
                            success: function(response) {
                                Swal.close();
                                let message = response.message ||
                                    'Pengajuan berhasil diproses!';
                                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(() => {
                                    $('#approve-btn, #reject-btn, #{{ $dmenu }}-save, #{{ $dmenu }}-edit')
                                        .prop('disabled', true);
                                    window.location.href =
                                        @json(URL::to($url_menu));
                                });
                            },
                            error: function(xhr) {
                                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
                                });

                                let errorMessage = xhr.responseJSON?.message || xhr
                                    .responseJSON?.error ||
                                    'Unknown server error. Please check the server logs.';
                                if (xhr.status === 419) {
                                    errorMessage =
                                        'Sesi telah kedaluwarsa. Silakan refresh halaman dan coba lagi.';
                                } 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'
                                    }
                                });

                                $('#approve-btn, #reject-btn, #{{ $dmenu }}-save, #{{ $dmenu }}-edit')
                                    .prop('disabled', false);
                            }
                        });
                    } else {
                        $('#approve-btn, #reject-btn, #{{ $dmenu }}-save, #{{ $dmenu }}-edit')
                            .prop('disabled', false);
                        $('.swal2-container').remove();
                        $('body').removeClass('swal2-shown swal2-no-scroll');
                        $('html').css('overflow-y', 'auto');
                    }
                });
            });

            $('#revision-btn').on('click', function() {
                const button = $(this);

                /*
                |--------------------------------------------------------------------------
                | STATUS DARI BLADE
                |--------------------------------------------------------------------------
                |
                | isHrdRejected:
                | true  = pengajuan sebelumnya sudah direject HRD
                | false = pengajuan masih pending di HRD
                |
                | isRevisionEmailFailed:
                | true  = sebelumnya permintaan revisi sudah dibuat,
                |         tetapi email belum terkirim
                |--------------------------------------------------------------------------
                */
                const isHrdRejected = @json($isHrdRejected);
                const isRevisionEmailFailed = @json($isRevisionEmailFailed);


                /*
                |--------------------------------------------------------------------------
                | TENTUKAN MODE 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';


                /*
                |--------------------------------------------------------------------------
                | KALAU SEBELUMNYA SUDAH REJECT
                |--------------------------------------------------------------------------
                */
                if (isHrdRejected) {
                    popupTitle = 'Ajukan Revisi Pengajuan';

                    popupDescription = `
                        Pengajuan ini sebelumnya telah ditolak oleh HRD.
                        Jika ternyata penolakan tersebut perlu dikoreksi,
                        tuliskan data atau dokumen yang harus diperbaiki
                        oleh karyawan agar pengajuan dapat dilanjutkan kembali.
                    `;

                    confirmText = 'Ya, Ajukan Revisi';

                    loadingTitle = 'Mengajukan revisi...';

                    successTitle = 'Revisi Berhasil Diajukan';
                }


                /*
                |--------------------------------------------------------------------------
                | KALAU EMAIL SEBELUMNYA GAGAL
                |--------------------------------------------------------------------------
                */
                if (isRevisionEmailFailed) {
                    popupTitle = 'Kirim Ulang Permintaan Revisi';

                    popupDescription = `
                        Permintaan revisi sebelumnya belum berhasil dikirim
                        melalui email. Tuliskan kembali catatan revisi
                        yang akan dikirim kepada karyawan.
                    `;

                    confirmText = 'Kirim Ulang';

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

                    successTitle = 'Permintaan Revisi Berhasil Dikirim';
                }


                /*
                |--------------------------------------------------------------------------
                | POPUP INPUT CATATAN
                |--------------------------------------------------------------------------
                */
                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,


                    /*
                    |--------------------------------------------------------------------------
                    | VALIDASI CATATAN
                    |--------------------------------------------------------------------------
                    */
                    preConfirm: () => {
                        const notes = document
                            .getElementById('revisionNotes')
                            .value
                            .trim();

                        if (!notes) {
                            Swal.showValidationMessage(
                                'Catatan revisi wajib diisi.'
                            );

                            return false;
                        }

                        if (notes.length > 500) {
                            Swal.showValidationMessage(
                                'Catatan revisi maksimal 500 karakter.'
                            );

                            return false;
                        }

                        return notes;
                    }

                }).then((result) => {

                    /*
                    |--------------------------------------------------------------------------
                    | BATAL
                    |--------------------------------------------------------------------------
                    */
                    if (!result.isConfirmed) {
                        return;
                    }


                    /*
                    |--------------------------------------------------------------------------
                    | DISABLE BUTTON
                    |--------------------------------------------------------------------------
                    */
                    button.prop('disabled', true);


                    /*
                    |--------------------------------------------------------------------------
                    | LOADING
                    |--------------------------------------------------------------------------
                    */
                    Swal.fire({
                        title: loadingTitle,

                        text: 'Mohon tunggu sebentar.',

                        allowOutsideClick: false,
                        allowEscapeKey: false,

                        showConfirmButton: false,

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


                    /*
                    |--------------------------------------------------------------------------
                    | AJAX REQUEST
                    |--------------------------------------------------------------------------
                    */
                    $.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')
                        },


                        /*
                        |--------------------------------------------------------------------------
                        | BERHASIL
                        |--------------------------------------------------------------------------
                        */
                        success: function(response) {

                            Swal.fire({
                                icon: 'success',

                                title: successTitle,

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

                                confirmButtonColor: '#028284',

                                allowOutsideClick: false

                            }).then(() => {

                                window.location.reload();

                            });
                        },


                        /*
                        |--------------------------------------------------------------------------
                        | GAGAL
                        |--------------------------------------------------------------------------
                        */
                        error: function(xhr) {

                            button.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: `
                                <div>

                                    <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>
                                                                                        `
                                            : ''
                                    }

                                </div>
                            `,

                                confirmButtonColor: '#dc3545'
                            });
                        }

                    });

                });
            });


        });

        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);

            }

            // ga update flag klo sudah diproses
            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;
            }

            // update flag view klo belum diproses
            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