manjapro_v6/pages/user_import.php

<style>
    .file-upload {
        display: none; /* Sembunyikan input file asli */
    }

    .upload-icon {
        cursor: pointer;
        width: 150px; /* Ukuran ikon */
        height: 150px; /* Ukuran ikon */
        vertical-align: middle; /* Align icon with button */
    }

    .upload-button {
        display: inline-block;
        margin-left: 10px;
        margin-top: 30px;
    }

    .file-name {
        margin-top: 10px;
        font-weight: bold;
    }
</style>

<!-- Main content -->
<section class="content" style="zoom : 88%;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-sm-6">
                                <h4>Import Data Pelanggan</h4>
                            </div>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <center>
                                  <a href="excel/template_pelanggan.xlsx" class="btn btn-success m-4" download>Download Template</a>
                                  <hr>
                                    <h5>Klik untuk Select File Excel</h5>
                                    <form id="uploadForm">
                                        <input type="file" name="file" accept=".xlsx" class="file-upload" id="fileUpload" required>
                                        <label for="fileUpload">
                                            <img src="https://gwcareercampus.com/wp-content/uploads/sites/40/Microsoft-Excel.png" alt="Upload Icon" class="upload-icon" id="uploadIcon">
                                        </label>
                                        <br>
                                        <div class="file-name" id="fileName"></div>
                                        <button type="submit" class="upload-button btn btn-success">Import Data Pelanggan</button>
                                    </form>
                                </center>
                            </div>
                            <div class="col-md-3">
                              <center>
                                <h5>Daftar sudah ter Upload</h5>
                              </center>
                                <table id="validTable" class="table table-bordered" style="margin-top: 20px;">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Nama</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody id="validTableBody"></tbody>
                                </table>
                            </div>
                            <div class="col-md-3">
                              <center>
                                <h5>Daftar Gagal Upload</h5>
                              </center>
                                <table id="errorTable" class="table table-bordered" style="margin-top: 20px;">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Nama</th>
                                            <th>Status Error</th>
                                        </tr>
                                    </thead>
                                    <tbody id="errorTableBody"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
</section>

<script>
    const form = document.getElementById('uploadForm');
    const fileInput = document.getElementById('fileUpload');
    const uploadIcon = document.getElementById('uploadIcon');
    const fileNameDisplay = document.getElementById('fileName');

    form.addEventListener('submit', function(event) {
        event.preventDefault(); // Mencegah pengiriman form default

        const formData = new FormData(form);

        fetch('excel/import.php?id=<?php echo $SvId; ?>', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json()) // Mengambil respons sebagai JSON
        .then(data => {
            // Clear previous table data
            const validTableBody = document.getElementById('validTableBody');
            validTableBody.innerHTML = '';
            const errorTableBody = document.getElementById('errorTableBody');
            errorTableBody.innerHTML = '';

            // Menampilkan data valid
            if (data.status === 'success') {
                if (data.dataValid.length > 0) {
                    document.getElementById('validTable').style.display = 'table';

                    data.dataValid.forEach((item, index) => {
                        const row = document.createElement('tr');
                        const noCell = document.createElement('td');
                        const nameCell = document.createElement('td');
                        const errorTypeCell = document.createElement('td');

                        noCell.textContent = index + 1; // Menambahkan nomor urut
                        nameCell.textContent = item[5] || 'Tidak ada nama'; // Ambil nama dari data valid
                        errorTypeCell.textContent = 'Success'; // Menunjukkan bahwa ini adalah data valid

                        row.appendChild(noCell);
                        row.appendChild(nameCell);
                        row.appendChild(errorTypeCell);
                        validTableBody.appendChild(row);
                    });
                }

                // Menampilkan data error
                if (data.dataError.length > 0) {
                    document.getElementById('errorTable').style.display = 'table';

                    data.dataError.forEach((error, index) => {
                        const row = document.createElement('tr');
                        const noCell = document.createElement('td');
                        const nameCell = document.createElement('td');
                        const errorTypeCell = document.createElement('td');

                        noCell.textContent = index + 1; // Menambahkan nomor urut
                        nameCell.textContent = error.name || 'Tidak ada nama'; // Ganti dengan nama yang sesuai
                        errorTypeCell.textContent = error.errorType || 'Tidak ada jenis error'; // Ganti dengan jenis error yang sesuai
                        
                        row.appendChild(noCell);
                        row.appendChild(nameCell);
                        row.appendChild(errorTypeCell);
                        errorTableBody.appendChild(row);
                    });
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
    });

    fileInput.addEventListener('change', function() {
        if (fileInput.files.length > 0) {
            const fileName = fileInput.files[0].name;
            fileNameDisplay.textContent = fileName; // Tampilkan nama file
            validTableBody.innerHTML = '';
            errorTableBody.innerHTML = '';
            uploadIcon.src = "https://gwcareercampus.com/wp-content/uploads/sites/40/Microsoft-Excel.png"; // Ikon yang menunjukkan file telah dipilih
        } else {
            fileNameDisplay.textContent = 'Nama file akan muncul di sini'; // Kembali ke teks default
            uploadIcon.src = "https://gwcareercampus.com/wp-content/uploads/sites/40/Microsoft-Excel.png"; // Kembali ke ikon default
        }
    });
</script>