@extends("layout.menu")

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

<?php
    // $month_3txt = date('M');
    // $month_mm = date('m');
    // $year_20yy = date('Y');
    $day_in_month = cal_days_in_month(CAL_GREGORIAN, $month_mm,  $year_20yy);

    $list9step = array("DB"=>"bg-gray","Oven DB"=>"bg-gray","WIRE"=>"bg-gray","DB CHECK"=>"bg-gray","MOLD"=>"bg-gray","Oven MOLD"=>"bg-gray","DICER"=>"bg-gray","App"=>"bg-gray","Classify"=>"bg-black");

    function check_month_mm($m){
        if( strlen($m)==1 ){ $m = "0".$m; }
        return $m;
    }
?>

<style>

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

  table,th,td {
    /* border: solid 1px #ccc; */
    border-collapse: collapse;
    border-spacing:0;
    color: #000;
    background: #FFF;
    font-size:13px;
    padding:4px 3px !important;
    vertical-align:middle !important;
    font-weight:bold;

  }



.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;

}

.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;
}

.w5{
  width:5rem !important; 
}

.w6{
  width:6rem !important;
}

.w10{
  width:10rem !important;
}

.w12{
  width:12rem !important;
}

.w15{
  width:15rem !important;
}

.w20{
  width:20rem !important;
}

.w-10{
  width:10%;
}

.w-15{
  width:15%;
}

.w-40{
  width:40%;
}

.w-70{
  width:70%;
}

.w-85{
  width:85%;
}

.w-90{
  width:90%;
}

.w-auto{
  width:100%;
}


.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;
}

.bg-gray {
  background: #80808075;
  color:#000;
}

.bg-black {
  background: #0e0e0ed9;
  color:#FFF;
}
</style>

@section("content")
<!-- <div class="w-auto no-gutters d-flex" style="color:#000;"> -->
    <!-- <div class=" "> -->
        <div style="padding:10px;">

                <h4 class="" style="font-weight:bold; margin-bottom:0px;">Production Control Board 5W Line</h4>
                <table class=" table table-sm border_bold " style="table-layout: fixed;">
                          <thead>
                                <tr>
                                  <th colspan="2"  class=" text-center border-bottom-thin border-right-thin"  style="width:130px !important;" >Date</th>
                                  <? for($i=1; $i<=$day_in_month; $i++){ ?>
                                        <th   class=" text-center border-bottom-thin border-right-thin" style="width:60px"><?=$i.'-'.$month_3txt?></th>
                                  <? } ?>
                                </tr>
                          </thead>
                          <tbody>
                                <? foreach( $list9step as $step=>$class ){ ?>
                                        <tr>
                                            <td rowspan="4" class="text-center border-bottom-thin border-right-thin" style=""><?=$step?></td>
                                            <td class="  border-bottom-thin border-right-thin" style="width:100px !important;">PLAN</td> 
                                            <? for($i=1; $i<=$day_in_month; $i++){ ?>
                                                <td   class=" text-right border-bottom-thin border-right-thin"  ><span id="plan-<?=str_replace(" ","",$step)?>-<?=check_month_mm($i)?>-<?=$month_mm?>">&nbsp;</span></td>
                                            <? } ?>
                                        </tr>
                                        <tr>
                                            <td class="  border-bottom-thin border-right-thin" style="">Actual</td>
                                            <? for($i=1; $i<=$day_in_month; $i++){ ?>
                                                <td   class=" text-right border-bottom-thin border-right-thin"><span id="act-<?=str_replace(" ","",$step)?>-<?=check_month_mm($i)?>-<?=$month_mm?>">&nbsp;</span></td>
                                            <? } ?>
                                        </tr>
                                        <tr>
                                            <td class=" t border-bottom-thin border-right-thin" style="">OK (Pcs.)</td>
                                            <? for($i=1; $i<=$day_in_month; $i++){ ?>
                                                <td   class=" text-right border-bottom-thin border-right-thin"><span id="ok-<?=str_replace(" ","",$step)?>-<?=check_month_mm($i)?>-<?=$month_mm?>">&nbsp;</span></td>
                                            <? } ?>
                                        </tr>
                                        <tr>
                                            <td class="  border-bottom-thin border-right-thin" style="">Budo (%)</td>
                                            <? for($i=1; $i<=$day_in_month; $i++){ ?>
                                                <td   class=" text-right border-bottom-thin border-right-thin <?=$class?>"><span id="budo-<?=str_replace(" ","",$step)?>-<?=check_month_mm($i)?>-<?=$month_mm?>">&nbsp;</span></td>
                                            <? } ?>
                                        </tr>
                                <? } ?>
                          </tbody>
                </table>    
        </div>  
    <!-- </div>  -->
<!-- </div> -->

@endsection
@section("script")
<script type="text/javascript">
$(document).ready(function () {

///  clockUpdate();
//  setInterval(clockUpdate, 1000);
      loadData();
      
      setTimeout(function(){
        loadData();
      }, 30000);

      setTimeout(function() {
              location.replace("screen2");
          }, 300000);
});

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

//timerefresh(10);

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("loaddataScreen4")}}',
          type:'get',
          data:'',
          dataType:'json',  
          success:function(ret){
              data_DB = ret['DB'];
              data_OvenDB = ret['OvenDB'];	
              data_WIRE = ret['WIRE'];	
              data_BONDINS = ret['BONDINS'];	
              data_MOLD = ret['MOLD'];	
              data_OvenMOLD = ret['OvenMOLD'];
              data_DICER = ret['DICER'];
              data_APP = ret['APP'];
              data_Classify = ret['Classify'];
              
              //console.log(data_db);
              for (let x in data_DB) {
                  //console.log(data_DB[x]); // {pla: '318864', act: '318864', ng: '0', dm: '04-09'}
                  $("#plan-DB-"+data_DB[x]['dm']).text(numeral(data_DB[x]['pla']).format('0,0')); // plan-DB-01-10
                  $("#act-DB-"+data_DB[x]['dm']).text(numeral(data_DB[x]['act']).format('0,0')); // plan-DB-01-10
                  $("#ok-DB-"+data_DB[x]['dm']).text(numeral(data_DB[x]['act']-data_DB[x]['ng']).format('0,0')); // plan-DB-01-10
                  $("#budo-DB-"+data_DB[x]['dm']).text(numeral( ((data_DB[x]['act']-data_DB[x]['ng'])/data_DB[x]['pla'])*100  ).format('0')+'%'); // plan-DB-01-10
              }

              for (let x in data_OvenDB) {
                  $("#plan-OvenDB-"+data_OvenDB[x]['dm']).text(numeral(data_OvenDB[x]['pla']).format('0,0')); 
                  $("#act-OvenDB-"+data_OvenDB[x]['dm']).text(numeral(data_OvenDB[x]['act']).format('0,0'));
                  $("#ok-OvenDB-"+data_OvenDB[x]['dm']).text(numeral(data_OvenDB[x]['act']-data_OvenDB[x]['ng']).format('0,0'));
                  $("#budo-OvenDB-"+data_OvenDB[x]['dm']).text(numeral( ((data_OvenDB[x]['act']-data_OvenDB[x]['ng'])/data_OvenDB[x]['pla'])*100  ).format('0')+'%'); 
              }

              for (let x in data_WIRE) {
                  $("#plan-WIRE-"+data_WIRE[x]['dm']).text(numeral(data_WIRE[x]['pla']).format('0,0'));
                  $("#act-WIRE-"+data_WIRE[x]['dm']).text(numeral(data_WIRE[x]['act']).format('0,0')); 
                  $("#ok-WIRE-"+data_WIRE[x]['dm']).text(numeral(data_WIRE[x]['act']-data_WIRE[x]['ng']).format('0,0')); 
                  $("#budo-WIRE-"+data_WIRE[x]['dm']).text(numeral( ((data_WIRE[x]['act']-data_WIRE[x]['ng'])/data_WIRE[x]['pla'])*100  ).format('0')+'%'); 
              }
              
              for (let x in data_BONDINS) {
                  $("#plan-DBCHECK-"+data_BONDINS[x]['dm']).text(numeral(data_BONDINS[x]['pla']).format('0,0'));
                  $("#act-DBCHECK-"+data_BONDINS[x]['dm']).text(numeral(data_BONDINS[x]['act']).format('0,0')); 
                  $("#ok-DBCHECK-"+data_BONDINS[x]['dm']).text(numeral(data_BONDINS[x]['act']-data_BONDINS[x]['ng']).format('0,0')); 
                  $("#budo-DBCHECK-"+data_BONDINS[x]['dm']).text(numeral( ((data_BONDINS[x]['act']-data_BONDINS[x]['ng'])/data_BONDINS[x]['pla'])*100  ).format('0')+'%'); 
              }
              
              for (let x in data_MOLD) {
                  $("#plan-MOLD-"+data_MOLD[x]['dm']).text(numeral(data_MOLD[x]['pla']).format('0,0'));
                  $("#act-MOLD-"+data_MOLD[x]['dm']).text(numeral(data_MOLD[x]['act']).format('0,0')); 
                  $("#ok-MOLD-"+data_MOLD[x]['dm']).text(numeral(data_MOLD[x]['act']-data_MOLD[x]['ng']).format('0,0')); 
                  $("#budo-MOLD-"+data_MOLD[x]['dm']).text(numeral( ((data_MOLD[x]['act']-data_MOLD[x]['ng'])/data_MOLD[x]['pla'])*100  ).format('0')+'%'); 
              }

              for (let x in data_OvenMOLD) {
                  $("#plan-OvenMOLD-"+data_OvenMOLD[x]['dm']).text(numeral(data_OvenMOLD[x]['pla']).format('0,0'));
                  $("#act-OvenMOLD-"+data_OvenMOLD[x]['dm']).text(numeral(data_OvenMOLD[x]['act']).format('0,0')); 
                  $("#ok-OvenMOLD-"+data_OvenMOLD[x]['dm']).text(numeral(data_OvenMOLD[x]['act']-data_OvenMOLD[x]['ng']).format('0,0')); 
                  $("#budo-OvenMOLD-"+data_OvenMOLD[x]['dm']).text(numeral( ((data_OvenMOLD[x]['act']-data_OvenMOLD[x]['ng'])/data_OvenMOLD[x]['pla'])*100  ).format('0')+'%'); 
              }

              for (let x in data_DICER) {
                  $("#plan-DICER-"+data_DICER[x]['dm']).text(numeral(data_DICER[x]['pla']).format('0,0'));
                  $("#act-DICER-"+data_DICER[x]['dm']).text(numeral(data_DICER[x]['act']).format('0,0')); 
                  $("#ok-DICER-"+data_DICER[x]['dm']).text(numeral(data_DICER[x]['act']-data_DICER[x]['ng']).format('0,0')); 
                  $("#budo-DICER-"+data_DICER[x]['dm']).text(numeral( ((data_DICER[x]['act']-data_DICER[x]['ng'])/data_DICER[x]['pla'])*100  ).format('0')+'%'); 
              }            
              
              for (let x in data_APP) {
                  $("#plan-App-"+data_APP[x]['dm']).text(numeral(data_APP[x]['pla']).format('0,0'));
                  $("#act-App-"+data_APP[x]['dm']).text(numeral(data_APP[x]['act']).format('0,0')); 
                  $("#ok-App-"+data_APP[x]['dm']).text(numeral(data_APP[x]['act']-data_APP[x]['ng']).format('0,0')); 
                  $("#budo-App-"+data_APP[x]['dm']).text(numeral( ((data_APP[x]['act']-data_APP[x]['ng'])/data_APP[x]['pla'])*100  ).format('0')+'%'); 
              } 
              
              for (let x in data_Classify) {
                  $("#plan-Classify-"+data_Classify[x]['dm']).text(numeral(data_Classify[x]['pla']).format('0,0'));
                  $("#act-Classify-"+data_Classify[x]['dm']).text(numeral(data_Classify[x]['act']).format('0,0')); 
                  $("#ok-Classify-"+data_Classify[x]['dm']).text(numeral(data_Classify[x]['act']-data_Classify[x]['ng']).format('0,0')); 
                  $("#budo-Classify-"+data_Classify[x]['dm']).text(numeral( ((data_Classify[x]['act']-data_Classify[x]['ng'])/data_Classify[x]['pla'])*100  ).format('0')+'%'); 
              } 

          }

        });  
}



</script>
@endsection
