@extends("layout.menu")

@php 
 $strYear = date("d-m-y");
 
@endphp

<?php

  // function test(){
  //   return str_replace("world","Peter","Hello world!");
  // }

  $date = date("Y-m-d");
  //$date = "2023-09-21"; // change date here.
  //$dateOnex = date("Y-m-d", strtotime("+1 day", strtotime($date))); 

  $H_check = date("H");
  //$H_check = 20;
  if( $H_check>=8 && $H_check<20 ){
    $dateOne = $date; 
    //$dateOne = date("Y-m-d", strtotime("-1 day", strtotime($date))); 
		$dateAll = "$date 8:00:00.000";
		$datemid = $dateOne." 19:59:59.000";
    $list_blocks = array("$date 08:00"=>"block_a", 
                        "$date 09:00"=>"block_b",
                        "$date 10:00"=>"block_c",
                        "$date 11:00"=>"block_d",
                        "$date 12:00"=>"block_e",
                        "$date 13:00"=>"block_f",
                        "$date 14:00"=>"block_g",
                        "$date 15:00"=>"block_h",
                        "$date 16:00"=>"block_i",
                        "$date 17:00"=>"block_j",
                        "$date 18:00"=>"block_k",
                        "$date 19:00"=>"block_l",
                        "$date 20:00"=>"block_m");
  }else{
    //$dateOne = $date; 
    $dateOne = date("Y-m-d", strtotime("+1 day", strtotime($date)));  
    $dateAll = "$date 20:00:00.000";
    $datemid = $dateOne." 07:59:59.000";
    $list_blocks = array("$date 20:00"=>"block_a",
                        "$date 21:00"=>"block_b",
                        "$date 22:00"=>"block_c",
                        "$date 23:00"=>"block_d",
                        "$dateOne 00:00"=>"block_e",
                        "$dateOne 01:00"=>"block_f",
                        "$dateOne 02:00"=>"block_g",
                        "$dateOne 03:00"=>"block_h",
                        "$dateOne 04:00"=>"block_i",
                        "$dateOne 05:00"=>"block_j",
                        "$dateOne 06:00"=>"block_k",
                        "$dateOne 07:00"=>"block_l",
                        "$dateOne 08:00"=>"block_m");
  }

    $list_step = array(
                        array("title"=>"DIE BOND", "plan"=>"diebond_plan",  "act"=>"diebond_act", "act_time"=>"diebond_act_time",  "diff"=>"diebond_plan_diff",),
                        array("title"=>"OVEN DIEBOND", "plan"=>"oven_diebond_plan",  "act"=>"oven_diebond_act", "act_time"=>"ovediebond_act_time",  "diff"=>"oven_diebond_plan_diff",),
                        array("title"=>"WIRE BOND", "plan"=>"wirebond_plan",  "act"=>"wirebond_act", "act_time"=>"wirebond_act_time",  "diff"=>"wirebond_plan_diff",),
                        array("title"=>"BONDING INS", "plan"=>"bonding_ins_plan",  "act"=>"bonding_ins_act", "act_time"=>"bondingins_act_time",  "diff"=>"bonding_ins_plan_diff",),
                        array("title"=>"MOLD", "plan"=>"mold_plan",  "act"=>"mold_act", "act_time"=>"mold_act_time",  "diff"=>"mold_plan_diff",),
                        array("title"=>"OVEN MOLD", "plan"=>"oven_mold_plan",  "act"=>"oven_mold_act", "act_time"=>"ovemold_act_time",  "diff"=>"oven_mold_plan_diff",),
                        array("title"=>"DICER", "plan"=>"dicer_plan",  "act"=>"dicer_act", "act_time"=>"dicer_act_time", "diff"=>"dicer_plan_diff",),
                        array("title"=>"APPEARANCE", "plan"=>"appea_plan",  "act"=>"appea_act", "act_time"=>"appea_act_time", "diff"=>"appea_plan_diff",),
                        array("title"=>"CLASSIFYING", "plan"=>"classi_plan",  "act"=>"classi_act", "act_time"=>"classi_act_time", "diff"=>"classi_plan_diff",),
                            );

    $list_lot_no = $lot_no;                    
?>


@section("script")
<script type="text/javascript">
  var scrollerID;
  var interval = 30;
  var documentH = 0;
  var paused = true;
  var clockUpdateID;
  var loaddataID;
  var list_lot_no = <?=json_encode($lot_no)?>;

  <?if( isset($list_lot_no) && count($list_lot_no)>0 ){?>
      $(document).ready(function () {
        
        var loadDataID;

        loadData();
        clockUpdate();
        clockUpdateID = setInterval( function(){ clockUpdate(); }, 1000);

        init_auto_scroll();

        document.addEventListener('keydown', (event) => {
          if (event.key === 'Enter') {
            paused = !paused;
            if(paused){
              clearInterval(scrollerID);
            }else{
              scrollerID = start_auto_scroll();
            }
          }
        });

        loaddataID = setInterval(function(){ loadData(); },60000);

        setTimeout(function() {
                  paused = true; 
                  clearInterval(scrollerID);
                  location.replace("screen1");
        }, 600000);
      });


      //timerefresh(10);
  <?}else{?>
       $(document).ready(function () {
            setTimeout(function() {
                    location.replace("screen1");
            }, 60000);
       });
  <?}?>  

// function timerefresh(t)
// {
//     if(t==0){
//       loadData();
//         }
//     else{
//         t--;
//       }
//     window.setTimeout("timerefresh('"+t+"')",10000)
// }

function clockUpdate() {
  var date = new Date();
  var h = addZero(twelveHour(date.getHours()));
  var m = addZero(date.getMinutes());
  var s = addZero(date.getSeconds());

  var time = h + ':' + m + ':' + s;
  document.getElementById("digital-time").innerText = time;
  document.getElementById("digital-time").textContent = time;

}  

  function addZero(x) {
    if (x < 10) {
      return x = '0' + x;
    } else {
      return x;
    }
  }

  function twelveHour(x) {
    if (x > 24) {
      return x = x - 24;
    } else if (x == 0) {
      return x = 24;
    } else {
      return x;
    }
  }

// function clockUpdate() {
//   var date = new Date();
//   $('.digital-clock').css({'color': '#FFFF'});
//   function addZero(x) {
//     if (x < 10) {
//       return x = '0' + x;
//     } else {
//       return x;
//     }
//   }

//   function twelveHour(x) {
//     if (x > 24) {
//       return x = x - 24;
//     } else if (x == 0) {
//       return x = 24;
//     } else {
//       return x;
//     }
//   }

//   var h = addZero(twelveHour(date.getHours()));
//   var m = addZero(date.getMinutes());
//   var s = addZero(date.getSeconds());

//   $('.digital-clock').text(h + ':' + m + ':' + s)
// }

function find_block(val_chk){
      count = 0;
        for (const [key, block] of Object.entries(list_blocks)) {
                if(key==val_chk){
                    return { "block_no": count , "block_time":key, "block_name":block };
                }  
                count +=1;         
        }
        return false;
}

    function loadData() {
      $.ajax({
 
        url:'{{url("loaddataScreen2")}}',
        type:'get',
        data:'',
        dataType:'json',
        complete: function (jqXHR) {
          if( jqXHR.status==500){
            location.replace("screen2");
          }
        },
        success:function(ret){
              list_blocks = <?=json_encode($list_blocks)?>;
              list_step = <?=json_encode($list_step)?>;
              $("#Output").empty();
              $("#Outputlot").empty();
              $("#Resultok").empty();
              $("#Resultpercen").empty();
              $("#Png").empty();
              day_cal = ret['day_cal'];
              dateshow = ret['dateshow'];
              timeshow = ret['timeshow'];
              $('#id_dateshow').text(dateshow);
              //$('#digital-time').text(timeshow);
              lot_data = ret['lot_data'];
              lot_not_start = ret['lot_not_start'];
              lot_finish = ret['lot_finish'];
              date_point = ret['dateAll']; // 2023-09-21 19:59:59.000
              $('#id_total').text(lot_data.length);
              $('#id_not_start').text(lot_not_start[0]['notstart']);
              $('#id_finish').text(lot_finish[0]['finish']);

              for(let x in list_lot_no ){
       
                  lot_no = list_lot_no[x]['lot_no'];      

                  const row_array_lot = lot_data.filter(function(list_lot) { return list_lot.lot_no === lot_no; });
                  row_lot = row_array_lot[0];
       
                  dibond = true; ovendie = true; wirebond = true; bondingins=true; mold=true; ovenmold=true; dicer=true;  appea = true; classi=true;
                  block_check = '';
                  key_check = '';
                  block_no = 0;
          
                   if( (row_lot['block_classi_act']!='undefined' 
                      && row_lot['block_classi_act'].toString().length > 10) 
                      && (Date.parse(row_lot['block_classi_act']) < Date.parse(Object.keys(list_blocks)[12]) 
                      && Date.parse(row_lot['block_classi_act']) >= Date.parse(Object.keys(list_blocks)[0]) ) ){
                          row_block = find_block(row_lot['block_classi_act']);
                          if( row_block!=false ){
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']).text("CLASSIFYING").addClass("font-bold  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').text(row_lot['classi_plan'].substring(0, row_lot['classi_plan'].length - 7)).addClass("time-text-plan  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_act').text(row_lot['classi_act_time']).addClass("time-text-act ");
                            //(row_lot['lot_no']+' block_classi_act = '+row_lot['block_classi_act']);
                            //console.log(row_lot['lot_no']+' classi_plan_diff = '+row_lot['classi_plan_diff']);
                            if( numeral(row_lot['classi_plan_diff']).value() > 4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-red");
                            }else if( numeral(row_lot['classi_plan_diff']).value() < -4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-yellow");
                            }      
                            block_no = row_block['block_no']-1;
                            prev_step = 8;
                          }
                   }


                   if( (row_lot['block_appea_act']!='undefined' 
                      && row_lot['block_appea_act'].toString().length > 10) 
                      && (Date.parse(row_lot['block_appea_act']) < Date.parse(Object.keys(list_blocks)[12]) 
                      && Date.parse(row_lot['block_appea_act']) >= Date.parse(Object.keys(list_blocks)[0]) ) ){
                          row_block = find_block(row_lot['block_appea_act']);
                          if( row_block!=false ){
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']).text("APPEARANCE").addClass("font-bold  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').text(row_lot['appea_plan'].substring(0, row_lot['appea_plan'].length - 7)).addClass("time-text-plan  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_act').text(row_lot['appea_act_time']).addClass("time-text-act ");
                            //console.log(row_lot['lot_no']+' block_appea_act = '+row_lot['block_appea_act']);
                            //console.log(row_lot['lot_no']+' appea_plan_diff = '+row_lot['appea_plan_diff']);
                            if( numeral(row_lot['appea_plan_diff']).value() > 4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-red");
                            }else if( numeral(row_lot['appea_plan_diff']).value() < -4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-yellow");
                            }  
                            block_no = row_block['block_no']-1;
                            prev_step = 7;
                          }
                   }
                  
 
                   if( (row_lot['block_dicer_act']!='undefined' 
                      && row_lot['block_dicer_act'].toString().length > 10) 
                      && (Date.parse(row_lot['block_dicer_act']) < Date.parse(Object.keys(list_blocks)[12]) 
                      && Date.parse(row_lot['block_dicer_act']) >= Date.parse(Object.keys(list_blocks)[0]) ) ){
                          row_block = find_block(row_lot['block_dicer_act']);
                          if( row_block!=false ){
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']).text("DICER").addClass("font-bold  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').text(row_lot['dicer_plan'].substring(0, row_lot['dicer_plan'].length - 7)).addClass("time-text-plan  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_act').text(row_lot['dicer_act_time']).addClass("time-text-act ");
                            //console.log(row_lot['lot_no']+' block_dicer_act = '+row_lot['block_dicer_act']);
                            //console.log(row_lot['lot_no']+' dicer_plan_diff = '+row_lot['dicer_plan_diff']);
                            if( numeral(row_lot['dicer_plan_diff']).value() > 4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-red");
                            }else  if( numeral(row_lot['dicer_plan_diff']).value() < -4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-yellow");
                            }
                            block_no = row_block['block_no']-1;
                            prev_step = 6;
                          }
                   }


                   if( (row_lot['block_ovemold_act']!='undefined' 
                      && row_lot['block_ovemold_act'].toString().length > 10) 
                      && (Date.parse(row_lot['block_ovemold_act']) < Date.parse(Object.keys(list_blocks)[12]) 
                      && Date.parse(row_lot['block_ovemold_act']) >= Date.parse(Object.keys(list_blocks)[0]) ) ){
                          row_block = find_block(row_lot['block_ovemold_act']);
                          if( row_block!=false ){
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']).text("OVEN MOLD").addClass("font-bold  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').text(row_lot['oven_mold_plan'].substring(0, row_lot['oven_mold_plan'].length - 7)).addClass("time-text-plan  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_act').text(row_lot['ovemold_act_time']).addClass("time-text-act ");
                            //console.log(row_lot['lot_no']+' block_ovemold_act = '+row_lot['block_ovemold_act']);
                           // console.log(row_lot['lot_no']+' oven_mold_plan_diff = '+row_lot['oven_mold_plan_diff']);
                            if( numeral(row_lot['oven_mold_plan_diff']).value() > 4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-red");
                            }else if( numeral(row_lot['oven_mold_plan_diff']).value() < -4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-yellow");
                            }   
                            block_no = row_block['block_no']-1;
                            prev_step = 5;
                          }
                   }


                   if( (row_lot['block_mold_act']!='undefined' 
                      && row_lot['block_mold_act'].toString().length > 10) 
                      && (Date.parse(row_lot['block_mold_act']) < Date.parse(Object.keys(list_blocks)[12]) 
                      && Date.parse(row_lot['block_mold_act']) >= Date.parse(Object.keys(list_blocks)[0]) ) ){
                          row_block = find_block(row_lot['block_mold_act']);
                          if( row_block!=false ){
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']).text("MOLD").addClass("font-bold  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').text(row_lot['mold_plan'].substring(0, row_lot['oven_mold_plan'].length - 7)).addClass("time-text-plan  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_act').text(row_lot['mold_act_time']).addClass("time-text-act ");
                            //console.log(row_lot['lot_no']+' block_mold_act = '+row_lot['block_mold_act']);
                            //console.log(row_lot['lot_no']+' mold_plan_diff = '+row_lot['mold_plan_diff']);
                            if( numeral(row_lot['mold_plan_diff']).value() > 4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-red");
                            }else if( numeral(row_lot['mold_plan_diff']).value() < -4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-yellow");
                            }   
                            block_no = row_block['block_no']-1;
                            prev_step = 4;
                          }
                   }                   


                   if( (row_lot['block_bondingins_act']!='undefined' 
                      && row_lot['block_bondingins_act'].toString().length > 10) 
                      && (Date.parse(row_lot['block_bondingins_act']) < Date.parse(Object.keys(list_blocks)[12]) 
                      && Date.parse(row_lot['block_bondingins_act']) >= Date.parse(Object.keys(list_blocks)[0]) ) ){
                          row_block = find_block(row_lot['block_bondingins_act']);
                          if( row_block!=false ){
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']).text("BONDING INS").addClass("font-bold  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').text(row_lot['bonding_ins_plan'].substring(0, row_lot['bonding_ins_plan'].length - 7)).addClass("time-text-plan  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_act').text(row_lot['bondingins_act_time']).addClass("time-text-act ");
                            //console.log(row_lot['lot_no']+' block_bondingins_act = '+row_lot['block_bondingins_act']);
                            //console.log(row_lot['lot_no']+' bonding_ins_plan_diff = '+row_lot['bonding_ins_plan_diff']);
                            if( numeral(row_lot['bonding_ins_plan_diff']).value() > 4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-red");
                            }else if( numeral(row_lot['bonding_ins_plan_diff']).value() < -4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-yellow");
                            }   
                            block_no = row_block['block_no']-1;
                            prev_step = 3;
                          }
                   } 


                   if( (row_lot['block_wirebond_act']!='undefined' 
                      && row_lot['block_wirebond_act'].toString().length > 10) 
                      && (Date.parse(row_lot['block_wirebond_act']) < Date.parse(Object.keys(list_blocks)[12]) 
                      && Date.parse(row_lot['block_wirebond_act']) >= Date.parse(Object.keys(list_blocks)[0]) ) ){
                          row_block = find_block(row_lot['block_wirebond_act']);
                          if( row_block!=false ){
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']).text("WIRE BOND").addClass("font-bold  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').text(row_lot['wirebond_plan'].substring(0, row_lot['wirebond_plan'].length - 7)).addClass("time-text-plan  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_act').text(row_lot['wirebond_act_time']).addClass("time-text-act ");
                            //console.log(row_lot['lot_no']+' block_wirebond_act = '+row_lot['block_wirebond_act']);
                            console.log(row_lot['lot_no']+' wirebond_plan_diff = '+row_lot['wirebond_plan_diff']);
                            if( numeral(row_lot['wirebond_plan_diff']).value() > 4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-red");
                            }else if( numeral(row_lot['wirebond_plan_diff']).value() < -4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-yellow");
                            }   
                            block_no = row_block['block_no']-1;
                            prev_step = 2;
                          }
                   } 


                   if( (row_lot['block_ovediebond_act']!='undefined' 
                      && row_lot['block_ovediebond_act'].toString().length > 10) 
                      && (Date.parse(row_lot['block_ovediebond_act']) < Date.parse(Object.keys(list_blocks)[12]) 
                      && Date.parse(row_lot['block_ovediebond_act']) >= Date.parse(Object.keys(list_blocks)[0]) ) ){
                          row_block = find_block(row_lot['block_ovediebond_act']);
                          if( row_block!=false ){
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']).text("OVEN DIEBOND").addClass("font-bold  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').text(row_lot['oven_diebond_plan'].substring(0, row_lot['oven_diebond_plan'].length - 7)).addClass("time-text-plan  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_act').text(row_lot['ovediebond_act_time']).addClass("time-text-act ");
                            //console.log(row_lot['lot_no']+' block_ovediebond_act = '+row_lot['block_ovediebond_act']);
                           // console.log(row_lot['lot_no']+' oven_diebond_plan_diff = '+row_lot['oven_diebond_plan_diff']);
                            if( numeral(row_lot['oven_diebond_plan_diff']).value() > 4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-red");
                            }else if( numeral(row_lot['oven_diebond_plan_diff']).value() < -4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-yellow");
                            }   
                            block_no = row_block['block_no']-1;
                            prev_step = 1;
                          }
                   } 


                   if( (row_lot['block_diebond_act']!='undefined' 
                      && row_lot['block_diebond_act'].toString().length > 10) 
                      && (Date.parse(row_lot['block_diebond_act']) < Date.parse(Object.keys(list_blocks)[12]) 
                      && Date.parse(row_lot['block_diebond_act']) >= Date.parse(Object.keys(list_blocks)[0]) ) ){
                          row_block = find_block(row_lot['block_diebond_act']);
                          if( row_block!=false ){
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']).text("DIE BOND").addClass("font-bold  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').text(row_lot['diebond_plan'].substring(0, row_lot['diebond_plan'].length - 7)).addClass("time-text-plan  f12");
                            $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_act').text(row_lot['diebond_act_time']).addClass("time-text-act ");
                            //console.log(row_lot['lot_no']+' block_diebond_act = '+row_lot['block_diebond_act']);
                           // console.log(row_lot['lot_no']+' diebond_plan_diff = '+row_lot['diebond_plan_diff']);
                            if( numeral(row_lot['diebond_plan_diff']).value() > 4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-red");
                            }else if( numeral(row_lot['diebond_plan_diff']).value() < -4 ){
                                $('#'+row_lot['lot_no']+'_'+row_block['block_name']+'_plan').addClass("bg-yellow");
                            }   
                            block_no = row_block['block_no']-1;
                            prev_step = 0;
                          }
                   } 


                  if( block_no>0 ){
                                            
                                            for( j=block_no; j>=0; j-- ){
                                                  prev_step--; 
                                                  if( prev_step>=0 ){
                                                    key_lot = Object.values(list_step)[prev_step];
                                                    $('#'+row_lot['lot_no']+'_'+Object.values(list_blocks)[j]).text(key_lot['title']).addClass("font-bold  f12");
                                                    $('#'+row_lot['lot_no']+'_'+Object.values(list_blocks)[j]+'_plan').text(row_lot[key_lot['plan']]).addClass("time-text-plan ");
                                                    $('#'+row_lot['lot_no']+'_'+Object.values(list_blocks)[j]+'_act').text(row_lot[key_lot['act_time']]).addClass("time-text-act ");
                                                    //console.log(row_lot['lot_no']+Date.parse(row_lot[key_lot['act']]) , Date.parse(date_point));
                                                     // console.log(row_lot['lot_no']+ ' '+key_lot['plan'] +' = '+Date.parse(row_lot[key_lot['plan']]) );
                                                     // console.log(row_lot['lot_no']+ ' '+key_lot['act'] +' = '+Date.parse(row_lot[key_lot['act']]) );
                                                     // console.log(row_lot['lot_no']+' plan d-m-y  = '+ row_lot[key_lot['plan']].substring(0, 10) );
                                                    //console.log(row_lot['lot_no']+ ' '+' block '+' = '+Object.values(list_blocks)[j] );
                                                    if( numeral(row_lot[key_lot['diff']]).value() > 4 || row_lot[key_lot['act']]=="NaN" || Date.parse(row_lot[key_lot['act']]) < Date.parse(date_point) ){
                                                          if( Date.parse(row_lot[key_lot['plan']]) > Date.parse(row_lot[key_lot['act']]) && day_cal==row_lot[key_lot['plan']].substring(0, 10) ){
                                                              $('#'+row_lot['lot_no']+'_'+Object.values(list_blocks)[j]+'_plan').addClass("bg-yellow");
                                                          }else{
                                                                //if( numeral(row_lot[key_lot['diff']]).value() > 4 ){
                                                                  $('#'+row_lot['lot_no']+'_'+Object.values(list_blocks)[j]+'_plan').addClass("bg-red");
                                                                //}
                                                          }   
                                                          $('#'+row_lot['lot_no']+'_'+Object.values(list_blocks)[j]+'_plan').text(row_lot[key_lot['plan']].substring(0, row_lot[key_lot['plan']].length - 7)).addClass("time-text-plan  f12");
                                                          $('#'+row_lot['lot_no']+'_'+Object.values(list_blocks)[j]+'_act').text(row_lot[key_lot['act']].substring(0, row_lot[key_lot['act']].length - 7)).addClass("time-text-act f12");
                                                    }
                                                  }
                                            }
                  }
                    
              }
 
        },
        error:function(err){
            alert('Error : '+err.responseText);
        }
      });

    }


    function init_auto_scroll(){
      window.scrollTo(0, 0);
      documentH = $( document ).height()-10;

      setTimeout( function(){ paused=false; js_control_auto_mode(); } , 10000);
    }

        function start_auto_scroll(){
            clearInterval(scrollerID);
            var id = setInterval(function(){
              window.scrollBy(0,2);
                      if( window.innerHeight + window.scrollY >= documentH ){
                          stop_auto_scroll();

                          //paused = true; 
                          //clearInterval(scrollerID);
                            
                          // setTimeout(function() {
                          //     location.replace("screen1");
                          // }, 10000);
                      }
            },interval);
            return id;
        }


        function stop_auto_scroll(){
           clearInterval(scrollerID);
           paused = true;
           setTimeout( function(){ init_auto_scroll(); } , 10000);

        }


        function js_control_auto_mode(){
              if(paused == false) {
                  scrollerID = start_auto_scroll();
              }
              
              if(paused == true){
                  stop_auto_scroll();
              }
        }

        //scrollerID = setTimeout( function(){ start_auto_scroll() } ,10000);  

</script>
@endsection


<style>

html,body {
    text-align: center;
    /* background: #DCDCDC; */
    background: #FFF;
    color: #000;
    margin: 0;
    
  }


  table, td, th {
    border: solid 1px #FFF;
    border-collapse: collapse;
    border-spacing:0;
    color: #000;
    /* background: #DCDCDC; */
    background: #FFF;
    /* font-weight: bold; */
    font-size:18px !important;
    padding:5px;
    height:40px;
    vertical-align: middle !important;
  }

.textAlignVer{
  display:block;
    filter: flipv fliph;
    position:relative;
    white-space:nowrap;
    font-size:12px;
    margin-top: 70px;

}

.textnumberright{
  style="text-align: right;"
}

@font-face {
  font-family: 'DIGITAL';
  src: url('https://cssdeck.com/uploads/resources/fonts/digii/DS-DIGII.TTF');
}


/* .digital-clock {
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #000;
  text-align: center;
  font: 50px/60px 'DIGITAL',;
} */
.memumain{
  text-align: center;
  font-size:16px;
  padding-top:5px;

}
/* .digital-date {
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #000;
  text-align: center;
  font: 50px/60px 'DIGITAL',;
} */


.border_bold{
    border: solid 0.2rem #000 !important;

}

.border-bold-thin{
    border: 0.1rem solid #000 !important;

}
.border-top-thin {
    border-top: 0.1rem solid #000 !important;
}

.border-right-thin {
    border-right: 0.1rem solid #000 !important;
}

.border-bottom-thin {
    border-bottom: 0.1rem solid #000 !important;
}

.border-left-thin {
    border-left: 0.1rem solid #000 !important;
}

.v-middle{
  vertical-align: middle !important;
}

.f20 {
  font-size: 20px !important;
}

.f18 {
  font-size: 18px !important;
}

.f17 {
  font-size: 17px !important;
}

.f16 {
  font-size: 16px !important;
}

.f14 {
  font-size: 14px !important;
}

.f12 {
   font-size: 12px !important;
}

.f10 {
   font-size: 10px !important;
}


.w5{
  width:5rem;
}

.w12{
  width:12rem;
}

.w20{
  width:20rem;
}

.w-6{
  width:6% !important;
}

.w-7{
  width:7% !important;
}

.w-8{
  width:8% !important;
}

.w-10{
  width:10% !important;
}

.w-15{
  width:15% !important;
}

.w-40{
  width:40% !important;
}

.w-70{
  width:70% !important;
}

.w-85{
  width:85% !important;
}

.w-90{
  width:90% !important;
}

.w-auto{
  width:100% !important;
}

.table-fixed td.text-over span {
    white-space: nowrap;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 150px;
}

.bg-white {
   background: white;
   color: #000;
}

.bg-red {
  background: red !important;
  color:#FFF;
}

.bg-yellow {
  background: yellow !important;
  color:#000 !important;
}

.time-text-plan {
  background: #24ad04;
  color:#FFF;
  /* font-size: 20 !important; */
  font-weight: normal !important;
}

.time-text-act {
  background: #706e6e36;
  color:#000;
  /* font-size: 20 !important; */
  font-weight: normal !important;
}

.time-text-delay {
  background: red;
  color:#fff;
  /* font-size: 20 !important; */
  font-weight: normal !important;
}

.font-bold {
  font-weight: bold !important;
}

.v-align{
  vertical-align: middle !important;
}


</style>

@section("content")
<div class="w-auto no-gutters d-flex" style="color:#000;">
    <div class="w-85 flex-fill">
        <div style="padding:10px;" class="wrapper">
            <table class=" table table-sm border_bold table-fixed">
              <thead>
                    <tr>
                      <th colspan="16"  class="text-center border-bottom-thin "><h5 class="font-weight-bold">Production Control Board</h5></th>
                    </tr>

                    <tr>
                      <th rowspan="2"  class=" w-6 text-center border-bottom-thin border-right-thin"><p style="font-size:24px;">5W<p></th>
                      <th colspan="2"  class=" text-center border-bottom-thin border-right-thin"><h6 class="font-weight-bold">Date : <span id="id_dateshow"></span></h6></th>
                      <th colspan="2"  class=" text-center border-bottom-thin border-right-thin"><h6 class="font-weight-bold">Time : <span id="digital-time"></span></h6></th>
                      <th   class="w-6 text-center border-bottom-thin border-right-thin">&nbsp;</th>
                      <th   class="w-6 text-center border-bottom-thin border-right-thin"><h6 class="font-weight-bold">Total</h6></th>
                      <th   class="w-6 text-center border-bottom-thin border-right-thin"><h6 class="font-weight-bold" id="id_total"></h6></th>
                      <th   class="w-6 text-center border-bottom-thin border-right-thin"><h6 class="font-weight-bold" >Not Start</h6></th>
                      <th   class="w-6 text-center border-bottom-thin border-right-thin"><h6 class="font-weight-bold" id="id_not_start"></h6></th>
                      <th   class="w-6 text-center border-bottom-thin border-right-thin"><h6 class="font-weight-bold">Finish</h6></th>
                      <th   class="w-6 text-center border-bottom-thin border-right-thin"><h6 class="font-weight-bold" id="id_finish"></h6></th>
                      <th   class="w-6 text-center border-bottom-thin border-right-thin">&nbsp;</th>
                      <th   class="w-6 text-center border-bottom-thin border-right-thin time-text-plan"><h6 class="font-weight-bold">Finish</h6></th>
                      <th   class="w-6 text-center border-bottom-thin border-right-thin time-text-act"><h6 class="font-weight-bold">Plan</h6></th>
                      <th   class="w-6 text-center border-bottom-thin time-text-delay"><h6 class="font-weight-bold">Start Delay</h6></th>
                    </tr>

                    <tr>
                      <th class="w-8 text-center border-bottom-thin border-right-thin ">&nbsp;</th>
                      <th class="w-6 text-center border-bottom-thin border-right-thin ">&nbsp;</th>
                      <? if( isset($list_blocks) ) { 
                            foreach( $list_blocks as $key=>$block ){?>
                                <th class="w-6 text-center border-bottom-thin border-right-thin time-text-plan f20"><?=substr($key,11)?></th>
                      <?    } 
                        } ?>
                    </tr>
              </thead>
              <? $count = 0; ?>
              <tbody>
                    
                  <? if( isset($list_lot_no) && count($list_lot_no)>0){
                      foreach( $list_lot_no as $row_lot_no ){?>

                        <tr>
                              <td  rowspan="3" class="w-6 text-center border-bottom-thin border-right-thin v-align"><?=++$count?></td>
                              <td colspan="2" class=" text-center border-bottom-thin border-right-thin">LotNo</td>
                              <? if( isset($list_blocks) ) { 
                                    foreach( $list_blocks as $key=>$block ){?>
                                        <td class="w-6 text-center text-center border-bottom-thin border-right-thin " id="<?=$row_lot_no->lot_no?>_<?=$block?>"></td>
                              <?    } 
                                } ?>
                        </tr>
                        </tr>

                        <tr>
                              <td  class="w-8 text-center border-bottom-thin border-right-thin time-text-plan f20"><?=$row_lot_no->lot_no?></td>
                              <td  class="w-6 text-center border-bottom-thin border-right-thin time-text-plan f20">Plan</td>
                                <? if( isset($list_blocks) ) { 
                                      foreach( $list_blocks as $block ){?>
                                          <td class="w-6 text-center text-center border-bottom-thin border-right-thin" id="<?=$row_lot_no->lot_no?>_<?=$block?>_plan"></td>
                                <?    } 
                                  } ?>
                        </tr>

                        <tr>
                              <td  class="w-8 text-center border-bottom-thin border-right-thin time-text-act f20"><?=$row_lot_no->lot_no?></td>
                              <td  class="w-6 text-center border-bottom-thin border-right-thin time-text-act f20">Actual</td>
                                <? if( isset($list_blocks) ) { 
                                      foreach( $list_blocks as $block ){?>
                                          <td class="w-6 text-center text-center border-bottom-thin border-right-thin" id="<?=$row_lot_no->lot_no?>_<?=$block?>_act"></td>
                                <?    } 
                                  } ?>
                        </tr>    

                  <?  }
                    }?>

              </tbody>

            </table>

            @section("script")
              <script type="text/javascript">

              </script>
            @endsection
        </div>  
    </div>
     
</div>

@endsection