@extends("flight-com.layouts.layout")

@section("css")

    {{--<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">--}}
    {{--<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>--}}
    {{--<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>--}}
    <!------ Include the above in your HEAD tag ---------->

    <link href="{{ asset("css/dropzone.min.css") }}" rel="stylesheet">
    <link href="{{ asset("assets/flight-com/css/main.css?60") }}" rel="stylesheet">

    <style>
        .dataTables_filter > label {
            width: 100%;
        }
        .dataTables_filter > label > input[type=search] {
            border-radius: 0;
            width: calc(100% - 34px);
        }
        .input-group-addon:first-child{
             float: left;
             height: 34px;
             width: 34px;
             margin-top: 0;
             padding-top: 8px;
         }
        .dataTables_length, .dt-buttons, .dataTables_paginate{
            display: none;
        }
        .label {
            font-size: 10px !important;
        }
        #flight_subtitle > span#flt_dep_arr_span{
            font-size: 14px !important;
        }
        .w-30{
            width: 30% !important;
        }
        .w-20{
            width: 20% !important;
        }

    </style>

@endsection

@section("content")

<section id="widget-grid" class="">

{{--    @include("flight-com.layouts.picture-upload")--}}
    @include("flight-com.layouts.dropzone-upload")

    <div class="col-sm-12" style="padding: 20px;">

        <div style="float: left; width: 510px; padding: 0; height: 670px; overflow: auto;">

            {{--<button data-toggle="modal" data-target="#picture_notes"></button>--}}
            {{--<button id="notify">Notify me!</button>--}}

            <div class="">
                {!! Form::open(['class' => 'form-inline', 'method' => 'GET', 'id' => 'formOPS', 'url' => url("flight-com")]) !!}
                    <div class="form-group">
{{--                    <label>@lang("content.date")</label>--}}
                        <button name="submit" value="2" type="submit" class="btn btn-primary">{{ LEFT_ARROW }}</button>
                        <input name="date" id="date" type="text" value="{{ $currentDate }}" class ="form-control dateFrom myinput" style="width: 120px;" />
                        <button name="submit" value="3" type="submit" class="btn btn-primary">{{ RIGHT_ARROW }}</button>
                    </div>

                    <div class="btn-group">
                        <button name="submit" value="1" type="submit" class="btn btn-primary">@lang("content.submit")</button>
                        <a href="{{ url("flight-com") }}" class="btn btn-danger">@lang("content.today")</a>
                        {!! Form::hidden("flight_id", null, ["id" => "refresh_flight_id"]) !!}
                        <button name="refresh" value="1" type="submit" class="btn btn-warning">@lang("content.refresh")</button>
                    </div>
                {!! Form::close() !!}
            </div>

            <ul id="tabFlights" class="nav nav-tabs bordered" style="margin-top: 15px;">
                @if (!$airlineModule)
                    <li>
                        <a href="#tabFltArrivals" role="tab" data-toggle="tab">@lang("content.arrivals")</a>
                    </li>

                    <li class="active">
                        <a href="#tabFltDepartures" role="tab" data-toggle="tab">@lang("content.departures")</a>
                    </li>
                @endif

                <li class="{{ $airlineModule ? "active" : "" }}">
                    <a href="#tabFltAll" role="tab" data-toggle="tab">@lang("content.all")</a>
                </li>

                <li class="">
                    <a href="#tabFltCancelled" role="tab" data-toggle="tab">@lang("content.cancelled")</a>
                </li>

                <li class="" style="float: right;">
                    <a target="_blank" style="background: #ffe0e0" href="{{ url("flight-watch") }}">
                        @lang("modules.flight_watch")
                    </a>
                </li>
            </ul>

            <div id="" class="tab-content padding-10 background-white">
                @if (!$airlineModule)
                    <div class="tab-pane" id="tabFltArrivals">
                        @include("flight-com.layouts.flights-table", ["data" => $flightsData[ARRIVAL], "headFltType" => ARRIVAL])
                    </div>

                    <div class="tab-pane active" id="tabFltDepartures">
                        @include("flight-com.layouts.flights-table", ["data" => $flightsData[DEPARTURE], "headFltType" => DEPARTURE])
                    </div>
                @endif

                <div class="tab-pane {{ $airlineModule ? "active" : "" }}" id="tabFltAll">
                    @include("flight-com.layouts.flights-table", ["data" => $flightsData[ALL], "headFltType" => ALL])
                </div>

                <div class="tab-pane" id="tabFltCancelled">
                    @include("flight-com.layouts.flights-table", ["data" => $flightsData[CANCELLED], "headFltType" => CANCELLED])
                </div>
            </div>

        </div>

        <div style="float:right; width: calc(100% - 520px);height: 650px; ">

            {{--<div style="display: inline-block; padding: 10px;">--}}
                {{--<div style="float: left;">--}}
                    {{--<a data-toggle="collapse" class="btn btn-success" href="#flightsTab" role="button" aria-expanded="false" aria-controls="flightsTab">Show Flights</a>--}}
                {{--</div>--}}
            {{--</div>--}}

            {{--<div class="collapse" id="flightsTab">--}}

            {{--</div>--}}

            <div class="top_menu" id="top_menu" data-flight_id="">
                <div>
                    <div style="display: inline-block; width: calc(100% - 130px);">
                        <div style="width: 100%; margin-left: 10px;">
                            <span id="flight_title" class="title">Please select a flight</span>
                            <span id="gate_info" class="gate-info"></span>
                            <span id="parent_flight" class="" style="float:right; margin-top: 3px; margin-right: 20px;"></span>
                            <span id="flight_tracker" class=""></span>
                            <span id="flight_radar" class="" style="float: right;"></span>
                            {{--<a class="module" target="_blank" href="{{ url("flight-watch") }}" style="margin-left: 10px;">@lang("modules.flight_watch")</a>--}}
                        </div>
                        <span id="flight_subtitle" class="sub-title"></span>
                    </div>

                    <div class="countdown-container" style="width: 120px;">
                        <div id="countdown_timer" class="countdown styled" style="display: none;"></div>
                    </div>
                </div>
            </div>

            <ul id="main-tabs" class="nav nav-tabs bordered" style="margin: 0; background: #fff; border-right: 1px solid #dddddd;">
                <li class="active">
                    <a href="#tabChat" id="tabChatAnchor" role="tab" data-toggle="tab">CHAT</a>
                </li>
                <li class="">
                    <a id="trc_tab" href="#trc" role="tab" data-toggle="tab">TRC</a>
                </li>
                <li>
                    <a id="ckn_tab" href="#fltPaxTab" role="tab" data-toggle="tab">CKN</a>
                </li>
                <li>
                    <a id="arr_tab" href="#arr" role="tab" data-toggle="tab">ARR</a>
                </li>
                <li>
                    <a id="pic_tab" href="#fltPictures" role="tab" data-toggle="tab">PIC</a>
                </li>
                <li class="">
                    <a id="mvt_tab" href="#mvt" role="tab" data-toggle="tab">MVT</a>
                </li>
                <li class="">
                    <a id="ldm_tab" href="#ldm" role="tab" data-toggle="tab">LDM</a>
                </li>
                <li class="">
                    <a id="lir_tab" href="#lir" role="tab" data-toggle="tab">LIR</a>
                </li>
                <li class="">
                    <a id="lds_tab" href="#lds" role="tab" data-toggle="tab">LDS</a>
                </li>
                <li class="">
                    <a id="not_tab" href="#not" role="tab" data-toggle="tab">NOTOC</a>
                </li>
                <li class="">
                    <a id="cpm_tab" href="#cpm" role="tab" data-toggle="tab">CPM</a>
                </li>
                <li class="">
                    <a id="cal_tab" href="#cal" role="tab" data-toggle="tab">PAL/CAL</a>
                </li>
                <li class="">
                    <a id="psm_tab" href="#psm" role="tab" data-toggle="tab">PSM</a>
                </li>
                <li class="">
                    <a id="ptm_tab" href="#ptm" role="tab" data-toggle="tab">PTM</a>
                </li>

                @if ($staffViewPermission)
                    <li class="">
                        <a id="sod_tab" href="#sod" role="tab" data-toggle="tab">SOD</a>
                    </li>
                @endif
            </ul>


            <div id="" class="tab-content padding-10 background-white">

                <div class="tab-pane active" id="tabChat">
                    @include("flight-com.layouts.chat-tab")
                </div>

                <div class="tab-pane" id="trc" style="min-height: 600px">
                    @include("flight-com.layouts.trc-tab")
                </div>

                <div class="tab-pane" id="fltPaxTab" style="min-height: 600px">
                    @include("flight-com.layouts.ckn-tab")
                </div>

                <div class="tab-pane" id="arr" style="min-height: 600px">
                    @include("flight-com.layouts.arr-tab")
                </div>

                <div class="tab-pane" id="fltPictures" style="min-height: 600px">
                    <div>
                        <div id="flt_pictures_container"></div>
                    </div>
                </div>

                <div class="tab-pane" id="mvt" style="min-height: 500px">
                    @include("flight.mvt_tab", ["maxHeight" => "500px", "minHeight" => "500px"])
                </div>

                <div class="tab-pane" id="ldm" style="min-height: 500px">
                    @include("flight.message_tab", ["type" => LDM, "maxHeight" => "500px", "minHeight" => "500px"])
                </div>

                <div class="tab-pane" id="lir" style="min-height: 500px">
                    @include("flight.message_tab", ["type" => LIR, "maxHeight" => "500px", "minHeight" => "500px"])
                </div>

                <div class="tab-pane" id="lds" style="min-height: 500px">
                    @include("flight.message_tab", ["type" => LDS, "maxHeight" => "500px", "minHeight" => "500px"])
                </div>

                <div class="tab-pane" id="not" style="min-height: 500px">
                    @include("flight.message_tab", ["type" => NOT, "maxHeight" => "500px", "minHeight" => "500px"])
                </div>

                <div class="tab-pane" id="cpm" style="min-height: 500px">
                    @include("flight.message_tab", ["type" => CPM, "maxHeight" => "500px", "minHeight" => "500px"])
                </div>

                <div class="tab-pane" id="cal" style="min-height: 500px">
                    @include("flight.message_tab", ["type" => CAL, "maxHeight" => "500px", "minHeight" => "500px"])
                </div>

                <div class="tab-pane" id="psm" style="min-height: 500px">
                    @include("flight.message_tab", ["type" => PSM, "maxHeight" => "500px", "minHeight" => "500px"])
                </div>

                <div class="tab-pane" id="ptm" style="min-height: 500px">
                    @include("flight.message_tab", ["type" => PTM, "maxHeight" => "500px", "minHeight" => "500px"])
                </div>

                @if ($staffViewPermission)
                    <div class="tab-pane" id="sod" style="min-height: 500px">
                        @include("flight.staff_tab", ["maxHeight" => "500px", "minHeight" => "500px"])
                    </div>
                @endif
            </div>

            <div class="message_template_no_more_messages">
                <li class="message">
                    <div class="col-sm-12 text-center">
                        <div class='label label-danger' style="font-size: 14px !important;">No more messages</div>
                    </div>
                </li>
            </div>

            <div class="message_template">
                <li class="message">
                    <div class="avatar"></div>
                    <div class="text_wrapper">
                        <div class="text"></div>
                    </div>
                </li>
            </div>

            <div class="message_template_same">
                <li class="message">
                    <div class="text_wrapper same_user">
                        <div class="text"></div>
                    </div>
                </li>
            </div>

            @include("template.modal-loading", ["text" => "Please wait. Messages are being loaded"])

        </div>

    </div>

</section>

@endsection

@section("js")
    <script src="{{ asset("/assets/js/jquery.countdown.min.js") }}"></script>

    <script src="{{ asset("/smart/js/plugin/datatables-new/jquery.dataTables.min.js") }}"></script>
    <script src="{{ asset("/smart/js/plugin/datatables-new/buttons.html5.min.js") }}"></script>
    <script src="{{ asset("/smart/js/plugin/datatables-new/dataTables.buttons.min.js") }}"></script>
    <script src="{{ asset("/smart/js/plugin/datatables-new/buttons.bootstrap.min.js") }}"></script>
    {{--<script src="{{ asset("/smart/js/plugin/datatables-new/jszip.min.js") }}"></script>--}}
    {{--<script src="{{ asset("/smart/js/plugin/datatables-new/pdfmake.min.js") }}"></script>--}}
    {{--<script src="{{ asset("/smart/js/plugin/datatables-new/vfs_fonts.js") }}"></script>--}}
    <script src="{{ asset("/smart/js/plugin/datatables-new/buttons.print.min.js") }}"></script>
    <script src="{{ asset("/smart/js/plugin/datatables-new/buttons.colVis.min.js") }}"></script>
    <script src="{{ asset("/smart/js/plugin/datatables/dataTables.bootstrap.min.js") }}"></script>
    <script src="{{ asset("/assets/js/vendor/moment.min.js") }}"></script>
{{--    <script src="{{ asset("/assets/js/aes.js") }}"></script>--}}
    <script src="{{ asset("/assets/js/cryptojs/cryptojs-aes.min.js") }}"></script>
    <script src="{{ asset("/assets/js/cryptojs/cryptojs-aes-format.js") }}"></script>
    <script src="{{ asset("/assets/flight-com/js/push.min.js") }}"></script>
    <script src="{{ asset("/assets/flight-com/js/notify.min.js") }}"></script>


    <script src="{{ asset("/js/dropzone.js") }}"></script>

    <script src="{{ asset("/smart/js/helpers.js?7") }}"></script>
    <script src="{{ asset("/assets/flight-com/js/general.js?4") }}"></script>
    <script src="{{ asset("/assets/js/vendor/jquery.datetimepicker.js") }}"></script>

    <script type="text/javascript">

        var baseUrl = "{{ url('/') }}",
            baseHomeUrl = "{{ route("homepage")."#".url('/') }}",
            userID = {{ $user->id }},
            sprAdm = {{ $sprAdm }},
            preK = "{{ PRE_KEY }}",
            postK = "{{ POST_KEY }}",
            isMobile = {{ $isMobile }},
            lastMessages = [],
            selectedFlightID = {{ $flight_id ? $flight_id : 0 }},
            airlineByFlight = {!! json_encode($airlineByFlight) !!},
            aircraftByAirline = {!! json_encode($aircraftByAirline) !!},
            keys = {!! json_encode($keysArray) !!},
            flightIDs = {!! json_encode($flightIDs) !!},
            messageDeletion = {{ $messageDeletion }},
            envProduction = {!! env(APP_ENV) == PRODUCTION ? 1 : 0 !!};

        var archivedData = {{ $archivedData ? 1 : 0 }},
            currentDate = "{{ $currentDate }}",
            prevDate = "{{ date("Y-m-d", strtotime("-1 days", strtotime($currentDate))) }}",
            nextDate = "{{ date("Y-m-d", strtotime("+1 days", strtotime($currentDate))) }}";

        ApplyTableFilter(".table");

        Apply_Multiselect();

    </script>

    <script src="{{ asset("/assets/flight-com/js/main.js?153") }}"></script>

@endsection