@extends('layout.padrao')
@section('title', 'List - ' . (
(Route::currentRouteName() == 'haulingrequest.index') ?
'Loading Dashboard' :
(Route::currentRouteName() == 'haulingrequestclosed.index' ?
'Loaded Processes' :
' Loading Cancelled')
) )

@section('pesquisa')
@endsection

<style>
    /* Ajuste na seta do dropdown de usuario no navbar */
    .upArrowMenu {
        top: -18px !important;
    }

</style>

@section('content')

<div class="col col-lg-12 col-sm-12 col-md-12 folha-interna shadow folha-branca-contornada rounded min-height-auto" style="margin-bottom: 50px;">
    <form method="GET" action="{{ route(Route::currentRouteName(),'loading') }}">
        <div class="formulario" id="formPesquisa" style="display: none;">
            {!! Form::text('tipo', 'confirmation', ['class' => 'form-control', 'hidden'=>'hidden']) !!}
            <div class="row">

                <div class="col-lg-7 col-md-7 col-sm-12 display-flex flex-direction-column-reverse justify-content-center margin-bottom-15">
                    <div class="row">
                        <div class="col-lg-3 col-md-6 col-sm-6 mxWidth50 margin-bottom-15">
                            <label for="dt_loading_start" class="font-weight-normal smallFont">Loading Date - From:</label>
                            <input type="date" min="2019-01-01" max="2080-01-01" class="form-control start_date" name="dt_loading_start">
                        </div>
                        <div class="col-lg-3 col-md-6 col-sm-6 mxWidth50 margin-bottom-15">
                            <label for="dt_loading_end" class="font-weight-normal smallFont">To:</label>
                            <input type="date" min="2019-01-01" max="2080-01-01" class="form-control end_date" name="dt_loading_end">
                        </div>
                        
                        <div class="col-lg-3 col-md-6 col-sm-6 mxWidth50 margin-bottom-15">
                            <label for="dt_start" class="font-weight-normal smallFont">ETD POL - From:</label>
                            <input type="date" min="2019-01-01" max="2080-01-01" class="form-control start_date" name="dt_start">
                        </div>
                        <div class="col-lg-3 col-md-6 col-sm-6 mxWidth50 margin-bottom-15">
                            <label for="dt_end" class="font-weight-normal smallFont">To:</label>
                            <input type="date" min="2019-01-01" max="2080-01-01" class="form-control end_date" name="dt_end">
                        </div>
                    </div>
                </div>

                <div class="col-lg-5 col-md-5 col-sm-12 display-flex flex-direction-column margin-bottom-15">
                    <div class="row">
                        <div class="col-lg-10 col-md-12 col-sm-12 mxWidth100 margin-bottom-15">
                            <label for="loading_request" class="font-weight-normal smallFont">Search by: User Name, Booking Number, Product, Cargoo Reference, SAO</label>
                            <input class="form-control" type="search" name="loading_request">
                        </div>
                        <div class="col-lg-2 col-md-12 col-sm-12 mxWidth100 btnX margin-bottom-15 align-self-end">
                            <button class="btn btn-blue" type="submit" style="width: 100%">Search</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </form> 
    <!-- Botão para recolher a pesquisa -->
    <div class="col-12 text-center" style="margin-top: -16px;">
        <div class="btn" id="dropSearch">
            <div title="Open Search" style="color: #0d6397 !important; font-size: 1.1 rem;">
                <span id="spanSearch" style="margin-bottom:-23px">Search</span> </br><i id="openBtn" class="fas fa-chevron-down"></i> 
            </div>
        </div>
    </div>
</div>

<script>
    $(document).on('click', '#dropSearch', function (click) {
        var formulario = document.getElementById("formPesquisa");
        var seta = document.getElementById("dropSearch");
        var spanSearch = document.getElementById("spanSearch");
        var icone = document.getElementById("openBtn"); 

        if (formulario.style.display == "none") {
            formulario.style.display = "block";
            spanSearch.style.display = "none";
            icone.style.transition = "0.3s";
            icone.style.transform = "rotate(180deg)";
        } else {
            formulario.style.display = "none";
            spanSearch.style.display = "block";
            icone.style.transition = "0.3s";
            icone.style.transform = "rotate(0deg)";
        }
    })
</script>

@include('include.filtro_result')

<small id="total" class="form-text text-info">Open Process: {{$registersCount}}</small>
<small class="form-text text-info">Last Updated: <span
        id="lastUpdated">{{$notification['notificationTime']}}</span></small>


@if($errors->any())
<div class="alert alert-danger">
    @foreach($errors->all() as $error)
    {{ $error }} <br>
    @endforeach
</div>
@endif

{{-- @include('include.html_export_link', [ "action" => 'LoadingRoutineController@index' ]) --}}

<div class="table-responsive" style="overflow:clip; white-space: nowrap; height:950px">
    @include('loadingRoutine.table', ['type' => 'table'])
</div>

<div align="center" class="d-flex justify-content-center">
    {{ $registers->links() }}
</div>

@endsection

@include('bibliotecas.sweetAlert')

<script>
    function checkNotification() {
        let myJsonData = @json($notification);
        myJsonData['notificationTime'] = $('#lastUpdated').text();
        $.ajax({
            url: '/haulingrequest/notification',
            type: "get",
            dataType: 'json',
            data: myJsonData,
            success: function (response) {
                if (response.length > 1) {
                    let buildingFooter = '';
                    let bookingsList = '';
                    for (let k in response) {
                        if (k == 0) continue
                        let urlBooking = "{{route('haulingrequest.index',['loading_request' => 'TABEX'])}}"
                        urlBooking = urlBooking.replace('TABEX', response[k]["booking"]);
                        bookingsList += response[k]["booking"] + ', ';
                        buildingFooter += '<div style="text-align: left;">(' + response[k]["Step"] +
                            ' Updated) - ' +
                            ' Booking: ' + '<a href="' + urlBooking + '">' + response[k]["booking"] +
                            '</a></div>';
                    }
                    Swal.fire({
                        width: 450,
                        icon: 'warning',
                        title: 'The following processes have been updated by another user.',
                        text: '',
                        html: buildingFooter,
                        footer: ''
                    }).then((result) => {
                        if (result.isConfirmed) {
                            location.reload()
                        }
                    })
                    if (document.hidden) {
                        notifyUser("The following processes have been updated: " + bookingsList)
                    }

                }
                let dateStr = response[0]["DateTime"]
                $('#lastUpdated').text(dateStr)
            },
            error: function () {}
        });
    }

    function sendNotification(msg) {
        let notification = new Notification(msg, {
            icon: '{{url("/image/favicon-32x32.png")}}',
            body: 'Tabex needs your attention!',
        });
        notification.onclick = function () {
            window.focus();
        };
    }

    function notifyUser(msg) {
        if (!("Notification" in window)) {
            /* The browser does not support notifications */
        } else if (Notification.permission === "granted") {
            sendNotification(msg)
        } else if (Notification.permission !== "denied") {
            Notification.requestPermission().then(function (permission) {
                if (permission === "granted") {
                    sendNotification(msg)
                }
            });
        }
    }

    window.setInterval(function () {
        checkNotification();
    }, 10000); // 10000 = 10 sec

</script>