@extends('layouts.app')



@push('page_css')
    <style>
        .stats-card .stats-icon.change-info {
            color: #36A1EA;
            background-color: #DDF0F1;
        }

    </style>
@endpush


@section('content')

            <div class="page-info">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                    </ol>
                </nav>
                <div class="page-options">

                </div>
            </div>
            <div class="main-wrapper">
                <div class="row stats-row">
                    <div class="col-lg-4 col-md-12">
                        <div class="card card-transparent stats-card">
                            <div class="card-body">
                                <div class="stats-info">
                                    <h5 class="card-title">{!! $produccion_semana_actual !!}<span class="stats-change stats-change-danger">/{!! $produccion_semana_anterior !!}</span></h5>
                                    <p class="stats-text">Cantidad de PT producidas</p>
                                </div>

                                @if($produccion_semana_actual < $produccion_semana_anterior)
                                    <div class="stats-icon change-danger">
                                        <i class="material-icons">trending_down</i>
                                    </div>
                                @elseif($produccion_semana_actual == $produccion_semana_anterior)
                                <div class="stats-icon change-info">
                                    <i class="material-icons">trending_flat</i>
                                </div>
                                @elseif($produccion_semana_actual > $produccion_semana_anterior)
                                    <div class="stats-icon change-success">
                                        <i class="material-icons">trending_up</i>
                                    </div>
                                @endif
                                
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-12">
                        <div class="card card-transparent stats-card">
                            <div class="card-body">
                                <div class="stats-info">
                                    <h5 class="card-title">{!! $rejecteds_semana_actual !!}
                                        @if($rejecteds_porcentaje_anterior > 0)
                                            <span class="stats-change stats-change-success">
                                                + {!! $rejecteds_porcentaje_anterior !!}%
                                            </span>
                                        @elseif($rejecteds_porcentaje_anterior == 0)
                                            <span class="stats-change stats-change-info">
                                                {!! $rejecteds_porcentaje_anterior !!}%
                                            </span>
                                        @elseif($rejecteds_porcentaje_anterior < 0)
                                            <span class="stats-change stats-change-danger">
                                                {!! $rejecteds_porcentaje_anterior !!}%
                                            </span>
                                        @endif
                                    </h5>
                                    <p class="stats-text">Total RT última semana</p>
                                </div>


                                @if($rejecteds_porcentaje_anterior > 0)
                                    <div class="stats-icon change-danger">
                                        <i class="material-icons">trending_down</i>
                                    </div>
                                @elseif($rejecteds_porcentaje_anterior == 0)
                                <div class="stats-icon change-info">
                                    <i class="material-icons">trending_flat</i>
                                </div>
                                @elseif($rejecteds_porcentaje_anterior < 0)
                                    <div class="stats-icon change-success">
                                        <i class="material-icons">trending_up</i>
                                    </div>
                                @endif


             
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-12">
                        <div class="card card-transparent stats-card">
                            <div class="card-body">
                                <div class="stats-info">

                                    <h5 class="card-title">{!! $quarantine_semana_actual !!}
                                        @if($quarantine_porcentaje_anterior > 0)
                                            <span class="stats-change stats-change-success">
                                                + {!! $quarantine_porcentaje_anterior !!}%
                                            </span>
                                        @elseif($quarantine_porcentaje_anterior == 0)
                                            <span class="stats-change stats-change-info">
                                                {!! $quarantine_porcentaje_anterior !!}%
                                            </span>
                                        @elseif($quarantine_porcentaje_anterior < 0)
                                            <span class="stats-change stats-change-danger">
                                                {!! $quarantine_porcentaje_anterior !!}%
                                            </span>
                                        @endif
                                    </h5>

                                    <p class="stats-text">Total SCRAP última semana</p>
                                </div>


                                @if($quarantine_porcentaje_anterior > 0)
                                    <div class="stats-icon change-danger">
                                        <i class="material-icons">trending_down</i>
                                    </div>
                                @elseif($quarantine_porcentaje_anterior == 0)
                                <div class="stats-icon change-info">
                                    <i class="material-icons">trending_flat</i>
                                </div>
                                @elseif($quarantine_porcentaje_anterior < 0)
                                    <div class="stats-icon change-success">
                                        <i class="material-icons">trending_up</i>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                
                    <div class="col-lg-8">
                        <div class="card">
                            <div class="card-header">
                                <ul class="nav nav-tabs card-header-tabs">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#" onclick="verTerminados(this)" >Productos terminados</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#" onclick="verRetrabajos(this)" >Retrabajos</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#" onclick="verScraps(this)" >Scraps</a>
                                    </li>
                                </ul>
                            </div>

                            <div class="card-body terminados-content" style="display: block">
                                <div class="visitors">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="visitors-stats-info">
                                                <p>Total Productos terminados:</p>
                                                <h5>77,871</h5>
                                                <span>6-26 Abr</span>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="visitors-stats-info">
                                                <p>Total Productos terminados:</p>
                                                <h5>58,403</h5>
                                                <span>6-26 Abr</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <div id="chart-terminados"></div>
                                </div>
                            </div>

                            <div class="card-body retrebajos-content" style="display: none">
                                <div class="visitors">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="visitors-stats-info">
                                                <p>Total Productos terminados:</p>
                                                <h5>77,871</h5>
                                                <span>6-26 Abr</span>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="visitors-stats-info">
                                                <p>Total Productos terminados:</p>
                                                <h5>58,403</h5>
                                                <span>6-26 Abr</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <div id="chart-retrabajos"></div>
                                </div>
                            </div>

                            <div class="card-body scraps-content" style="display: none">
                                <div class="visitors">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="visitors-stats-info">
                                                <p>Total Productos terminados:</p>
                                                <h5>77,871</h5>
                                                <span>6-26 Abr</span>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="visitors-stats-info">
                                                <p>Total Productos terminados:</p>
                                                <h5>58,403</h5>
                                                <span>6-26 Abr</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <div id="chart-scraps"></div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="col-lg-4">
                        <div class="card top-products">
                            <div class="card-body">
                                <h5 class="card-title">Evaluaciones<span class="card-title-helper">Actual</span></h5>
                                <div class="top-products-list">
                                    @foreach($lista_evaluacion_proveedores as $lista_evaluacion_proveedor)
                                        <div class="product-item">
                                            <h5>{!! $lista_evaluacion_proveedor['proveedor'] !!}</h5>
                                            <span> {!! $lista_evaluacion_proveedor['puntaje'] !!}%</span>

                                            @if($lista_evaluacion_proveedor['puntaje'] > $lista_evaluacion_proveedor['puntaje_anterior'])
                                                <i class="material-icons product-item-status product-item-success">arrow_upward</i>
                                            @elseif($lista_evaluacion_proveedor['puntaje'] < $lista_evaluacion_proveedor['puntaje_anterior'])
                                                <i class="material-icons product-item-status product-item-danger">arrow_downward</i>
                                            @else
                                                <i class="material-icons product-item-status product-item-info">trending_flat</i>
                                            @endif
                                            
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="card card-transactions">
                            <div class="card-body">
                                <h5 class="card-title">Embarques<a href="#" class="card-title-helper blockui-transactions"><i class="material-icons">refresh</i></a></h5>
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th scope="col">Orden</th>
                                                <th scope="col">Empresa</th>
                                                <th scope="col">Fecha</th>
                                                <th scope="col">Estatus</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($embarques as $embarque)
                                                <tr>
                                                    <td>{!! $embarque->id !!}</td>
                                                    <td>{!! $embarque->customers->company !!}</td>
                                                    <td>{!! $embarque->deliver_date !!}</td>
                                                    <td>
                                                        
                                                        @if('Pendiente')
                                                            <span class="badge badge-warning">
                                                        @elseif('En espera')
                                                            <span class="badge badge-secondary">
                                                        @elseif('Entregado')
                                                            <span class="badge badge-success">
                                                        @endif
                                                            {!! $embarque->status !!}
                                                        </span>
                                                    
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table> 
                                </div>     
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="card card-transactions">
                            <div class="card-body">
                                <h5 class="card-title">calibraciones<a href="#" class="card-title-helper blockui-transactions"><i class="material-icons">refresh</i></a></h5>
                                <div class="table-responsive">
                                    @include('devices.table')
                                </div>     
                            </div>
                        </div>
                    </div>
                </div>
            </div>
@endsection

@push('page_scripts')
    <script src="{{ asset('assets') }}/js/pages/dashboard.js"></script>
    <script>
        let datos_grafica_produccion = {!! $grafica_produccion !!};

        let produccionArr = datos_grafica_produccion.map(function(element){
            return getElementoArr(element);
        });

        let datos_grafica_retrabajos = {!! $grafica_retrabajos !!};

        let retrabajosArr = datos_grafica_retrabajos.map(function(element){
            return getElementoArr(element);
        });

        let datos_grafica_scraps = {!! $grafica_scraps !!};

        let scrapsArr = datos_grafica_scraps.map(function(element){
            return getElementoArr(element);
        });

        $(document).ready(function(){});

        function verTerminados(elemento){

            $('.nav-item').each(function(index,element){
                element.classList.remove("active");
            });

            elemento.classList.add("active");

            $('.terminados-content').show();
            $('.retrebajos-content').hide();
            $('.scraps-content').hide();
        }

        function verRetrabajos(elemento){

            $('.nav-link').each(function(index,element){
                element.classList.remove("active");
            });

            elemento.classList.add("active");

            $('.terminados-content').hide();
            $('.retrebajos-content').show();
            $('.scraps-content').hide();
        }

        function verScraps(elemento){

            $('.nav-link').each(function(index,element){
                element.classList.remove("active");
            });

            elemento.classList.add("active");

            $('.terminados-content').hide();
            $('.retrebajos-content').hide();
            $('.scraps-content').show();
        }

        function getElementoArr(element){
            const dateStr = element.fecha;
            let dateParts = dateStr.split("-");
            let dateObject = new Date(+dateParts[0], dateParts[1] - 1, +dateParts[2]); 
            const date = new Date(dateObject);
            const timestampInMs = date.getTime();
            return  [timestampInMs,element.total];
        }

    </script>
@endpush