@extends('Templates.PlantillaFull', ['PaginaTitulo' => 'Monitor', 'PaginaUrl' => '/perfiles', 'Padre' => '1'])

@php
use App\Models\Pedido;
@endphp

@section('styles')
    <link href="{{ asset('Styles/leaflet.css') }}" rel="stylesheet">

    <link rel="stylesheet" href="{{ asset('Styles/leaflet-routing-machine.css') }}" />

    <link rel="stylesheet" href="{{ asset('Styles/Control.FullScreen.css') }}" />

    <link rel="stylesheet" href="{{ asset('Styles/leaflet.awesome-markers.css') }}" />
@endsection



@section('Contenido')

    <script>
        var Pedidos = [];

        function SetPedido(IdPedido, Estado, Nombre, Repartidor, Restaurante, CRest, CCliente, Cliente, Hora, Cliente) {

            Pedidos.push([IdPedido, Estado, Nombre, Repartidor, Restaurante, CCliente, CRest, Cliente, Hora, Cliente]);

        }
    </script>



    <div class="container my-3">

        <div class="row row-cards row-deck">

            {{-- MAPA --}}
            <div id="Mapa" class="tab-pane active col-12 col-md-7">
                <div class="col-12">
                    <div class="card">
                        <div class="titopts fontfamRub ">
                            <div class="col-12">
                                @if (isset($sucursales))
                            <div class="col-12" style="padding-left: 20px; padding-right: 16px; padding-top: 16px;">
                                <select onchange="MakeRequestData('{{ route('monitor.buscar') }}',
                                '#TableBody', 'POST', 2, '', '', true, false, false, ['Palabra/' + $('#Buscador').val(), 'Filtro/' + $('#OpcionBuscar').val(), 'pediEstado/' + $('#pediEstado').val(), 'sucuId/' + $('#sucuId').val()
                                ])" multiple="multiple" name="sucuId[]" id="sucuId" class="form-control" style="width: 100%;">
                                    @foreach ($sucursales as $item)
                                        <option @if(in_array($item->SUCU_ID, explode(',', session('sucuIdPedido')))) selected @endif value="{{ $item->SUCU_ID }}">{{ $item->SUCU_NOMBRE }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                            </div>
                            <div class="listels d-flex justify-content-between align-items-center">
                                <h5 class="card-title card-h mt-3 bm-3 ms-3">MONITOR DE RUTAS</h5>
                                <div style="margin-right: 16px">
                                    <button id="BtnRepa" type="button" class="btn btn-secondary"
                                    onclick="getCoordenadasRepartidores()"><i
                                        class="fa fa-motorcycle"></i>&nbsp;&nbsp;Ver repartidores</button>
                                <button id="BtnRuta" type="button" class="btn btn-success"
                                    onclick="CambiarBotonRuta('{{ route('pedido-detalle') }}','{{ route('cliente-full-info') }}')"><i
                                        class="fa fa-motorcycle"></i>&nbsp;&nbsp;Ver ruta</button>
                                </div>
                            </div>
                        </div>
                        <hr class="mt-0 mb-1">
                        <div class="dimmer active">
                            <div class="" id="Cargar"></div>
                            <div class="" id="Bloquear">
                                <div id="mapaControl" class="" style="height: 74vh"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- PEDIDOS --}}
            <div class="col-sm-12 col-md-5">
                <div class="card">
                    <div class="titopts fontfamRub">
                        <div class="listels d-flex" style="justify-content: space-between; align-items: center;">
                            <h5 class="card-title card-h mt-3 bm-3 ms-3">COLA DE PEDIDOS</h5>
                            <img onclick="window.open('{{ route('pedidos-view') }}')" {{-- onclick="window.location.href = '{{route('pedidos-view')}}'" --}}
                                style="width: 20px; height: 20px; margin-right: 15px; cursor: pointer;"
                                data-bs-toggle="tooltip" data-bs-placement="top" title="Ver pedidos detalladamente"
                                src="https://img.icons8.com/external-kmg-design-outline-color-kmg-design/32/FFFFFF/external-expand-arrows-kmg-design-outline-color-kmg-design.png" />
                        </div>
                    </div>

                    <hr class="mt-0 mb-1">
                    <div class="dimmer active">
                        <div class="" id="Cargar"></div>
                        <div class="" id="Bloquear">
                            <div style="height: 74vh; overflow-y: auto">
                                <div class="dimmer active">
                                    <div class="" id="Cargar"></div>
                                    <div class="" id="Bloquear">
                                        <div class="table-responsive">
                                            <table class="table table-striped table-vcenter">
                                                <thead>
                                                    <tr>
                                                        <th>Comercio</th>
                                                        <th>Cliente</th>
                                                        <th>Tiempo/Rep.</th>
                                                        <th class="text-center">Acciones</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="contentPager" id="TableBody" link="#TableBody">
                                                    @include('monitor._partials.data')
                                                    <tr>
                                                        <td><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                                                        </td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@section('scripts')
    <script src="{{ asset('Scripts/leaflet.js') }}"></script>

    <script src="{{ asset('Scripts/Control.FullScreen.js') }}"></script>

    <script src="{{ asset('Scripts/leaflet.awesome-markers.js') }}"></script>

    <script src="{{ asset('Scripts/LeafControl.js') }}"></script>

    <script>

setInterval(resfrescador, 60000);

function resfrescador() {
    MakeRequestData('{{ route('monitor.buscar') }}',
        '#TableBody', 'POST', 2, '', '', false, false, false, ['Palabra/' + $('#Buscador').val(), 'Filtro/' + $('#OpcionBuscar').val(), 'pediEstado/' + $('#pediEstado').val(), 'sucuId/' + $('#sucuId').val()
        ]);
}

        $('#sucuId').select2();
        var Mapa = new miMapa();
        Mapa.setInitMap();

        function CambiarBotonRuta(Url1, Url2) {

            var Item = $('#BtnRuta');
            if (Item.hasClass('btn-success')) {
                sendJsonRoute(Url1, Url2);
            } else {
                removeRouteLine();
            }

            Item.toggleClass('btn-success');

            Item.toggleClass('btn-danger');
        }

        JsonMap({!! json_encode($DatosMapa) !!}, '');


        function JsonMap(Datos, Url) {
            var Mapa = new miMapa();
            Mapa.setInitMap();
            Mapa.addTileLayerOSM();
            for (var clave in Datos) {
                if (Datos.hasOwnProperty(clave)) {
                    var res = Datos[clave]["RESS_COORDENADA"].split(", ");
                    if (res[0] && res[1]) {
                        Mapa.addMapIcon(
                            Datos[clave]["RESS_LOGO"],
                            Datos[clave]["RESS_NOMBRE"],
                            res[0],
                            res[1],
                            Datos[clave]["CANTIDAD"],
                            Datos[clave]["Clientes"],
                            Datos[clave]["RESS_ID"],
                            Url
                        );
                    }
                }
            }
        }

        function removeRouteLine() {
            Mapa.removeAllPolylines();
        }

        function sendJsonRoute(Url2, Url3) {
            Mapa = new miMapa();
            Mapa.setInitMap();
            for (var clave in Pedidos) {
                if (Pedidos.hasOwnProperty(clave)) {
                    var res = Pedidos[clave][6].split(", ");
                    var ccliente;
                    try {
                        // let direccion = Pedidos[clave][5].split("|");
                        let direccion = Pedidos[clave][5];
                        ccliente = direccion.split(", ");
                    } catch (error) {
                        ccliente = res;
                    }

                    if (
                        res[0] &&
                        res[1] &&
                        ccliente.length === 2 &&
                        ccliente[1].indexOf("-") >= 0
                    ) {
                        var LatClie = ccliente[0];
                        var LongClie = ccliente[1];
                        let poli = Mapa.addPolilyne(res[0], res[1], LatClie, LongClie, "blue");
                        poli.clase = 'linea';
                        let caja = Mapa.addMapIconPackage(
                            "Images/caja.png",
                            LatClie,
                            LongClie,
                            "PEDIDO",
                            "DETALLE",
                            valorEstado(Pedidos[clave][1]),
                            estiloEstadoBadge(Pedidos[clave][1]),
                            Pedidos[clave][2],
                            Pedidos[clave][3],
                            Pedidos[clave][8],
                            Pedidos[clave][0],
                            Pedidos[clave][7],
                            Url2,
                            Url3,
                            Pedidos[clave][4],
                            Pedidos[clave][9]
                        );
                        caja.clase = 'caja';
                        document.getElementById('clie-' + Pedidos[clave][0]).dataset.idLinea = poli._leaflet_id;
                        document.getElementById('clie-' + Pedidos[clave][0]).dataset.idCaja = caja._leaflet_id;
                    }
                }
            }
        }

        function sendJsonRouteOne(Url2, Url3, pediId, element) {
            if (element.dataset.idLinea) {
                let i = 0;
                for (i in MapaGlobal._layers) {
                    try {
                        if (MapaGlobal._layers[i]._leaflet_id == element.dataset.idCaja) {
                            MapaGlobal.removeLayer(MapaGlobal._layers[i]);
                            continue;
                        }
                        if (MapaGlobal._layers[i]._path != undefined) {

                            if (MapaGlobal._layers[i]._leaflet_id == element.dataset.idLinea) {
                                MapaGlobal.removeLayer(MapaGlobal._layers[i]);
                            }
                            i += 1;

                        }
                    } catch (e) {
                        console.log(e);
                    }
                }
                element.dataset.idLinea = '';
                element.dataset.idCaja = '';
            } else {
                Mapa = new miMapa();
                Mapa.setInitMap();
                for (var clave in Pedidos) {
                    if (Pedidos.hasOwnProperty(clave)) {
                        if (Pedidos[clave][0] != pediId) {
                            continue;
                        }
                        var res = Pedidos[clave][6].split(", ");
                        var ccliente;
                        try {
                            // let direccion = Pedidos[clave][5].split("|");
                            let direccion = Pedidos[clave][5];
                            ccliente = direccion.split(", ");
                        } catch (error) {
                            ccliente = res;
                        }

                        if (
                            res[0] &&
                            res[1] &&
                            ccliente.length === 2 &&
                            ccliente[1].indexOf("-") >= 0
                        ) {
                            var LatClie = ccliente[0];
                            var LongClie = ccliente[1];
                            var poli = Mapa.addPolilyne(res[0], res[1], LatClie, LongClie, "blue");

                            element.dataset.idLinea = poli._leaflet_id;

                            var caja = Mapa.addMapIconPackage(
                                "Images/caja.png",
                                LatClie,
                                LongClie,
                                "PEDIDO",
                                "DETALLE",
                                valorEstado(Pedidos[clave][1]),
                                estiloEstadoBadge(Pedidos[clave][1]),
                                Pedidos[clave][2],
                                Pedidos[clave][3],
                                Pedidos[clave][8],
                                Pedidos[clave][0],
                                Pedidos[clave][7],
                                Url2,
                                Url3,
                                Pedidos[clave][4],
                                Pedidos[clave][9]
                            );

                            element.dataset.idCaja = caja._leaflet_id;
                        }
                    }
                }
            }
        }

        function removePolyline(coordenadas) {


        }

        function localizarComercio(coordenadas) {

            coordenadas = coordenadas.split(',');

            for (let i = 0; i < coordenadas.length; i++) {
                coordenadas[i] = parseFloat(coordenadas[i]);
            }
            MapaGlobal.setView(coordenadas, 17, {
                "animate": true,
                "pan": {
                    "duration": 2
                }
            });

            MapaGlobal.closePopup();

            setTimeout(() => {
                MapaGlobal.eachLayer(layer => {
                    if (layer._latlng != undefined) {
                        if (layer._latlng.lat == coordenadas[0] && layer._latlng.lng == coordenadas[1]) {
                            layer.fire('click', {
                                latlng: layer._latlng
                            });
                        }
                    }
                });
            }, 1700);
        }

        function getCoordenadasRepartidores() {
            $.ajax({
                type: "GET",
                url: "{{ route('monitor.archivoCoordenadas') }}",
                dataType: "JSON",
                beforeSend: function() {
                    LoadingAlert();
                },
                success: function(response) {
                    console.log(response);

                    // let ultimasCoordenadas = null;

                    response.forEach(element => {
                        // ultimasCoordenadas = element.coordenadas[element.coordenadas.length - 1];
                        Mapa.addMarkerHTML('https://img.icons8.com/external-flaticons-flat-flat-icons/64/null/external-motorcycle-extreme-sports-flaticons-flat-flat-icons.png',
                        element.DELICO_LATITUD, element.DELICO_LONGITUD,
                            '<span><i class="fa fa-motorcycle" style="color: blue;"></i>&nbsp;' +
                            element.nombre + '</span>');

                            MapaGlobal.fire('click', {
                                latlng: element.DELICO_LATITUD+', '+element.DELICO_LONGITUD
                            });
                    });
                },
                error: function(error) {
                    console.log(error);
                    ErrorRequest(error);
                },
                complete: function() {
                    $.unblockUI();
                }
            });
        }
    </script>
@endsection



@endsection