@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">
<style>
    #mapid {
        height: 400px;
        margin-bottom: 20px;
    }
</style>
@endsection

@section('content')

<div class="card">
    <div class="card-header">
        {{ trans('global.show') }} {{ trans('cruds.device.title') }}
    </div>

    <div class="card-body">
        <div class="form-group">
            <div class="form-group">
                <a class="btn btn-default" href="{{ route('admin.devices.index') }}">
                    {{ trans('global.back_to_list') }}
                </a>
                <input id="onoff" type="checkbox" checked data-toggle="toggle">
            </div>

            <div class="row">
                <div class="col-sm-6 col-md-6">
                    <div id="mapid"></div>
                </div>
                <div class="col-sm-6 col-md-6">
                    <div class="{{ $chart1->options['column_class'] }}">
                        <h3>{!! $chart1->options['chart_title'] !!}</h3>
                        {!! $chart1->renderHtml() !!}
                    </div>
                </div>
            </div>

            <table class="table table-bordered table-striped">
                <tbody>
                    <!-- <tr>
                        <th>
                            {{ trans('cruds.device.fields.id') }}
                        </th>
                        <td>
                            {{ $device->id }}
                        </td>
                    </tr> -->
                    <tr>
                        <th>
                            {{ trans('cruds.device.fields.device') }}
                        </th>
                        <td>
                            {{ $device->device }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.device.fields.status') }}
                        </th>
                        <td>
                            {{ $device->status }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.device.fields.v') }}
                        </th>
                        <td>
                            {{ $device->v ?? "..." }} Volt
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.device.fields.i') }}
                        </th>
                        <td>
                            {{ $device->i ?? "..." }} Ampere
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.device.fields.p') }}
                        </th>
                        <td>
                            {{ $device->p ?? "..." }} Watt
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.device.fields.type') }}
                        </th>
                        <td>
                            {{ $device->type }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.device.fields.specification') }}
                        </th>
                        <td>
                            {{ $device->specification }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.device.fields.serial_number') }}
                        </th>
                        <td>
                            {{ $device->serial_number }}
                        </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>
                            {{ trans('cruds.device.fields.user') }}
                        </th>
                        <td>
                            {{ $device->user->name ?? '' }}
                        </td>
                    </tr>
                </tbody>
            </table>
            <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://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>{!! $chart1->renderJs() !!}
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

<script>
    var entry = ;
    var mymap = L.map('mapid').setView([-6.887442995884511, 107.60709428994403], 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]
    });

    if (entry.status == 'on')
        var marker = L.marker([entry.lat, entry.long], {
            icon: greenIcon
        }).addTo(mymap);
    else
        var marker = L.marker([entry.lat, entry.long], {
            icon: redIcon
        }).addTo(mymap);
    marker.bindPopup(
        "<table>" +
        "<tbody>" +
        "<tr><td>Tipe</td><td>: " + entry.type + "</td></tr>" +
        "<tr><td>Spek</td><td>: " + entry.specification + "</td></tr>" +
        "<tr><td>S/N</td><td>: " + entry.serial_number + "</td></tr>" +
        "<tr><td>Petugas Instalasi</td><td>: " + entry.user.name + "</td></tr>" +
        "<tr><td>Tanggal Pasang</td><td>: " + entry.created_at + "</td></tr>" +
        "<tr><td>Koordinat Peta</td><td>: <a href='https://www.google.com/maps/@" + entry.lat + "," + entry.long + ",13.09z?hl=id'>Buka Google Maps</a></td></tr>" +
        "</tbody>" +
        "</table>"
    )

    $('#onoff').change(function() {
        if ($(this).prop('checked')) {
            alert('Lamp is swicted on')

            var url = "{{ URL('/backdoor/devices/'.$device->id) }}";
            $.ajax({
                url: url,
                type: "POST",
                cache: false,
                data: {
                    _token: '{{ csrf_token() }}',
                    status: "on",
                },
                success: function(dataResult) {
                    dataResult = JSON.parse(dataResult);
                    if (dataResult.statusCode) {
                        window.location = "/userData";
                    } else {
                        alert("Internal Server Error");
                    }

                }
            });

        } else {
            alert('Lamp is switched off')

            var url = "{{ URL('/backdoor/devices/'.$device->id) }}";
            $.ajax({
                url: url,
                type: "POST",
                cache: false,
                data: {
                    _token: '{{ csrf_token() }}',
                    status: "off",
                },
                success: function(dataResult) {
                    dataResult = JSON.parse(dataResult);
                    if (dataResult.statusCode) {
                        window.location = "/userData";
                    } else {
                        alert("Internal Server Error");
                    }

                }
            });            
        }
    })
</script>
@endsection