@extends('dashboard/layouts.template')

@section('content')
    <style>
        #map {
            height: 500px;
        }
    </style>

    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                </div>
                <h4 class="page-title">Dashboard</h4>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="row">

                <div class="col-sm-3">
                    <div class="card widget-flat" style="border: 1px solid orange">
                        <div class="card-body">
                            <h4 class="mt-0" title="Number of Customers" style="color: blue;">Jumlah Kasus Kecelakan</4>
                                <h3 class="mt-3 mb-1">{{ $jumlah_laka }}</h3>
                        </div>
                    </div>
                </div>

                <div class="col-sm-3">
                    <div class="card widget-flat">
                        <div class="card-body">
                            <div class="float-end">
                                <i class="mdi mdi-account-multiple widget-icon"></i>
                            </div>
                            <h4 class="mt-0" title="Number of Customers" style="color: black;">Jumlah Korban Meninggal
                            </h4>
                            <h3 class="mt-3 mb-1">{{ $md }}</h3>
                        </div>
                    </div>
                </div>

                <div class="col-sm-3">
                    <div class="card widget-flat">
                        <div class="card-body">
                            <div class="float-end">
                                <i class="mdi mdi-account-multiple widget-icon"></i>
                            </div>
                            <h4 class="mt-0" title="Number of Customers" style="color: black;">Jumlah Korban Luka Berat
                            </h4>
                            <h3 class="mt-3 mb-1">{{ $lb }}</h3>
                        </div>
                    </div>
                </div>

                <div class="col-sm-3">
                    <div class="card widget-flat">
                        <div class="card-body">
                            <div class="float-end">
                                <i class="mdi mdi-account-multiple widget-icon"></i>
                            </div>
                            <h4 class="mt-0" title="Number of Customers" style="color: black;">Jumlah Korban Luka Ringan
                            </h4>
                            <h3 class="mt-3 mb-1">{{ $lr }}</h3>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    {{-- 
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h3 class="header-title mb-3" style="font-family: Arial;">Peta Lokasi Kecelakaan</h3>
                    <div id="map"></div>
                </div>
            </div>
        </div>
    </div> --}}

    {{-- peta kerawanan --}}
    <div class="row">

        <div class="col-lg-10">
            <div class="card">
                <div class="card-body">
                    <h3 class="header-title mb-3" style="font-family: Arial;">Peta Kerawanan Lokasi Kecelakaan</h3>
                    <div class="row">
                        <div class="col-lg-2 text-start pt-2">
                            <p style="color: grey;">Filter Kerawanan :</p>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group mb-3">
                                <select id="filterKerawanan" class="form-control">
                                    <option value="all">-- Semua --</option>
                                    <option value="Aman">Aman</option>
                                    <option value="Rawan">Rawan</option>
                                    <option value="Sangat Rawan">Sangat Rawan</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-2 text-end pt-2">
                            <p style="color: grey;">Filter Jalan :</p>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group mb-3">
                                <select id="filterJalan" class="form-control">
                                    <option value="all">-- Semua --</option>
                                    @foreach ($data as $dataItem)
                                        <option value="{{ $dataItem['nama_jalan'] }}">{{ $dataItem['nama_jalan'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div id="map"></div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-lg-2">
            <div class="card">
                <div class="card-body">
                    <p style="color: grey; font-size:10pt">Keterangan :</p>
                    <hr>
                    <div class="row pt-2">
                        <div class="col text-center">
                            <div>
                                <img class="img-fluid" src="assets/dashboard/images/marker-green.png" class="card-img-top"
                                    alt="Image" alt="Image" style="width:30px;">
                            </div>
                            <p style="color: black;">Aman</p>
                        </div>
                    </div>
                    <div class="row pt-2">
                        <div class="col text-center">
                            <div>
                                <img class="img-fluid" src="assets/dashboard/images/marker-yellow.png" class="card-img-top"
                                    alt="Image" alt="Image" style="width:30px;">
                            </div>
                            <p style="color: black;">Rawan</p>
                        </div>
                    </div>
                    <div class="row pt-2">
                        <div class="col text-center">
                            <div>
                                <img class="img-fluid" src="assets/dashboard/images/marker-red.png" class="card-img-top"
                                    alt="Image" alt="Image" style="width:30px;">
                            </div>
                            <p style="color: black;">Sangat Rawan</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const map = L.map('map').setView([-8.1332, 113.2226], 11);

        L.tileLayer('http://{s}.google.com/vt?lyrs=m&x={x}&y={y}&z={z}', {
            maxZoom: 20,
            subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
        }).addTo(map);

        const markers = [];
        const kecelakaanData = @json($kecelakaan);

        kecelakaanData.forEach(lokasi => {
            var markerColor = "green";

            if (lokasi.tingkat_kerawanan === 'Sangat Rawan') {
                markerColor = "red";
            } else if (lokasi.tingkat_kerawanan === 'Rawan') {
                markerColor = "yellow";
            } else if (lokasi.tingkat_kerawanan === 'Aman') {
                markerColor = "green";
            }

            var marker = L.marker([lokasi.latitude, lokasi.longitude], {
                icon: L.icon({
                    iconUrl: 'https://maps.google.com/mapfiles/ms/micons/' + markerColor +
                        '-dot.png',
                    iconSize: [32, 32],
                    iconAnchor: [16, 32],
                    popupAnchor: [0, -28]
                })
            }).addTo(map);

            var popupContent =
                `<b>${lokasi.jalan.nama_jalan}</b><br><b>${new Date(lokasi.tanggal).toLocaleDateString('id-ID')}</b><br>${lokasi.tkp_dusun}<br>${lokasi.kecamatan}<br>${lokasi.kabupaten}<br> Koordinat : ${lokasi.latitude} ${lokasi.longitude}`;
            marker.bindPopup(popupContent).openPopup();

            markers.push({
                marker: marker,
                tingkat_kerawanan: lokasi.tingkat_kerawanan,
                nama_jalan: lokasi.jalan.nama_jalan
            });
        });

        function filterMarkers() {
            const filterKerawanan = document.getElementById('filterKerawanan').value;
            const filterJalan = document.getElementById('filterJalan').value;

            markers.forEach(item => {
                const matchKerawanan = filterKerawanan === 'all' || item.tingkat_kerawanan === filterKerawanan;
                const matchJalan = filterJalan === 'all' || item.nama_jalan === filterJalan;

                if (matchKerawanan && matchJalan) {
                    map.addLayer(item.marker);
                } else {
                    map.removeLayer(item.marker);
                }
            });
        }

        document.getElementById('filterKerawanan').addEventListener('change', filterMarkers);
        document.getElementById('filterJalan').addEventListener('change', filterMarkers);
    </script>
@endsection