@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-08-19"; // 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_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;

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

        loadData();
        clockUpdate();
        clockUpdateID = setInterval(clockUpdate, 100);

        init_auto_scroll();

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

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


      //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();
  $('.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 loadData() {
      $.ajax({
 
        url:'{{url("loaddataScreen2")}}',
        type:'get',
        data:'',
        dataType:'json',
        success:function(ret){
              list_blocks = <?=json_encode($list_blocks)?>;
              $("#Output").empty();
              $("#Outputlot").empty();
              $("#Resultok").empty();
              $("#Resultpercen").empty();
              $("#Png").empty();
              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'];

              $('#id_total').text(lot_data.length);
              $('#id_not_start').text(lot_not_start[0]['notstart']);
              $('#id_finish').text(lot_finish[0]['finish']);
              // console.log(lot_not_start[0]['notstart']);
              // console.log(lot_finish[0]['finish']);
              //console.log(ret['dateAll']);
             // console.log(ret['datemid']);
              //console.log(ret['H_check']);
              
              //console.log(list_blocks);


              for (let x in lot_data) {
                  row_lot = lot_data[x];
                  for (const [key, block] of Object.entries(list_blocks)) {
                    //console.log(key, row_lot['block_diebond_plan']);
                    // update id = E39220001_block_a_plan (lot_no , block , title/plan/act)
                    //console.log(key, block);
                    //console.log(row_lot['lot_no'], block);
                    // if(  key==row_lot['block_diebond_plan'] ){
                    //   $('#'+row_lot['lot_no']+'_'+block).text("DIE BOND").addClass(" border-bold-thin border-top-thin border-left-thin ");
                    //   $('#'+row_lot['lot_no']+'_'+block+'_plan').text(row_lot['diebond_plan_time']).addClass("time-text-plan border-bold-thin border-top-thin border-left-thin");
                    // }
            
                    if(  key==row_lot['block_diebond_act'] ){
                      $('#'+row_lot['lot_no']+'_'+block).text("DIE BOND").addClass("font-bold  f12");
                      $('#'+row_lot['lot_no']+'_'+block+'_plan').text(row_lot['diebond_plan'].substring(0, row_lot['diebond_plan'].length - 7)).addClass("time-text-plan  f12");
                      $('#'+row_lot['lot_no']+'_'+block+'_act').text(row_lot['diebond_act_time']).addClass("time-text-act ");
                    }

                    if(  key==row_lot['block_ovediebond_act'] ){
                      //chk_block = true;
                      $('#'+row_lot['lot_no']+'_'+block).text("OVEN DIEBOND").addClass("font-bold  f12");
                      $('#'+row_lot['lot_no']+'_'+block+'_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']+'_'+block+'_act').text(row_lot['ovediebond_act_time']).addClass("time-text-act ");
                    }

                    if(  key==row_lot['block_wirebond_act'] ){
                      //chk_block = true;
                      $('#'+row_lot['lot_no']+'_'+block).text("WIRE BOND").addClass("font-bold  f12 ");
                      $('#'+row_lot['lot_no']+'_'+block+'_plan').text(row_lot['wirebond_plan'].substring(0, row_lot['wirebond_plan'].length - 7)).addClass("time-text-plan  f12");
                      $('#'+row_lot['lot_no']+'_'+block+'_act').text(row_lot['wirebond_act_time']).addClass("time-text-act ");
                     
                    }

                    if(  key==row_lot['block_bondingins_act'] ){
                      //chk_block = true;
                      $('#'+row_lot['lot_no']+'_'+block).text("BONDING INS").addClass("font-bold  f12");
                      $('#'+row_lot['lot_no']+'_'+block+'_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']+'_'+block+'_act').text(row_lot['bondingins_act_time']).addClass("time-text-act");
                    }

                    if(  key==row_lot['block_mold_act'] ){
                      //chk_block = true;
                      $('#'+row_lot['lot_no']+'_'+block).text("MOLD").addClass("font-bold  f12");
                      $('#'+row_lot['lot_no']+'_'+block+'_plan').text(row_lot['mold_plan'].substring(0, row_lot['mold_plan'].length - 7)).addClass("time-text-plan  f12");
                      $('#'+row_lot['lot_no']+'_'+block+'_act').text(row_lot['mold_act_time']).addClass("time-text-act");
                    }

                    if(  key==row_lot['block_ovemold_act'] ){
                      //chk_block = true;
                      $('#'+row_lot['lot_no']+'_'+block).text("OVEN MOLD").addClass("font-bold  f12");
                      $('#'+row_lot['lot_no']+'_'+block+'_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']+'_'+block+'_act').text(row_lot['ovemold_act_time']).addClass("time-text-act ");
                    }            
  
                    if(  key==row_lot['block_dicer_act'] ){
                      //chk_block = true;
                      $('#'+row_lot['lot_no']+'_'+block).text("DICER").addClass("font-bold  f12");
                      $('#'+row_lot['lot_no']+'_'+block+'_plan').text(row_lot['dicer_plan'].substring(0, row_lot['dicer_plan'].length - 7)).addClass("time-text-plan  f12");
                      $('#'+row_lot['lot_no']+'_'+block+'_act').text(row_lot['dicer_act_time']).addClass("time-text-act ");
                    }

                    if(  key==row_lot['block_appea_act'] ){
                      //chk_block = true;
                      $('#'+row_lot['lot_no']+'_'+block).text("APPEARANCE").addClass("font-bold  f12");
                      $('#'+row_lot['lot_no']+'_'+block+'_plan').text(row_lot['appea_plan'].substring(0, row_lot['appea_plan'].length - 7)).addClass("time-text-plan  f12");
                      $('#'+row_lot['lot_no']+'_'+block+'_act').text(row_lot['appea_act_time']).addClass("time-text-act");
                    }

                    if(  key==row_lot['block_classi_act'] ){
                      $('#'+row_lot['lot_no']+'_'+block).text("CLASSIFYING").addClass("font-bold  f12");
                      $('#'+row_lot['lot_no']+'_'+block+'_plan').text(row_lot['classi_plan'].substring(0, row_lot['classi_plan'].length - 7)).addClass("time-text-plan  f12");
                      $('#'+row_lot['lot_no']+'_'+block+'_act').text(row_lot['classi_act_time']).addClass("time-text-act ");
  
                    } 
                  }
              }
        },
        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);
                      }
                      //console.log( window.scrollY ) // 3162.39990234375
            },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;
  color:#FFF;
}

.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

