<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>GSpinner</title>
    <link rel="icon" href="images/icon.png">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script>
        function getRndInteger(min, max) {
            return Math.floor(Math.random() * (max - min) ) + min;
            }
        $(document).ready(function(){
            var myData=[];
            var myDataTemp=[];
            var myDataHadiah=[];
            var myDataHadiahTemp=[];
            var myDataPemenang=[];
            var myDataPemenangTemp=[];
            var colData = [];
            var timerId=0;
            var dataKaryawan = "";
            var idx=-1;
            $.get("data/karyawan.csv", function(result) {
                var rowsData = result.split("\n");
                $.each(rowsData, function(n, rowData) {
                    if(rowData.trim()!=''){
                        var colsData = rowData.split(",");
                        let dataPeserta = {
                            "nik":colsData[0].trim(),
                            "nama":colsData[1].trim(),
                            "email":colsData[2].trim(),

                        }
                        myData.push(dataPeserta);
                        
                        // colData['nik']= colsData[0].trim();
                        // colData['nama']= colsData[1].trim();
                        // colData['email']= colsData[2].trim();
                        // console.log(n + ':' + colData['nik'] + ' - ' + colData['nama'] + ' - ' + colData['email']);
                        // myData.push(colData);
                        // colData = [];
                        }
                });
                
                console.log(myData);
                myDataTemp=[];
                myDataTemp = myDataTemp.concat(myData);
            });
            $.get("data/hadiah.csv", function(result) {
                var rowsData = result.split("\n");
                $.each(rowsData, function(n, rowData) {
                    if(rowData.trim()!=''){
                        var colsData = rowData.split(",");  
                        let dataHadiah = {
                            "gambar":colsData[0].trim(),
                            "nama":colsData[1].trim(),
                            "jumlah":colsData[2].trim(),

                        }
                        myDataHadiah.push(dataHadiah);

                        // colData['gambar']= colsData[0].trim();
                        // colData['nama']= colsData[1].trim();
                        // colData['jumlah']= colsData[2].trim();
                        // console.log(n + ':' + colData['gambar'] + ' - ' + colData['nama'] + ' - ' + colData['jumlah']);
                        // myDataHadiah.push(colData);
                        // colData = [];
                        }
                });
                console.log(myDataHadiah);
                if(myDataHadiah.length>0){
                    idx = myDataHadiah.length - 1;
                    $("#txtIndexHadiah").val(idx);
                    $("#namaHadiah").html("<h3>" + myDataHadiah[idx]['nama'] + "</h3>");
                    $("#imgHadiah").attr("src","images/"+ myDataHadiah[idx]['gambar']);
                }
            });

            $('#btnStop').prop('disabled', true);
            $('#btnOK').prop('disabled', true);
            $('#btnNext').prop('disabled', true);
            $('#btnSave').prop('disabled', true);

            
            
            
            $("#btnStart").click(function(){
                
                console.log('myDataHadiah-Start');
                console.log(myDataHadiah);
                console.log('idx');
                console.log(idx);
                
                //console.log(myData.length);
                $( "#divArea1" ).html( "" );
                $( "#divArea2" ).html( "" );
                var jumlahHadiah = myDataHadiah[idx]['jumlah'];
                var jumlahHadiah1 = jumlahHadiah;
                var jumlahHadiah2 = 0;
                if(jumlahHadiah>10) {
                    jumlahHadiah1 = 10;
                    jumlahHadiah2 = jumlahHadiah - 10;
                } 
                for(var i=0;i<jumlahHadiah1;i++)
                    //$('<input/>').attr({ type: 'text', class: 'txtRandom form-control form-control-lg', autofocus: 'true' }).appendTo('#divArea1');
                    $('<div/>').attr({ data:'acak', class: 'data-acak p-1 bg-light text-dark border border-dark rounded' }).appendTo('#divArea1');
                
                if(jumlahHadiah2>0){
                    for(var i=0;i<jumlahHadiah2;i++)
                        //$('<input/>').attr({ type: 'text', class: 'txtRandom form-control form-control-lg', autofocus: 'true' }).appendTo('#divArea1');
                        $('<div/>').attr({ data:'acak', class: 'data-acak p-1 bg-light text-dark border border-dark rounded' }).appendTo('#divArea2');
                }

                var jumlahHadiah = myDataHadiah[idx]['jumlah'];
                var jumlahHadiah1 = jumlahHadiah;
                var jumlahHadiah2 = 0;
                if(jumlahHadiah>10) {
                    jumlahHadiah1 = 10;
                    jumlahHadiah2 = jumlahHadiah - 10;
                }
    
                let timerId = setInterval(function() {
                    
                    // $('#divArea1 input[type=text]').each(function(){
                    //     var acak = getRndInteger(0,myData.length - 1);
                    //     //alert(acak);
                    //     $(this).val(myData[acak]['nik'] + ' ' + myData[acak]['nama']);
                    // })

                    $('#divArea1 div[data=acak]').each(function(){
                        var acak = getRndInteger(0,myDataTemp.length - 1);
                        //alert(acak);
                        $(this).html(
                        "<strong class=\"fs-6\">" + myDataTemp[acak]['nik'] + " " + myDataTemp[acak]['nama'] + "</strong><br>" + myDataTemp[acak]['email']
                        );
                    })

                    if(jumlahHadiah>10) {
                        $('#divArea2 div[data=acak]').each(function(){
                            var acak = getRndInteger(0,myDataTemp.length - 1);
                            //alert(acak);
                            $(this).html(
                            "<strong class=\"fs-6\">" + myDataTemp[acak]['nik'] + " " + myDataTemp[acak]['nama'] + "</strong><br>" + myDataTemp[acak]['email']
                            );
                        })
                    }
                }, 50);
                
                $('#txtTimerId').val(timerId);
                //console.log(timerId);
                $(this).prop('disabled', true);
                $('#btnStop').prop('disabled', false);
                $('#btnOK').prop('disabled', true);
                $('#btnSave').prop('disabled', true);
                console.log('myDataHadiah-Start');
                console.log(myDataHadiah);
            }); 


            $("#btnStop").click(function(){
                
                clearInterval($('#txtTimerId').val());
                var hasil = [];
                hasil.push(-1);
                var winners =[];
                var acak=0;
                var i =0;
                //myDataTemp=[];
                //myDataTemp = myDataTemp.concat(myData)
                myDataHadiahTemp=[];
                myDataHadiahTemp = myDataHadiahTemp.concat(myDataHadiah);
                console.log('myDataHadiah-Stop');
                console.log(myDataHadiahTemp);
                myDataPemenangTemp=[];
                console.log("btnStop");
                var jumlahHadiah = myDataHadiahTemp[idx]['jumlah'];
                $('#divArea1 div[data=acak]').each(function(){
                    do{
                        acak = getRndInteger(0,myDataTemp.length - 1);
                    }while(hasil.includes(acak));
                    hasil.push(acak);
                    console.log(acak);
                    winners.push(acak);
                    //$(this).val(myDataTemp[acak]['nik'] + ' ' + myDataTemp[acak]['nama']);
                    
                    $(this).html(
                        "<strong class=\"fs-6\">" + myDataTemp[acak]['nik'] + " " + myDataTemp[acak]['nama'] + "</strong><br>" + myDataTemp[acak]['email']
                    );
                    var hadiah = myDataHadiahTemp[idx]['nama'];
                    var nik = myDataTemp[acak]['nik'];
                    var nama = myDataTemp[acak]['nama'];
                    var email = myDataTemp[acak]['email'];

                    let dataPemenang = {
                        "hadiah": myDataHadiahTemp[idx]['nama'],
                        "nik": myDataTemp[acak]['nik'],
                        "nama": myDataTemp[acak]['nama'],
                        "email": myDataTemp[acak]['email']
                    }
                    
                    console.log(i);
                    myDataPemenangTemp.push(dataPemenang);
                    console.log(acak);
                    //Delete data from array
                    myDataTemp.splice(acak,1);
                });

                if(jumlahHadiah>10){
                $('#divArea2 div[data=acak]').each(function(){
                    do{
                        acak = getRndInteger(0,myDataTemp.length - 1);
                    }while(hasil.includes(acak));
                    hasil.push(acak);
                    console.log(acak);
                    winners.push(acak);
                    //$(this).val(myDataTemp[acak]['nik'] + ' ' + myDataTemp[acak]['nama']);
                    
                    $(this).html(
                        "<strong class=\"fs-6\">" + myDataTemp[acak]['nik'] + " " + myDataTemp[acak]['nama'] + "</strong><br>" + myDataTemp[acak]['email']
                    );
                    var hadiah = myDataHadiahTemp[idx]['nama'];
                    var nik = myDataTemp[acak]['nik'];
                    var nama = myDataTemp[acak]['nama'];
                    var email = myDataTemp[acak]['email'];

                    let dataPemenang = {
                        "hadiah": myDataHadiahTemp[idx]['nama'],
                        "nik": myDataTemp[acak]['nik'],
                        "nama": myDataTemp[acak]['nama'],
                        "email": myDataTemp[acak]['email']
                    }
                    
                    console.log(i);
                    myDataPemenangTemp.push(dataPemenang);
                    console.log(acak);
                    //Delete data from array
                    myDataTemp.splice(acak,1);
                });
                }

                //Hapus data hadiah yang sudah diundi
                
                console.log('myDataHadiahTemp');
                console.log(myDataHadiahTemp);
                //console.log(myDataPemenang);
                //console.log(winners);
                //console.log(myData.length);
                $('#btnStart').prop('disabled', false);
                $('#btnOK').prop('disabled', false);
                
            }); 

            $("#btnOK").click(function(){
                myDataHadiahTemp.splice(idx,1);
                myDataPemenang = myDataPemenang.concat(myDataPemenangTemp);
                myData = [];
                myDataHadiah = [];
                myData = myData.concat(myDataTemp)
                myDataHadiah = myDataHadiah.concat(myDataHadiahTemp)
                $('#btnStop').prop('disabled', true);
                $('#btnOK').prop('disabled', true);
                $('#btnSave').prop('disabled', false);
                $('#btnStart').prop('disabled', true);
                if(idx>0)
                    $('#btnNext').prop('disabled', false);

                    
                
            });     

            $("#btnNext").click(function(){
                idx = $("#txtIndexHadiah").val() - 1;
                $("#txtIndexHadiah").val(idx);
                $("#namaHadiah").html("<h3>" + myDataHadiah[idx]['nama'] + "</h3>");
                $("#imgHadiah").attr("src","images/"+ myDataHadiah[idx]['gambar']);
                $(this).prop('disabled', true);
                $('#btnStart').prop('disabled', false);
                $( "#divArea1" ).html( "" );
                $( "#divArea2" ).html( "" );
            });     

            $('#btnSave').click(function() {
                if ('Blob' in window) {
                    //var fileName = prompt('Please enter file name to save', 'Untitled.txt');
                    var fileName = "pemenang.csv";
                    var fileName2 = "karyawan_last.csv";
                    var fileName3 = "hadiah_last.csv";
                    var textToWrite = "";
                    var textToWrite2 = "";
                    var textToWrite3 = "";
                    console.log(myDataPemenang);
                    if (fileName&&fileName2&&fileName3) {

                    //Simpan data pemenang
                    //alert("data pemenang");
                    $.each(myDataPemenang, function(n, dataPemenang) {
                        textToWrite += dataPemenang.hadiah + ',';
                        textToWrite += dataPemenang.nik + ',';
                        textToWrite += dataPemenang.nama + ',';
                        textToWrite += dataPemenang.email + '\r\n';
                    });    
                    var textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });
                    if ('msSaveOrOpenBlob' in navigator) {
                        navigator.msSaveOrOpenBlob(textFileAsBlob, fileName);
                    } else {
                        var downloadLink = document.createElement('a');
                        downloadLink.download = fileName;
                        downloadLink.innerHTML = 'Download File';
                        
                        if ('webkitURL' in window) {
                        // Chrome allows the link to be clicked without actually adding it to the DOM.
                        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
                        } else {
                        // Firefox requires the link to be added to the DOM before it can be clicked.
                        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
                        downloadLink.click(function(){
                            document.body.removeChild(event.target);
                        }); 
                        
                        downloadLink.style.display = 'none';
                        document.body.appendChild(downloadLink);
                        }
                        downloadLink.click();
                    }
                    
                    //Simpan data karyawan yang belum dapat hadiah
                    //alert("data karyawan");
                    $.each(myData, function(n, data) {
                        textToWrite2 += data.nik + ',';
                        textToWrite2 += data.nama + ',';
                        textToWrite2 += data.email + '\r\n';
                    });    
                    console.log(myData);
                    var textFileAsBlob2 = new Blob([textToWrite2], { type: 'text/plain' });
                    if ('msSaveOrOpenBlob' in navigator) {
                        navigator.msSaveOrOpenBlob(textFileAsBlob2, fileName2);
                    } else {
                        var downloadLink2 = document.createElement('a');
                        downloadLink2.download = fileName2;
                        downloadLink2.innerHTML = 'Download File';
                        
                        if ('webkitURL' in window) {
                        // Chrome allows the link to be clicked without actually adding it to the DOM.
                        downloadLink2.href = window.webkitURL.createObjectURL(textFileAsBlob2);
                        } else {
                        // Firefox requires the link to be added to the DOM before it can be clicked.
                        downloadLink2.href = window.URL.createObjectURL(textFileAsBlob2);
                        downloadLink2.click(function(){
                            document.body.removeChild(event.target);
                        }); 
                        
                        downloadLink2.style.display = 'none';
                        document.body.appendChild(downloadLink2);
                        }
                        downloadLink2.click();
                    }

                    //Simpan sisa hadiah
                    //alert("data hadiah");
                    $.each(myDataHadiah, function(n, dataHadiahSisa) {
                        textToWrite3 += dataHadiahSisa.gambar + ',';
                        textToWrite3 += dataHadiahSisa.nama + ',';
                        textToWrite3 += dataHadiahSisa.jumlah + '\r\n';
                    });    
                    console.log(myDataHadiah);
                    var textFileAsBlob3 = new Blob([textToWrite3], { type: 'text/plain' });
                    if ('msSaveOrOpenBlob' in navigator) {
                        navigator.msSaveOrOpenBlob(textFileAsBlob3, fileName3);
                    } else {
                        var downloadLink3 = document.createElement('a');
                        downloadLink3.download = fileName3;
                        downloadLink3.innerHTML = 'Download File';
                        
                        if ('webkitURL' in window) {
                        // Chrome allows the link to be clicked without actually adding it to the DOM.
                        downloadLink3.href = window.webkitURL.createObjectURL(textFileAsBlob3);
                        } else {
                        // Firefox requires the link to be added to the DOM before it can be clicked.
                        downloadLink3.href = window.URL.createObjectURL(textFileAsBlob3);
                        downloadLink3.click(function(){
                            document.body.removeChild(event.target);
                        }); 
                        
                        downloadLink3.style.display = 'none';
                        document.body.appendChild(downloadLink3);
                        }
                        downloadLink3.click();
                    }

                    }
                } else {
                    alert('Your browser does not support the HTML5 Blob.');
                }
                });
        });
        </script>
    </head>
  <body>
    <header>
    <img src="images/logo.jpg" class="float-left" align = "left" height="100">
    <h3>Syukuran KG 2025</h3>
    </header>

    <div class="container text-center border border-1">
        <div class="row align-items-start">
          <div class="col d-grid gap-2">
            <div class="row">
                <div class="col">

                <img id="imgHadiah" src="images/images.jpeg" class="rounded" alt="gambar" width="400px">
              </div>
            </div>
            <div class="row d-grid gap-2">
                <div class="col" id="namaHadiah"></div>
                <div class="col">
                    <button id="btnStart" type="button" class="btn btn-success btn-lg">START</button>
                    <button id="btnStop" type="button" class="btn btn-danger btn-lg">STOP</button>
                    <button id="btnOK" type="button" class="btn btn-secondary btn-lg">OK</button>
                    <button id="btnNext" type="button" class="btn btn-primary btn-lg">NEXT</button>
                    <button id="btnSave" type="button" class="btn btn-info btn-lg">SAVE</button>
                </div>
            </div>    
            <div class="row">
                <input class="form-control form-control-lg" type="hidden" id="txtIndexHadiah" aria-label=".form-control-lg example">
                <input class="form-control form-control-lg" type="hidden" id="txtTimerId" aria-label=".form-control-lg example">
            </div>
          </div>
          <div class="col d-grid gap-2" id="divArea1">
            
          </div>
          <div class="col d-grid gap-2" id="divArea2">
            
          </div>
        </div>
    </div>
      <footer class="mt-4">
        <div style="text-align: center;">
        <p>CopyRights &copy;GProject, 2024<br>
        <a href="mailto:send2goldie@gmail.com">send2goldie@gmail.com</a></p>
        </div>
        </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>
