@extends('warga.layouts.warga')

@section('subtitle', 'Formulir Pengajuan')

@section('content_body')
    <!-- Header & Breadcrumbs -->
    <x-page-header 
        title="Formulir Pengajuan Surat" 
        subtitle="Isi formulir pengajuan {{ $jenisSurat->nama_surat }}"
        :breadcrumbs="[
            'Dashboard' => route('warga.dashboard'),
            'Ajukan Surat' => route('warga.pengajuan'),
            'Formulir' => '#'
        ]"
    />

    <div class="container-fluid px-0">
        <!-- Wizard Step Progress -->
        <div class="row mb-3">
            <div class="col-12">
                <div class="card border-0 shadow-sm" style="border-radius: 12px;">
                    <div class="card-body py-3">
                        <div class="d-flex justify-content-center align-items-center text-center">
                            <!-- Step 1: Active -->
                            <div class="position-relative" style="width: 130px;">
                                <div id="step-circle-1" class="d-inline-flex justify-content-center align-items-center text-white font-weight-bold" style="width: 42px; height: 42px; border-radius: 50%; background: var(--primary-color); font-size: 0.95rem;">1</div>
                                <div id="step-label-1" class="font-weight-bold small mt-1" style="color: var(--primary-color); font-size: 0.8rem;">Isi Formulir</div>
                            </div>
                            <!-- Connector -->
                            <div class="flex-grow-1" style="height: 1px; background-color: #e2e8f0; max-width: 200px;"></div>
                            <!-- Step 2 -->
                            <div class="position-relative" style="width: 130px;">
                                <div id="step-circle-2" class="d-inline-flex justify-content-center align-items-center bg-white text-muted border font-weight-bold" style="width: 42px; height: 42px; border-radius: 50%; font-size: 0.95rem; border-color: #e2e8f0 !important;">2</div>
                                <div id="step-label-2" class="text-muted small mt-1" style="font-size: 0.8rem;">Preview</div>
                            </div>
                            <!-- Connector -->
                            <div class="flex-grow-1" style="height: 1px; background-color: #e2e8f0; max-width: 200px;"></div>
                            <!-- Step 3 -->
                            <div class="position-relative" style="width: 130px;">
                                <div id="step-circle-3" class="d-inline-flex justify-content-center align-items-center bg-white text-muted border font-weight-bold" style="width: 42px; height: 42px; border-radius: 50%; font-size: 0.95rem; border-color: #e2e8f0 !important;">3</div>
                                <div id="step-label-3" class="text-muted small mt-1" style="font-size: 0.8rem;">Selesai</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alert Hint Info -->
        <div class="d-flex align-items-center mb-4" style="background-color: #EBF8FF; color: #0369A1; border-radius: 10px; font-size: 0.85rem; padding: 12px 16px;">
            <i class="fas fa-info-circle mr-2" style="font-size: 1rem;"></i>
            <div>Pastikan data yang Anda masukkan sudah benar. Data akan digunakan untuk proses verifikasi.</div>
        </div>

        <form action="{{ route('warga.pengajuan.store', $jenisSurat->id) }}" method="post" id="submissionForm" enctype="multipart/form-data">
            @csrf
            
            <!-- STEP 1: FORM INPUTS -->
            <div id="step-form-input">
                <div class="row">
                    <!-- Form input -->
                    <div class="col-md-8">
                        <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px;">
                            <div class="card-body p-4 bg-white">

                                {{-- ═══ SECTION: IDENTITAS ═══ --}}
                                <div class="d-flex align-items-center mb-3 pb-2" style="border-bottom: 2px solid #f1f5f9;">
                                    <div class="d-flex align-items-center justify-content-center rounded-circle mr-2" style="width: 32px; height: 32px; background: rgba(15,118,110,0.08);">
                                        <i class="fas fa-user" style="font-size: 0.85rem; color: var(--primary-color);"></i>
                                    </div>
                                    <h6 class="font-weight-bold mb-0" style="color: var(--primary-color); font-size: 1rem;">Identitas Pemohon</h6>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="text-sm font-weight-normal text-muted">NIK</label>
                                        <input type="text" class="form-control bg-light" value="{{ $warga->penduduk->nik }}" readonly style="border-radius: 6px;">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="text-sm font-weight-normal text-muted">Nomor Kartu Keluarga (KK)</label>
                                        <input type="text" class="form-control bg-light" value="{{ $warga->penduduk->kartuKeluarga->no_kk ?? '-' }}" readonly style="border-radius: 6px;">
                                    </div>
                                </div>

                                <div class="form-group mb-3">
                                    <label class="text-sm font-weight-normal text-muted">Nama Lengkap</label>
                                    <input type="text" class="form-control bg-light" value="{{ $warga->penduduk->nama_lengkap }}" readonly style="border-radius: 6px;">
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="text-sm font-weight-normal text-muted">Tempat, Tanggal Lahir</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control bg-light" value="{{ $warga->penduduk->tempat_lahir }}, {{ $warga->penduduk->tanggal_lahir ? $warga->penduduk->tanggal_lahir->translatedFormat('d M Y') : '-' }}" readonly style="border-radius: 6px 0 0 6px;">
                                            <div class="input-group-append">
                                                <span class="input-group-text bg-light border-left-0" style="border-radius: 0 6px 6px 0;">
                                                    <i class="fas fa-calendar-alt text-muted"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="text-sm font-weight-normal text-muted">Jenis Kelamin</label>
                                        <div class="position-relative">
                                            <input type="text" class="form-control bg-light" value="{{ $warga->penduduk->jenis_kelamin }}" readonly style="border-radius: 6px; padding-right: 35px;">
                                            <span class="position-absolute text-muted" style="right: 15px; top: 10px;">
                                                <i class="fas fa-chevron-down text-xs"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                {{-- ═══ SECTION: ALAMAT ═══ --}}
                                <div class="d-flex align-items-center mb-3 mt-4 pb-2" style="border-bottom: 2px solid #f1f5f9;">
                                    <div class="d-flex align-items-center justify-content-center rounded-circle mr-2" style="width: 32px; height: 32px; background: rgba(15,118,110,0.08);">
                                        <i class="fas fa-map-marker-alt" style="font-size: 0.85rem; color: var(--primary-color);"></i>
                                    </div>
                                    <h6 class="font-weight-bold mb-0" style="color: var(--primary-color); font-size: 1rem;">Alamat</h6>
                                </div>

                                <div class="form-group mb-4">
                                    <label class="text-sm font-weight-normal text-muted">Alamat KTP</label>
                                    <textarea class="form-control bg-light" rows="2" readonly style="border-radius: 6px;">{{ $warga->penduduk->alamat }}</textarea>
                                </div>

                                {{-- ═══ SECTION: INFORMASI SURAT ═══ --}}
                                <div class="d-flex align-items-center mb-3 mt-2 pb-2" style="border-bottom: 2px solid #f1f5f9;">
                                    <div class="d-flex align-items-center justify-content-center rounded-circle mr-2" style="width: 32px; height: 32px; background: rgba(15,118,110,0.08);">
                                        <i class="fas fa-file-alt" style="font-size: 0.85rem; color: var(--primary-color);"></i>
                                    </div>
                                    <h6 class="font-weight-bold mb-0" style="color: var(--primary-color); font-size: 1rem;">Informasi Surat</h6>
                                </div>

                                @if($jenisSurat->kode_surat == 'SKD')
                                    <div class="form-group mb-3">
                                        <label for="alamat_domisili" class="font-weight-bold text-dark text-sm">Alamat Domisili Saat Ini <span class="text-danger">*</span></label>
                                        <textarea name="alamat_domisili" id="alamat_domisili" class="form-control @error('alamat_domisili') is-invalid @enderror" rows="3" placeholder="Masukkan alamat lengkap domisili saat ini di Desa Siofa Banua..." required style="border-radius: 6px;">{{ old('alamat_domisili') }}</textarea>
                                        <small class="text-muted d-block mt-1">Isikan alamat lengkap sesuai domisili saat ini.</small>
                                        @error('alamat_domisili')
                                            <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                @elseif($jenisSurat->kode_surat == 'SKTM')
                                    <div class="form-group mb-3">
                                        <label for="keperluan" class="font-weight-bold text-dark text-sm">Keperluan / Alasan Pengajuan <span class="text-danger">*</span></label>
                                        <textarea name="keperluan" id="keperluan" class="form-control @error('keperluan') is-invalid @enderror" rows="3" placeholder="Contoh: Mengajukan beasiswa kuliah anak, Keringanan biaya rumah sakit..." required style="border-radius: 6px;">{{ old('keperluan') }}</textarea>
                                        <small class="text-muted d-block mt-1">Isikan keperluan pengajuan surat keterangan tidak mampu.</small>
                                        @error('keperluan')
                                            <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                @elseif($jenisSurat->kode_surat == 'SKU')
                                    <div class="form-group mb-3">
                                        <label for="alamat_usaha" class="font-weight-bold text-dark text-sm">Alamat Usaha <span class="text-danger">*</span></label>
                                        <textarea name="alamat_usaha" id="alamat_usaha" class="form-control @error('alamat_usaha') is-invalid @enderror" rows="3" placeholder="Masukkan alamat lengkap lokasi usaha..." required style="border-radius: 6px;">{{ old('alamat_usaha') }}</textarea>
                                        <small class="text-muted d-block mt-1">Isikan alamat lengkap lokasi usaha Anda.</small>
                                        @error('alamat_usaha')
                                            <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="jenis_usaha" class="font-weight-bold text-dark text-sm">Jenis Usaha <span class="text-danger">*</span></label>
                                        <input type="text" name="jenis_usaha" id="jenis_usaha" class="form-control @error('jenis_usaha') is-invalid @enderror" placeholder="Contoh: Dagang Kelontong, Jasa Servis, Pertanian..." value="{{ old('jenis_usaha') }}" required style="border-radius: 6px;">
                                        @error('jenis_usaha')
                                            <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="tahun_mulai_usaha" class="font-weight-bold text-dark text-sm">Mulai Menjalankan Usaha Sejak Tahun <span class="text-danger">*</span></label>
                                        <input type="text" name="tahun_mulai_usaha" id="tahun_mulai_usaha" class="form-control @error('tahun_mulai_usaha') is-invalid @enderror" placeholder="Contoh: 2021..." value="{{ old('tahun_mulai_usaha') }}" required style="border-radius: 6px;">
                                        @error('tahun_mulai_usaha')
                                            <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                @endif

                                {{-- ═══ SECTION: DOKUMEN PERSYARATAN ═══ --}}
                                <div class="d-flex align-items-center mb-2 mt-4 pb-2" style="border-bottom: 2px solid #f1f5f9;">
                                    <div class="d-flex align-items-center justify-content-center rounded-circle mr-2" style="width: 32px; height: 32px; background: rgba(15,118,110,0.08);">
                                        <i class="fas fa-paperclip" style="font-size: 0.85rem; color: var(--primary-color);"></i>
                                    </div>
                                    <h6 class="font-weight-bold mb-0" style="color: var(--primary-color); font-size: 1rem;">Dokumen Persyaratan</h6>
                                </div>
                                <p class="text-muted text-xs mb-3">Dokumen dari Profil Saya akan digunakan otomatis pada pengajuan surat.</p>

                                <div class="row">
                                    <!-- KTP Card -->
                                    <div class="col-md-6 mb-3">
                                        <div class="card h-100 border shadow-sm" style="border-radius: 10px;">
                                            <div class="card-body p-3 d-flex flex-column justify-content-between">
                                                <div>
                                                    <div class="d-flex align-items-center justify-content-between mb-2">
                                                        <span class="font-weight-bold text-dark text-sm">
                                                            <i class="fas fa-id-card text-primary mr-2"></i>Kartu Tanda Penduduk (KTP)
                                                        </span>
                                                    </div>

                                                    @if($hasKtp)
                                                        @php
                                                            $ktpExt = strtolower(pathinfo($warga->file_ktp, PATHINFO_EXTENSION));
                                                        @endphp
                                                        <div class="mb-2">
                                                            <span class="badge badge-success px-2 py-1 font-weight-bold" style="border-radius: 6px; font-size: 0.78rem;">
                                                                <i class="fas fa-check-circle mr-1"></i>Tersedia
                                                            </span>
                                                            <small class="text-muted d-block mt-1" style="font-size: 0.78rem;">Siap digunakan untuk pengajuan</small>
                                                        </div>
                                                    @else
                                                        <div class="mb-2">
                                                            <span class="badge badge-danger px-2 py-1 font-weight-bold" style="border-radius: 6px; font-size: 0.78rem;">
                                                                <i class="fas fa-times-circle mr-1"></i>Belum tersedia
                                                            </span>
                                                            <small class="text-muted d-block mt-1" style="font-size: 0.78rem;">Dokumen diperlukan untuk pengajuan surat.</small>
                                                        </div>
                                                        <div class="custom-file mt-2">
                                                            <input type="file" name="file_ktp" id="file_ktp" class="custom-file-input @error('file_ktp') is-invalid @enderror" accept=".pdf,.jpg,.jpeg,.png" required>
                                                            <label class="custom-file-label text-truncate font-weight-normal text-sm" for="file_ktp">Pilih berkas KTP...</label>
                                                        </div>
                                                        @error('file_ktp')
                                                            <span class="text-danger small d-block mt-1" role="alert"><strong>{{ $message }}</strong></span>
                                                        @enderror
                                                    @endif
                                                </div>

                                                @if($hasKtp)
                                                    <div class="text-right mt-2">
                                                        <button type="button" class="btn btn-sm btn-outline-primary font-weight-bold px-3 btn-preview-dokumen" data-url="{{ route('warga.profil.dokumen.preview', 'ktp') }}" data-title="Preview Kartu Tanda Penduduk (KTP)" data-ext="{{ $ktpExt }}" style="border-radius: 6px;">
                                                            <i class="fas fa-eye mr-1"></i>Lihat
                                                        </button>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <!-- KK Card -->
                                    <div class="col-md-6 mb-3">
                                        <div class="card h-100 border shadow-sm" style="border-radius: 10px;">
                                            <div class="card-body p-3 d-flex flex-column justify-content-between">
                                                <div>
                                                    <div class="d-flex align-items-center justify-content-between mb-2">
                                                        <span class="font-weight-bold text-dark text-sm">
                                                            <i class="fas fa-users text-primary mr-2"></i>Kartu Keluarga (KK)
                                                        </span>
                                                    </div>

                                                    @if($hasKk)
                                                        @php
                                                            $kkExt = strtolower(pathinfo($warga->file_kk, PATHINFO_EXTENSION));
                                                        @endphp
                                                        <div class="mb-2">
                                                            <span class="badge badge-success px-2 py-1 font-weight-bold" style="border-radius: 6px; font-size: 0.78rem;">
                                                                <i class="fas fa-check-circle mr-1"></i>Tersedia
                                                            </span>
                                                            <small class="text-muted d-block mt-1" style="font-size: 0.78rem;">Siap digunakan untuk pengajuan</small>
                                                        </div>
                                                    @else
                                                        <div class="mb-2">
                                                            <span class="badge badge-danger px-2 py-1 font-weight-bold" style="border-radius: 6px; font-size: 0.78rem;">
                                                                <i class="fas fa-times-circle mr-1"></i>Belum tersedia
                                                            </span>
                                                            <small class="text-muted d-block mt-1" style="font-size: 0.78rem;">Dokumen diperlukan untuk pengajuan surat.</small>
                                                        </div>
                                                        <div class="custom-file mt-2">
                                                            <input type="file" name="file_kk" id="file_kk" class="custom-file-input @error('file_kk') is-invalid @enderror" accept=".pdf,.jpg,.jpeg,.png" required>
                                                            <label class="custom-file-label text-truncate font-weight-normal text-sm" for="file_kk">Pilih berkas KK...</label>
                                                        </div>
                                                        @error('file_kk')
                                                            <span class="text-danger small d-block mt-1" role="alert"><strong>{{ $message }}</strong></span>
                                                        @enderror
                                                    @endif
                                                </div>

                                                @if($hasKk)
                                                    <div class="text-right mt-2">
                                                        <button type="button" class="btn btn-sm btn-outline-primary font-weight-bold px-3 btn-preview-dokumen" data-url="{{ route('warga.profil.dokumen.preview', 'kk') }}" data-title="Preview Kartu Keluarga (KK)" data-ext="{{ $kkExt }}" style="border-radius: 6px;">
                                                            <i class="fas fa-eye mr-1"></i>Lihat
                                                        </button>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Footer Actions -->
                                <div class="border-top pt-4 mt-4 d-flex justify-content-between align-items-center">
                                    <a href="{{ route('warga.pengajuan') }}" class="btn btn-outline-secondary px-4 font-weight-bold" style="border-radius: 8px; height: 42px; line-height: 28px;">
                                        <i class="fas fa-arrow-left mr-1"></i> Kembali
                                    </a>
                                    <button type="button" class="btn btn-primary px-4 font-weight-bold shadow-sm" id="btnPreview" style="border-radius: 8px; height: 42px; line-height: 28px;">
                                        <i class="fas fa-paper-plane mr-1"></i> Preview Pengajuan
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Preview Side Column -->
                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm sticky-top" style="top: 85px; border-radius: 12px; overflow: hidden;">
                            <div class="card-header text-white text-center py-3" style="background: linear-gradient(135deg, #0F766E, #14B8A6);">
                                <h5 class="card-title font-weight-bold mb-0 float-none" style="font-size: 1.05rem;">
                                    <i class="fas fa-file-alt mr-2"></i>Ringkasan Permohonan
                                </h5>
                            </div>
                            <div class="card-body p-4 bg-white">
                                {{-- Kelengkapan Indikator --}}
                                <div class="mb-3 p-2 d-flex align-items-center" id="completeness_indicator" style="background: #FEF3C7; border-radius: 8px; font-size: 0.8rem; color: #92400E;">
                                    <i class="fas fa-exclamation-triangle mr-2"></i>
                                    <span id="completeness_text">Belum lengkap — isi semua field wajib</span>
                                </div>

                                <p class="font-weight-bold text-secondary text-xs text-uppercase mb-3" style="letter-spacing: 0.5px;">Ringkasan Data</p>
                                
                                <div class="mb-3 d-flex align-items-start">
                                    <div class="text-muted mr-3" style="width: 20px;"><i class="fas fa-file-alt"></i></div>
                                    <div>
                                        <small class="text-muted d-block text-xs">Jenis Surat</small>
                                        <span class="font-weight-bold text-dark" style="font-size: 0.9rem;">{{ $jenisSurat->nama_surat }}</span>
                                    </div>
                                </div>

                                <div class="mb-3 d-flex align-items-start">
                                    <div class="text-muted mr-3" style="width: 20px;"><i class="fas fa-user"></i></div>
                                    <div>
                                        <small class="text-muted d-block text-xs">Nama Pemohon</small>
                                        <span class="font-weight-bold text-dark" style="font-size: 0.9rem;">{{ $warga->name }}</span>
                                    </div>
                                </div>

                                <div class="mb-3 d-flex align-items-start">
                                    <div class="text-muted mr-3" style="width: 20px;"><i class="fas fa-id-card"></i></div>
                                    <div>
                                        <small class="text-muted d-block text-xs">NIK</small>
                                        <span class="font-weight-bold text-dark" style="font-size: 0.9rem;">{{ $warga->penduduk->nik }}</span>
                                    </div>
                                </div>

                                <div class="mb-3 d-flex align-items-start">
                                    <div class="text-muted mr-3" style="width: 20px;"><i class="fas fa-map-marker-alt"></i></div>
                                    <div>
                                        <small class="text-muted d-block text-xs">Alamat</small>
                                        <span class="text-dark" style="font-size: 0.85rem;">{{ Str::limit($warga->penduduk->alamat, 60) }}</span>
                                    </div>
                                </div>

                                @if($jenisSurat->kode_surat == 'SKD')
                                    <div class="mb-3 d-flex align-items-start">
                                        <div class="text-muted mr-3" style="width: 20px;"><i class="fas fa-map-marker-alt"></i></div>
                                        <div>
                                            <small class="text-muted d-block text-xs">Alamat Domisili</small>
                                            <span class="font-weight-bold text-dark" id="preview_domisili" style="font-size: 0.9rem;">Belum diisi</span>
                                        </div>
                                    </div>
                                @elseif($jenisSurat->kode_surat == 'SKTM')
                                    <div class="mb-3 d-flex align-items-start">
                                        <div class="text-muted mr-3" style="width: 20px;"><i class="fas fa-info-circle"></i></div>
                                        <div>
                                            <small class="text-muted d-block text-xs">Keperluan</small>
                                            <span class="font-weight-bold text-dark" id="preview_keperluan" style="font-size: 0.9rem;">Belum diisi</span>
                                        </div>
                                    </div>
                                @elseif($jenisSurat->kode_surat == 'SKU')
                                    <div class="mb-3 d-flex align-items-start">
                                        <div class="text-muted mr-3" style="width: 20px;"><i class="fas fa-map-marker-alt"></i></div>
                                        <div>
                                            <small class="text-muted d-block text-xs">Alamat Usaha</small>
                                            <span class="font-weight-bold text-dark" id="preview_alamat_usaha" style="font-size: 0.9rem;">Belum diisi</span>
                                        </div>
                                    </div>
                                    <div class="mb-3 d-flex align-items-start">
                                        <div class="text-muted mr-3" style="width: 20px;"><i class="fas fa-store"></i></div>
                                        <div>
                                            <small class="text-muted d-block text-xs">Jenis Usaha</small>
                                            <span class="font-weight-bold text-dark" id="preview_jenis_usaha" style="font-size: 0.9rem;">Belum diisi</span>
                                        </div>
                                    </div>
                                    <div class="mb-3 d-flex align-items-start">
                                        <div class="text-muted mr-3" style="width: 20px;"><i class="fas fa-calendar-alt"></i></div>
                                        <div>
                                            <small class="text-muted d-block text-xs">Mulai Usaha Sejak</small>
                                            <span class="font-weight-bold text-dark" id="preview_tahun_mulai_usaha" style="font-size: 0.9rem;">Belum diisi</span>
                                        </div>
                                    </div>
                                @endif

                                <div class="mb-3 d-flex align-items-start">
                                    <div class="text-muted mr-3" style="width: 20px;"><i class="fas fa-paperclip"></i></div>
                                    <div>
                                        <small class="text-muted d-block text-xs">Dokumen Persyaratan</small>
                                        <div class="mt-1">
                                            <div class="d-flex align-items-center mb-1" style="font-size: 0.8rem;">
                                                @if($hasKtp)
                                                    <i class="fas fa-check-circle text-success mr-1" id="doc_icon_ktp" style="font-size: 0.75rem;"></i>
                                                    <span class="text-success font-weight-bold" id="doc_label_ktp">KTP — Tersedia</span>
                                                @else
                                                    <i class="far fa-circle text-muted mr-1" id="doc_icon_ktp" style="font-size: 0.6rem;"></i>
                                                    <span class="text-muted" id="doc_label_ktp">KTP — belum diupload</span>
                                                @endif
                                            </div>
                                            <div class="d-flex align-items-center" style="font-size: 0.8rem;">
                                                @if($hasKk)
                                                    <i class="fas fa-check-circle text-success mr-1" id="doc_icon_kk" style="font-size: 0.75rem;"></i>
                                                    <span class="text-success font-weight-bold" id="doc_label_kk">KK — Tersedia</span>
                                                @else
                                                    <i class="far fa-circle text-muted mr-1" id="doc_icon_kk" style="font-size: 0.6rem;"></i>
                                                    <span class="text-muted" id="doc_label_kk">KK — belum diupload</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Alert info bottom -->
                                <div class="p-3 d-flex align-items-start" style="background-color: #EFF6FF; color: #1E40AF; border-radius: 8px; font-size: 0.8rem; line-height: 1.5;">
                                    <i class="fas fa-info-circle mr-2 mt-1" style="font-size: 0.9rem;"></i>
                                    <div>Data di samping akan muncul pada dokumen surat. Pastikan sudah sesuai sebelum melanjutkan.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- STEP 2: PREVIEW -->
            <div id="step-form-preview" class="d-none">
                <!-- Alert Informasi -->
                <div class="alert alert-info border-0 shadow-sm d-flex align-items-center mb-4" style="background-color: #EBF8FF; color: #0369A1; border-radius: 10px; font-size: 0.85rem; padding: 12px 16px;">
                    <i class="fas fa-info-circle mr-2" style="font-size: 1.1rem; color: #0369A1 !important;"></i>
                    <div>Pastikan seluruh data yang Anda masukkan sudah benar. Setelah pengajuan dikirim, data akan masuk ke proses verifikasi Admin Desa.</div>
                </div>

                <!-- Card Data Pemohon -->
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-header bg-white py-3 border-0">
                        <h5 class="font-weight-bold text-dark mb-0" style="font-size: 1.1rem; color: var(--primary-color) !important;">
                            <i class="fas fa-user mr-2"></i>Data Pemohon
                        </h5>
                    </div>
                    <div class="card-body pt-0">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <small class="text-muted d-block mb-1">NIK</small>
                                <span class="font-weight-bold text-dark" style="font-size: 0.95rem;">{{ $warga->penduduk->nik }}</span>
                            </div>
                            <div class="col-md-6 mb-3">
                                <small class="text-muted d-block mb-1">Nomor KK</small>
                                <span class="font-weight-bold text-dark" style="font-size: 0.95rem;">{{ $warga->penduduk->kartuKeluarga->no_kk ?? '-' }}</span>
                            </div>
                            <div class="col-md-6 mb-3">
                                <small class="text-muted d-block mb-1">Nama Lengkap</small>
                                <span class="font-weight-bold text-dark" style="font-size: 0.95rem;">{{ $warga->penduduk->nama_lengkap }}</span>
                            </div>
                            <div class="col-md-6 mb-3">
                                <small class="text-muted d-block mb-1">Tempat Lahir</small>
                                <span class="font-weight-bold text-dark" style="font-size: 0.95rem;">{{ $warga->penduduk->tempat_lahir }}</span>
                            </div>
                            <div class="col-md-6 mb-3">
                                <small class="text-muted d-block mb-1">Tanggal Lahir</small>
                                <span class="font-weight-bold text-dark" style="font-size: 0.95rem;">{{ $warga->penduduk->tanggal_lahir ? $warga->penduduk->tanggal_lahir->translatedFormat('d M Y') : '-' }}</span>
                            </div>
                            <div class="col-md-6 mb-3">
                                <small class="text-muted d-block mb-1">Jenis Kelamin</small>
                                <span class="font-weight-bold text-dark" style="font-size: 0.95rem;">{{ $warga->penduduk->jenis_kelamin }}</span>
                            </div>
                            <div class="col-md-6 mb-3">
                                <small class="text-muted d-block mb-1">Alamat KTP</small>
                                <span class="font-weight-bold text-dark" style="font-size: 0.95rem;">{{ $warga->penduduk->alamat }}</span>
                            </div>
                            <div class="col-md-6 mb-3">
                                <small class="text-muted d-block mb-1">RT/RW</small>
                                <span class="font-weight-bold text-dark" style="font-size: 0.95rem;">RT {{ $warga->penduduk->kartuKeluarga->rt ?? '-' }} / RW {{ $warga->penduduk->kartuKeluarga->rw ?? '-' }}</span>
                            </div>
                            <div class="col-md-6 mb-3">
                                <small class="text-muted d-block mb-1">Dusun</small>
                                <span class="font-weight-bold text-dark" style="font-size: 0.95rem;">{{ $warga->penduduk->kartuKeluarga->dusun ?? '-' }}</span>
                            </div>
                            <div class="col-md-6 mb-3">
                                <small class="text-muted d-block mb-1">Agama</small>
                                <span class="font-weight-bold text-dark" style="font-size: 0.95rem;">{{ $warga->penduduk->agama ?? '-' }}</span>
                            </div>
                            <div class="col-md-6 mb-3">
                                <small class="text-muted d-block mb-1">Status Perkawinan</small>
                                <span class="font-weight-bold text-dark" style="font-size: 0.95rem;">{{ $warga->penduduk->status_perkawinan ?? '-' }}</span>
                            </div>
                            <div class="col-md-6 mb-3">
                                <small class="text-muted d-block mb-1">Pekerjaan</small>
                                <span class="font-weight-bold text-dark" style="font-size: 0.95rem;">{{ $warga->penduduk->pekerjaan ?? '-' }}</span>
                            </div>
                            <div class="col-md-6 mb-3">
                                <small class="text-muted d-block mb-1">Kewarganegaraan</small>
                                <span class="font-weight-bold text-dark" style="font-size: 0.95rem;">{{ $warga->penduduk->kewarganegaraan ?? '-' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Card Informasi Surat -->
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-header bg-white py-3 border-0">
                        <h5 class="font-weight-bold text-dark mb-0" style="font-size: 1.1rem; color: var(--primary-color) !important;">
                            <i class="fas fa-file-invoice mr-2"></i>Informasi Surat
                        </h5>
                    </div>
                    <div class="card-body pt-0">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <small class="text-muted d-block mb-1">Jenis Surat</small>
                                <span class="font-weight-bold text-dark" style="font-size: 0.95rem;">{{ $jenisSurat->nama_surat }}</span>
                            </div>
                            @if($jenisSurat->kode_surat == 'SKD')
                                <div class="col-md-6 mb-3">
                                    <small class="text-muted d-block mb-1">Alamat Domisili</small>
                                    <span class="font-weight-bold text-dark" id="preview_val_domisili" style="font-size: 0.95rem;">-</span>
                                </div>
                            @elseif($jenisSurat->kode_surat == 'SKTM')
                                <div class="col-md-6 mb-3">
                                    <small class="text-muted d-block mb-1">Keperluan</small>
                                    <span class="font-weight-bold text-dark" id="preview_val_keperluan" style="font-size: 0.95rem;">-</span>
                                </div>
                            @elseif($jenisSurat->kode_surat == 'SKU')
                                <div class="col-md-6 mb-3">
                                    <small class="text-muted d-block mb-1">Alamat Usaha</small>
                                    <span class="font-weight-bold text-dark" id="preview_val_alamat_usaha" style="font-size: 0.95rem;">-</span>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <small class="text-muted d-block mb-1">Jenis Usaha</small>
                                    <span class="font-weight-bold text-dark" id="preview_val_jenis_usaha" style="font-size: 0.95rem;">-</span>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <small class="text-muted d-block mb-1">Mulai Usaha Sejak</small>
                                    <span class="font-weight-bold text-dark" id="preview_val_tahun_mulai_usaha" style="font-size: 0.95rem;">-</span>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Card Dokumen Persyaratan -->
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-header bg-white py-3 border-0">
                        <h5 class="font-weight-bold text-dark mb-0" style="font-size: 1.1rem; color: var(--primary-color) !important;">
                            <i class="fas fa-paperclip mr-2"></i>Dokumen Persyaratan
                        </h5>
                    </div>
                    <div class="card-body pt-0">
                        <div class="d-flex flex-column" style="gap: 12px;">
                            <div class="d-flex align-items-center justify-content-between p-3 rounded-lg" style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-id-card text-primary fa-lg mr-3" style="font-size: 1.4rem;"></i>
                                    <div>
                                        <small class="text-muted d-block text-xs">Kartu Tanda Penduduk (KTP)</small>
                                        <span class="font-weight-bold text-dark text-sm" id="preview_file_name_ktp">{{ $hasKtp ? 'Dokumen KTP' : '-' }}</span>
                                    </div>
                                </div>
                                <span class="badge badge-success font-weight-bold px-3 py-2" style="font-size: 0.82rem;" id="preview_status_ktp"><i class="fas fa-check-circle mr-1"></i> {{ $hasKtp ? 'Tersedia' : 'Siap Diunggah' }}</span>
                            </div>
                            <div class="d-flex align-items-center justify-content-between p-3 rounded-lg" style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-users text-primary fa-lg mr-3" style="font-size: 1.4rem;"></i>
                                    <div>
                                        <small class="text-muted d-block text-xs">Kartu Keluarga (KK)</small>
                                        <span class="font-weight-bold text-dark text-sm" id="preview_file_name_kk">{{ $hasKk ? 'Dokumen KK' : '-' }}</span>
                                    </div>
                                </div>
                                <span class="badge badge-success font-weight-bold px-3 py-2" style="font-size: 0.82rem;" id="preview_status_kk"><i class="fas fa-check-circle mr-1"></i> {{ $hasKk ? 'Tersedia' : 'Siap Diunggah' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Card Catatan -->
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px; background-color: #fffbeb; border: 1px solid #fef3c7 !important; overflow: hidden;">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-start">
                            <i class="fas fa-exclamation-triangle mr-2 text-warning mt-1" style="font-size: 1.1rem; color: #d97706 !important;"></i>
                            <div>
                                <h6 class="font-weight-bold mb-1" style="color: #92400E; font-size: 0.9rem;">Catatan</h6>
                                <p class="mb-0 text-muted" style="font-size: 0.85rem; color: #b45309 !important;">
                                    Apabila terdapat kesalahan data, silakan kembali ke langkah sebelumnya untuk melakukan perbaikan sebelum pengajuan dikirim.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Button -->
                <div class="d-flex justify-content-between align-items-center mt-4">
                    <button type="button" class="btn btn-outline-secondary px-4 font-weight-bold" id="btnBackToForm" style="border-radius: 8px; height: 42px; line-height: 28px;">
                        <i class="fas fa-arrow-left mr-1"></i> Kembali
                    </button>
                    <button type="button" class="btn btn-primary px-4 font-weight-bold shadow-sm" id="btnSubmitForm" style="border-radius: 8px; height: 42px; background-color: var(--primary-color); border-color: var(--primary-color); line-height: 28px;">
                        <i class="fas fa-paper-plane mr-1"></i> Kirim Pengajuan
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Modal Preview Dokumen (In-Page Bootstrap 4 Modal) -->
    <div class="modal fade" id="previewDokumenModal" tabindex="-1" role="dialog" aria-labelledby="previewDokumenModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content border-0 shadow-lg" style="border-radius: 12px; overflow: hidden;">
                <div class="modal-header text-white" style="background: var(--primary-color);">
                    <h5 class="modal-title font-weight-bold text-white" id="previewDokumenModalLabel">
                        <i class="fas fa-file-alt mr-2"></i><span id="modalDokumenTitle">Preview Dokumen</span>
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close" style="opacity: 0.9;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-0 position-relative bg-dark d-flex align-items-center justify-content-center" style="min-height: 70vh; max-height: 80vh; overflow: hidden;">
                    <!-- Loading Indicator -->
                    <div id="previewDokumenLoading" class="position-absolute text-white text-center py-5" style="z-index: 10;">
                        <div class="spinner-border text-light mb-2" role="status" style="width: 3rem; height: 3rem;">
                            <span class="sr-only">Memuat dokumen...</span>
                        </div>
                        <p class="text-xs font-weight-bold mb-0">Memuat berkas dokumen...</p>
                    </div>

                    <!-- Error State Message -->
                    <div id="previewDokumenError" class="position-absolute text-white text-center p-4 d-none" style="z-index: 10;">
                        <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
                        <h6 class="font-weight-bold">Gagal memuat dokumen.</h6>
                        <p class="text-xs text-muted mb-0">Silakan coba lagi beberapa saat lagi.</p>
                    </div>

                    <!-- PDF Frame -->
                    <iframe id="previewDokumenFrame" src="" style="width: 100%; height: 70vh; border: none; display: none;"></iframe>

                    <!-- Image Display Element -->
                    <img id="previewDokumenImage" src="" class="img-fluid" style="max-height: 70vh; object-fit: contain; display: none;" alt="Preview Dokumen">
                </div>
                <div class="modal-footer bg-light py-2 px-3 d-flex justify-content-between align-items-center">
                    <small class="text-muted"><i class="fas fa-shield-alt text-success mr-1"></i>Dokumen terlindungi hak akses</small>
                    <button type="button" class="btn btn-secondary font-weight-bold px-4" data-dismiss="modal" style="border-radius: 6px;">
                        <i class="fas fa-times mr-1"></i> Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('warga_css')
@endsection

@section('warga_js')
    <script>
        $(document).ready(function() {
            const hasKtpMaster = {{ $hasKtp ? 'true' : 'false' }};
            const hasKkMaster = {{ $hasKk ? 'true' : 'false' }};

            // Helper: format file size
            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
            }

            // Preview Dokumen Modal Trigger (In-page Bootstrap 4 modal without opening new tab)
            $(document).on('click', '.btn-preview-dokumen', function(e) {
                e.preventDefault();
                let url = $(this).data('url');
                let title = $(this).data('title');
                let ext = ($(this).data('ext') || '').toLowerCase();

                if (!url) {
                    console.error('Preview URL tidak ditemukan.');
                    return;
                }

                $('#modalDokumenTitle').text(title);

                // Reset modal state
                $('#previewDokumenFrame').hide().attr('src', '');
                $('#previewDokumenImage').hide().attr('src', '');
                $('#previewDokumenError').addClass('d-none');
                $('#previewDokumenLoading').removeClass('d-none');

                $('#previewDokumenModal').modal('show');

                // Render PDF vs Image
                if (ext === 'pdf' || url.toLowerCase().includes('.pdf')) {
                    $('#previewDokumenFrame')
                        .off('load')
                        .on('load', function() {
                            $('#previewDokumenLoading').addClass('d-none');
                        })
                        .attr('src', url)
                        .show();

                    setTimeout(function() {
                        $('#previewDokumenLoading').addClass('d-none');
                    }, 1000);
                } else {
                    $('#previewDokumenImage')
                        .off('load error')
                        .on('load', function() {
                            $('#previewDokumenLoading').addClass('d-none');
                        })
                        .on('error', function() {
                            $('#previewDokumenLoading').addClass('d-none');
                            $('#previewDokumenError').removeClass('d-none');
                        })
                        .attr('src', url)
                        .show();
                }
            });

            // Clean up modal container on hide
            $('#previewDokumenModal').on('hidden.bs.modal', function () {
                $('#previewDokumenFrame').hide().attr('src', '');
                $('#previewDokumenImage').hide().attr('src', '');
                $('#previewDokumenLoading').removeClass('d-none');
                $('#previewDokumenError').addClass('d-none');
            });

            // File input listener for KTP (if input exists)
            if ($('#file_ktp').length) {
                $('#file_ktp').on('change', function() {
                    const file = this.files[0];
                    let fileName = $(this).val().split('\\').pop();
                    if (file) {
                        $(this).next('.custom-file-label').addClass("selected").html(fileName);
                        $('#doc_icon_ktp').removeClass('far fa-circle text-muted').addClass('fas fa-check-circle text-success');
                        $('#doc_label_ktp').removeClass('text-muted').addClass('text-success font-weight-bold').text('KTP — ' + file.name);
                    } else {
                        $(this).next('.custom-file-label').removeClass("selected").html('Pilih berkas KTP...');
                        $('#doc_icon_ktp').removeClass('fas fa-check-circle text-success').addClass('far fa-circle text-muted');
                        $('#doc_label_ktp').removeClass('text-success font-weight-bold').addClass('text-muted').text('KTP — belum diupload');
                    }
                    updateCompleteness();
                });
            }

            // File input listener for KK (if input exists)
            if ($('#file_kk').length) {
                $('#file_kk').on('change', function() {
                    const file = this.files[0];
                    let fileName = $(this).val().split('\\').pop();
                    if (file) {
                        $(this).next('.custom-file-label').addClass("selected").html(fileName);
                        $('#doc_icon_kk').removeClass('far fa-circle text-muted').addClass('fas fa-check-circle text-success');
                        $('#doc_label_kk').removeClass('text-muted').addClass('text-success font-weight-bold').text('KK — ' + file.name);
                    } else {
                        $(this).next('.custom-file-label').removeClass("selected").html('Pilih berkas KK...');
                        $('#doc_icon_kk').removeClass('fas fa-check-circle text-success').addClass('far fa-circle text-muted');
                        $('#doc_label_kk').removeClass('text-success font-weight-bold').addClass('text-muted').text('KK — belum diupload');
                    }
                    updateCompleteness();
                });
            }

            // Input listener for live preview
            $('#alamat_domisili').on('input', function() {
                $('#preview_domisili').text($(this).val() || 'Belum diisi');
                updateCompleteness();
            });
            $('#keperluan').on('input', function() {
                $('#preview_keperluan').text($(this).val() || 'Belum diisi');
                updateCompleteness();
            });
            $('#alamat_usaha').on('input', function() {
                $('#preview_alamat_usaha').text($(this).val() || 'Belum diisi');
                updateCompleteness();
            });
            $('#jenis_usaha').on('input', function() {
                $('#preview_jenis_usaha').text($(this).val() || 'Belum diisi');
                updateCompleteness();
            });
            $('#tahun_mulai_usaha').on('input', function() {
                $('#preview_tahun_mulai_usaha').text($(this).val() || 'Belum diisi');
                updateCompleteness();
            });

            // Trigger initial input checking
            $('#alamat_domisili, #keperluan, #alamat_usaha, #jenis_usaha, #tahun_mulai_usaha').trigger('input');

            // Completeness indicator
            function updateCompleteness() {
                let form = document.getElementById('submissionForm');
                let isTextValid = form.checkValidity();
                let isKtpReady = hasKtpMaster || ($('#file_ktp').length && $('#file_ktp')[0].files.length > 0);
                let isKkReady = hasKkMaster || ($('#file_kk').length && $('#file_kk')[0].files.length > 0);

                let indicator = $('#completeness_indicator');
                let text = $('#completeness_text');

                if (isTextValid && isKtpReady && isKkReady) {
                    indicator.css({ 'background': '#D1FAE5', 'color': '#065F46' });
                    text.html('<i class="fas fa-check-circle mr-1"></i> Data & dokumen lengkap — siap dikirim');
                } else if (!isKtpReady || !isKkReady) {
                    indicator.css({ 'background': '#FEF3C7', 'color': '#92400E' });
                    text.html('<i class="fas fa-exclamation-triangle mr-1"></i> Dokumen KTP/KK belum diunggah');
                } else {
                    indicator.css({ 'background': '#FEF3C7', 'color': '#92400E' });
                    text.html('<i class="fas fa-exclamation-triangle mr-1"></i> Belum lengkap — isi semua field wajib');
                }
            }

            // Handle transition to Step 2: Preview
            $('#btnPreview').click(function() {
                let ktpFile = $('#file_ktp').length ? $('#file_ktp')[0].files[0] : null;
                let kkFile = $('#file_kk').length ? $('#file_kk')[0].files[0] : null;

                if (!hasKtpMaster && !ktpFile) {
                    Swal.fire({
                        title: 'Dokumen KTP Wajib',
                        text: 'Silakan pilih berkas Kartu Tanda Penduduk (KTP) terlebih dahulu.',
                        icon: 'warning',
                        confirmButtonColor: '#0F766E'
                    });
                    return;
                }

                if (!hasKkMaster && !kkFile) {
                    Swal.fire({
                        title: 'Dokumen KK Wajib',
                        text: 'Silakan pilih berkas Kartu Keluarga (KK) terlebih dahulu.',
                        icon: 'warning',
                        confirmButtonColor: '#0F766E'
                    });
                    return;
                }

                let form = $('#submissionForm');
                
                // Validate visible required fields
                let visibleFieldsValid = true;
                form.find('input[required]:visible:not([type="file"]), textarea[required]:visible').each(function() {
                    if (!this.checkValidity()) {
                        this.reportValidity();
                        visibleFieldsValid = false;
                        return false;
                    }
                });
                if (!visibleFieldsValid) return;

                // Copy input values to preview card elements
                $('#preview_val_domisili').text($('#alamat_domisili').val() || '-');
                $('#preview_val_keperluan').text($('#keperluan').val() || '-');
                $('#preview_val_alamat_usaha').text($('#alamat_usaha').val() || '-');
                $('#preview_val_jenis_usaha').text($('#jenis_usaha').val() || '-');
                $('#preview_val_tahun_mulai_usaha').text($('#tahun_mulai_usaha').val() || '-');

                if (ktpFile) {
                    $('#preview_file_name_ktp').text(ktpFile.name + ' (' + formatFileSize(ktpFile.size) + ')');
                    $('#preview_status_ktp').html('<i class="fas fa-check-circle mr-1"></i> Siap Diunggah');
                } else if (hasKtpMaster) {
                    $('#preview_file_name_ktp').text('Dokumen KTP');
                    $('#preview_status_ktp').html('<i class="fas fa-check-circle mr-1"></i> Tersedia');
                }

                if (kkFile) {
                    $('#preview_file_name_kk').text(kkFile.name + ' (' + formatFileSize(kkFile.size) + ')');
                    $('#preview_status_kk').html('<i class="fas fa-check-circle mr-1"></i> Siap Diunggah');
                } else if (hasKkMaster) {
                    $('#preview_file_name_kk').text('Dokumen KK');
                    $('#preview_status_kk').html('<i class="fas fa-check-circle mr-1"></i> Tersedia');
                }

                // Toggle visibility
                $('#step-form-input').addClass('d-none');
                $('#step-form-preview').removeClass('d-none');

                // Update Page Header Title & Subtitle
                $('h1.text-dark').text('Preview Pengajuan Surat');
                $('h1.text-dark').next('p.text-muted').text('Periksa kembali seluruh data sebelum mengirim pengajuan surat.');

                // Update Stepper
                $('#step-circle-1').html('<i class="fas fa-check"></i>').css({ 'background': '#10b981', 'color': '#ffffff', 'border-color': '#10b981' });
                $('#step-label-1').css('color', '#10b981');
                $('#step-circle-2').removeClass('bg-white text-muted border').css({ 'background': 'var(--primary-color)', 'color': '#ffffff', 'border-color': 'var(--primary-color)' });
                $('#step-label-2').removeClass('text-muted').addClass('font-weight-bold').css('color', 'var(--primary-color)');

                // Scroll to top
                window.scrollTo({ top: 0, behavior: 'smooth' });
            });

            // Handle transition back to Step 1: Form Inputs
            $('#btnBackToForm').click(function() {
                // Toggle visibility
                $('#step-form-preview').addClass('d-none');
                $('#step-form-input').removeClass('d-none');

                // Revert Page Header Title & Subtitle
                $('h1.text-dark').text('Formulir Pengajuan Surat');
                $('h1.text-dark').next('p.text-muted').text('Isi formulir pengajuan {{ $jenisSurat->nama_surat }}');

                // Revert Stepper
                $('#step-circle-1').html('1').css({ 'background': 'var(--primary-color)', 'color': '#ffffff', 'border-color': 'var(--primary-color)' });
                $('#step-label-1').css('color', 'var(--primary-color)');
                $('#step-circle-2').addClass('bg-white text-muted border').css({ 'background': '', 'color': '', 'border-color': '' });
                $('#step-label-2').removeClass('font-weight-bold').addClass('text-muted').css('color', '');

                // Scroll to top
                window.scrollTo({ top: 0, behavior: 'smooth' });
            });

            // Handle Submission in Step 2 Preview
            $('#btnSubmitForm').click(function() {
                let form = $('#submissionForm');
                
                Swal.fire({
                    title: 'Kirim Pengajuan?',
                    text: 'Pastikan seluruh informasi tambahan dan berkas persyaratan sudah diisi dengan benar.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#0F766E',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, Kirim!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    </script>
@stop