@props([
    'id' => 'modalImportPenduduk',
    'title' => 'Import Data Penduduk',
    'subtitle' => 'Unggah berkas Excel data penduduk sesuai format resmi SIAD Desa Siofa Banua',
    'templateName' => 'Template_Import_Penduduk.xlsx',
    'templateUrl' => '#',
    'expectedHeaders' => [
        'Nomor KK', 'NIK', 'Nama Lengkap', 
        'Jenis Kelamin', 'Tempat Lahir', 'Tanggal Lahir', 'Agama', 
        'Pendidikan', 'Pekerjaan', 
        'Status Perkawinan', 'Hubungan Keluarga', 'Kewarganegaraan', 'Status Penduduk', 
        'Alamat Lengkap', 'Dusun', 'RT', 'RW'
    ],
    'maxFileSizeMb' => 5,
    'maxRows' => 1000,
    'actionUrl' => '#'
])

<div class="modal fade import-single-modal" id="{{ $id }}" tabindex="-1" role="dialog" aria-labelledby="{{ $id }}Label" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            
            <!-- Modal Header -->
            <div class="import-single-header d-flex align-items-center justify-content-between">
                <div>
                    <h5 class="modal-title font-weight-bold mb-0" id="{{ $id }}Label">
                        <i class="fas fa-file-import mr-2"></i> {{ $title }}
                    </h5>
                    <div class="subtitle">{{ $subtitle }}</div>
                </div>
                <button type="button" class="close text-white opacity-90" data-dismiss="modal" aria-label="Close" style="font-size: 1.4rem; outline: none;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- Modal Body (Compact Single-Page Layout) -->
            <div class="import-single-body">
                
                <!-- Main Content Panel -->
                <div class="import-main-content">
                    
                    <!-- 1. Panduan Singkat (4 Langkah) -->
                    <div class="import-guide-box">
                        <div class="import-guide-title">
                            <i class="fas fa-info-circle text-primary"></i> Panduan Singkat Import Data
                        </div>
                        <ul class="import-guide-list">
                            <li class="import-guide-item">
                                <span class="step-num">1</span>
                                <span>Download Template</span>
                            </li>
                            <li class="import-guide-item">
                                <span class="step-num">2</span>
                                <span>Isi Data Template</span>
                            </li>
                            <li class="import-guide-item">
                                <span class="step-num">3</span>
                                <span>Upload File Excel</span>
                            </li>
                            <li class="import-guide-item">
                                <span class="step-num">4</span>
                                <span>Klik Import Data</span>
                            </li>
                        </ul>
                    </div>

                    <!-- 2. Download Template Bar -->
                    <div class="download-template-bar">
                        <a href="{{ $templateUrl }}" class="btn-download-cta">
                            <i class="fas fa-download"></i> Download Template Excel (Smart 2 Sheet)
                        </a>
                        <div class="download-hint">
                            Gunakan template resmi SIAD (dilengkapi Sheet 2 Petunjuk & Aturan Struktur Keluarga).
                        </div>
                    </div>

                    <!-- 3. Upload Area (Fokus Utama Element) -->
                    <input type="file" class="import-file-input d-none" accept=".xlsx, .xls">
                    <div class="import-dropzone">
                        <div class="import-dropzone-icon">
                            <i class="fas fa-file-excel"></i>
                        </div>
                        <div class="import-dropzone-title">Upload File Excel</div>
                        <div class="import-dropzone-subtitle">Drag & Drop file di sini atau <strong class="text-primary">Klik untuk memilih file</strong></div>
                    </div>

                    <!-- 4. Informasi File (Muncul setelah file dipilih) -->
                    <div class="file-metadata-card d-none">
                        <!-- Rendered dynamically by JavaScript -->
                    </div>

                    <!-- 5. Ringkas Informasi Penting (Checklist Sederhana 4 Poin) -->
                    <div class="info-rules-simple">
                        <div class="rules-grid">
                            <div class="rule-item">
                                <i class="fas fa-check-circle"></i> Format .xlsx / .xls
                            </div>
                            <div class="rule-item">
                                <i class="fas fa-check-circle"></i> Maksimal {{ number_format($maxRows, 0, ',', '.') }} data
                            </div>
                            <div class="rule-item">
                                <i class="fas fa-check-circle"></i> Maksimal ukuran {{ $maxFileSizeMb }} MB
                            </div>
                            <div class="rule-item">
                                <i class="fas fa-check-circle"></i> Header tidak boleh diubah
                            </div>
                        </div>
                    </div>

                    <!-- 6. Pratinjau Data (5 Baris Pertama) -->
                    <div class="preview-data-section d-none">
                        <div class="d-flex align-items-center justify-content-between mb-1.5">
                            <span class="text-xs font-weight-bold text-dark">
                                <i class="fas fa-table text-primary mr-1"></i> Pratinjau Data (5 Baris Pertama)
                            </span>
                            <span class="data-count-pill">
                                <i class="fas fa-database"></i> 0 Data Ditemukan
                            </span>
                        </div>
                        <div class="preview-table-wrapper mb-2">
                            <table class="table preview-table mb-0">
                                <thead class="preview-table-head">
                                    <!-- Rendered dynamically -->
                                </thead>
                                <tbody class="preview-table-body">
                                    <!-- Rendered dynamically -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>

                <!-- Loading Progress Screen -->
                <div class="import-loading-overlay d-none">
                    <div class="import-loader-spinner"></div>
                    <h6 class="font-weight-bold text-dark mb-1">Sedang Mengimpor Data...</h6>
                    <p class="text-muted text-xs import-progress-status-text">Mohon tunggu, proses import sedang berlangsung...</p>
                    <div class="import-progress-bar-container">
                        <div class="import-progress-bar-fill"></div>
                    </div>
                </div>

                <!-- Outcome Summary Screen -->
                <div class="import-result-summary d-none">
                    <div class="text-center mb-3">
                        <div class="d-inline-flex align-items-center justify-content-center bg-success-subtle text-success rounded-circle mb-2" style="width: 48px; height: 48px; font-size: 1.4rem; background-color: rgba(16, 185, 129, 0.12);">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <h5 class="font-weight-bold text-dark mb-1">Import Berhasil</h5>
                        <p class="text-muted text-xs mb-0">Proses import berkas Excel telah selesai.</p>
                    </div>

                    <div class="row mb-3">
                        <div class="col-4">
                            <div class="result-stat-box stat-total">
                                <div class="result-stat-number summary-total-count">0</div>
                                <div class="result-stat-label">Total Data</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="result-stat-box stat-success">
                                <div class="result-stat-number summary-success-count">0</div>
                                <div class="result-stat-label">Data Berhasil</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="result-stat-box stat-danger">
                                <div class="result-stat-number summary-error-count">0</div>
                                <div class="result-stat-label">Data Gagal</div>
                            </div>
                        </div>
                    </div>

                    <!-- Error Details Breakdown -->
                    <div class="error-details-wrapper d-none">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="text-xs font-weight-bold text-danger">
                                <i class="fas fa-exclamation-triangle mr-1"></i> Rincian Kesalahan
                            </span>
                            <button type="button" class="btn btn-xs btn-outline-danger font-weight-bold btn-download-errors" style="border-radius: 6px;">
                                <i class="fas fa-download mr-1"></i> Unduh Laporan Error
                            </button>
                        </div>
                        <div class="table-responsive border rounded" style="max-height: 120px;">
                            <table class="table table-sm table-bordered mb-0" style="font-size: 0.75rem;">
                                <thead class="bg-light">
                                    <tr>
                                        <th style="width: 45px;">Baris</th>
                                        <th>NIK</th>
                                        <th>Nama</th>
                                        <th>Keterangan Error</th>
                                    </tr>
                                </thead>
                                <tbody class="error-log-body">
                                    <!-- Rendered dynamically -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Modal Footer (Hanya 2 Tombol Utama) -->
            <div class="import-single-footer">
                <button type="button" class="btn btn-secondary font-weight-bold px-3 btn-close-modal" data-dismiss="modal" style="border-radius: 8px;">
                    Tutup
                </button>
                <button type="button" class="btn btn-primary btn-import-submit" disabled style="border-radius: 8px;">
                    <i class="fas fa-download mr-1"></i> Import Data
                </button>
            </div>

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

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof SiadImportWizard !== 'undefined') {
        window.importWizardInstance_{{ str_replace('-', '_', $id) }} = new SiadImportWizard({
            id: @json($id),
            templateName: @json($templateName),
            templateUrl: @json($templateUrl),
            expectedHeaders: @json($expectedHeaders),
            maxFileSizeMb: @json($maxFileSizeMb),
            maxRows: @json($maxRows),
            actionUrl: @json($actionUrl)
        });
    }
});
</script>