@extends('layouts.main')
@push('styles')
<!-- BEGIN DataTables-->
<link rel="stylesheet" type="text/css" href="{{asset('datatables/datatables.min.css')}}"/>
<!-- END DataTables-->
@endpush
@section('content')
<div class="card">
    <div class="card-block">
        <div class="col-md-12">
            <div class="panel panel-default">   
                <div class="cc-selector panel-body">
                    <div class="panel-heading">
                            <h1>
                                {{ __('strings.bus_addresses') }}     
                            </h1>
                    </div>
                    
                    <hr>
                
                    <div class="col-md-6">
                        
                        <div class="col-md-12 text-right">     
                            
                            <a href="{{route('bus_address_import_excel_view')}}" class="btn btn-rounded btn-primary mb-3"> {{__('strings.import_from_excel')}}</a>
                                                                          
                                    <button type="button" class="btn btn-rounded btn-danger mb-3" onclick="clearBusAddress()">
                                    <i class="fa fa-trash"></i>
                                        Eliminar Todos
                                    </button>                                
                                
                                
                        </div>
                        
                        
                        <div class="table-responsive">
                            <table id="bus-address-table" class="table hover mb-0">
                                <thead class="thead-inverse">
                                    <tr>
                                        <th>Id</th>	   
                                        <th>Alias</th>
                                        <th>{{__('strings.address')}}</th>
                                        <th>Mapa</th>
                                        <th>Lat</th>
                                        <th>Lng</th>
                                        <th>Total</th>
                                        <th>{{__('strings.created_at')}}</th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h4>{{__('strings.new_record')}}</h4>
                        <form method="post" action="{{Route('post_bus_address')}}">
                            {{ csrf_field() }}
                            <div id="address" class="col-md-12 mb-4"></div>
                                <div class="form-group">
                                    <label for="alias" class="form-control-label" >Alias</label>
                                    <input id="alias" class="form-control" name="alias" required maxlength="255">
                                </div>

                                <div class="form-group">
                                    <label for="total" class="form-control-label" >Total</label>
                                    <input type="number" id="total" class="form-control" value="0" name="total" required>
                                </div>
                            <hr>
                            <input type="submit" class="btn btn-primary" value="{{__('strings.save')}}"/>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-block">
        <div class="col-md-12">
            <div class="panel panel-default">   
                <div class="panel-heading">
                    <div class="col-md-12">
                        <div class="col-md-8">                                
                            <h1>
                                MapView
                            </h1>
                            <code>{{__('strings.warning_zone_statement')}}</code>
                        </div>
                    </div>
                </div>
                    
                <div class="cc-selector panel-body">
                    <div class="col-md-12 mt-4">
                    <div class="panel-body" style="width: 100%; height: 440px;">                    
                        <div id="map" style="height: 100%;"></div>                              
                    </div>   
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')

<!-- BEGIN DataTables-->
<script src="{{asset('datatables/datatables.min_1.js')}}" type="text/javascript"></script>
<!-- END DataTables-->
<script src="{{asset('js/red_google.js')}}" type="text/javascript"></script>
<script src='{{asset('js/L.Control.Locate.min.js')}}'></script>

<script type="text/javascript">
    
    var table;
    
    var table;
    var map;
    var warningZonesJson;

    let myBusStopLayer;
    let clusteredBusStopLayer;

    // start latitude and longitude.
    var startLat = "{{Auth::user()->START_LAT}}" === undefined ? 22.148757 : parseFloat("{{Auth::user()->START_LAT}}");
    var startLng = "{{Auth::user()->START_LNG}}" === undefined ? -100.991894 : parseFloat("{{Auth::user()->START_LNG}}");
    var title = "{{Auth::user()->COMPANY_NAME}}";

    // start marker definition
    var start_marker = L.icon({
        iconUrl: '{{asset('images/start_pin.png')}}',
        iconSize:     [26, 43], // size of the icon
        iconAnchor:   [13, 43], // point of the icon which will correspond to marker's location
        popupAnchor:  [0, -24] // point from which the popup should open relative to the iconAnchor
    });

     // green marker definition
    var greenMarker = L.icon({
        iconUrl: '{{asset('images/marker_green.png')}}',
        iconSize:     [26, 43], // size of the icon
        iconAnchor:   [13, 43], // point of the icon which will correspond to marker's location
        popupAnchor:  [0, -24] // point from which the popup should open relative to the iconAnchor
    });

    $("#address").redGoogle({
        show_map: true,
        on_paste: function(data) {
            $("#alias").val(data.address);
        }
    });
    
    $(document).ready(function() {

        //setting language for moment.js
        moment.locale('es');

        //initialize datetable
        table = $('#bus-address-table').DataTable({
                                responsive: false,
                                paging: false,	
                                searching: true,
                                serverSide: false,
                                ordering: false,
                                scrollY: '50vh',
                                ajax: {
                                    url: "{{route('bus_addresses_datatable')}}",
                                    type: "POST",
                                    data: {
                                        user_token: "{{Auth::user()->SECURE_TOKEN}}"
                                    }
                                },
                                columns: [
                                        { data: 'id'},
                                        { data: 'alias', defaultContent:"---"},
                                        { data: 'address', defaultContent:"---"},
                                        { 
                                            data: 'id', 
                                            defaultContent: '---', 
                                            render:function(data, type, row){
                                                return "<a href='https://www.google.com/maps/search/?api=1&query=" + row.lat + "," + row.lng +"' target='_black'>https://www.google.com/maps/search/?api=1&query=" + row.lat + "," + row.lng +"'</a>"
                                            }
                                        },
                                        { data: 'lat', defaultContent:"---", visible:false},
                                        { data: 'lng', defaultContent:"---", visible:false},
                                        { data: 'total', defaultContent:"---", visible:false},
                                        { data: 'created_at', render: function(data, type, row, meta) {
                                                return moment.utc(data).local().format('YYYY-MM-DD');
                                            }
                                        },
                                        { data: 'delete', defaultContent: "---"},
                                        { data: 'idd', defaultContent:  "<button class='btn btn-sm'>Mapa</button>"}
                                ],
                                dom: 'Bfrtip',
                                buttons: [
                                'copy', 'excel'
                                ],
                                "language" : {
                                        url: "{!! asset('datatables/languages/spanish.json') !!}"
                                },
                                "initComplete": function(settings, json) {
                                    initMap()
                                }
                });
    

                $('#bus-address-table tbody').on( 'click', 'button', function () {
                    var data = table.row( $(this).parents('tr') ).data();

                    if(map) {
                        window.scrollTo(0,document.body.scrollHeight);
                        setTimeout(() => {
                            map.panTo(new L.LatLng(data.lat, data.lng));
                            //map.setZoom(16);
                            L.marker([data.lat, data.lng]).addTo(map).bindTooltip("<strong>Alias </strong> " + data.alias + "<br>"
                                + "<strong>{{__('strings.address')}} </strong> " + data.address, {direction:'top', offset:[0,-12], permanent: true});
                        }, 500);
                    }
                } );
    });

    
    function deleteBusAddress(busId) {        
        bootbox.prompt({
            title: "Nip",
            inputType: 'password',
            size: 'small',
            closeButton: false,
            callback: function (nip) { 
                if(nip) { 
                    $.post("{{route('delete_bus_address')}}", {
                        user_token: '{{Auth::user()->SECURE_TOKEN}}',
                        bus_address_id: busId,
                        nip: nip
                    }, function(response){
                        table.ajax.reload();
                    })
                    .fail(function(err){
                        console.log(err);
                        if(err.responseJSON) {
                            $.alert(err.responseJSON.message);
                        } else {
                            $.alert("{{__('strings.error_message')}}");  
                        }
                    });
                }
            }
        });
    }

    function initMap() {
        // initialize map
        map = new L.map('map',{preferCanvas:true, attributionControl: false});
        // load mapbox tiles
        L.tileLayer("{{config('app.map_style')}}", {
            maxZoom: 18,
        }).addTo(map);
        var baseLayers = {
            "Klokantech Basic": L.tileLayer("{{config('app.map_style')}}",{ maxZoom: 18 }),
            "OSM Bright": L.tileLayer("{{config('app.map_trafic_style')}}",{ maxZoom: 18 }),
        };       
        L.control.layers(baseLayers).addTo(map);
        
        // add controls to map
        L.control.fullscreen().addTo(map);  
        // location control
        L.control.locate({
                locateOptions: {
                maxZoom: 16,
                enableHighAccuracy: true,
            },
            showPopup: false,
            strings: {
                title: "{{__('strings.go_to_my_position')}}"
            }
        }).addTo(map);
        // full screen support to map view
        $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
            map.invalidateSize();
        });
        $(window).resize(function () {
            map.invalidateSize();
        });

        map.on('load', function(){
             L.marker([startLat,startLng], {icon: start_marker})    
            .bindTooltip(title)
            .on('click', function(e){
                map.setView(e.latlng, map.zoom);
            })
            .addTo(map);
            addBusLayer();
            makeWarningZoneRequest();
        });




        myBusStopLayer = L.layerGroup();
        clusteredBusStopLayer =  L.layerGroup();
        // when layerGroup is added to map, then is visible by default
        
        myBusStopLayer.addTo(map);
        clusteredBusStopLayer.addTo(map);
        // checkbox over map to show / hide layers
        let overlays = {
            "{{__("strings.my_bus_stop")}}"  : myBusStopLayer,
            "{{__("strings.clustered_bus_stop")}}"  : clusteredBusStopLayer
        };
        L.control.layers(null, overlays, {collapsed: false,  hideSingleBase: true}).addTo(map);


        // initialize map view
        map.setView([startLat,startLng], 14);
    }

    function addBusLayer() {
        let features = [];
        let data = table.rows().data();

        $.each(data, function(key, item){
            features.push({
                        type:'Point', 
                        coordinates: [item.lng, item.lat],
                        properties : item,
                        title: item.alias,
                        popupContent: "<strong>Alias </strong> " + item.alias + "<br>"
                                + "<strong>{{__('strings.address')}} </strong> " + item.address + "<br>"
                                + "<strong>Total </strong> " + item.total
            });
        });
        
        L.geoJson({type:'FeatureCollection', 'features': features}, {
                style: {
                    "color": "#ffffff",
                    "weight": 3
                },
                pointToLayer: function (feature, latlng) {
                    if(!feature?.properties?.clustering){
                        return L.marker(latlng);
                    }  
                },
                onEachFeature: function(feature, layer) {
                    // does this feature have a property named popupContent?
                    if (feature.properties && feature.popupContent) {
                        layer.bindPopup(feature.popupContent);
                        layer.bindTooltip(feature.popupContent, {direction:'top', offset:[0,-12]})
                    }
                }
        }).addTo(myBusStopLayer);

        L.geoJson({type:'FeatureCollection', 'features': features}, {
                style: {
                    "color": "#ffffff",
                    "weight": 3
                },
                pointToLayer: function (feature, latlng) {
                    if(feature?.properties?.clustering){
                        return  L.marker(latlng, {icon: greenMarker})    
                    }
                },
                onEachFeature: function(feature, layer) {
                    // does this feature have a property named popupContent?
                    if (feature.properties && feature.popupContent) {
                        layer.bindPopup(feature.popupContent);
                        layer.bindTooltip(feature.popupContent, {direction:'top', offset:[0,-12]})
                    }
                }
        }).addTo(clusteredBusStopLayer);
    }

    function makeWarningZoneRequest() {
        $.showPreloader("{{__('strings.loading')}}");
        
        $.ajax({
            url: "{{route('warning_zones')}}",
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            success: function (data) {
                $.hidePreloader(); // hide the preloader
                if(data.success) {
                    addWarningZoneLayer(data.data);
                }
            },
            error: function (err) {
                console.log(err);
                $.hidePreloader(); 
            }
        });
    }

    function addWarningZoneLayer(data) {
        if(warningZonesJson){
            map.removeLayer(warningZonesJson);
        }

        let features = [];

        $.each(data, function(key, item){
            features.push({
                        type:'Point', 
                        coordinates: [item.lng, item.lat],
                        properties : item
            });
        });
        
        warningZonesJson = L.geoJson({type:'FeatureCollection', 'features': features},{
                style: {
                    "color": "#ffffff"
                },
                pointToLayer: function (feature, latlng) {
                    return L.circle(latlng, {
                       radius: 100,
                       fillColor: "#FF0000",
                       color: "#000",
                       weight: 2,
                       opacity: 0.8,
                       fillOpacity: 0.5
                    });
                }
        }).addTo(map);
    }

    function clearBusAddress() {

        bootbox.prompt({
            title: "Nip",
            inputType: 'password',
            size: 'small',
            closeButton: false,
            callback: function (nip) { 
                if(nip) { 
                    $.showPreloader("{{__('strings.wait_moment')}}");
                    $.post("{{route('api_quiq_stop_address_clear')}}", {
                        token: "{{\Auth::user()->SECURE_TOKEN}}",
                        nip: nip,
                    }, function(response) {
                        $.alert(response.message);
                        table.ajax.reload();
                        $.hidePreloader(); // hide the preloader
                    }).fail(function(){
                        $.alert("{{__('strings.error_message')}}");
                        $.hidePreloader(); // hide the preloader
                    });
                }
            }
        });

        
    }
    

</script>
@endpush