<!DOCTYPE html>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
</head>
<body>
	<div>
	    <h4 class="card-title">Add Keywords</h4>
	    <p class="card-description"> <code></code></p>
	    <p>Bulk Upload</p>
	    <p><input type="file" class="form-control" name="bulk_upload" id="bulk_upload"></p>
	    <br>
	    <form action="<?php echo e(url('/excel')); ?>" method="post">
	      <?php echo csrf_field(); ?>
	      <div id="upload_table"></div>
	      <br>
	      <div id="button"></div>
	      <input type="hidden" class="form-control" name="all" id="all"/>
	    </form>
  	</div>
</body>
<script>
 	$(document).ready(function(){
	    $('#bulk_upload').change(function(evt){
	      $('#button').empty();

	      $('#button').append(`
	      <button class="btn btn-primary" type="submit" id="">Import</button> 
	      `);
	        var files = evt.target.files;
	        var xl2json = new ExcelToJSON();
	        xl2json.parseExcel(files[0]);
	        $('#all').empty();
	        $('#upload_table').empty();
	    });


      // $(document).on('click', '#btn_upload', function(event) {
      // var value = event.detail; 
      // console.log(event);
      // });

        var getting_value = function(value){
       	    $(document).trigger('customEvent', value); 
        };

       var ExcelToJSON = function() {
       this.productList = [];

       this.parseExcel = function(file) {
        var reader = new FileReader();

        var self = this; 

        reader.onload = function(e) {
          var data = e.target.result;
          var workbook = XLSX.read(data, { type: 'binary' });
          workbook.SheetNames.forEach(function(sheetName) {
            var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
            self.productList = JSON.parse(JSON.stringify(XL_row_object)); 
            var tableHtml = `
              <table class="table table-striped table-dark" id="excel_table">
                <thead>
                  <tr>
                    <th>Site Name</th>
                    <th>Created At</th>
                    <th>Updated At</th>
                  </tr>
                </thead>
                <tbody>
            `;
            var i = 0;
            $.each(self.productList, function(index, item) {
              var columns = Object.values(item);
              i++;
              tableHtml += `
                <tr>
                  <td>${columns[0]}</td>
                  <td>${columns[1]}</td>
                  <td>${columns[2]}</td>
                </tr>
              `;
            });

            tableHtml += `
                </tbody>
              </table>
            `;

            $('#upload_table').html(tableHtml);
            var value = self.productList;
            getting_value(value);
            $('#all').val(JSON.stringify(self.productList));

          });
        };

        reader.onerror = function(ex) {
          console.log(ex);
        };

        reader.readAsBinaryString(file);
      };
    	};

    var excelToJson = new ExcelToJSON();

  });
</script>
</html><?php /**PATH /home/rightflorist/public_html/ofadmin.rightflorist.org/resources/views/excel-import.blade.php ENDPATH**/ ?>