<div class="d-flex justify-content-between align-items-center mb-4">
    <h3 class="mb-0" style="color: var(--sidebar-bg);">
        <i class="bi bi-upload me-2"></i>Import Data Excel
    </h3>
    <a href="<?php echo site_url('admin/hasil_tka'); ?>" class="btn btn-secondary">
        <i class="bi bi-arrow-left me-2"></i>Kembali
    </a>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Upload File Excel</h5>
            </div>
            <div class="card-body">
                <form id="importForm" action="<?php echo site_url('admin/proses_import'); ?>" method="POST"
                    enctype="multipart/form-data">
                    <div class="mb-4">
                        <label for="file_excel" class="form-label fw-bold">Pilih File Excel</label>
                        <input type="file" class="form-control" id="file_excel" name="file_excel" accept=".xls,.xlsx"
                            required>
                        <div class="form-text">
                            Format file: .xls atau .xlsx (Max 5MB)
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Mode Import:</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="import_mode" id="mode_normal"
                                value="normal" checked>
                            <label class="form-check-label" for="mode_normal">
                                Normal (dengan validasi dasar)
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="import_mode" id="mode_simple"
                                value="simple">
                            <label class="form-check-label" for="mode_simple">
                                Simple (tanpa validasi, semua data diterima)
                            </label>
                            <small class="text-muted d-block">Gunakan ini jika data Excel sudah pasti benar</small>
                        </div>
                    </div>

                    <!-- Preview Area -->
                    <div id="previewArea" class="mb-4" style="display: none;">
                        <h6>Preview Data:</h6>
                        <div id="previewContent"></div>
                    </div>

                    <div class="mb-4">
                        <div class="alert alert-warning">
                            <h6><i class="bi bi-exclamation-triangle me-2"></i>Perhatian!</h6>
                            <ul class="mb-0">
                                <li>Pastikan format file sesuai dengan template</li>
                                <li>Data dengan NISN yang sama akan diperbarui</li>
                                <li>Proses import mungkin memerlukan waktu beberapa menit</li>
                                <li>Backup data sebelum melakukan import besar</li>
                            </ul>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="<?php echo site_url('admin/hasil_tka'); ?>" class="btn btn-secondary">
                            <i class="bi bi-x-circle me-2"></i>Batal
                        </a>
                        <div>
                            <button type="button" id="previewBtn" class="btn btn-info me-2">
                                <i class="bi bi-eye me-2"></i>Preview
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-upload me-2"></i>Import Data
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-file-earmark-excel me-2"></i>Format Template</h5>
            </div>
            <div class="card-body">
                <p>Download template Excel untuk memastikan format data sesuai:</p>
                <a href="<?php echo site_url('admin/download_template'); ?>" class="btn btn-success w-100 mb-3">
                    <i class="bi bi-download me-2"></i>Download Template
                </a>

                <hr>

                <h6>Struktur Kolom:</h6>
                <table class="table table-sm table-bordered">
                    <thead>
                        <tr>
                            <th width="30">Kolom</th>
                            <th>Deskripsi</th>
                            <th>Wajib</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>A</td>
                            <td>NISN (10 digit)</td>
                            <td class="text-danger">✓</td>
                        </tr>
                        <tr>
                            <td>B</td>
                            <td>NO_PESERTA</td>
                            <td class="text-danger">✓</td>
                        </tr>
                        <tr>
                            <td>C</td>
                            <td>NAMA_PESERTA</td>
                            <td class="text-danger">✓</td>
                        </tr>
                        <tr>
                            <td>D</td>
                            <td>TEMPAT_TGL_LAHIR</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>E</td>
                            <td>BHS_INDONESIA</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>F</td>
                            <td>MATEMATIKA</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>G</td>
                            <td>BHS_INGGRIS</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>H</td>
                            <td>NAMA_MATPEL_PIL_1</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>I</td>
                            <td>NILAI_MATPEL_PIL_1</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>J</td>
                            <td>NAMA_MATPEL_PIL_2</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>K</td>
                            <td>NILAI_MATPEL_PIL_2</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>L</td>
                            <td>LAMPIRAN</td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        // Preview button handler
        $('#previewBtn').on('click', function() {
            const fileInput = $('#file_excel')[0];
            if (!fileInput.files.length) {
                alert('Pilih file Excel terlebih dahulu!');
                return;
            }

            const formData = new FormData();
            formData.append('file_excel', fileInput.files[0]);

            // Show loading
            $('#previewContent').html(
                '<div class="text-center"><div class="spinner-border text-primary" role="status"></div><p>Memuat preview...</p></div>'
            );
            $('#previewArea').show();

            $.ajax({
                url: '<?php echo site_url("admin/preview_import"); ?>',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function(response) {
                    if (response.status === 'success') {
                        $('#previewContent').html(response.html);
                    } else {
                        $('#previewContent').html('<div class="alert alert-danger">' + response
                            .message + '</div>');
                    }
                },
                error: function() {
                    $('#previewContent').html(
                        '<div class="alert alert-danger">Terjadi kesalahan saat memuat preview</div>'
                    );
                }
            });
        });

        // Form submission
        $('#importForm').on('submit', function() {
            $('button[type="submit"]').prop('disabled', true).html(
                '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Mengimport...'
            );
        });
    });
</script>