<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Excel Import with Progress</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#progressContainer {
    width: 100%; background-color: #f3f3f3; border: 1px solid #ccc; margin-top: 10px;
}
#progressBar {
    width: 0%; height: 20px; background-color: #4caf50; text-align: center; color: white;
}
</style>
</head>
<body>

<h2>Import Products Excel</h2>
<input type="file" id="excelFile" />
<button id="importBtn">Import</button>

<div id="progressContainer">
    <div id="progressBar">0%</div>
</div>
<div id="status"></div>

<script>
$('#importBtn').click(function() {
    var file = document.getElementById('excelFile').files[0];
    if(!file) { 
        alert('Please select a file'); 
        return; 
    }

    var reader = new FileReader();
    reader.onload = function(e) {
        var data = new Uint8Array(e.target.result);
        var workbook = XLSX.read(data, {type: 'array'});
        var firstSheet = workbook.Sheets[workbook.SheetNames[0]];
        var rows = XLSX.utils.sheet_to_json(firstSheet, {header:1});

        var jsonData = [];

        rows.forEach(function(row, index){
            if(index === 0) return; 
            if(row.every(cell => cell === undefined || cell === null || cell.toString().trim() === '')) return;

            jsonData.push({
                product_name: row[0] || '',
                brand: row[1] || '',
                category: row[2] || '',
                purchase_price: row[3] || 0,
                sale_price: row[4] || 0,
                barcode: row[5] || '' // ✅ added barcode column
            });
        });

        var total = jsonData.length;
        var processed = 0;
        var chunkSize = 50; 

        function sendNextChunk(){
            if(processed >= total){
                $('#status').html("Import completed successfully! Total rows: " + total);
                $('#progressBar').css('width','100%').text('100%');
                return;
            }

            var chunk = jsonData.slice(processed, processed + chunkSize);

            $.ajax({
                url: 'import_excel.php',
                type: 'POST',
                data: {data: JSON.stringify(chunk)},
                success: function(response){
                    processed += chunk.length;
                    var percent = Math.round((processed/total)*100);
                    $('#progressBar').css('width', percent+'%').text(percent+'%');
                    $('#status').html("Processed "+processed+" of "+total+" rows...");
                    sendNextChunk();
                },
                error: function() {
                    processed += chunk.length;
                    sendNextChunk();
                }
            });
        }

        sendNextChunk(); 
    };
    reader.readAsArrayBuffer(file);
});
</script>


</body>
</html>
