@extends('ATCore::atcore_layout')


@section('content')

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <div class="card">
                @if ($live)
                    <a href="{{ route('dashboard') }}" class="btn btn-secondary"><i class="far fa-arrow-alt-circle-left mr-1"></i> VOLVER A PANEL PRINCIPAL</a>
                @else
                <a href="{{ route('dashboard.machine_panel',$workOrder->machine->id) }}" class="btn btn-danger"><i class="far fa-arrow-alt-circle-left mr-1"></i> IR A EN TIEMPO REAL</a>
                @endif
            </div>
            
            <!-- Profile Image -->
            <div class="card card-warning">
                
                <div class="card-header text-center">
                    MÁQUINA <strong>{{$machine->name}}</strong>
                </div>
                <div class="card-body p-0">
                    <ul class="nav nav-pills flex-column">
                        <li class="p-3">
                            <i class="fas fa-edit mr-1"></i> Orden de Trabajo
                            <span class="float-right"><strong>{{isset($workOrder)? $workOrder->number : "N/A"}}</strong></span>
                        </li>
                        <li class="p-3">
                            <i class="fas fa-barcode mr-1"></i> Producto
                            <span class="float-right"><strong>{{isset($workOrder)? $workOrder->product->name : "N/A"}}</strong></span>
                        </li>
                        <li class="p-3">
                            <i class="fas fa-hard-hat mr-1"></i> Operador
                            <span class="float-right"><strong>{{isset($workOrderDetail)? $workOrderDetail->employee->name : "N/A"}}</strong></span>
                        </li>
                        <li class="p-3">
                            <i class="fas fa-stopwatch-20 mr-1"></i> T Estimado Apertura
                            <span class="float-right"><strong>{{isset($workOrder)? $workOrder->product->getEOT()." min" : "N/A"}} </strong></span>
                        </li>
                        <li class="p-3">
                            <i class="fas fa-exchange-alt mr-1"></i> Turno
                            <span class="float-right"><strong>{{isset($workOrderDetail)? $workOrderDetail->shift : "N/A"}}</strong></span>
                        </li>
                        <li class="p-3">
                            <i class="far fa-clock mr-1"></i> Inicio
                            <span class="float-right"><strong>{{isset($workOrderDetail)? $workOrderDetail->start : "N/A"}}</strong></span>
                        </li>
                        <li class="p-3">
                            <i class="fas fa-clock mr-1"></i> Término
                            <span class="float-right"><strong>{{isset($workOrderDetail)? $workOrderDetail->finish : "N/A"}}</strong></span>
                        </li>
                        
                    </ul>
                    
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
            
        </div>
        <div class="col-9">
            <!-- interactive chart -->
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="far fa-chart-bar"></i>
                        Análisis de Tiempos de Apertura por Proceso
                    </h3>
                    
                    <div class="card-tools">
                        @if ($live)
                        <small class="badge badge-danger flot"><i class="fas fa-satellite-dish"></i> EN VIVO!</small>
                        @endif
                    </div>
                    
                </div>
                <div class="card-body text-center">
                    @if (isset($noEnoughRecords))
                        <h5>NO EXISTEN SUFICIENTES RECURSOS PARA REALIZAR UNA MUESTRA ESTADÍSTICA</h5>
                    @else
                    <canvas id="canvas"></canvas>
                    @endif
                </div>
                <!-- /.card-body-->
            </div>
            <!-- /.card -->
            
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</div>  

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-7">
     
            @include('ATCore::partials.table',['table' => isset($tableWOD)? $tableWOD : null, 'columns' => isset($columnsWOD)? $columnsWOD : null, 'data_query' => isset($queryWOD)? $queryWOD : null, 'goto' => isset($gotoWOD)? $gotoWOD : null])
     
        </div>
        
        <div class="col-sm-5">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Top 10 de Desviaciones de Apertura</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover text-nowrap">
                            <thead class="thead-dark">
                                <tr>
                                    <th width="auto">Pos</th>
                                    <th width="auto">Producto</th>
                                    <th width="auto">Desviación</th>
                                    <th width="auto">Fecha</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (!isset($deviationArray) || (isset($deviationArray) && sizeof($deviationArray) < 1))
                                <tr>
                                    <td colspan="5" style="text-align: center">NO EXISTEN DATOS PARA MOSTRAR</td>
                                </tr>
                                @else
             
                                @foreach($deviationArray as $key=>$devRow)
                                <tr>
                                    <td>{{ $key+1 }}</td>
                                    <td>{{ $devRow->workOrderDetail->workOrder->product->name }}</td>
                                    <td>{{ $devRow->deviation }} %</td>
                                    <td>{{ $devRow->start_time }}</td>
                                    <td> <a href="{{ route('dashboard.machine_panel_by_wod',$devRow->workOrderDetail->id)}}"><i class="fas fa-chevron-circle-right"></i></a></td>
                                </tr>
                                @endforeach
                                @endif
                            </tbody>
                            
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>





@stop

@section('css')
@stop



@section('plugins.Chartjs',true)
@section('js')
@if (!isset($noEnoughRecords) || (isset($noEnoughRecords) && $noEnoughRecords != true ))
<script>
    window.chartColors = {
        red: 'rgb(255, 99, 132)',
        orange: 'rgb(255, 159, 64)',
        yellow: 'rgb(255, 205, 86)',
        green: 'rgb(75, 192, 192)',
        blue: 'rgb(54, 162, 235)',
        purple: 'rgb(153, 102, 255)',
        grey: 'rgb(201, 203, 207)'
    };
    var ctx = document.getElementById('canvas');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [{{$timeline}}],
            datasets: [{
                label: 'Tiempo de Apertura',
                data: [{{$openTimes}}],
                borderColor: window.chartColors.red,
                borderWidth: 1
            },{
                label: 'Tiempo según Maestra',
                data: [{{$curingTimes}}],
                borderColor: window.chartColors.blue,
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    ticks: {
                        // Include a dollar sign in the ticks
                        callback: function(value, index, values) {
                            return convert(value);
                        }
                    }
                }],
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
    
    
    function convert(timestamp){
        
        // Unixtimestamp
        var unixtimestamp = timestamp;
        
        // Months array
        var months_arr = ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'];
        
        // Convert timestamp to milliseconds
        var date = new Date(unixtimestamp*1000);
        
        // Year
        var year = date.getFullYear();
        
        // Month
        var month = months_arr[date.getMonth()];
        
        // Day
        var day = date.getDate();
        
        // Hours
        var hours = date.getHours();
        
        // Minutes
        var minutes = "0" + date.getMinutes();
        
        // Seconds
        var seconds = "0" + date.getSeconds();
        
        // Display date time in MM-dd-yyyy h:m:s format
        var convdataTime = day+'-'+month+'-'+year+' '+hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
        
        return convdataTime;
        
    }

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