@extends('frontend.layouts.app')

@section('title', app_name())
@section('after-styles')
<style type="text/css">
    body{
        background-color: #1b1813 !important;
        margin: 0;
        font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        text-align: left;
    }
    table thead tr{
        background-color: #494f5b;
        color: #c5cc7c;
    }
    table tbody tr{

    }
    .table td {
       
    }
    table tbody tr td{
       padding-bottom: 11px!important;
        font-size: 23px;
        font-weight: 600;
        border: none !important;
        transform: scale(1, 1.4);
    }
    .table th {
        border-top: 1px solid #dee2e6 !important;
    }

    .odd{
        background-color: #1b1813;
        color: #fff;
    }

    .even{
        background-color: #2b2f38;
        color: #04fa51;
    }
	.even-color {
		color: #00ffe7!important;
	}
    .title-departure{
        font-weight: 700;
        font-size: 30px;
        color: #04f950;
    }
	.title-arrival{
		font-weight: 700;
        font-size: 30px;
        color: #00ffe7;
	}
    .date-info p{
        font-size: 20px;
        color: #b17117;
        font-weight: 700;
        margin-bottom: 9px;
    }
	.first-td{
		padding-left: 15px !important;	
	}
    tr .first{
        /*padding-left: 30px;*/
    }
    .message{
        background-color: #000;
        position: fixed;
        bottom: 0px;
        width: 100%;
        color: #fff;
        padding: 10px 0px;
    }
    .message p{
        font-weight: 600;
        font-size: 35px;
    }
    .boarding, .arrived, .landed, .check-in, .finished, .on{
        color: #08a337;
    }
    .cancelled{
        color: #ff0404;
    }
    .delayed, .delay, .expected{
        color: #ed681b;
    }
    .code{
        font-size: 17px;
        line-height: 35px;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .br-3{
        border-right: 3px solid #fff;
    }
    .table{
        border-bottom: 3px solid #fff;
    }
    .time-frame{
        color: #04f950;
        font-weight: 700;
        margin-top: 17px;
        font-size: 18px;
    }
    .status-image{
        margin: 5px;
        border-radius: 5px;
    }
    .table thead th {
         font-size: 20px; 
         font-weight: 900; 
    }
	.first img, #departureTbody tr td img{
		width: 30px;
    	height: 22px;
    	border-radius: 5px;
    	margin-right: 3px;	
	}
	td.departed {
    	color: #ecff5f;
	}
	td.check-in {
		color: #9effaf;
	}
    .float-right{
        float: right;
    }
    .float-left{
        float: left;
    }
</style>
@endsection
@section('content')
<div class="row" style="margin-right: 0px;">
      <div class="col-sm-12 col-md-6 col-lg-6 pr-0">
        <div class="col-lg-12">
            <div class="float-left d-inline-block">
               <img src="{{asset('public/img/arrival.jpg')}}" alt="Arrival" width="100px" class="status-image"> <span class="title-arrival">ARRIVALS ( आगमन )</span> 
            </div>
        </div>
        <div class="col-lg-12 pl-0 pr-0">
            <table class="table br-3">
                <thead>
                    <tr>
                        <th>Sched.</th>
                        <th>Airlines</th>
                        <th>Flight</th>
                        <th>From</th>
                        <th>ETA</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody id="arrivalTbody">
                    @include('frontend.includes.arrival', $arrivals)
                </tbody>
            </table>
        </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-6 pl-0 pr-0">
        <div class="col-lg-12">
            <div class="float-left d-inline-block">
                <img src="{{asset('public/img/departure.jpg')}}" alt="Departure" width="100px" class="status-image"> <span class="title-departure">DEPARTURES ( प्रस्थान )</span>
            </div>
            <div class="float-right d-inline-block date-info">
                <div class='time-frame'>
                    <div id='time-part'></div>
                    <div id='date-part'></div>
                </div>
            </div>
        </div>
        <div class="col-lg-12 pl-0 pr-0">
            <table class="table">
                <thead>
                    <tr>
                        <th>Sched.</th>
                        <th class="first">Airlines</th>
                        <th>Flight</th>
                        <th>To</th>
                        <th>ETD</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody id="departureTbody">
                    @include('frontend.includes.departure', $departures)
                    
                </tbody>
            </table>
        </div>
    </div>
  
</div>
@if($messages != '')
<div class="row" style="margin-right: 0px;">
    <div class="col-lg-12">
        <div class="message">
            <p class="marquee">{{$messages}}</p>

        </div>
    </div>
</div>
@endif
@endsection