@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<style>
    #mapid {
        height: 400px;
    }
    .bd-example-modal-lg .modal-dialog {
        display: table;
        position: relative;
        margin: 0 auto;
        top: calc(50% - 24px);
    }

    .bd-example-modal-lg .modal-dialog .modal-content {
        background-color: transparent;
        border: none;
    }

</style>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" rel="stylesheet" />
<link href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" rel="stylesheet" />
@endsection

@section('content')
<div class="content">
    <div class="row">
        <div class="col-lg-12">
            <div id="myModal" class="modal fade bd-example-modal-lg" data-backdrop="static" data-keyboard="false" tabindex="-1">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content" style="width: 48px">
                        <span class="fa fa-spinner fa-spin fa-3x"></span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-lg-2">
                    <div class="card text-white bg-gradient-primary">
                        <div class="card-body">
                            <div class="text-value-lg">-</div>
                            <div>Total Kejadian</div>
                            {{-- <small class="text-muted">Total kejadian yang dilaporkan</small> --}}
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-2">
                    <div class="card text-white bg-gradient-success">
                        <div class="card-body">
                            <div class="text-value-lg">4</div>
                            <div>Tsunami</div>
                            {{-- <small class="text-muted">Terhubung dengan</small> --}}
                        </div>
                    </div>
                </div>
                <!-- /.col-->
                <div class="col-sm-6 col-lg-2">
                    <div class="card text-white bg-gradient-warning">
                        <div class="card-body">
                            <div class="text-value-lg">-</div>
                            <div>Tanah Longsor</div>
                            {{-- <small class="text-muted">Kondisi lampu rusak</small> --}}
                        </div>
                    </div>
                </div>
                <!-- /.col-->
                <div class="col-sm-6 col-lg-2">
                    <div class="card text-white bg-gradient-warning">
                        <div class="card-body">
                            <div class="text-value-lg">-</div>
                            <div>Gempa Bumi</div>
                            {{-- <small class="text-muted">Kondisi lampu rusak</small> --}}
                        </div>
                    </div>
                </div>
                <!-- /.col-->
                <div class="col-sm-6 col-lg-2">
                    <div class="card text-white bg-gradient-warning">
                        <div class="card-body">
                            <div class="text-value-lg">-</div>
                            <div>Banjir</div>
                            {{-- <small class="text-muted">Kondisi lampu rusak</small> --}}
                        </div>
                    </div>
                </div>
                <!-- /.col-->
            </div>
            <div id="alert_placeholder"></div>
            <div class="row">
                <div class="col-sm-12 col-md-12">
                    <div class="card">
                        <div class="card-header">
                            Peta Lokasi
                        </div>
                        <div class="card-body">
                            <div id="mapid"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h3>{!! $chart2->options['chart_title'] !!}</h3>
                        </div>
                        <div class="card-body">
                            {!! $chart2->renderHtml() !!}
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h3>Kejadian Terakhir</h3>
                        </div>
                        <div class="card-body">
                        </div>
                    </div>
                </div>
            </div>            
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>{!! $chart1->renderJs() !!} --}}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
<script>
    var base_url = '{{ env('APP_URL') }}';
    function clearOptions(id) {
        $('#' + id).empty().trigger('change');
    }
    var selectProv = $('#province');
    $(selectProv).change(function () {

        var value = $(selectProv).val();
        var text = $('#province :selected').text();
        clearOptions('city');
        $.ajax({
            url: base_url+ '/api/v1/cities/' + value,
            type: "GET",
            cache: true,
            dataType: "json",
            headers: {
                "Content-Type": "application/json",
                "Access-Control-Allow-Origin":"*",
                "Authorization":"{{ env('APP_TOKEN') }}"
            },
            success: function (res) {
                data = [{
                    id: "",
                    text: "-"
                }];
                res.data.forEach(function (e) {
                    data.push({"id":e.id, "text":e.name});
                });

                //implemen data ke select provinsi
                $("#city").select2({
                    dropdownAutoWidth: true,
                    width: '100%',
                    data: data
                })
            }
        });
    });
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    function getParameterByName(name, url = window.location.href) {
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }
    $(document).ready(function(){
        $("#find").on('click', function(){
            const arrTag = $("#tags").val();
            const city = $("#city").val();
            const tags = arrTag.join(",");
            if(city !== '' && tags !== '' && city !== null && tags !== null){
                // window.location = '/admin/?city='+city+'&tags='+tags;
                window.location = '/admin/?tags='+tags;
            }else if(city !== '' && city !== null){
                // window.location = '/admin/?city='+city;
                window.location = '/admin';
            }else{
                window.location = '/admin/?tags='+tags;
            }
        });
    })
    var devices = ;
    var mymap = L.map('mapid').setView([-8.133033280227767, 110.55910510620429], 11);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: '',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'pk.eyJ1IjoieWFuc3lhZiIsImEiOiJjMzVkYTY5MDVhMWFhOGY3ODBkZjdiNTAyYzZlZjZmMyJ9.SbqZCRXhTUWf3loLAXMFRg'
    }).addTo(mymap);

    var greenIcon = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });

    var redIcon = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });

    var greyIcon = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-grey.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });

    var orangeIcon = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-orange.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });    
    // var markers = L.markerClusterGroup();

    devices.forEach(entry => {
        let label = "-";
        let type = "-";
        let specification = "-";
        let brightness = entry.br;


        if (entry.status == 'on'){
            label = 'ON';
            if (brightness < 100) {
                var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {
                    icon: orangeIcon
                });
            } else {
                var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {
                    icon: greenIcon
                });
            }
            // markers.addLayer(marker);
        }
        else if (entry.status == 'activated'){
            label = entry.status;
            var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {
                icon: greyIcon
            });
            // markers.addLayer(marker);
        }
        else if (entry.status == 'off'){
            label = 'OFF';
            brightness = '-';
            var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {
                icon: redIcon
            });
            // markers.addLayer(marker);
        }
        else{
            label = entry.status;
            var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {
                icon: redIcon
            });
            // markers.addLayer(marker);
        }
        if(entry.type){
            type = entry.type.name;
        }
        if(entry.specification){
            specification = entry.specification.name;
        }
        marker.bindPopup(
            "<table>" +
            "<tbody>" +
            "<tr><td>S/N</td><td>: " + entry.serial_number + "</td></tr>" +
            "<tr><td>Location</td><td>: <a target='_blank' href='https://www.google.com/maps/search/?api=1&query=" + entry.lat + "," + entry.long + "'>Google Maps</a></td></tr>" +
            "<tr><td>Status</td><td>: " + label + "</td></tr>" +
            "<tr><td>Telemetri</td><td>: " + brightness + "</td></tr>" +
            "<tr><td>Action</td><td>: <button onClick='onLamp("+entry.imei+")' type='button' class='btn btn-success btn-sm'>ON</button> <button onClick='offLamp("+entry.imei+")' type='button' class='btn btn-danger btn-sm'>OFF</button></td></tr>" +
            "<tr><td><a href='/admin/devices/" + entry.id + "' class='btn btn-sm btn-success' style='color: white'>Show Device</a></td></tr>" +
            "</tbody>" +
            "</table>"
        )
        mymap.addLayer(marker);
    });
    // mymap.addLayer(markers);
    //Modal
    function modal() {
            $('.modal').modal('show');
            setTimeout(function () {
                $('.modal').modal('hide');
            }, 5000);
            // $('#alert_placeholder').html('<div class="alert alert-danger alert-dismissible fade show" role="alert">Device Busy<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div>')
    }
    function notif(){
        
        $.ajax({
            url: '{!! env("APP_URL")!!}/api/v1/notif/'+{!! Auth::user()->company_id !!}+'-all',
            type: "GET",
            cache: false,
            dataType: "json",
            headers: {
                "Content-Type": "application/json",
                "Access-Control-Allow-Origin":"*",
                "Authorization":"{{ env('APP_TOKEN') }}"
            },
            success: function (dataResult) {
                dataResult.forEach(e =>{
                    $('#alert_placeholder').html('<div class="alert alert-success alert-dismissible fade show" role="alert">Success '+e.method+' for '+e.device+' <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div>');
                });
                // dataResult = JSON.parse(dataResult);
                // alert(dataResult.method);
            }
        });
    }
    notif(); // This will run on page load
    setInterval(function(){
        notif() // this will run after every 3 seconds
    }, 3000);
    function onLamp(imei) {
        modal();
        var url = "/admin/mqtt";
        $.ajax({
            url: url,
            type: "POST",
            cache: false,
            dataType: "json",
            headers: {
                "Content-Type": "application/json",
            },
            data: JSON.stringify({
                _token: '{{ csrf_token() }}',
                device_name: imei,
                message: `{"setValue":100}`
            }),
            success: function (dataResult) {
                dataResult = JSON.parse(dataResult);
                alert(dataResult);
                if (dataResult.statusCode) {
                    window.location = "/userData";
                } else {
                    alert("Internal Server Error");
                }

            }
        });
    }

    function offLamp(imei) {
        modal();
        var url = "/admin/mqtt";
        $.ajax({
            url: url,
            type: "POST",
            cache: false,
            dataType: "json",
            headers: {
                "Content-Type": "application/json",
            },
            data: JSON.stringify({
                _token: '{{ csrf_token() }}',
                device_name: imei,
                message: `{"setValue":0}`
            }),
            success: function (dataResult) {
                dataResult = JSON.parse(dataResult);
                alert(dataResult);
                if (dataResult.statusCode) {
                    window.location = "/userData";
                } else {
                    alert("Internal Server Error");
                }

            }
        });
    }
</script>
@endsection