@extends('layout')

@section('cssUrl')
    <link rel="stylesheet" href="{{ asset('assets/plugins/morrisjs/morris.css') }}" />
    <!-- Colorpicker Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.css') }}" />
    <!-- Multi Select Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/multi-select/css/multi-select.css') }}">
    <!-- Bootstrap Spinner Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/jquery-spinner/css/bootstrap-spinner.css') }}">
    <!-- Bootstrap Tagsinput Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css') }}">
    <!-- Bootstrap Select Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-select/css/bootstrap-select.css') }}" />
    <!-- noUISlider Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/nouislider/nouislider.min.css') }}" />
    <!-- Select2 -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/select2/select2.css') }}" />
@endsection

@section('csss')

@endsection

@php
    $title = 'Monitoramento';
@endphp

@section('title')
    {{ $title }}
@endsection

@section('conteudo')
    <section class="content">
        <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
        <div class="body_scroll">
            <div class="row">
                @if (Session::get('pessoa') === 'HUDSON')
                    <div class="col-lg-12">
                        <div class="alert alert-success">
                            <b>Clientes Online</b><div id="clientes_online"></div>
                        </div>
                    </div>
                @endif
                <div class="col-lg-12">
                    <div class="alert alert-danger">
                        <b>Clientes Offline</b><div id="clientes_offline"></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <button class="btn btn-primary btn-icon mobile_menu" type="button"><i
                        class="zmdi zmdi-sort-amount-desc"></i></button>
                   <div id="googleMap" style="padding-top: 55%; max-height: 80%"></div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scriptUrl')

    <script src="{{ asset('assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js') }}"></script>
    <!-- Bootstrap Colorpicker Js -->
    <script src="{{ asset('assets/plugins/jquery-inputmask/jquery.inputmask.bundle.js') }}"></script>
    <!-- Input Mask Plugin Js -->
    <script src="{{ asset('assets/plugins/multi-select/js/jquery.multi-select.js') }}"></script>
    <!-- Multi Select Plugin Js -->
    <script src="{{ asset('assets/plugins/jquery-spinner/js/jquery.spinner.js') }}"></script>
    <!-- Jquery Spinner Plugin Js -->
    <script src="{{ asset('assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js') }}"></script>
    <!-- Bootstrap Tags Input Plugin Js -->
    <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
    <!-- Select2 Js -->
    <script src="{{ asset('assets/js/pages/forms/advanced-form-elements.js') }}"></script>

    <script src="{{ asset('assets/js/formjs.js') }}"></script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCNk4ln461ZYy5f8ux2uDsgNw2-UkrtMrs&callback=myMap&libraries=marker"></script>

@endsection

@section('scripts')
<script>
    let cliente         = [];
    let map;
    let marker          = [];
    let infoMarkerMsn   = '';
    let info            = [];
    let contProcesso    = [];
    let construcaoMap   = true;
    let tDesconexao     = [];
    let contClientesOn  = 0;
    let contClientesOff = 0;

    var mStyles = [{
        featureType: "poi",
        elementType: "labels",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "transit.station.airport",
        elementType: "geometry",
        stylers: [{
            visibility: "off"
        }]
    }];

    $(document).ready(function(){
        let varEndereco = { lat : parseFloat('{{ $configuracao->lat_provedor_configuracao }}'), lng: parseFloat('{{ $configuracao->lng_provedor_configuracao }}')};
        construcaoMap = true;
        construtoMap(varEndereco, -1);
        verConexao();
        setInterval(function(){ verConexao() }, {{ $configuracao->upmap_provedor_configuracao }});
    });

    function construtoMap(latLng, index){
        cliente[index] = latLng;
        if (construcaoMap){
            construcaoMap = false;
            myMap();
        }
    }

    function verConexao(){
        $.ajax({
            type: "POST",
            url: "{{ route('mikrotik.monitoramento') }}",
            headers: {'X-CSRF-TOKEN': $('#_token').val()},
            data: {},
            dataType: "json",
            success: function (data) {
                console.log(data.data.length);
                if (data.code == 1000){
                    let arryData    = data.data;
                    let construtorLatLng;
                    contClientesOff = 0;
                    contClientesOn  = 0;
                    $.each(arryData, function (indexInArray, valueOfElement) {
                        if (valueOfElement.connect) {
                            infoMarkerMsn =
                                'Cliente.: ' + valueOfElement.idcliente + '-' + valueOfElement.cliente + '\n' +
                                'IP: ' + valueOfElement.address + '\n' +
                                'Tempo: ' + valueOfElement.uptime;

                        } else {
                            infoMarkerMsn =
                                'Cliente.: ' + valueOfElement.idcliente + '-' + valueOfElement.cliente + '<br />' +
                                'Desconectado deste: ' + valueOfElement.uptime;
                        }
                        // infoMarkerMsn  = 'Cliente.: ' + valueOfElement.idcliente + '-' + valueOfElement.cliente + '\n'
                        //     + 'IP: ' + valueOfElement.address + '\n'
                        //     + 'Tempo: ' + valueOfElement.uptime;
                        construtorLatLng = { lat: valueOfElement.latitude, lng: valueOfElement.longitude };
                        construtoMap(construtorLatLng, indexInArray);

                        if (valueOfElement.connect){
                            infoMap(true, valueOfElement.cliente, infoMarkerMsn, indexInArray);
                            contClientesOn  += 1;
                        } else {
                            infoMap(false, valueOfElement.cliente, infoMarkerMsn, indexInArray);
                            contClientesOff += 1;
                        }
                    });
                    $('#clientes_online').html('Total de cliente conectados: ' + contClientesOn);
                    $('#clientes_offline').html('Total de cliente desconectados: ' + contClientesOff);
                }
            }
        });
    }

    var styledMap = new google.maps.StyledMapType(mStyles, {name: "Monitoramento"});

    function myMap() {
        map = new google.maps.Map(document.getElementById("googleMap"), {
            zoom: {{ $configuracao->zoommap_provedor_configuracao }},
            center: cliente[-1],
            mapTypeId: 'terrain', // google.maps.MapTypeId.terrain
            mapTypeControlOptions: {
                    mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'custom_map_style']
            }
            //StyledMapType: mStyles
        });
        map.mapTypes.set('custom_map_style', styledMap);
        map.setMapTypeId('custom_map_style');
    }


    function infoMap(conexao, nomeCliente, informar, index) {


        if (contProcesso[index]) {
            marker[index].setMap(null);
            if (tDesconexao[index]){
                info[index].setMap(null);
                info[index].open(map, null);
            }

        }
        if ((!conexao) && (!tDesconexao[index])) {
            tDesconexao[index] = true;
        }

        const svgOnline = {
            path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
            fillColor: "green",
            fillOpacity: 0.6,
            strokeWeight: 0,
            rotation: 0,
            scale: 2,
            anchor: new google.maps.Point(15, 30),
        };

        const svgOffline = {
            path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
            fillColor: "red",
            fillOpacity: 0.6,
            strokeWeight: 0,
            rotation: 0,
            scale: 2,
            anchor: new google.maps.Point(15, 30),
        };

        let svgType = svgOffline;
        if (conexao) {
            svgType = svgOnline;
        }

        marker[index] = new google.maps.Marker({
          position: cliente[index],
          icon: svgType,
          title: informar,
          map: map
        });

        marker[index].addListener('click', function() {
            infowindow.open(marker[index].get("map"), informar);
        });

        if (!conexao) {
            if (tDesconexao[index]){
                info[index] = new google.maps.InfoWindow({
                    content: informar
                });
                info[index].open(map, marker[index]);
                tDesconexao[index]   = false;
            }
        } else {
            tDesconexao[index]   = false;
        }

        contProcesso[index] = true;
    }
</script>
@endsection