@extends('frontend.layouts.app')

@section('content')

<div class="bg-dark" style="">
    <div class="card-body" id="feedback-bg-info">
        <table class="table table-dark table-striped" id="salidas">
            <thead>
                <tr style="font-size: 22px;text-align: center;">
                    
                    <th style="width: 30%"><span style="color: #03B8FF">EMPRESA</span><br>COMPANY</th>
                    <th data-breakpoints="lg" style="width: 15%"><span style="color: #03B8FF">HORA</span><br>TIME</th>
                    <th style="width: 20%"><span style="color: #03B8FF">ORIGEN</span><br>FROM</th>
                    <th data-breakpoints="lg" style="width: 15%"><span style="color: #03B8FF">PUERTA - CARRIL</span><br>DOOR - LANE</th>                   
                    <th data-breakpoints="lg" style="width: 20%"><span style="color: #03B8FF">ESTADO</span><br>STATE</th>                   
                </tr>
            </thead>
            <tbody id="llegadas">
                
            </tbody>
        </table>       
    </div>
</div>

@endsection

@section('script')
    <script>

        $(document).ready(function() {
            var interval = setInterval(function(){
                $.ajax({
                    type: "GET",
                    url: '{{ route('datos_llegadas') }}',
                    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