@extends('layouts.app')

@section('nosidebar', true)

@section('header-bg', asset('img/bg-beasiswa.jpg'))

@php
    $title_menu = 'Revisi Pengajuan Beasiswa';

    $existingTranskrip = collect(explode(',', (string) ($beasiswa->transkrip_nilai ?? '')))
        ->map(fn($file) => trim($file))
        ->filter()
        ->values();

    $currentJenis = old('jenis_pendidikan', $beasiswa->jenis_pendidikan);

    $currentJenjang = old('jenjang_pendidikan', $beasiswa->jenjang_pendidikan);

    $currentSemester = old('jenis_semester', $beasiswa->jenis_semester);

    $singleFiles = [
        'kartu_keluarga' => [
            'label' => 'Kartu Keluarga',
            'folder' => 'kartu_keluarga',
            'file' => $beasiswa->kartu_keluarga ?? null,
        ],

        'buku_tabungan' => [
            'label' => 'Halaman Depan Buku Tabungan Anak',
            'folder' => 'buku_tabungan',
            'file' => $beasiswa->buku_tabungan ?? null,
        ],

        'surat_keterangan_aktif' => [
            'label' => 'Surat Keterangan Aktif Sekolah/Universitas',
            'folder' => 'surat_keterangan_aktif',
            'file' => $beasiswa->surat_keterangan_aktif ?? null,
        ],
    ];
@endphps

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

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

    .form-control,
    .form-select {
        height: 45px !important;
        padding: 0.625rem 0.75rem !important;
        border: 2px solid #dee2e6 !important;
        border-radius: 4px !important;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

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

    .form-control[readonly] {
        background-color: #f8f9fa !important;
        opacity: 1 !important;
    }

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

    .input-group {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        width: 100%;
        border: 2px solid #dee2e6 !important;
        border-radius: 4px !important;
        overflow: hidden;
    }

    .input-group .form-control {
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
        height: 45px !important;
        border: none !important;
        border-radius: 0 !important;
        background-color: #fff !important;
        box-shadow: none !important;
    }

    .input-group .form-control[readonly] {
        background-color: #fff !important;
    }

    .input-group .btn {
        min-width: 48px;
        height: 45px !important;
        margin: 0 !important;
        border: none !important;
        border-left: 1px solid #dee2e6 !important;
        border-radius: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

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

    .existing-file,
    .file-preview-item {
        padding: 10px 12px;
        border: 1px solid #bbd6d4;
        border-radius: 8px;
        background-color: #f0f8f7;
    }

    .border-invalid {
        border-color: #dc3545 !important;
    }

    .revision-note-text {
        white-space: pre-line;
    }

    .card {
        transition: all 0.3s ease;
    }

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

    @media (max-width: 1399.98px) {
        div[style*="margin: 0 -100px"] {
            margin-left: -50px !important;
            margin-right: -50px !important;
            padding-left: 50px !important;
            padding-right: 50px !important;
        }

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

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

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

    @media (max-width: 991.98px) {

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

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

    @media (max-width: 575.98px) {

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

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

        .card-body.p-5 {
            padding: 1.25rem !important;
        }
    }
</style>

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

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

                        <div class="card border-0 shadow-sm mb-4"
                            style="background: linear-gradient(135deg, #028284 0%, #028284 100%);">
                            <div class="card-body py-3">
                                <div class="text-center text-white">
                                    <h6 class="fw-bold mb-1 text-white">
                                        {{ $beasiswa->nama_periode ?? '-' }}
                                    </h6>

                                    @if (!empty($beasiswa->tanggal_mulai) && !empty($beasiswa->tanggal_berakhir))
                                        <p class="mb-0 small">
                                            Periode:
                                            {{ \Carbon\Carbon::parse($beasiswa->tanggal_mulai)->format('d/m/Y') }}
                                            -
                                            {{ \Carbon\Carbon::parse($beasiswa->tanggal_berakhir)->format('d/m/Y') }}
                                        </p>
                                    @endif
                                </div>
                            </div>
                        </div>

                        {{-- Catatan revisi --}}
                        <div class="card border-0 shadow-sm mb-4" style="background: white;">
                            <div class="card-header border-0 py-3" style="background-color: #fff3cd;">
                                <h6 class="mb-0 fw-bold text-black">
                                    <i class="fas fa-pen-to-square me-2"></i>Catatan Revisi dari HRD
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="p-3 rounded-3"
                                    style="background-color: #fffaf0; border-left: 4px solid #ffc107;">
                                    <div class="revision-note-text text-dark">{{ $beasiswa->revision_notes }}</div>
                                </div>

                                <div class="d-flex align-items-start gap-2 text-muted mt-3">
                                    <i class="fas fa-circle-info mt-1"></i>
                                    <small>
                                        Perbaiki data atau dokumen sesuai catatan HRD. Data yang tidak perlu diperbaiki
                                        dapat dibiarkan seperti semula. Lampiran baru hanya perlu diunggah jika dokumen lama
                                        memang perlu diganti.
                                    </small>
                                </div>

                                @if (!empty($beasiswa->revision_expires_at))
                                    <div class="mt-3">
                                        <small class="text-danger fw-semibold">
                                            <i class="fas fa-clock me-1"></i>
                                            Link revisi berlaku sampai
                                            {{ \Carbon\Carbon::parse($beasiswa->revision_expires_at)->format('d/m/Y H:i') }}
                                        </small>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <form id="formRevisionBeasiswa" method="POST"
                            action="{{ route('beasiswa.revision.submit', ['id' => $idencrypt]) }}"
                            enctype="multipart/form-data" novalidate>
                            @csrf

                            <input type="hidden" name="token" value="{{ $token }}">
                            <input type="hidden" name="nik" id="nik" value="{{ $beasiswa->nik }}">

                            {{-- Informasi Orang Tua/Wali --}}
                            <div class="section-card card border-0 shadow-sm mb-4" style="background: white;">
                                <div class="card-header border-0 py-3" style="background-color: #bbd6d4ff;">
                                    <h6 class="mb-0 fw-bold text-black">
                                        <i class="fas fa-info-circle me-2"></i>
                                        Informasi Orang Tua/Wali
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label fw-semibold">
                                                Nama Karyawan
                                            </label>
                                            <input type="text" class="form-control border-2"
                                                value="{{ $beasiswa->nama_karyawan ?? '-' }}" readonly>
                                        </div>

                                        <div class="col-md-4 mb-3">
                                            <label class="form-label fw-semibold">
                                                Department
                                            </label>
                                            <input type="text" class="form-control border-2"
                                                value="{{ $beasiswa->dept ?? '-' }}" readonly>
                                        </div>

                                        <div class="col-md-4 mb-3">
                                            <label class="form-label fw-semibold">
                                                Bagian
                                            </label>
                                            <input type="text" class="form-control border-2"
                                                value="{{ $beasiswa->bagian ?? '-' }}" readonly>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4 mb-3">
                                            <label for="nomor_telepon" class="form-label fw-semibold">
                                                Nomor Telepon <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" id="nomor_telepon" name="nomor_telepon"
                                                class="form-control border-2"
                                                value="{{ old('nomor_telepon', $beasiswa->notelp_karyawan) }}"
                                                maxlength="15" inputmode="numeric" required>
                                            <small class="text-muted">Hanya angka, maksimal 15 digit.</small>
                                        </div>

                                        <div class="col-md-4 mb-3">
                                            <label for="email" class="form-label fw-semibold">
                                                Email
                                            </label>
                                            <input type="email" id="email" name="email"
                                                class="form-control border-2"
                                                value="{{ old('email', $beasiswa->email_karyawan) }}" readonly required>
                                            <small class="text-muted">
                                                Email dikunci sesuai penerima link revisi.
                                            </small>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label class="form-label fw-semibold">
                                                NIK E KTP
                                            </label>
                                            <input type="text" class="form-control border-2"
                                                value="{{ $beasiswa->ktp ?? '-' }}" readonly>
                                        </div>
                                    </div>

                                    <div>
                                        <label for="alamat" class="form-label fw-semibold">
                                            Alamat <span class="text-danger">*</span>
                                        </label>
                                        <textarea id="alamat" name="alamat" class="form-control border-2 text-uppercase" rows="3" required>{{ old('alamat', $beasiswa->alamat_karyawan) }}</textarea>
                                    </div>
                                </div>
                            </div>

                            {{-- Informasi Anak --}}
                            <div class="section-card card border-0 shadow-sm mb-4" style="background: white;">
                                <div class="card-header border-0 py-3" style="background-color: #bbd6d4ff;">
                                    <h6 class="mb-0 fw-bold text-black">
                                        <i class="fas fa-child me-2"></i>
                                        Informasi Anak
                                    </h6>
                                </div>

                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="nama_anak_kk" class="form-label fw-semibold">
                                                Nama Anak <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" id="nama_anak_kk" name="nama_anak_kk"
                                                class="form-control border-2 text-uppercase"
                                                value="{{ old('nama_anak_kk', $beasiswa->nama_anak_kk) }}" required>
                                            <small class="text-muted">Sesuai Kartu Keluarga.</small>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label for="nama_anak_rekening" class="form-label fw-semibold">
                                                Nama Anak Sesuai Rekening <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" id="nama_anak_rekening" name="nama_anak_rekening"
                                                class="form-control border-2 text-uppercase"
                                                value="{{ old('nama_anak_rekening', $beasiswa->nama_anak_rekening) }}"
                                                required>
                                            <small class="text-muted">Sesuai buku rekening anak.</small>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="nama_bank" class="form-label fw-semibold">
                                                Nama Bank <span class="text-danger">*</span>
                                            </label>

                                            <div class="input-group custom-input-group">
                                                <input type="text" id="nama_bank" class="form-control border-2"
                                                    value="{{ old('nama_bank', $beasiswa->alias_bank) }}" readonly>
                                                <input type="hidden" name="id_bank" id="id_bank"
                                                    value="{{ old('id_bank', $beasiswa->id_bank) }}">
                                                <input type="hidden" id="jumlah_digit_rek"
                                                    value="{{ $beasiswa->jumlah_digit_rek ?? '' }}">

                                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                                    data-bs-target="#bankModal" title="Pilih bank">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label for="nomor_rekening" class="form-label fw-semibold">
                                                Nomor Rekening Anak <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" id="nomor_rekening" name="nomor_rekening"
                                                class="form-control border-2"
                                                value="{{ old('nomor_rekening', $beasiswa->no_rek) }}"
                                                inputmode="numeric"
                                                @if (!empty($beasiswa->jumlah_digit_rek)) maxlength="{{ $beasiswa->jumlah_digit_rek }}"
                                            minlength="{{ $beasiswa->jumlah_digit_rek }}" @endif
                                                required>
                                            <small id="info-digit-rekening" class="text-muted">
                                                @if (!empty($beasiswa->jumlah_digit_rek))
                                                    Nomor rekening harus {{ $beasiswa->jumlah_digit_rek }} digit.
                                                @else
                                                    Pilih bank untuk mengetahui jumlah digit rekening.
                                                @endif
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Pendidikan Anak --}}
                            <div class="section-card card border-0 shadow-sm mb-4" style="background: white;">
                                <div class="card-header border-0 py-3" style="background-color: #bbd6d4ff;">
                                    <h6 class="mb-0 fw-bold text-black">
                                        <i class="fas fa-graduation-cap me-2"></i>
                                        Pendidikan Anak
                                    </h6>
                                </div>

                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label fw-semibold">
                                                Jenis Pendidikan <span class="text-danger">*</span>
                                            </label>

                                            <div class="d-flex flex-wrap gap-3 pt-2">
                                                @foreach ($jenis_pendidikan as $value => $name)
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio"
                                                            name="jenis_pendidikan" id="jenis_{{ $value }}"
                                                            value="{{ $value }}" @checked((string) $currentJenis === (string) $value)
                                                            required>
                                                        <label class="form-check-label" for="jenis_{{ $value }}">
                                                            {{ $name }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label for="jenjang_pendidikan" class="form-label fw-semibold">
                                                Jenjang Pendidikan <span class="text-danger">*</span>
                                            </label>
                                            <select id="jenjang_pendidikan" name="jenjang_pendidikan"
                                                class="form-select border-2" required>
                                                <option value="">Pilih Jenjang Pendidikan</option>
                                                @foreach ($jenjang_pendidikan as $value => $name)
                                                    <option value="{{ $value }}" @selected((string) $currentJenjang === (string) $value)>
                                                        {{ $name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="kelas" class="form-label fw-semibold">
                                                Kelas/Semester <span class="text-danger">*</span>
                                            </label>
                                            <input type="number" id="kelas" name="kelas"
                                                class="form-control border-2"
                                                value="{{ old('kelas', $beasiswa->kelas) }}" min="1"
                                                max="99" required>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label for="jenis_semester" class="form-label fw-semibold">
                                                Jenis Semester <span class="text-danger">*</span>
                                            </label>
                                            <select id="jenis_semester" name="jenis_semester"
                                                class="form-select border-2" required>
                                                <option value="">Pilih Jenis Semester</option>
                                                @foreach ($semester as $value => $name)
                                                    <option value="{{ $value }}" @selected((string) $currentSemester === (string) $value)>
                                                        {{ $name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="universitas_sekolah" class="form-label fw-semibold">
                                                Universitas/Sekolah <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" id="universitas_sekolah" name="universitas_sekolah"
                                                class="form-control border-2 text-uppercase"
                                                value="{{ old('universitas_sekolah', $beasiswa->nama_sekolah_univ) }}"
                                                required>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label for="indeks_prestasi" class="form-label fw-semibold">
                                                Indeks Prestasi/Nilai Rapor <span class="text-danger">*</span>
                                            </label>
                                            <input type="number" id="indeks_prestasi" name="indeks_prestasi"
                                                class="form-control border-2"
                                                value="{{ old('indeks_prestasi', $beasiswa->nilai_anak) }}"
                                                step="0.01" min="0" required>
                                            <small id="indeks-help" class="text-muted"></small>
                                        </div>
                                    </div>

                                    <div class="row" id="nominal-container"></div>
                                </div>
                            </div>

                            {{-- Berkas --}}
                            <div class="section-card card border-0 shadow-sm mb-4" style="background: white;">
                                <div class="card-header border-0 py-3" style="background-color: #bbd6d4ff;">
                                    <h6 class="mb-0 fw-bold text-black">
                                        <i class="fas fa-folder me-2"></i>
                                        Berkas
                                    </h6>
                                </div>

                                <div class="card-body">
                                    <div class="row">
                                        @foreach ($singleFiles as $field => $meta)
                                            <div class="col-md-6 mb-4">
                                                <label for="{{ $field }}" class="form-label fw-semibold">
                                                    {{ $meta['label'] }}
                                                    @if (!$meta['file'])
                                                        <span class="text-danger">*</span>
                                                    @endif
                                                </label>

                                                @if ($meta['file'])
                                                    <div class="existing-file mb-2">
                                                        <div
                                                            class="d-flex align-items-center justify-content-between gap-2">
                                                            <div class="text-truncate">
                                                                <i class="fas fa-file me-1 text-primary"></i>
                                                                <span>{{ basename($meta['file']) }}</span>
                                                            </div>
                                                            <a href="{{ asset('storage/' . $meta['folder'] . '/' . basename($meta['file'])) }}"
                                                                target="_blank" rel="noopener noreferrer"
                                                                class="btn btn-sm btn-outline-primary mb-0 flex-shrink-0">
                                                                <i class="fas fa-eye me-1"></i>Lihat
                                                            </a>
                                                        </div>
                                                    </div>
                                                @endif

                                                <input type="file" id="{{ $field }}"
                                                    name="{{ $field }}"
                                                    class="form-control border-2 revision-file"
                                                    accept=".pdf,.jpg,.jpeg,.png"
                                                    data-existing="{{ $meta['file'] ? '1' : '0' }}">

                                                <small class="text-muted">
                                                    {{ $meta['file'] ? 'Kosongkan apabila file lama tidak perlu diganti.' : 'Dokumen wajib diunggah.' }}
                                                    Maksimal 4 MB.
                                                </small>
                                            </div>
                                        @endforeach

                                        <div class="col-md-6 mb-4">
                                            <label for="transkrip_nilai" class="form-label fw-semibold">
                                                Rapor/Transkrip Nilai
                                                @if ($existingTranskrip->isEmpty())
                                                    <span class="text-danger">*</span>
                                                @endif
                                            </label>

                                            @if ($existingTranskrip->isNotEmpty())
                                                <div class="existing-files-list mb-2">
                                                    @foreach ($existingTranskrip as $index => $file)
                                                        <div class="existing-file mb-2">
                                                            <div
                                                                class="d-flex align-items-center justify-content-between gap-2">
                                                                <div class="text-truncate">
                                                                    <span class="badge bg-secondary me-1">
                                                                        File {{ $index + 1 }}
                                                                    </span>
                                                                    <span>{{ basename($file) }}</span>
                                                                </div>
                                                                <a href="{{ asset('storage/transkrip_nilai/' . basename($file)) }}"
                                                                    target="_blank" rel="noopener noreferrer"
                                                                    class="btn btn-sm btn-outline-primary mb-0 flex-shrink-0">
                                                                    <i class="fas fa-eye me-1"></i>Lihat
                                                                </a>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @endif

                                            <input type="file" id="transkrip_nilai" name="transkrip_nilai[]"
                                                class="form-control border-2 revision-file" accept=".pdf,.jpg,.jpeg,.png"
                                                data-existing="{{ $existingTranskrip->isNotEmpty() ? '1' : '0' }}"
                                                multiple>

                                            <small class="text-muted">
                                                @if ($existingTranskrip->isNotEmpty())
                                                    Kosongkan apabila daftar transkrip lama tidak perlu diganti.
                                                    Jika memilih file baru, seluruh daftar transkrip lama akan diganti.
                                                @else
                                                    Minimal satu file wajib diunggah.
                                                @endif
                                                Maksimal 4 MB per file.
                                            </small>

                                            <div id="transkrip-preview" class="mt-2"></div>
                                        </div>
                                    </div>

                                    <div class="row" id="bukti-pembayaran-container"></div>
                                </div>
                            </div>

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

    {{-- Modal Bank --}}
    <div class="modal fade" id="bankModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pilih Bank</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>

                <div class="modal-body table-responsive">
                    <table class="table table-hover align-middle" id="list_bank">
                        <thead style="background-color: #00b7bd4f;">
                            <tr>
                                <th>Action</th>
                                <th>Nama Bank</th>
                                <th>Jumlah Digit Rekening</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($bank as $item)
                                <tr>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-primary btn-select-bank"
                                            data-id="{{ $item->id_bank }}" data-name="{{ $item->alias_bank }}"
                                            data-digit="{{ $item->jumlah_digit_rek }}">
                                            <i class="fas fa-check me-1"></i>
                                            Pilih
                                        </button>
                                    </td>
                                    <td>{{ $item->alias_bank }}</td>
                                    <td>{{ $item->jumlah_digit_rek }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <script>
        $(function() {
            const form = document.getElementById('formRevisionBeasiswa');
            const $form = $(form);
            const $submitButton = $('#btn-submit-revision');

            const storageBaseUrl = @json(asset('storage'));
            const allowedExtensions = ['pdf', 'jpg', 'jpeg', 'png'];
            const maxFileSize = 4096 * 1024;

            const initialData = {
                jenis: @json((string) $currentJenis),
                jenjang: @json((string) $currentJenjang),
                sppPerBulan: Number(@json((float) old('spp_perbulan', $beasiswa->spp_perbulan ?? 0))),
                nominal: Number(@json((float) old('nominal_beasiswa', $beasiswa->nominal_beasiswa ?? 0))),
            };

            const existingSppFiles = {
                bukti_spp: @json($beasiswa->bukti_spp ?? null),
                bukti_spp_bulan_1: @json($beasiswa->bukti_spp_bulan_1 ?? null),
                bukti_spp_bulan_2: @json($beasiswa->bukti_spp_bulan_2 ?? null),
                bukti_spp_bulan_3: @json($beasiswa->bukti_spp_bulan_3 ?? null),
                bukti_spp_bulan_4: @json($beasiswa->bukti_spp_bulan_4 ?? null),
                bukti_spp_bulan_5: @json($beasiswa->bukti_spp_bulan_5 ?? null),
                bukti_spp_bulan_6: @json($beasiswa->bukti_spp_bulan_6 ?? null),
            };

            let firstNominalRender = true;

            function normalizeJenjang(value) {
                let normalized = String(value || '')
                    .trim()
                    .toLowerCase()
                    .replace(/[\s-]/g, '');

                const aliases = {
                    di: 'd1',
                    dii: 'd2',
                    diii: 'd3',
                    div: 'd4',
                };

                return aliases[normalized] || normalized;
            }

            function normalizeJenis(value) {
                return String(value || '').trim().toLowerCase();
            }

            function isSwasta(value) {
                return normalizeJenis(value).includes('swasta');
            }

            function isNegeri(value) {
                return normalizeJenis(value).includes('negeri');
            }

            function isSekolah(jenjang) {
                return ['sd', 'smp', 'sma'].includes(normalizeJenjang(jenjang));
            }

            function isPerguruanTinggi(jenjang) {
                return ['d1', 'd2', 'd3', 'd4', 's1'].includes(normalizeJenjang(jenjang));
            }

            function parseCurrency(value) {
                return Number(String(value || '').replace(/[^\d]/g, '')) || 0;
            }

            function formatCurrency(value) {
                return new Intl.NumberFormat('id-ID').format(Number(value || 0));
            }

            function fixedNominal(jenjang) {
                const mapping = {
                    sd: 1000000,
                    smp: 1500000,
                    sma: 2000000,
                    d1: 3000000,
                    d2: 3000000,
                    d3: 3000000,
                    d4: 3000000,
                    s1: 3000000,
                };

                return mapping[normalizeJenjang(jenjang)] || 0;
            }

            function updateNilaiRules() {
                const jenjang = normalizeJenjang($('#jenjang_pendidikan').val());
                const jenis = normalizeJenis(
                    $('input[name="jenis_pendidikan"]:checked').val()
                );
                const input = document.getElementById('indeks_prestasi');
                const help = document.getElementById('indeks-help');

                let min = 0;
                let max = 100;
                let helpText = 'Isi nilai sesuai jenjang pendidikan.';

                if (isSekolah(jenjang)) {
                    min = 92;
                    max = 100;
                    helpText = 'Nilai rapor minimal 92 dan maksimal 100.';
                } else if (isPerguruanTinggi(jenjang)) {
                    min = isSwasta(jenis) ? 3.50 : 3.30;
                    max = 4;
                    helpText =
                        `IPK minimal ${min.toFixed(2)} dan maksimal 4.00.`;
                }

                input.min = min;
                input.max = max;
                input.step = '0.01';
                help.textContent = helpText;
            }

            function renderNominal() {
                const jenis = normalizeJenis(
                    $('input[name="jenis_pendidikan"]:checked').val()
                );
                const jenjang = normalizeJenjang($('#jenjang_pendidikan').val());
                const $container = $('#nominal-container');

                let sppValue = firstNominalRender ?
                    initialData.sppPerBulan :
                    0;

                let nominalValue = firstNominalRender ?
                    initialData.nominal :
                    0;

                if (!jenis || !jenjang) {
                    $container.html(`
                        <div class="col-12 mb-3">
                            <label class="form-label fw-semibold">
                                Nominal Beasiswa <span class="text-danger">*</span>
                            </label>
                            <input
                                type="text"
                                class="form-control"
                                value=""
                                placeholder="Pilih jenis dan jenjang pendidikan"
                                disabled
                            >
                            <input type="hidden" name="spp_perbulan" value="0">
                            <input type="hidden" name="nominal_beasiswa" value="0">
                        </div>
                    `);

                    firstNominalRender = false;
                    return;
                }

                if (isNegeri(jenis)) {
                    nominalValue = fixedNominal(jenjang);

                    $container.html(`
                        <div class="col-12 mb-3">
                            <label class="form-label fw-semibold">
                                Nominal Beasiswa
                            </label>
                            <input
                                type="text"
                                class="form-control"
                                value="${formatCurrency(nominalValue)}"
                                readonly
                            >
                            <input type="hidden" name="spp_perbulan" value="0">
                            <input
                                type="hidden"
                                name="nominal_beasiswa"
                                value="${nominalValue}"
                            >
                            <small class="text-muted">
                                Nominal otomatis berdasarkan jenjang pendidikan negeri.
                            </small>
                        </div>
                    `);
                } else if (isSwasta(jenis) && isSekolah(jenjang)) {
                    if (firstNominalRender && !sppValue && nominalValue) {
                        sppValue = Math.round(nominalValue / 6);
                    }

                    nominalValue = sppValue * 6;

                    $container.html(`
                        <div class="col-md-6 mb-3">
                            <label for="display_spp_perbulan" class="form-label fw-semibold">
                                SPP per Bulan <span class="text-danger">*</span>
                            </label>
                            <input
                                type="text"
                                id="display_spp_perbulan"
                                class="form-control currency-input"
                                value="${formatCurrency(sppValue)}"
                                inputmode="numeric"
                                required
                            >
                            <input
                                type="hidden"
                                id="spp_perbulan"
                                name="spp_perbulan"
                                value="${sppValue}"
                            >
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">
                                Total Nominal Beasiswa
                            </label>
                            <input
                                type="text"
                                id="display_nominal_beasiswa"
                                class="form-control"
                                value="${formatCurrency(nominalValue)}"
                                readonly
                            >
                            <input
                                type="hidden"
                                id="nominal_beasiswa"
                                name="nominal_beasiswa"
                                value="${nominalValue}"
                            >
                            <small class="text-muted">
                                Total otomatis: 6 × SPP per bulan.
                            </small>
                        </div>
                    `);
                } else {
                    $container.html(`
                        <div class="col-12 mb-3">
                            <label for="display_nominal_beasiswa" class="form-label fw-semibold">
                                SPP/UKT per Semester <span class="text-danger">*</span>
                            </label>
                            <input
                                type="text"
                                id="display_nominal_beasiswa"
                                class="form-control currency-input"
                                value="${formatCurrency(nominalValue)}"
                                inputmode="numeric"
                                required
                            >
                            <input type="hidden" name="spp_perbulan" value="0">
                            <input
                                type="hidden"
                                id="nominal_beasiswa"
                                name="nominal_beasiswa"
                                value="${nominalValue}"
                            >
                        </div>
                    `);
                }

                firstNominalRender = false;
            }

            function existingFileHtml(folder, fileName, label) {
                if (!fileName) {
                    return '';
                }

                const safeFolder = encodeURIComponent(folder);
                const safeFile = encodeURIComponent(fileName);
                const url = `${storageBaseUrl}/${safeFolder}/${safeFile}`;

                return `
                    <div class="existing-file mb-2">
                        <div class="d-flex align-items-center justify-content-between gap-2">
                            <div class="text-truncate">
                                <i class="fas fa-file me-1 text-primary"></i>
                                <span>${label}</span>
                            </div>
                            <a
                                href="${url}"
                                target="_blank"
                                rel="noopener noreferrer"
                                class="btn btn-sm btn-outline-primary mb-0 flex-shrink-0"
                            >
                                <i class="fas fa-eye me-1"></i>Lihat
                            </a>
                        </div>
                    </div>
                `;
            }

            function sppInputHtml(fieldName, label, existingFile) {
                return `
                    <div class="col-md-6 mb-4">
                        <label class="form-label fw-semibold">
                            ${label}
                            ${existingFile ? '' : '<span class="text-danger">*</span>'}
                        </label>

                        ${existingFileHtml(fieldName, existingFile, existingFile)}

                        <input
                            type="file"
                            name="${fieldName}"
                            class="form-control revision-file"
                            accept=".pdf,.jpg,.jpeg,.png"
                            data-existing="${existingFile ? '1' : '0'}"
                        >

                        <small class="text-muted">
                            ${existingFile
                                ? 'Kosongkan apabila dokumen lama tidak perlu diganti.'
                                : 'Dokumen wajib diunggah.'}
                            Maksimal 4 MB.
                        </small>
                    </div>
                `;
            }

            function renderBuktiPembayaran() {
                const jenis = normalizeJenis(
                    $('input[name="jenis_pendidikan"]:checked').val()
                );
                const jenjang = normalizeJenjang($('#jenjang_pendidikan').val());
                const $container = $('#bukti-pembayaran-container');

                $container.empty();

                if (!isSwasta(jenis)) {
                    return;
                }

                if (isSekolah(jenjang)) {
                    let html = '';

                    for (let index = 1; index <= 6; index++) {
                        const field = `bukti_spp_bulan_${index}`;
                        html += sppInputHtml(
                            field,
                            `Bukti Pembayaran SPP Bulan ke-${index}`,
                            existingSppFiles[field]
                        );
                    }

                    $container.html(html);
                    return;
                }

                if (isPerguruanTinggi(jenjang)) {
                    $container.html(
                        sppInputHtml(
                            'bukti_spp',
                            'Bukti Pembayaran SPP/UKT Satu Semester',
                            existingSppFiles.bukti_spp
                        )
                    );
                }
            }

            function refreshDynamicSections() {
                updateNilaiRules();
                renderNominal();
                renderBuktiPembayaran();
            }

            $(document).on('input', '.currency-input', function() {
                const numericValue = parseCurrency(this.value);
                this.value = formatCurrency(numericValue);

                if (this.id === 'display_spp_perbulan') {
                    $('#spp_perbulan').val(numericValue);
                    $('#display_nominal_beasiswa').val(
                        formatCurrency(numericValue * 6)
                    );
                    $('#nominal_beasiswa').val(numericValue * 6);
                }

                if (this.id === 'display_nominal_beasiswa') {
                    $('#nominal_beasiswa').val(numericValue);
                }
            });

            $('input[name="jenis_pendidikan"], #jenjang_pendidikan')
                .on('change', refreshDynamicSections);

            $('#nomor_telepon, #nomor_rekening').on('input', function() {
                this.value = this.value.replace(/\D/g, '');
            });

            $('.text-uppercase').on('input', function() {
                const start = this.selectionStart;
                const end = this.selectionEnd;
                this.value = this.value.toUpperCase();

                if (typeof this.setSelectionRange === 'function') {
                    this.setSelectionRange(start, end);
                }
            });

            $(document).on('click', '.btn-select-bank', function() {
                const id = String($(this).data('id') ?? '');
                const name = String($(this).data('name') ?? '');
                const digit = Number($(this).data('digit') ?? 0);

                $('#id_bank').val(id);
                $('#nama_bank').val(name);
                $('#jumlah_digit_rek').val(digit);

                const $rekening = $('#nomor_rekening');
                $rekening
                    .attr('maxlength', digit)
                    .attr('minlength', digit);

                $('#info-digit-rekening').text(
                    `Nomor rekening harus ${digit} digit.`
                );

                bootstrap.Modal
                    .getOrCreateInstance(document.getElementById('bankModal'))
                    .hide();
            });

            $('#transkrip_nilai').on('change', function() {
                const files = Array.from(this.files || []);
                const $preview = $('#transkrip-preview');

                if (files.length === 0) {
                    $preview.empty();
                    return;
                }

                const html = files.map((file, index) => `
                    <div class="file-preview-item mb-1">
                        <i class="fas fa-paperclip me-1"></i>
                        File ${index + 1}: ${$('<div>').text(file.name).html()}
                    </div>
                `).join('');

                $preview.html(html);
            });

            if ($.fn.DataTable) {
                $('#list_bank').DataTable({
                    pageLength: 5,
                    responsive: true,
                    language: {
                        search: 'Cari bank:',
                        lengthMenu: 'Tampilkan _MENU_ bank',
                        info: 'Data _START_ - _END_ dari _TOTAL_',
                        infoEmpty: 'Tidak ada data',
                        zeroRecords: 'Bank tidak ditemukan',
                    },
                });
            }

            function validateFiles() {
                const errors = [];
                let firstInvalid = null;

                $('.revision-file').removeClass('border-invalid');

                $('.revision-file').each(function() {
                    const files = Array.from(this.files || []);
                    const hasExisting = String(this.dataset.existing || '0') === '1';

                    if (!hasExisting && files.length === 0) {
                        errors.push(
                            `${$(this).closest('.mb-4').find('label').first().text().trim()} wajib diunggah.`
                        );

                        $(this).addClass('border-invalid');
                        firstInvalid ??= this;
                        return;
                    }

                    files.forEach((file) => {
                        const extension = String(file.name)
                            .split('.')
                            .pop()
                            .toLowerCase();

                        if (!allowedExtensions.includes(extension)) {
                            errors.push(
                                `${file.name}: format harus PDF, JPG, JPEG, atau PNG.`
                            );
                            $(this).addClass('border-invalid');
                            firstInvalid ??= this;
                        }

                        if (file.size > maxFileSize) {
                            errors.push(
                                `${file.name}: ukuran file melebihi 4 MB.`
                            );
                            $(this).addClass('border-invalid');
                            firstInvalid ??= this;
                        }
                    });
                });

                return {
                    valid: errors.length === 0,
                    errors,
                    firstInvalid,
                };
            }

            function validateBusinessRules() {
                const errors = [];
                let firstInvalid = null;

                const idBank = $('#id_bank').val();
                const rekening = $('#nomor_rekening').val().trim();
                const digit = Number($('#jumlah_digit_rek').val() || 0);
                const jenjang = normalizeJenjang($('#jenjang_pendidikan').val());
                const jenis = normalizeJenis(
                    $('input[name="jenis_pendidikan"]:checked').val()
                );
                const nilai = Number($('#indeks_prestasi').val());
                const nominal = Number($('input[name="nominal_beasiswa"]').val() || 0);

                if (!idBank) {
                    errors.push('Nama bank wajib dipilih.');
                    firstInvalid ??= document.getElementById('nama_bank');
                }

                if (digit > 0 && rekening.length !== digit) {
                    errors.push(`Nomor rekening harus tepat ${digit} digit.`);
                    firstInvalid ??= document.getElementById('nomor_rekening');
                }

                let minimumNilai = 0;
                let maximumNilai = 100;

                if (isSekolah(jenjang)) {
                    minimumNilai = 92;
                    maximumNilai = 100;
                } else if (isPerguruanTinggi(jenjang)) {
                    minimumNilai = isSwasta(jenis) ? 3.50 : 3.30;
                    maximumNilai = 4;
                }

                if (
                    Number.isNaN(nilai) ||
                    nilai < minimumNilai ||
                    nilai > maximumNilai
                ) {
                    errors.push(
                        `Nilai harus berada pada rentang ${minimumNilai} sampai ${maximumNilai}.`
                    );
                    firstInvalid ??= document.getElementById('indeks_prestasi');
                }

                if (nominal <= 0) {
                    errors.push('Nominal beasiswa harus lebih dari 0.');
                    firstInvalid ??=
                        document.getElementById('display_nominal_beasiswa') ||
                        document.getElementById('display_spp_perbulan');
                }

                return {
                    valid: errors.length === 0,
                    errors,
                    firstInvalid,
                };
            }

            function showValidationErrors(errors, firstInvalid) {
                const uniqueErrors = [...new Set(errors)];

                Swal.fire({
                    icon: 'warning',
                    title: 'Periksa Kembali Data',
                    html: `
                        <div class="text-start">
                            ${uniqueErrors
                                .map((message) => `<div class="mb-1">• ${$('<div>').text(message).html()}</div>`)
                                .join('')}
                        </div>
                    `,
                    confirmButtonColor: '#028284',
                    width: 620,
                }).then(() => {
                    if (!firstInvalid) {
                        return;
                    }

                    $('html, body').animate({
                        scrollTop: $(firstInvalid).offset().top - 120,
                    }, 400);

                    firstInvalid.focus();
                });
            }

            $form.on('submit', function(event) {
                event.preventDefault();

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

                form.classList.add('was-validated');

                if (!form.checkValidity()) {
                    const firstInvalid = form.querySelector(':invalid');

                    showValidationErrors(
                        ['Masih ada data wajib yang belum diisi atau tidak valid.'],
                        firstInvalid
                    );
                    return;
                }

                const fileValidation = validateFiles();
                const businessValidation = validateBusinessRules();

                const errors = [
                    ...fileValidation.errors,
                    ...businessValidation.errors,
                ];

                const firstInvalid =
                    fileValidation.firstInvalid ||
                    businessValidation.firstInvalid;

                if (errors.length > 0) {
                    showValidationErrors(errors, firstInvalid);
                    return;
                }

                Swal.fire({
                    icon: 'question',
                    title: 'Kirim Revisi?',
                    text: 'Data revisi akan dikirim dan pengajuan kembali masuk ke proses pemeriksaan HRD.',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Kirim Revisi',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#028284',
                    cancelButtonColor: '#6c757d',
                    reverseButtons: true,
                }).then((result) => {
                    if (!result.isConfirmed) {
                        return;
                    }

                    $form.data('submitting', true);

                    const originalButtonHtml = $submitButton.html();

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

                    Swal.fire({
                        title: 'Mengirim revisi...',
                        text: 'Mohon tunggu sebentar.',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        showConfirmButton: false,
                        didOpen: () => Swal.showLoading(),
                    });

                    $.ajax({
                        url: form.action,
                        type: 'POST',
                        data: new FormData(form),
                        processData: false,
                        contentType: false,
                        headers: {
                            Accept: 'application/json',
                        },
                        success: function(response) {
                            if (response.status === 'success') {
                                Swal.fire({
                                    title: 'Memproses PDF...',
                                    text: 'Mohon tunggu, sedang menyiapkan file revisi Anda.',
                                    allowOutsideClick: false,
                                    didOpen: () => {
                                        Swal.showLoading();
                                    }
                                });

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

                                setTimeout(() => {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Revisi Berhasil Dikirim',
                                        text: response.message,
                                        confirmButtonColor: '#028284',
                                    }).then(() => {
                                        window.location.href = response.redirect;
                                    });
                                }, 2500);
                            }
                        },
                        error: function(xhr) {
                            $form.data('submitting', false);
                            $submitButton
                                .prop('disabled', false)
                                .html(originalButtonHtml);

                            let messages = [];

                            if (xhr.responseJSON?.errors) {
                                messages = Object
                                    .values(xhr.responseJSON.errors)
                                    .flat();
                            }

                            if (messages.length === 0) {
                                messages.push(
                                    xhr.responseJSON?.message ||
                                    'Revisi gagal dikirim.'
                                );
                            }

                            showValidationErrors(messages, null);
                        },
                    });
                });
            });

            refreshDynamicSections();
        });
        /*
        |--------------------------------------------------------------------------
        | TITLE TAB BROWSER
        |--------------------------------------------------------------------------
        */
        document.title =
            'MSJ Beasiswa | Revisi Pengajuan Beasiswa';


        /*
        |--------------------------------------------------------------------------
        | FAVICON TAB BROWSER
        |--------------------------------------------------------------------------
        */
        (function() {

            const faviconUrl =
                @json(asset('img/logo.png'));

            let favicon =
                document.querySelector(
                    'link[rel="icon"], link[rel="shortcut icon"]'
                );

            if (favicon) {

                favicon.href =
                    faviconUrl;

                favicon.type =
                    'image/png';

            } else {

                favicon =
                    document.createElement('link');

                favicon.rel =
                    'icon';

                favicon.type =
                    'image/png';

                favicon.href =
                    faviconUrl;

                document.head.appendChild(
                    favicon
                );
            }

        })();
    </script>
@endsection