@extends('frontend.layouts.app')

@section('content')

<div class="bg-dark" style="">
    <div class="card-body" id="feedback-bg-info" style="padding: 0.0rem;">
        <div class="table-responsive">
            <table class="table table-dark table-striped responsive-table">
                <thead>
                    <tr style="font-size: 20px; text-align: center;">
                        <th style="width: 10%; font-size: 25px;"><span style="color: #03B8FF">EMPRESA</span><br>COMPANY</th>
                        <th style="width: 20%; font-size: 25px;"><span style="color: #03B8FF">HORA</span><br>TIME</th>
                        <th style="width: 25%; font-size: 25px;"><span style="color: #03B8FF;">DESTINO</span><br>DESTINATION</th>
                        <th style="width: 20%; font-size: 25px;"><span style="color: #03B8FF">PUERTA/CARRIL</span><br>DOOR/LANE</th>
                        <th style="width: 25%; font-size: 25px;"><span style="color: #03B8FF">ESTADO</span><br>STATE</th>
                    </tr>
                </thead>
                <tbody id="llegadas">
                
                </tbody>
            </table>  
        </div>    
    </div>
</div>

@endsection

@section('script')
    <script>
      
        $(document).ready(function() {
            var interval = setInterval(function(){
                $.ajax({
                    type: "GET",
                    url: '{{ route('datos_llegadas_vertical') }}',
                    success: function(data){
                        $('#llegadas').html(data);
                    }
                });
            },10000);
        });

        

        //Hora
        var udateTime = function() {
            let currentDate = new Date(),
                hours = currentDate.getHours(),
                minutes = currentDate.getMinutes(), 
                seconds = currentDate.getSeconds(),
                weekDay = currentDate.getDay(), 
                day = 05, 
                month = currentDate.getMonth(), 
                year = currentDate.getFullYear();
        
            const weekDays = [
                'Domingo',
                'Lunes',
                'Martes',
                'Miércoles',
                'Jueves',
                'Viernes',
                'Sabado'
            ];
        
            document.getElementById('weekDay').textContent = weekDays[weekDay];
            document.getElementById('day').textContent = day;
        
            const months = [
                'Enero',
                'Febrero',
                'Marzo',
                'Abril',
                'Mayo',
                'Junio',
                'Julio',
                'Agosto',
                'Septiembre',
                'Octubre',
                'Noviembre',
                'Diciembre'
            ];
        
            document.getElementById('month').textContent = months[month];
            //document.getElementById('year').textContent = year;
        
            document.getElementById('hours').textContent = hours;
        
            if (minutes < 10) {
                minutes = "0" + minutes
            }
        
            if (seconds < 10) {
                seconds = "0" + seconds
            }
        
            document.getElementById('minutes').textContent = minutes;
            document.getElementById('seconds').textContent = seconds;
        };
        
        udateTime();
        
        setInterval(udateTime, 1000);
        //fin hora


        
    </script>
@endsection