@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: 550px;
    }
    .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">{{ number_format($kWh, 2) ?? '-' }} kWh</div>
                            <div>Total kWh</div>
                            <small class="text-muted">Total daya yang terpakai bulan ini</small>
                        </div>
                    </div>
                </div>
                <!-- /.col-->
                {{-- <div class="col-sm-6 col-lg-2">
                    <div class="card text-white bg-gradient-info">
                        <div class="card-body">
                            <div class="text-value-lg">{{ $summary['total_bandwidth']}} GB</div>
                            <div>BANDWIDTH / BLN</div>
                            <small class="text-muted">Kuota data yang terpakai</small>
                        </div>
                    </div>
                </div> --}}
                <!-- /.col-->
                <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">{{ ($summary['total_device'] - $summary['total_off_device']) }}</div> -->
                            <div class="text-value-lg">{{ ($summary['total_device'] - $summary['total_off_device']) }}</div>
                            <div><i class="fa fa-check"></i> Nyala</div>
                            <small class="text-muted">Kondisi lampu normal 100%</small>
                        </div>
                    </div>
                </div>
                <!-- /.col-->
                <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">{{ ($summary['total_device'] - $summary['total_off_device']) }}</div> -->
                            <div class="text-value-lg">{{ $summary['total_off_device'] }}</div>
                            <div><i class="fa fa-power-off"></i> Mati</div>
                            <small class="text-muted">Kondisi lampu normal dimatikan</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">{{ $summary['total_dimmed_device'] }}</div>
                            <div><i class="fa fa-lightbulb-o"></i> Dimming</div>
                            <small class="text-muted">Kondisi lampu normal diredupkan</small>
                        </div>
                    </div>
                </div>
                <!-- /.col-->
                <div class="col-sm-6 col-lg-2">
                    <div class="card text-white bg-gradient-danger">
                        <div class="card-body">
                            <!-- <div class="text-value-lg">{{ ($summary['total_device'] - $summary['total_off_device']) }}</div> -->
                            <div class="text-value-lg">{{ $summary['total_alert_device'] }}</div>
                            <div><i class="fa fa-warning"></i> Alert</div>
                            <small class="text-muted">Kondisi lampu perlu perhatian</small>                            
                        </div>
                    </div>
                </div>
                <!-- /.col-->
                <div class="col-sm-6 col-lg-2">
                    <div class="card text-white bg-gradient-info">
                        <div class="card-body">
                            <div class="text-value-lg">{{ ($summary['total_device'] - $summary['total_offline_device']) }}</div>
                            <div><i class="fa fa-wifi"></i> Online</div>
                            <small class="text-muted">LCU terkoneksi</small>
                        </div>
                    </div>
                </div>
                <!-- /.col-->
                <div class="col-sm-6 col-lg-2">
                    <div class="card text-white bg-gradient-danger">
                        <div class="card-body">
                            <div class="text-value-lg">{{ $summary['total_offline_device'] }}</div>
                            <div><i class="fa fa-times"></i> No Signal</div>
                            <small class="text-muted">LCU tidak terkoneksi</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 class="card-header-actions">
                                {{-- <a class="card-header-action btn-setting" href="#"><i class="fa fa-wrench"></i></a> --}}
                                <div class="row">
                                    @can('province_access')
                                    <div class="form-group mr-2">
                                        <label for="province">Province</label>
                                        <select class="form-control select2" name="province" id="province">
                                            <option value="" selected disabled>-- Please Select --</option>
                                            @foreach ($provinces as $province)
                                                <option value="{{$province->id}}">{{$province->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group mr-2">
                                        <label for="city">City</label>
                                        <select class="form-control select2" name="city" id="city">
                                            <option value="" selected disabled>-- Please Select --</option>
                                        </select>
                                    </div>
                                    @endcan
                                    <div class="form-group mr-2">
                                        <label for="specification">Search</label>
                                        <select class="form-control select2" name="tags[]" id="tags" multiple>
                                            @foreach ($tags as $tag=>$id)
                                                <option value="{{$id}}" {{ in_array($id, $old_tags) ? 'selected' : '' }}>{{$tag}}</option>
                                            @endforeach
                                        </select>
                                        <button id="find" class="m-1 btn btn-primary">Find</button>
                                        <button id="allOn" class="m-1 btn btn-success">Set On</button>
                                        <button id="allOff" class="m-1 btn btn-danger">Set Off</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="mapid"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                {{-- <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">Status Lampu Per Kota</div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="c-callout c-callout-success"><small class="text-muted">Active</small>
                                                <div class="text-value-lg">{{ $summary['total_device'] - $summary['total_off_device'] }}</div>
                                            </div>
                                        </div>
                                        <!-- /.col-->
                                        <div class="col-6">
                                            <div class="c-callout c-callout-danger"><small class="text-muted">Inactive</small>
                                                <div class="text-value-lg">{{ $summary['total_off_device'] }}</div>
                                            </div>
                                        </div>
                                        <!-- /.col-->
                                    </div>
                                    <!-- /.row-->
                                    <hr class="mt-0">
                                    @forelse($city_statistics as $city => $city_statistic)
                                    <div class="progress-group mb-4">
                                        <div class="progress-group-prepend"><span class="progress-group-text">{{ $city }}</span></div>
                                        <div class="progress-group-bars">
                                            <div class="progress progress-xs">
                                                <div class="progress-bar bg-gradient-danger" role="progressbar" style="width: {{ $city_statistic['total_off_device'] / ($city_statistic['total_device']+1) * 100 }}%" aria-valuenow="{{ $city_statistic['total_off_device'] / ($city_statistic['total_device']+1) * 100 }}" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <div class="progress progress-xs">
                                                <div class="progress-bar bg-gradient-success" role="progressbar" style="width: {{ ($city_statistic['total_device'] - $city_statistic['total_off_device']) / ($city_statistic['total_device']+1) * 100 }}%" aria-valuenow="{{ ($city_statistic['total_device'] - $city_statistic['total_off_device']) / ($city_statistic['total_device']+1) * 100 }}" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    @empty
                                    @endforelse
                                </div>
                                <!-- /.col-->
                            </div>
                            <!-- /.row-->
                        </div>
                    </div>
                </div> --}}
                <!-- /.col-->
                {{-- <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="card">
                                <div class="card-body text-center">
                                    <div class="{{ $chart1->options['column_class'] }}">
                                        <h3>{!! $chart1->options['chart_title'] !!}</h3>
                                        {!! $chart1->renderHtml() !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.col-->
                    </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;
            }
        });

        $("#allOn").on('click', function(){
            // e.preventDefault();
            var tag = getParameterByName('tags') ?? "";
            var message = '{"setValue":100}';
            $.ajax({
                type:'POST',
                url:"{{ route('admin.devices.agregat') }}",
                data:{message: message, tag:tag},
                beforeSend: function() {
                    $('.modal').modal('show');
                },
                success:function(data){
                    setTimeout(function () {
                        alert(`Total Lamps Set ON : ${data}`);
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                    }, 2000);
                    
                },
                error:function (err) {
                    alert("Error")
                }
            });
        });


        $("#allOff").on('click', function(){
            // e.preventDefault();
            var tag = getParameterByName('tags') ?? "";
            var message = '{"setValue":0}';
            $.ajax({
                type:'POST',
                url:"{{ route('admin.devices.agregat') }}",
                data:{message: message, tag:tag},
                beforeSend: function() {
                    $('.modal').modal('show');
                },
                success:function(data){
                    setTimeout(function () {
                        alert(`Total Lamps Set OFF : ${data}`);
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                    }, 2000);
                    
                },
                error:function (err) {
                    setTimeout(function () {
                        alert(`Error`);
                        location.reload();
                    }, 1000);
                }
            });
        });
    })
    var devices = ;
    var mymap = L.map('mapid').setView([{{ auth()->user()->company->lat ?? "-6.4601384192096045" }}, {{ auth()->user()->company->long ?? "106.90513847478881"}}], {{ auth()->user()->company->zoom ?? "9"}});
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: '',
        maxZoom: 20,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'pk.eyJ1IjoieWFuc3lhZiIsImEiOiJjMzVkYTY5MDVhMWFhOGY3ODBkZjdiNTAyYzZlZjZmMyJ9.SbqZCRXhTUWf3loLAXMFRg'
    }).addTo(mymap);

    var outageIcon = new L.Icon({
        iconUrl: 'https://smartpole.id/img/outage.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 25],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });    

    var greenIcon = new L.Icon({
        iconUrl: 'https://smartpole.id/img/green-online.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [30, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });

    var greenIconAlert = new L.Icon({
        iconUrl: 'https://smartpole.id/img/marker-icon-2x-green-alert.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [30, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });    

    var greenIconAlert1 = new L.Icon({
        iconUrl: 'https://smartpole.id/img/marker-icon-2x-green-alert-1.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 greenIconAlert2 = new L.Icon({
        iconUrl: 'https://smartpole.id/img/marker-icon-2x-green-alert-2.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://smartpole.id/img/red-offline.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 redIconAlert = new L.Icon({
        iconUrl: 'https://smartpole.id/img/marker-icon-2x-red-alert.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 redIconAlert1 = new L.Icon({
        iconUrl: 'https://smartpole.id/img/marker-icon-2x-red-alert-1.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 redIconAlert2 = new L.Icon({
        iconUrl: 'https://smartpole.id/img/marker-icon-2x-red-alert-2.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();  

    var orangeIconAlert = new L.Icon({
        iconUrl: 'https://smartpole.id/img/marker-icon-2x-orange-alert.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 orangeIconAlert1 = new L.Icon({
        iconUrl: 'https://smartpole.id/img/marker-icon-2x-orange-alert-1.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 orangeIconAlert2 = new L.Icon({
        iconUrl: 'https://smartpole.id/img/marker-icon-2x-orange-alert-2.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]
    });    

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


        if (entry.status == 'on'){
            label = 'ON';
            if (brightness < 100) {
                if (entry.is_alert == 1) {
                    if(entry.alert_level == 1) {
                        var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {icon: orangeIconAlert1});
                    } else if(entry.alert_level == 2){
                        var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {icon: orangeIconAlert2});
                    } else{
                        var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {icon: orangeIconAlert});
                    }
                } else {
                    var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {icon: orangeIcon});
                }          
            } else {
                if (entry.is_alert == 1) {
                    if(entry.alert_level == 1) {
                        var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {icon: greenIconAlert1});
                    } else if(entry.alert_level == 2){
                        var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {icon: greenIconAlert2});
                    } else{
                        var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {icon: greenIconAlert});
                    }                    
                } else {
                    var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {icon: greenIcon});
                }          
            }
        }
        else if (entry.status == 'activated'){
            label = entry.status;
            var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {icon: greyIcon});
        }
        else if (entry.status == 'off'){
            label = 'OFF';
            brightness = '-';
            if (entry.is_alert == 1) {
                if(entry.alert_level == 1) {
                    var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {icon: redIconAlert1});
                } else if(entry.alert_level == 2){
                    var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {icon: redIconAlert2});
                } else{
                    var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {icon: redIconAlert});
                }                     
            } else {
                var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {icon: redIcon});
            }           
        }
        else if (entry.status == 'outage') {
            label = 'LISTRIK MATI';
            var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {icon: outageIcon});
        } else{
            label = entry.status;
            var marker = L.marker([entry.lat ?? 0, entry.long ?? 0], {icon: redIcon});
        }
        if(entry.type){
            type = entry.type.name;
        }
        if(entry.specification){
            specification = entry.specification.name;
        }
        marker.bindPopup(
            "<table>" +
	    "<tbody>" +
	    "<tr><td>ID</td><td>: " + entry.id + "</td></tr>" +
            "<tr><td>Nama</td><td>: " + entry.name + "</td></tr>" +
	    "<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>Brightness</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