@extends('ATCore::atcore_layout')


@section('content')

<!--
<button class="btn btn-primary" onclick="update()">Update</button>
-->

<div class="container-fluid">
    <h5 class="mb-2">Máquinas de Goma</h5>
    @foreach($rubberMachines as $rubberMachineCols)
    
    <div class="row">
        @foreach ($rubberMachineCols as $rubberMachine)
        <div class="col-md-{{12/$colsPerRow}}" onclick="goToMachinePanel({{$rubberMachine->id}})" style="cursor: pointer">
            <div class="card text-center bg-gray" id="_machine_card_{{$rubberMachine->code}}">
                <div class="ribbon-wrapper">
                    <div class="ribbon bg-danger" id="_machine_ribbon_{{$rubberMachine->code}}">
                      Offline
                    </div>
                  </div>
                <div class="card-header">
                    <h3 class="card-title"><strong>{{$rubberMachine->name}}</strong></h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <input type="text" id="_machine_time_value_{{$rubberMachine->name}}" value="0" class="dial">
                    <hr style="margin-top:2px;margin-bottom:2px">
                    <span  style="font-size: small">
            
                        OP <strong><span id="_employee_{{$rubberMachine->name}}">N/A</span></strong><br>
                        OT <strong><span id="_work_order_{{$rubberMachine->name}}">N/A</span></strong>
                    </span>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    <span class="float-left">PRO: <strong><span id="_product_{{$rubberMachine->name}}">N/A</span></strong></span>
                    <span class="float-right">TAE: <strong><span id="_eot_{{$rubberMachine->name}}">N/A</span></strong></span>
                </div>
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
        @endforeach
    </div>
    <!-- /.row -->
    @endforeach
    <hr>
    <h5 class="mb-2">Máquinas de Poly</h5>
    @foreach($polyMachines as $polyMachineCols)
   
    <div class="row">
        @foreach ($polyMachineCols as $polyMachine)
    <div class="col-md-{{12/$colsPerRow}}" onclick="goToMachinePanel({{$polyMachine->id}})" style="cursor: pointer">
            <div class="card text-center bg-gray" id="_machine_card_{{$polyMachine->code}}">
                <div class="ribbon-wrapper">
                    <div class="ribbon bg-danger" id="_machine_ribbon_{{$polyMachine->code}}">
                      Offline
                    </div>
                  </div>
                <div class="card-header">
                    <h3 class="card-title"><strong>{{$polyMachine->name}}</strong></h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <input type="text" id="_machine_time_value_{{$polyMachine->name}}" value="0" class="dial"> 
                    <hr style="margin-top:2px;margin-bottom:2px">
                    <span  style="font-size: small">
                        OP <strong><span id="_employee_{{$polyMachine->name}}">N/A</span></strong><br>
                        OT <strong><span id="_work_order_{{$polyMachine->name}}">N/A</span></strong>
                    </span>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    <span class="float-left">PRO: <strong><span id="_product_{{$polyMachine->name}}">N/A</span></strong></span>
                    <span class="float-right">TAE: <strong><span id="_eot_{{$polyMachine->name}}">N/A</span></strong></span>
                </div>
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
        @endforeach
    </div>
    <!-- /.row -->
    @endforeach
   
</div>





@stop

@section('css')
@stop



@section('plugins.Knob',true)
@section('js')
<script>
    function goToMachinePanel(machineId){
        location.href = '/dashboard/machine_panel/'+machineId;
    }

    function update(){
        let data = new FormData();
        data.append('_token', $('meta[name="csrf-token"]').attr('content'));
        axios.post('{{ route('update_machines') }}', data)
        .then(response => {
            result = response.data;
            for (i=0;i<result.length;i++){
                let machine = result[i]['machine'];
                let status = result[i]['status'];
                let timeValue = result[i]['timeValue'];
                let employee = result[i]['employee'];
                let wo = result[i]['wo'];
                let product = result[i]['product'];
                let eot = result[i]['eot'];



                if (status == 1){
                    // ACTIVAR LA MÁQUINA
                    if (eot < timeValue || eot == "N/A")
                        document.getElementById('_machine_card_'+machine).className = 'card text-center bg-warning';
                    else
                        document.getElementById('_machine_card_'+machine).className = 'card text-center bg-success';
                    document.getElementById('_machine_ribbon_'+machine).className = 'ribbon bg-success';
                    document.getElementById('_machine_ribbon_'+machine).innerHTML = 'Online';
                    $('#'+'_machine_time_value_'+machine).val(timeValue).trigger('change');
                    document.getElementById('_employee_'+machine).innerHTML = employee;
                    document.getElementById('_work_order_'+machine).innerHTML = wo;
                    document.getElementById('_product_'+machine).innerHTML = product;
                    document.getElementById('_eot_'+machine).innerHTML = eot+' min';
                }else{
                    // DESACTIVAR LA MÁQUINA
                    document.getElementById('_machine_card_'+machine).className = 'card text-center bg-gray';
                    document.getElementById('_machine_ribbon_'+machine).className = 'ribbon bg-danger';
                    document.getElementById('_machine_ribbon_'+machine).innerHTML = 'Offline';
                    $('#'+'_machine_time_value_'+machine).val(0).trigger('change');
                    document.getElementById('_employee_'+machine).innerHTML = "N/A";
                    document.getElementById('_work_order_'+machine).innerHTML = "N/A";
                    document.getElementById('_product_'+machine).innerHTML = "N/A";
                    document.getElementById('_eot_'+machine).innerHTML = "N/A";
                }
                
            }
                

        }).catch(response => {
            console.log(response)
        })
    }


    $(function() {
        $(".dial").knob({
            width: 200,
            readOnly: true,
            inputColor: '#ffffff',
            thickness: '.2',
            displayPrevious: true
        });
    });

    update();
    var myVar = setInterval(myTimer ,30000);
    function myTimer() {
        update();
        Pace.restart();
    }
</script>
@stop