@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="" />
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css"
    rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<style>
    .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;
    }

    #mapid {
        height: 400px;
        margin-bottom: 20px;
    }

    .slidecontainer {
        width: 100%;
    }

    .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 15px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }

    .slider:hover {
        opacity: 1;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #4CAF50;
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #4CAF50;
        cursor: pointer;
    }

    .outerDivFull { margin:50px; } 

    .switchToggle input[type=checkbox]{height: 0; width: 0; visibility: hidden; position: absolute; }
    .switchToggle label {cursor: pointer; text-indent: -9999px; width: 70px; max-width: 70px; height: 30px; background: #d1d1d1; display: block; border-radius: 100px; position: relative; }
    .switchToggle label:after {content: ''; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; background: #fff; border-radius: 90px; transition: 0.3s; }
    .switchToggle input:checked + label, .switchToggle input:checked + input + label  {background: #3e98d3; }
    .switchToggle input + label:before, .switchToggle input + input + label:before {content: 'No'; position: absolute; top: 5px; left: 35px; width: 26px; height: 26px; border-radius: 90px; transition: 0.3s; text-indent: 0; color: #fff; }
    .switchToggle input:checked + label:before, .switchToggle input:checked + input + label:before {content: 'Yes'; position: absolute; top: 5px; left: 10px; width: 26px; height: 26px; border-radius: 90px; transition: 0.3s; text-indent: 0; color: #fff; }
    .switchToggle input:checked + label:after, .switchToggle input:checked + input + label:after {left: calc(100% - 2px); transform: translateX(-100%); }
    .switchToggle label:active:after {width: 60px; } 
    .toggle-switchArea { margin: 10px 0 10px 0; }
</style>
@endsection

@section('content')

<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-md-8">
        <div class="card">
            <div class="card-header">
                <strong>{{ trans('global.show') }} {{ trans('cruds.device.title') }}: {{ $device->imei }}</strong>
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <table class="table table-bordered table-striped">
                            <tbody>
                                <tr>
                                    <th>
                                        {{ trans('cruds.device.fields.serial_number') }}
                                    </th>
                                    <td>
                                        {{ $device->serial_number }}
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        {{ trans('cruds.device.fields.status') }}
                                    </th>
                                    <td id="status">
                                        {{ $device->status }}
                                    </td>
                                </tr>
                                <!-- <tr>
                                    <th>
                                        {{ trans('cruds.device.fields.attributes') }}
                                    </th>
                                    <td id="attributes">
                                        {{ $device->attributes }}
                                    </td>
                                </tr> -->
                                <tr>
                                    <th>
                                        {{ trans('cruds.device.fields.type') }}
                                    </th>
                                    <td>
                                        {{ $device->type->name ?? '-' }}
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        Site
                                    </th>
                                    <td>
                                        {{ $device->site->name ?? '-' }}
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        {{ trans('cruds.device.fields.location') }}
                                    </th>
                                    <td>
                                        {{ $device->lat }}, {{ $device->long }} (<a target="_blank" href="https://www.google.com/maps/search/?api=1&query={{ $device->lat }},{{ $device->long }}">Google
                                            Maps</a>)
                                    </td>
                                </tr>
                                <!-- <tr>
                                    <th>
                                        Province
                                    </th>
                                    <td>
                                        {{ $device->province ? $device->province->name : ''}}
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        City
                                    </th>
                                    <td>
                                        {{ $device->city ? $device->city->name : ''}}
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        District
                                    </th>
                                    <td>
                                        {{ $device->district ? $device->district->name : ''}}
                                    </td>
                                </tr> -->
                                <tr>
                                    <th>
                                        {{ trans('cruds.device.fields.user') }}
                                    </th>
                                    <td>
                                        {{ $device->user->name ?? '' }}
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        Foto-Foto
                                    </th>
                                    <td>
                                        @if($device->site)
                                        @foreach($device->site->images as $media)
                                            <a href="{{ $media->getUrl() }}" target="_blank"><img src="{{ $media->getUrl('thumb') }}" width="50px" height="50px"></a>
                                        @endforeach
                                        @endif
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-8">
                        <div id="mapid"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <strong>Settings</strong>
            </div>

            <div class="card-body">
                <div class="slidecontainer">
                    <div class="form-group">
                    <p>Set Periode :</p>
                    <div class="btn-group" role="group" aria-label="Basic example">
                        <button id="minute" onclick="setPeriode(1)" type="button" class="w-100 btn btn-outline-primary mb-1">30 Min</button>
                        <button id="hour" onclick="setPeriode(2)" type="button" class="w-100 btn btn-outline-primary mb-1">1 Hour</button>
                        <button id="3hour" onclick="setPeriode(3)" type="button" class="w-100 btn btn-outline-primary mb-1">3 Hour</button>
                        <button id="6hour" onclick="setPeriode(4)" type="button" class="w-100 btn btn-outline-primary mb-1">6 Hour</button>
                        <button id="12hour" onclick="setPeriode(5)" type="button" class="w-100 btn btn-outline-primary mb-1">12 Hour</button>
                    </div>  
                    </div>
                    <div class="form-group">
                        <button id="update" onclick="pushUpdate()" type="button" class="btn btn-warning">Update</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card mt-3">
    <div class="card-header">
        <div class="d-flex justify-content-between">
            <div class="p-1 bd-highlight">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1"><i class="fa fa-calendar"></i>&nbsp;</span>
                    </div>
                    <input type="text" class="form-control" name="datefilter" value="" />
                    <button type="button" id="resetTimeseries" class="btn btn-secondary btn-sm rounded-0"><i class="fa fa-refresh"></i> Reset</button>
                </div>
            </div>
            <div class="p-1 bd-highlight">
                <h6>Realtime Chart - {{ now()->format('d M Y') }}</h6>
            </div>
            <div class="p-1 bd-highlight">
                <button type="button" id="csvDownload" class="btn btn-success text-white btn-sm rounded-0"><i class="fa fa-download"></i> Export CSV</button>
            </div>
        </div>
    </div>
    <div class="card-body bg-light ">
        <div class="row mb-2">
            <div class="col-lg-4">
                <iframe id="br" width="100%" height="300px" frameborder="0"></iframe>
            </div>
            <div class="col-lg-4">
                <iframe id="csq" width="100%" height="300px" frameborder="0"></iframe>
            </div>
            <div class="col-lg-4">
                <iframe id="seismic" width="100%" height="300px" frameborder="0"></iframe>
            </div>
        </div>

        <div class="row mb-2">
            <div class="col-lg-4">
                <iframe id="v" width="100%" height="300px" frameborder="0"></iframe>
            </div>
            <div class="col-lg-4">
                <iframe id="c" width="100%" height="300px" frameborder="0"></iframe>
            </div>
            <div class="col-lg-4">
                <iframe id="d" width="100%" height="300px" frameborder="0"></iframe>
            </div>
        </div>

        <div class="form-group">
            <a class="btn btn-default" href="{{ route('admin.devices.index') }}">
                {{ trans('global.back_to_list') }}
            </a>
        </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://js.pusher.com/7.0/pusher.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script> -->
    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

    <script>
        const myData = {!!$device!!};

        if (myData.auto_brightness)
            $('#autobrightness-checkbox').bootstrapToggle('on')
        else
            $('#autobrightness-checkbox').bootstrapToggle('off')

        function command(msg) {
            alert(JSON.stringify(msg));
            $.ajax({
                url: '{{ env("APP_URL") }}/api/v1/devices/command',
                type: "POST",
                cache: false,
                dataType: "json",
                headers: {
                    "Content-Type": "application/json",
                    "Access-Control-Allow-Origin":"*",
                    "Authorization":"{{ env('APP_TOKEN') }}"
                },
                data: JSON.stringify(msg),
                success: function (dataResult) {
                    dataResult = JSON.parse(dataResult);
                    alert(dataResult);
                }
            });
        }
        // $("#update").on('click', function(){
        //     const body = {
        //         device_id: "{{ $device->id }}",
        //         type: "update",
        //         msg: '{"update":1}'
        //     };
        //     command(body);
        // });
        $("#switch1").on('change', function(){
            if($("#switch1").is(":checked")){
                const body = {
                    device_id: "{{ $device->id }}",
                    type: "autobr",
                    msg: '{"setAuto":1}'
                };
                command(body);
            }else{
                const body = {
                    device_id: "{{ $device->id }}",
                    type: "autobr",
                    msg: '{"setAuto":0}'
                };
                command(body);
            }
            
        })
        // Enable pusher logging - don't include this in production
        // Pusher.logToConsole = true;
    
        var pusher = new Pusher('c82484a074a894bcb415', {
          cluster: 'ap1'
        });
    
        var channel = pusher.subscribe('company-'+myData.company.id);
        channel.bind('autobr/'+myData.id, function(data) {
          const message = data.message;
          if(message == '1'){
            $('#switch1').prop('checked', true);
            $('#brightness').prop('disabled', true);
          }else{
            $('#switch1').prop('checked', false);
            $('#brightness').prop('disabled', false);
          }
        });
        channel.bind('ack/'+myData.id, function(data) {
            alert(data);
        });
    </script>
    <script type="text/javascript">
    
        let from = moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');
        let to = moment().format('YYYY-MM-DD HH:mm:ss');
        $(function() {
            $("#csvDownload").click(function(){
                window.open('/admin/devices/'+myData.id+'/csv?from='+from+'&to='+to,'_blank');
            });
          $('input[name="datefilter"]').daterangepicker({
            "alwaysShowCalendars": true,
            "timePicker": true,
            "timePicker24Hour": true,
            "autoApply": true,
            ranges: {
                'Last 1m': [moment().subtract(1,'minutes'), moment()],
                'Last 15m': [moment().subtract(15,'minutes'), moment()],
                'Last 30m': [moment().subtract(30,'minutes'), moment()],
                'Last 1h': [moment().subtract(1,'hours'), moment()],
                'Last 6h': [moment().subtract(6,'hours'), moment()],
                'Last 12h': [moment().subtract(12,'hours'), moment()],
                'Last 24h': [moment().subtract(1, 'days'), moment()],
                'Last 7d': [moment().subtract(6, 'days'), moment()],
                'Last 30d': [moment().subtract(29, 'days'), moment()],
            },
              autoUpdateInput: false,
              locale: {
                  cancelLabel: 'Clear'
              }
          });
        
          $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
              $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
              initGraph(moment(picker.startDate).format('x'), moment(picker.endDate).format('x'));
              from = moment(picker.startDate).format('YYYY-MM-DD HH:mm:ss');
              to = moment(picker.endDate).format('YYYY-MM-DDTHH:mm:ss');
          });
        
          $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
              $(this).val('');
          });
        
        });
    </script>
    <script type="text/javascript">
    let timer;
    //Modal
    function modal() {
            $('.modal').modal('show');
            timer = 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 initGraph(from, to) {
        // $.ajax({
        //     type: 'GET',
        //     url: `https://grafana.fusi.id/d/WH-KqXv7k/smartlamp?orgId=1&var-userId=${myData.company.id}&var-deviceId=${myData.imei}&from=${from}&to=now&kiosk&refresh=5s`,
        //     contentType: 'application/json',
        //     success: function (data) {
        //         $('#br').attr('src',
        //             `https://grafana.fusi.id/d/WH-KqXv7k/smartlamp?orgId=1&viewPanel=2&var-userId=${myData.company.id}&var-deviceId=${myData.imei}&from=${from}&to=now&kiosk&refresh=5s`
        //         );
        //         // $('#graph').contents().find('html').html(data);
        //     }
        // });
        // $('#br').attr('src',`https://grafana.fusi.id/d-solo/WH-KqXv7k/smartlamp?orgId=1&refresh=5s&panelId=2&var-userId=${myData.company.id}&var-deviceId=${myData.imei}&from=${from}&to=${to}&refresh=5s`);
        // $('#csq').attr('src',`https://grafana.fusi.id/d-solo/WH-KqXv7k/smartlamp?orgId=1&refresh=5s&panelId=8&var-userId=${myData.company.id}&var-deviceId=${myData.imei}&from=${from}&to=${to}&refresh=5s`);
        // $('#d').attr('src',`https://grafana.fusi.id/d-solo/WH-KqXv7k/smartlamp?orgId=1&refresh=5s&panelId=6&var-userId=${myData.company.id}&var-deviceId=${myData.imei}&from=${from}&to=${to}&refresh=5s`);
        // $('#v').attr('src',`https://grafana.fusi.id/d-solo/WH-KqXv7k/smartlamp?orgId=1&refresh=5s&panelId=7&var-userId=${myData.company.id}&var-deviceId=${myData.imei}&from=${from}&to=${to}&refresh=5s`);
        // $('#c').attr('src',`https://grafana.fusi.id/d-solo/WH-KqXv7k/smartlamp?orgId=1&refresh=5s&panelId=3&var-userId=${myData.company.id}&var-deviceId=${myData.imei}&from=${from}&to=${to}&refresh=5s`);
        // $('#kwh').attr('src',`https://grafana.fusi.id/d-solo/WH-KqXv7k/smartlamp?orgId=1&refresh=5s&panelId=4&var-userId=${myData.company.id}&var-deviceId=${myData.imei}&from=${from}&to=${to}&refresh=5s`);

        $('#br').attr('src',`https://grafana.fusi.id/d-solo/6UYakvWSz/ews?orgId=1&panelId=6&var-deviceId=${myData.imei}&from=${from}&to=${to}&refresh=5s`);
        $('#csq').attr('src',`https://grafana.fusi.id/d-solo/6UYakvWSz/ews?orgId=1&panelId=2&var-deviceId=${myData.imei}&from=${from}&to=${to}&refresh=5s`);
        $('#seismic').attr('src',`https://grafana.fusi.id/d-solo/6UYakvWSz/ews?orgId=1&panelId=13&var-deviceId=${myData.imei}&from=${from}&to=${to}&refresh=5s`);
        $('#d').attr('src',`https://grafana.fusi.id/d-solo/6UYakvWSz/ews?orgId=1&panelId=4&var-deviceId=${myData.imei}&from=${from}&to=${to}&refresh=5s`);
        $('#v').attr('src',`https://grafana.fusi.id/d-solo/6UYakvWSz/ews?orgId=1&panelId=10&var-deviceId=${myData.imei}&from=${from}&to=${to}&refresh=5s`);
        $('#c').attr('src',`https://grafana.fusi.id/d-solo/6UYakvWSz/ews?orgId=1&panelId=11&var-deviceId=${myData.imei}&from=${from}&to=${to}&refresh=5s`);
    }
    // function notif(){
    //     // var myData = {!!$device!!};
    //     $.ajax({
    //         url: '{!! env("APP_URL")!!}/api/v1/devices/'+myData.imei+'/ack',
    //         type: "GET",
    //         cache: false,
    //         dataType: "json",
    //         headers: {
    //             "Content-Type": "application/json",
    //             "Access-Control-Allow-Origin":"*",
    //             "Authorization":"{{ env('APP_TOKEN') }}"
    //         },
    //         success: function (dataResult) {
    //             $('#alert_placeholder').html('<div class="alert alert-success alert-dismissible fade show" role="alert">Success '+dataResult.method+'<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 5 seconds
    // }, 2000);
    initGraph(moment().subtract(1, 'days').format('x'), "now");

</script>
<script>
    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");
    output.innerHTML = slider.value;

    slider.oninput = function () {
        output.innerHTML = this.value;
        slider.value = this.value;
    }

    function pushBrightness() {
        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: "{{ $device->imei }}",
                message: `{"setValue":${slider.value}}`
            }),
            success: function (dataResult) {
                dataResult = JSON.parse(dataResult);
                alert(dataResult);
                if (dataResult.statusCode) {
                    window.location = "/userData";
                } else {
                    alert("Internal Server Error");
                }

            }
        });
        // $.ajax({
        //     type: "POST",          
        //     url: "/api/v1/mqtt/pub",
        //     headers: {
        //         "Accept": "application/json",
        //         "Content-Type": "application/json",
        //         "Authorization": "{{ env('APP_TOKEN') }}"
        //     },
        //     data: JSON.stringify({ 
        //         imei: "{{ $device->imei }}",
        //         message: `{"setValue":${slider.value}}`
        //     }),
        //     success: function(dataResult) {
        //         alert("dataResult: " + dataResult);
        //         // console.log(dataResult);
        //         // dataResult = JSON.parse(dataResult);
        //         // alert(JSON.stringify(dataResult));
        //         // if (dataResult.statusCode) {
        //         //     window.location = "/userData";
        //         // } else {
        //         //     alert("Internal Server Error");
        //         // }
        //     },
        //     error: function(e) {
        //         console.log(e)
        //         alert("error: " + e);
        //     }
        // });        
    }

    function pushAutoBrightness() {
        modal();
        var url = "/admin/mqtt";

        var message;
        if ($('#autobrightness-checkbox').checked) {
            message = `{"setAuto":1}`
            $.ajax({
                url: '{{ env("APP_URL") }}/api/v1/devices/' + myData.id,
                type: "PUT",
                cache: false,
                dataType: "json",
                headers: {
                    "Content-Type": "application/json",
                    "Access-Control-Allow-Origin":"*",
                    "Authorization":"{{ env('APP_TOKEN') }}"
                },
                data: JSON.stringify({
                    auto_brightness: true,
                }),
                success: function (dataResult) {
                    dataResult = JSON.parse(dataResult);
                    alert(dataResult);
                }
            });            
        }
        else {
            message = `{"setAuto":0}`
            $.ajax({
                url: '{{ env("APP_URL") }}/api/v1/devices/' + myData.id,
                type: "PUT",
                cache: false,
                dataType: "json",
                headers: {
                    "Content-Type": "application/json",
                    "Access-Control-Allow-Origin":"*",
                    "Authorization":"{{ env('APP_TOKEN') }}"
                },
                data: JSON.stringify({
                    auto_brightness: false,
                }),
                success: function (dataResult) {
                    dataResult = JSON.parse(dataResult);
                    alert(dataResult);
                }
            });            
        }

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

            }
        });
    }

    function setPeriode(periode) {
        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: "{{ $device->imei }}",
                message: `{"setPeriode":${periode}}`
            })
        });
    }

    function pushUpdate() {
        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: "{{ $device->imei }}",
                message: `{"update":1}`
            }),
            success: function (dataResult) {
                dataResult = JSON.parse(dataResult);
                alert(dataResult);
                if (dataResult.statusCode) {
                    window.location = "/userData";
                } else {
                    alert("Internal Server Error");
                }

            }
        });
    }    

</script>
<script>
    var entry =  ;
    let brightness = entry.br;

    var mymap = L.map('mapid').setView(["{{ $device->lat }}","{{ $device->long }}"], 12);
    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 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 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 marker = L.marker([myData.lat ?? 0, myData.long ?? 0], {
                icon: greenIcon
            }).addTo(mymap);

    marker.bindPopup(
        "<table>" +
        "<tbody>" +
        "<tr><td>Tipe</td><td>: " + entry.type + "</td></tr>" +
        "<tr><td>S/N</td><td>: " + myData.serial_number + "</td></tr>" +
        "<tr><td>Tanggal Pasang</td><td>: " + myData.created_at + "</td></tr>" +
        "<tr><td>Koordinat Peta</td><td>: <a href='https://www.google.com/maps/@" + myData.lat + "," + myData.long +
        ",13.09z?hl=id'>Buka Google Maps</a></td></tr>" +
        "</tbody>" +
        "</table>"
    )
</script>
@endsection