@extends('layouts.app')

@section('title', 'Formulir Pengajuan Pengangsuran UKT')

@section('content')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
    body {
        font-family: 'Poppins', sans-serif;
        background-color: #eef2f3;
    }
    .container {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .form-container {
        background-color: #fff;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        max-width: 800px;
        margin: 0 auto;
    }
    .card-header {
        background-color: rgb(0, 122, 153);
        color: white;
        padding: 15px;
        border-radius: 10px 10px 0 0;
        text-align: center;
    }
    .form-section {
        margin-bottom: 30px;
    }
    .section-title {
        color: #2c3e50;
        border-bottom: 2px solid #3498db;
        padding-bottom: 8px;
        margin-bottom: 20px;
        font-weight: 600;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .form-group label {
        font-weight: 500;
        color: #34495e;
        margin-bottom: 8px;
    }
    .form-control, .form-select, .file-custom {
        border-radius: 6px;
        padding: 10px 15px;
        border: 1px solid #ddd;
        transition: all 0.3s;
        height: 45px;
    }
    .form-control:focus, .form-select:focus {
        border-color: #3498db;
        box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
    }
    .file-input-label {
        display: block;
        margin-top: 8px;
    }
    .file-input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        z-index: 1;
    }

    .file-custom {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background-color: #f8f9fa;
        text-align: center;
        width: 100%;
        border-radius: 6px;
        padding: 10px 15px;
        border: 1px solid #ddd;
        transition: all 0.3s;
        height: 45px;
        overflow: hidden;
    }
    .file-custom:hover {
        background-color: #e9f7fe;
    }
    .file-custom i {
        margin-right: 10px;
    }
    .file-custom span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .file-name {
        margin-top: 6px;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 5px;
        color: #198754; 
    }
    .file-name.error {
        color: #dc3545; 
    }
    .btn-submit {
        background-color: #007a99;
        color: white;
        font-weight: 600;
        padding: 12px;
        border: none;
        border-radius: 6px;
        transition: all 0.3s;
    }
    .btn-submit:hover {
        background-color: #005f73;
    }
    .loading-spinner {
        display: none;
        text-align: center;
        margin-top: 15px;
    }
    .alert {
        border-radius: 6px;
    }
    .declaration-check {
        margin-top: 25px;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 6px;
    }
    .dropdown-caption {
        font-size: 0.85rem;
        color: #6c757d;
        margin-top: 5px;
        padding-left: 5px;
    }
    .upload-label {
        font-weight: 500;
        color: #34495e;
        margin-top: 15px;
        margin-bottom: 8px;
    }
    .select-upload-container {
        display: flex;
        gap: 15px;
        align-items: flex-start;
    }
    .select-upload-container .form-select {
        flex: 1;
    }
    .select-upload-container .file-custom {
        flex: 1;
    }
    .criteria-item {
        margin-bottom: 25px;
    }
    .criteria-row {
        display: flex;
        flex-direction: column;
    }
    .criteria-description {
        font-size: 0.85rem;
        color: #6c757d;
        margin-top: 5px;
        padding: 5px 0;
    }
    @media (max-width: 768px) {
        .form-container {
            padding: 20px;
        }
        .select-upload-container {
            flex-direction: column;
            gap: 10px;
        }
    }
</style>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h4 class="mb-0"><i class="fas fa-file-alt me-2"></i>Formulir Pengajuan Pengangsuran UKT</h4>
                </div>
                
                <div class="card-body">
                @if (session('success'))
                    <div class="alert alert-success d-flex align-items-center" role="alert">
                        <i class="fas fa-check-circle me-2"></i>
                        <div>{{ session('success') }}</div>
                    </div>
                @endif

                @if (session('error'))
                    <div class="alert alert-danger d-flex align-items-center" role="alert">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        <div>{{ session('error') }}</div>
                    </div>
                @endif
                    
                <form id="pengajuanForm" action="{{ route('pengajuan.store', ['jenis' => 'pengangsuran']) }}" method="POST" enctype="multipart/form-data">
                @csrf

                <!-- Data Mahasiswa -->
                <div class="form-section">
                    <h5 class="section-title"><i class="fas fa-user-graduate me-2"></i>Data Mahasiswa</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="nama">Nama Lengkap</label>
                                <input type="text" class="form-control" value="{{ auth()->user()->name }}" readonly>
                            </div>
                            <div class="form-group">
                                <label for="program_studi">Program Studi</label>
                                <input type="text" class="form-control" value="{{ auth()->user()->mahasiswa->program_studi }}" readonly>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="nim">NIM</label>
                                <input type="text" class="form-control" value="{{ auth()->user()->mahasiswa->nim }}" readonly>
                            </div>
                            <div class="form-group">
                                <label for="jurusan">Jurusan</label>
                                <input type="text" class="form-control" value="{{ auth()->user()->mahasiswa->jurusan }}" readonly>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- UKT saat ini -->
                <div class="form-section">
                    <h5 class="section-title">UKT Saat Ini</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="ukt_saat_ini">Nominal UKT Saat Ini</label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="text" name="ukt_saat_ini" 
                                        value="{{ is_numeric(old('ukt_saat_ini')) ? number_format((float) old('ukt_saat_ini'), 0, ',', '.') : '' }}"
                                        placeholder="Contoh: 1.500.000" 
                                        class="form-control" 
                                        id="ukt-input"
                                        required>
                                </div>
                                <small class="dropdown-caption">Masukkan nominal tanpa titik atau koma</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Upload Slip Pembayaran Terbaru</label>
                                <input type="file" id="file_ukt" name="file_ukt" class="form-control" accept=".pdf" required>
                                <small class="text-muted">Format: PDF, maksimal 1.5MB</small>
                            </div>
                                <div class="file-name text-muted mt-1" id="file_ukt-name"></div>
                            </div>
                        </div>
                    </div>
                </div>
                        
                <!-- Kriteria Penilaian -->
                <div class="form-section">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>Silakan lengkapi semua kriteria berikut dengan data yang valid dan unggah dokumen pendukung yang diperlukan.
                    </div>
                    
                    <!-- Penghasilan Orang Tua -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h5 class="mb-0 text-dark fw-bold text-start">Penghasilan Orang Tua</h5>
                        </div>
                        <div class="card-body">
                            <div class="criteria-item">
                                <div class="select-upload-container">
                                    <select class="form-select" name="penghasilan" required>
                                        <option value="">Pilih Penghasilan</option>
                                        <option value="< 2 juta">Kurang dari 2 juta</option>
                                        <option value="2 - 3 juta">2 - 3 juta</option>
                                        <option value="3 - 4 juta">3 - 4 juta</option>
                                        <option value="> 5 juta">Lebih dari 5 juta</option>
                                    </select>
                                    <label for="file_penghasilan" class="file-custom">
                                        <i class="fas fa-cloud-upload-alt me-2"></i>
                                        <span>Pilih File (PDF, Maksimal 1.5MB)</span>
                                        <input type="file" id="file_penghasilan" name="file_penghasilan" class="file-input" accept=".pdf" required>
                                    </label>
                                </div>
                                <div class="criteria-description">
                                   Upload Slip Gaji/Surat Keterangan Penghasilan (PDF, Maksimal 1.5MB)
                                </div>
                                <div class="file-name text-muted mt-1" id="file_penghasilan-name"></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Pekerjaan Orang Tua -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h5 class="mb-0 text-dark fw-bold text-start">Pekerjaan Orang Tua</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <select class="form-select" name="pekerjaan" required>
                                        <option value="">Pilih Pekerjaan</option>
                                        <option value="Bekerja Tetap">Bekerja Tetap</option>
                                        <option value="Bekerja Tidak Tetap">Bekerja Tidak Tetap</option>
                                        <option value="Tidak Bekerja">Tidak Bekerja</option>
                                    </select>
                                    <div class="mt-2 text-muted" style="font-size: 0.9rem;">
                                        • Bekerja Tetap: Surat Keterangan Kerja<br>
                                        • Bekerja Tidak Tetap: Surat Keterangan dari Desa
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label for="file_pekerjaan" class="file-custom">
                                        <i class="fas fa-cloud-upload-alt me-2"></i>
                                        <span>Pilih File (PDF, Maksimal 1.5MB)</span>
                                        <input type="file" id="file_pekerjaan" name="file_pekerjaan" class="file-input" accept=".pdf" required>
                                    </label>
                                    <div class="mt-2 text-muted" style="font-size: 0.9rem;">
                                        • Tidak Bekerja: SK Pensiun / Surat Keterangan dari Desa<br>
                                        • Format: PDF, Maksimal 1.5MB
                                    </div>
                                    <div class="file-name text-muted mt-1" id="file_pekerjaan-name"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tanggungan Orang Tua -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h5 class="mb-0 text-dark fw-bold text-start">Jumlah Tanggungan Orang Tua</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <select class="form-select" name="tanggungan" required>                                       
                                        <option value="">Pilih Jumlah Tanggungan</option>
                                        <option value="1 Orang">1 Orang</option>
                                        <option value="2 - 4 Orang">2 - 4 Orang</option>
                                        <option value="> 4 Orang">Lebih dari 4 Orang</option>
                                    </select>
                                    <div class="mt-2 text-muted" style="font-size: 0.9rem;">
                                        Upload Kartu Keluarga (PDF, Maksimal 1.5MB)<br>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="file_tanggungan" class="file-custom">
                                        <i class="fas fa-cloud-upload-alt me-2"></i>
                                        <span>Pilih File (PDF, Maksimal 1.5MB)</span>
                                        <input type="file" id="file_tanggungan" name="file_tanggungan" class="file-input" accept=".pdf" required>
                                    </label>
                                    <div class="file-name text-muted mt-1" id="file_tanggungan-name"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Status Orang Tua -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h5 class="mb-0 text-dark fw-bold text-start">Status Orang Tua</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <select class="form-select" name="status_ortu" required>
                                        <option value="">Pilih Status Orang Tua</option>
                                        <option value="Lengkap">Lengkap</option>
                                        <option value="Cerai/Yatim/Piatu">Cerai/Yatim/Piatu</option>
                                        <option value="Yatim Piatu">Yatim Piatu</option>
                                    </select>
                                    <div class="mt-2 text-muted" style="font-size: 0.9rem;">
                                        • Lengkap: Kartu Keluarga / Buku Nikah<br>
                                        • Cerai/Yatim/Piatu: Surat Cerai / Surat Kematian
                                    </div>
                                </div>                  
                                <div class="col-md-6">
                                    <label for="file_status_ortu" class="file-custom">
                                        <i class="fas fa-cloud-upload-alt me-2"></i>
                                        <span>Pilih File (PDF, Maksimal 1.5MB)</span>
                                        <input type="file" id="file_status_ortu" name="file_status_ortu" class="file-input" accept=".pdf" required hidden>
                                    </label>
                                    <div class="mt-2 text-muted" style="font-size: 0.9rem;">
                                        • Yatim Piatu: Surat Kematian<br>
                                        • Format: PDF, maksimal 1.5MB
                                    </div>
                                    <div class="file-name text-muted mt-1" id="file_status_ortu-name"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    
                    <!-- Hunian -->
                    <div class="card mb-3">
                       <div class="card-header bg-light">
                            <h5 class="mb-0 text-dark fw-bold text-start">Hunian</h5>
                        </div>
                        <div class="card-body">
                            <div class="criteria-item">
                                <div class="select-upload-container">
                                    <select class="form-select" name="hunian" required>
                                        <option value="">Pilih Status</option>
                                        <option value="Milik Sendiri">Milik Sendiri</option>
                                        <option value="Sewa/Kontrak">Sewa/Kontrak</option>
                                        <option value="Menumpang">Menumpang</option>
                                    </select>
                                    <label for="file_hunian" class="file-custom">
                                        <i class="fas fa-cloud-upload-alt me-2"></i>
                                        <span>Pilih File (PDF, Maksimal 1.5MB)</span>
                                        <input type="file" id="file_hunian" name="file_hunian" class="file-input" accept=".pdf,.jpg,.jpeg" required>
                                    </label>
                                </div>
                                <div class="criteria-description">
                                    Upload Foto Hunian (PDF, Maksimal 1.5MB)
                                </div>
                                <div class="file-name text-muted mt-1" id="file_hunian-name"></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Kondisi Kendaraan -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h5 class="mb-0 text-dark fw-bold text-start">Jenis Kendaraan</h5>
                        </div>
                        <div class="card-body">
                            <div class="criteria-item">
                                <div class="select-upload-container">
                                    <select class="form-select" name="kendaraan" required>
                                        <option value="">Pilih Jenis</option>
                                        <option value="Tidak Punya">Tidak Punya</option>
                                        <option value="Motor">Motor</option>
                                        <option value="Mobil">Mobil</option>
                                        <option value="Motor dan Mobil">Motor dan Mobil</option>
                                    </select>
                                    <label for="file_kendaraan" class="file-custom">
                                        <i class="fas fa-cloud-upload-alt me-2"></i>
                                        <span>Pilih File (PDF, Maksimal 1.5MB)</span>
                                        <input type="file" id="file_kendaraan" name="file_kendaraan" class="file-input" accept=".pdf">
                                    </label>
                                </div>
                                <div class="criteria-description">
                                    Upload BPKB (PDF, Maksimal 1.5MB)
                                </div>
                                <div class="file-name text-muted mt-1" id="file_kendaraan-name"></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Semester dan IPK -->
<div class="card mb-3">
    <div class="card-header bg-light">
        <h5 class="mb-0 text-dark fw-bold text-start">Semester dan IPK</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Pilih Semester Saat Ini</label>
                    <select class="form-select" name="semester" required>
                        <option value="">Pilih Semester</option>
                        <option value="1">Semester 1</option>
                        <option value="2">Semester 2</option>
                        <option value="3">Semester 3</option>
                        <option value="4">Semester 4</option>
                        <option value="5">Semester 5</option>
                        <option value=">6">Lebih dari Semester 6</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>Pilih Range IPK</label>
                    <select class="form-select" name="ipk" required>
                        <option value="">Pilih IPK</option>
                        <option value="< 2.75">Kurang dari 2.75</option>
                        <option value="2.75 - 3.00">2.75 - 3.00</option>
                        <option value="3.00 - 3.50">3.00 - 3.50</option>
                        <option value="> 3.50">Lebih dari 3.50</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="form-group">
                    <label>Upload KHS Terbaru (PDF, Maksimal 1.5MB)</label>
                    <input type="file" id="file_khs" name="file_khs" class="form-control" accept=".pdf" required>
                    <div class="file-name text-muted mt-1" id="file_khs-name"></div>
                </div>
            </div>
        </div>
    </div>
</div>
                             
                    <!-- Dokumen Tambahan -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h5 class="mb-0 text-dark fw-bold text-start">Dokumen Pendukung Tambahan</h4>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label>Dokumen Pendukung Lainnya (Opsional)</label>
                                <div class="file-custom">
                                    <i class="fas fa-cloud-upload-alt me-2"></i>
                                    <span>Pilih File (PDF, max 1.5MB)</span>
                                    <input type="file" id="file_pendukung" name="file_pendukung" class="file-input" accept=".pdf">
                                </div>
                                <div class="file-name text-muted mt-1" id="file_pendukung-name"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Alasan Pengajuan -->
                    <div class="card mb-3">
                        <div class="card-header bg-light">
                            <h5 class="mb-0 text-dark fw-bold text-start">
                                <i class="fas fa-comment me-2 text-dark me-2"></i> Alasan Pengajuan
                            </h5>                       
                        </div>
                        <div class="card-body">
                            <label for="alasan_pengajuan">Alasan Mengajukan Pengangsuran UKT *</label>
                            <textarea name="alasan_pengajuan" class="form-control" rows="4" required
                                placeholder="Jelaskan alasan Anda mengajukan penurunan UKT"></textarea>
                            <small class="text-muted">
                                Contoh: Saya mengalami kesulitan keuangan karena orang tua terkena PHK.                                    </small>
                        </div>
    
                        <div class="alert alert-info mt-3">
                            <i class="fas fa-info-circle me-2"></i>
                            Pengajuan Pengangsuran UKT Berlaku Untuk 1 Semester Berjalan Dan Akan Kembali Default Pada UKT Awal Di Semester Berikutnya.
                            Pembayaran Dilakukan Selama 2x Periode Sebelum UTS.
                        </div>
                    </div>
                </div>

                <!-- Deklarasi -->
                <div class="declaration-check">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="declaration" required>
                        <label class="form-check-label" for="declaration">
                            <strong>Saya menyatakan bahwa semua data dan dokumen yang saya berikan adalah asli.</strong> 
                            Saya memahami bahwa jika terdapat ketidaksesuaian data, pengajuan saya dapat dibatalkan.
                        </label>
                    </div>
                </div>
                
                <!-- Submit Button -->
                <button type="submit" class="btn btn-submit w-100 mt-4" id="submitBtn">
                    <i class="fas fa-paper-plane me-2"></i>Kirim Pengajuan
                </button>
                
                <div class="loading-spinner" id="loadingSpinner">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">Mohon tunggu, formulir sedang dikirim...</p>
                </div>
            </form>
        </div>
    </div>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Format input UKT
    document.getElementById('ukt-input').addEventListener('input', function(e) {
        let value = e.target.value.replace(/\./g, '');
        if (!isNaN(value)) {
            e.target.value = new Intl.NumberFormat('id-ID').format(value);
        }
    });

    // Fungsi untuk menampilkan nama file
    function handleFileInputChange(event) {
        const input = event.target;
        const fileNameContainer = document.getElementById(input.id + '-name');
        const file = input.files[0];

        if (file) {
            const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
            const iconCheck = '<i class="fas fa-check-circle text-success me-1"></i>';

            if (file.size > 1.5 * 1024 * 1024) {
                alert('Ukuran file maksimal 1.5MB!');
                input.value = '';
                fileNameContainer.innerHTML = '';
                fileNameContainer.classList.remove('text-success');
                fileNameContainer.classList.add('text-danger');
                fileNameContainer.innerHTML = '<i class="fas fa-times-circle text-danger me-1"></i>File terlalu besar (>1.5MB)';
                return;
            }

            fileNameContainer.classList.remove('text-danger');
            fileNameContainer.classList.add('text-success');
            fileNameContainer.innerHTML = `${iconCheck}${file.name} (${fileSizeMB} MB)`;
        } else {
            fileNameContainer.innerHTML = '';
        }
    }

    // Pasang event listener ke semua input file
    const fileInputs = document.querySelectorAll('.file-input');
    fileInputs.forEach(input => {
        input.addEventListener('change', handleFileInputChange);
    });

    const kendaraanSelect = document.querySelector('select[name="kendaraan"]');
    const fileKendaraan = document.getElementById('file_kendaraan');

    if (kendaraanSelect && fileKendaraan) {
        kendaraanSelect.addEventListener('change', function () {
            if (this.value === 'Tidak Punya') {
                fileKendaraan.required = false;
                document.getElementById('file_kendaraan-name').innerHTML = '';
            } else {
                fileKendaraan.required = true;
            }
        });

        if (kendaraanSelect.value === 'Tidak Punya') {
            fileKendaraan.required = false;
        } else {
            fileKendaraan.required = true;
        }
    }

    // Form submission dengan AJAX
    const form = document.getElementById('pengajuanForm');
    if (form) {
        form.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // Validasi deklarasi
            const declaration = document.getElementById('declaration');
            if (!declaration.checked) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Anda harus menyetujui deklarasi sebelum mengirimkan formulir'
                });
                declaration.scrollIntoView({ behavior: 'smooth' });
                return;
            }

            // Validasi file upload
            let allFilesValid = true;
            document.querySelectorAll('input[type="file"][required]').forEach(input => {
                if (!input.files || input.files.length === 0) {
                    allFilesValid = false;
                    const nameContainer = document.getElementById(input.id + '-name');
                    if (nameContainer) {
                        nameContainer.classList.remove('text-success');
                        nameContainer.classList.add('text-danger');
                        nameContainer.innerHTML = '<i class="fas fa-times-circle text-danger me-1"></i>File wajib diunggah';
                    }
                }
            });

            if (!allFilesValid) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Silakan lengkapi semua dokumen yang wajib diunggah'
                });
                return;
            }

            // Loading spinner
            const submitBtn = document.getElementById('submitBtn');
            const loadingSpinner = document.getElementById('loadingSpinner');
            if (submitBtn) submitBtn.disabled = true;
            if (loadingSpinner) loadingSpinner.style.display = 'block';

            // Prepare form data
            const formData = new FormData(form);
            
            // Konversi UKT ke angka polos sebelum dikirim
            const uktValue = document.getElementById('ukt-input').value;
            formData.set('ukt_saat_ini', uktValue.replace(/\./g, ''));

            try {
                const response = await fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json'
                    }
                });

                const data = await response.json();

                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Sukses!',
                        text: data.message,
                        confirmButtonText: 'OK'
                    }).then(() => {
                        window.location.href = data.redirect;
                    });
                } else {
                    throw new Error(data.message);
                }
            } catch (error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: error.message || 'Terjadi kesalahan saat mengirim pengajuan'
                });
            } finally {
                if (submitBtn) submitBtn.disabled = false;
                if (loadingSpinner) loadingSpinner.style.display = 'none';
            }
        });
    }
});
</script>
@endsection