@foreach ($Datos as $var)

<div class="container">
    <article class="card">
        <header class="card-header">Tracking Corporativo Internacional Especializado</header>
        <div class="card-body">
          
            <article class="card-info card">
                <div class="card-body row text-center">
                    <div id="info" class="col-2"> <strong class="card-body-info">Referencia: {{$var->REFERENCIA}}</strong> <br></div>
                    <div id="info"  class="col-2"> <strong class="card-body-info">Pedimento: {{$var->NUM_PED}}</strong> <br></div>
                    <div id="info"  class="col-2"> <strong class="card-body-info">Operacion: @if($var->OPE == "Impo") Importación @else Exportación @endif</strong> <br></div>
                    <div id="info" class="col-6"> <strong class="card-body-info">Cliente: @if($var->CVE_IMPORTADOR == "YU049") IMPORTADORA DE DISEÑOS CARUVE, S.A. DE C.V. @else {{$var->IMPORTADOR}} @endif</strong> <br> </div>
                </div>
            </article>
            <div class="row">
                <div class="col-12 text-center">
                    <h4>Transporte {{$var->TRANSPORTE}}</h4>
                </div>

                <div class="col-12 text-center">
                    <img class="logo-img" src="img/train.png" alt="Movil Jaguar S.A de C.V">
                </div>
            </div>

            <div class="row d-flex">
                <div class="col-12">
                    <div class="d-flex">
                        <div div class="p-3">
                            <span class="fecha-estatus"><span class="font-weight-bold">{{date('Y-M-d',strtotime($var->APERTURA))}}</span>
                            <span class="fecha-estatus1"><span class="font-weight-bold mr-1">No aplica</span>
                            <span class="fecha-estatus2"><span class="font-weight-bold mr-4">No aplica</span>
                            <span class="fecha-estatus3"><span class="font-weight-bold ml-2">No aplica</span>
                            <span class="fecha-estatus4"><span class="font-weight-bold ml-4">{{date('Y-M-d h:m',strtotime($var->PEDIMENTO))}}</span>
                            <span class="fecha-estatus5"><span class="font-weight-bold ml-1"> {{date('Y-M-d h:m',strtotime($var->DESPACHO))}}</span>
                            <span class="fecha-estatus6"><span class="font-weight-bold ml-1">@if($var->VACIOS > 2000-01-01){{date('Y-M-d h:m',strtotime($var->VACIOS))}} @else &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp    @endif</span>
                            <span class="fecha-estatus8"><span class="font-weight-bold ml-1 mr-4">{{date('Y-M-d h:m',strtotime($var->FACTURACION))}}</span>
                            @if($var->FACTURACION == NULL)
                            @else
                            <span class="fecha-estatus ml-2"><span class="font-weight-bold">Listo!</span>
                            @endif




                         </div>
                    </div>
                </div>
            </div>
            
                <div class="row d-flex justify-content-center">
                    <div class="col-12">
                      <div class="d-flex justify-content-center">
                          <div class="p-3">
                              <div class="progresses">
                                @if($var->APERTURA == NULL)
                                <div class="steps"> <span> <i class="far fa-circle"></i></span> </div> <span class="line"></span>
                                <div class="steps"> <span> <i class="far fa-circle"></i></span> </div> <span class="line"></span>
                                <div class="steps"> <span> <i class="far fa-circle"></i></span> </div> <span class="line"></span>
                                <div class="steps"> <span> <i class="far fa-circle"></i></span> </div> <span class="line"></span>
                                @elseif($var->APERTURA != NULL && $var->PEDIMENTO == NULL)
                                <div id="transito" class="A activo"> <span class="font-weight-bold"><i class="fa fa-truck"></i></span> </div> <span class="line"></span>
                                @else
                                <div class="activo"> <span><i class="fa fa-check"></i></span> </div> <span class="activo-line"></span>                     
                                <div class="activo"> <span><i class="fa fa-check"></i></span> </div> <span class="activo-line"></span>                     
                                <div class="activo"> <span><i class="fa fa-check"></i></span> </div> <span class="activo-line"></span>                     
                                <div class="activo"> <span><i class="fa fa-check"></i></span> </div> <span class="activo-line"></span>                     
                                @endif
                                 



                                @if($var->PEDIMENTO == NULL)
                                <div class="steps"> <span> <i class="far fa-circle"></i></span> </div> <span class="line"></span>
                                @elseif($var->PEDIMENTO != NULL && $var->VACIOS == NULL)
                                <div id="carga" class="C activo"> <span class="font-weight-bold"><i class="fa fa-truck"></i></span> </div> <span class="line"></span>
                                @else
                                <div class="activo"> <span><i class="fa fa-check"></i></span> </div> <span class="activo-line"></span>                     
                                <div class="activo"> <span><i class="fa fa-check"></i></span> </div> <span class="activo-line"></span>                     
 
                                @endif


                                @if($var->VACIOS == NULL)
                                <div class="steps"> <span> <i class="far fa-circle"></i></span> </div> <span class="line"></span>
                                @elseif($var->VACIOS != NULL && $var->FACTURACION == NULL)
                                <div id="terminado" class="D activo"><span class="font-weight-bold"><i class="fa fa-truck"></i></span> </div> <span class="line"></span>
                                @else
                                <div class="activo"> <span><i class="fa fa-check"></i></span> </div> <span class="activo-line"></span>                     
                                @endif

                                @if($var->VACIOS == NULL && $var->FACTURACION == NULL)
                                <div class="steps"> <span> <i class="far fa-circle"></i></span> </div> <span class="line"></span>
                                <div class="steps"> <span class="font-weight-bold">FIN</span> </div>
                                @elseif($var->VACIOS != NULL && $var->FACTURACION == NULL)
                                <div id="terminado" class="D activo"><span class="font-weight-bold"><i class="fa fa-truck"></i></span> </div> <span class="line"></span>
                                <div class="steps"> <span class="font-weight-bold">FIN</span> </div>
                                @else
                                <div class="activo"> <span><i class="fa fa-check"></i></span> </div> <span class="activo-line"></span>                     
                                <div class="activo"> <span class="font-weight-bold">FIN</span> </div>
                                @endif

                                
                            
                              </div>
                          </div>
                    </div>
                </div>
              </div>
            <div class="row d-flex">
                <div class="col-12">
                    <div class="d-flex">
                        <div div class="p-3">
                                
                            <span class="estatus">Apertura</span>
                            <span class="estatus1">Revalidación</span>
                            <span class="estatus2">E-previo</span>
                            <span class="estatus3">Clasif. y Glosa</span>
                            <span class="estatus4">Pago Pedimento</span>
                            <span class="estatus5">Modulación</span>
                            <span class="estatus6">Vacío</span>
                            <span class="estatus7">Facturación</span>
                            <span class="estatus8">Cierre</span>


                            

                         </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
</div>


@endforeach




<script type="text/javascript">
    $(document).ready(function() {	
        function changeColor() {
            if ($('#transito').hasClass('A')){
                $('#transito').removeClass('A');
                $('#transito').addClass('AB');
            }else{
            $('#transito').removeClass('AB');
              $('#transito').addClass('A');
          }

          if ($('#planta').hasClass('B')){
                $('#planta').removeClass('B');
                $('#planta').addClass('BC');
            }else{
            $('#planta').removeClass('BC');
              $('#planta').addClass('B');
          }
          
          if ($('#carga').hasClass('C')){
                $('#carga').removeClass('C');
                $('#carga').addClass('CD');
            }else{
            $('#carga').removeClass('CD');
              $('#carga').addClass('C');
          }

          if ($('#terminado').hasClass('D')){
                $('#terminado').removeClass('D');
                $('#terminado').addClass('DE');
            }else{
            $('#terminado').removeClass('DE');
              $('#terminado').addClass('D');
          }

        }
        setInterval(changeColor, 800);
    });
    </script>