@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;
    }
</style>
@endsection

@section('content')
<div class="content">
    <div class="row">
        <div class="col-lg-12">

            <div class="row">
                <div class="col-sm-6 col-lg-3">
                    <div class="card text-white bg-gradient-primary">
                        <div class="card-body">
                            <div class="text-value-lg">{{ $summary['total_d']}} KWh</div>
                            <div>TOTAL KWH / BLN</div>
                            <small class="text-muted">Total daya yang terpakai</small>
                        </div>
                    </div>
                </div>
                <!-- /.col-->
                <div class="col-sm-6 col-lg-3">
                    <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-3">
                    <div class="card text-white bg-gradient-success">
                        <div class="card-body">
                            <div class="text-value-lg">{{ ($summary['total_device'] - $summary['total_off_device']) }} ({{ number_format(($summary['total_device'] - $summary['total_off_device']) / ($summary['total_device']+1) * 100, 2, '.', '') }}%)</div>
                            <div>ACTIVE</div>
                            <small class="text-muted">Kondisi lampu normal</small>
                        </div>
                    </div>
                </div>
                <!-- /.col-->
                <div class="col-sm-6 col-lg-3">
                    <div class="card text-white bg-gradient-danger">
                        <div class="card-body">
                            <div class="text-value-lg">{{ $summary['total_off_device']}} ({{ number_format($summary['total_off_device'] / ($summary['total_device']+1) * 100, 2, '.', '') }}%)</div>
                            <div>INACTIVE</div>
                            <small class="text-muted">Kondisi lampu rusak</small>
                        </div>
                    </div>
                </div>
                <!-- /.col-->
            </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>
                        </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>
    var devices = ;
    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]
    });

    devices.forEach(entry => {
        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>Type</td><td>: " + entry.type + "</td></tr>" +
            "<tr><td>Specs</td><td>: " + entry.specification + "</td></tr>" +
            "<tr><td>S/N</td><td>: " + entry.serial_number + "</td></tr>" +
            "<tr><td>Officer</td><td>: " + entry.user.name + "</td></tr>" +
            "<tr><td>Install Date</td><td>: " + entry.created_at + "</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>Latest</td><td>: " + entry.status + "</td></tr>" +
            "<tr><td></td><td>: " + entry.v + " Volt</td></tr>" +
            "<tr><td></td><td>: " + entry.i + " Ampere</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>"
        )
    });
</script>
@endsection