@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 rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<style>
    #map {
        height: 600px;
    }
    .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>
@endsection
@section('content')
<div class="content">
    <div class="row">
        <div class="col-lg-12">
            <div class="row">
                <!-- <div class="col-lg-4">
                    <div class="card l-bg-cherry">
                        <div class="card-statistic-3 p-4">
                            {{-- <div class="card-icon card-icon-large"><i class="fas fa-shopping-cart"></i></div> --}}
                            <div class="mb-4">
                                <h5 class="card-title mb-0">Total Transaksi</h5>
                            </div>
                            <div class="row align-items-center mb-2 d-flex">
                                <div class="col-8">
                                    <h2 class="d-flex align-items-center mb-0">
                                        transactions
                                    </h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
                <div class="col-lg-4">
                    <div class="card l-bg-cherry">
                        <div class="card-statistic-3 p-4">
                            {{-- <div class="card-icon card-icon-large"><i class="fas fa-bike"></i></div> --}}
                            <div class="mb-4">
                                <h5 class="card-title mb-0">Total Sepeda</h5>
                            </div>
                            <div class="row align-items-center mb-2 d-flex">
                                <div class="col-8">
                                    <h2 class="d-flex align-items-center mb-0">
                                        {{ $bikes->count() }}
                                    </h2>
                                </div>
                                {{-- <div class="col-4 text-right">
                                    <span>12.5% <i class="fa fa-arrow-up"></i></span>
                                </div> --}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card l-bg-cherry">
                        <div class="card-statistic-3 p-4">
                            {{-- <div class="card-icon card-icon-large"><i class="fas fa-shopping-cart"></i></div> --}}
                            <div class="mb-4">
                                <h5 class="card-title mb-0">Total Terminal</h5>
                            </div>
                            <div class="row align-items-center mb-2 d-flex">
                                <div class="col-8">
                                    <h2 class="d-flex align-items-center mb-0">
                                        {{ $terminals->count() }} ({{ $terminals->where('status', 'active')->count() }} aktif)
                                    </h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card l-bg-cherry">
                        <div class="card-statistic-3 p-4">
                            {{-- <div class="card-icon card-icon-large"><i class="fas fa-shopping-cart"></i></div> --}}
                            <div class="mb-4">
                                <h5 class="card-title mb-0">Total User</h5>
                            </div>
                            <div class="row align-items-center mb-2 d-flex">
                                <div class="col-8">
                                    <h2 class="d-flex align-items-center mb-0">
                                        {{ $users->count() }}
                                    </h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>                
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    LOCATION
                </div>

                <div class="card-body">
                    @if(session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
                    <div id="map"></div>
                </div>
            </div>
        </div>
        {{-- <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    Statistic
                </div>

                <div class="card-body">
                    <div class="ct-chart ct-perfect-fourth"></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="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script>
    var terminals = {!! json_encode($terminals) !!};
    var bikes = {!! json_encode($bikes) !!};
    // Create a new line chart object where as first parameter we pass in a selector
    // that is resolving to our chart container element. The Second parameter
    // is the actual data object.
    // new Chartist.Line('.ct-chart', {
    //     labels: labels,
    //     series: [values]
    // });

    var mymap = L.map('map').setView([-6.339441895429998, 106.75871347456581], 16);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: '',
        maxZoom: 22,
        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 bikeIcon = new L.Icon({
        iconUrl: 'https://bikeut.fusi.id/img/bike.png',
        iconSize: [50, 45],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });

    var scooterIcon = new L.Icon({
        iconUrl: 'https://bikeut.fusi.id/img/scooter.png',
        iconSize: [50, 45],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });

    bikes.forEach(e => {
        if(e.latitude === null || e.longitude === null){
            console.log('bike not found');
        }else{

            if (e.type == 'electric_scooter') {
                var marker = L.marker([e.latitude ?? 0, e.longitude ?? 0], {
                    icon: scooterIcon
                });
            } else {
                var marker = L.marker([e.latitude ?? 0, e.longitude ?? 0], {
                    icon: bikeIcon
                });
            }

            marker.bindPopup(
                "<table>" +
                "<tbody>" +
                "<tr><td>Nama</td><td>: " + e.name + "</td></tr>" +
                "<tr><td>Jenis</td><td>: " + e.type + "</td></tr>" +
                "<tr><td>GPS ID</td><td>: " + e.gps_id + "</td></tr>" +
                "<tr><td>Lokasi</td><td>: <a target='_blank' href='https://www.google.com/maps/search/?api=1&query=" + e.latitude + "," + e.longitude + "'>Google Maps</a></td></tr>" +
                "<tr><td><a href='/admin/bikes/" + e.id + "' class='btn btn-sm btn-outline-success'>Lihat</a></td></tr>" +
                "</tbody>" +
                "</table>"
            )
            mymap.addLayer(marker);            
        }
    });    

    terminals.forEach(e => {
        if(e.latitude === null || e.longitude === null){
            console.log('terminal not found');
        }else{

            if (e.status == 'active'){
                var marker = L.marker([e.latitude ?? 0, e.longitude ?? 0], {
                    icon: greenIcon
                });
            } else if (e.status == 'inactive'){
                var marker = L.marker([e.latitude ?? 0, e.longitude ?? 0], {
                    icon: redIcon
                });
            } else {
                var marker = L.marker([e.latitude ?? 0, e.longitude ?? 0], {
                    icon: greyIcon
                });
            }

            marker.bindPopup(
                "<table>" +
                "<tbody>" +
                "<tr><td>Nama</td><td>: " + e.name + "</td></tr>" +
                "<tr><td>Lokasi</td><td>: <a target='_blank' href='https://www.google.com/maps/search/?api=1&query=" + e.latitude + "," + e.longitude + "'>Google Maps</a></td></tr>" +
                "<tr><td>Status</td><td>: " + e.status + "</td></tr>" +
                "<tr><td><a href='/admin/terminals/" + e.id + "' class='btn btn-sm btn-outline-success'>Lihat</a></td></tr>" +
                "</tbody>" +
                "</table>"
            )
            mymap.addLayer(marker);       

            // add circle
            var circle = L.circle([e.latitude, e.longitude], {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5,
                radius: 30
            }).addTo(mymap);     
        }
    });

</script>
@endsection