@extends('users/layouts.template')

@php
use Carbon\Carbon;
@endphp

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

    .wrapper-bg {
        position: relative;
        height: 250px;
    }

    .wrapper-bg::before {
        content: "";
        background-image: url('assets/users/img/pt2.jpg');
        background-size: cover;
        background-position: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: brightness(0.3);
    }

    .container {
        text-align: center;
        position: relative;
        z-index: 1;
        color: white;
    }
</style>

<section class="wrapper-bg bg-lalin">
    <div class="container py-12 py-md-4 text-center">
        <div class="row">
            <div class="col-lg-10 col-xxl-12 mx-auto">
                <h1 class="display-1 mb-3 text-white" style="filter: brightness(100) !important;">Pemetaan</h1>
                <p class="lead mb-1">Pemetaan Daerah Rawan Kecelakaan Berdasarkan Data Kecelakaan di Jalan Nasional Tahun
                    2018 dan 2019</p>
            </div>
        </div>
    </div>
</section>

<section class="wrapper bg-light">
    <div class="container pb-2 pt-10">
        <div class="row gx-lg-8 gx-xl-12">
            <h2 class="header-title mb-10 text-start" style="font-family: Arial;">Peta Kerawanan Lokasi Kecelakaan</h2>
            <div class="col-lg-10">
                <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>
                <section class="wrapper bg-light mb-5">
                    <div id="map"></div>
                </section>
            </div>
            <div class="col-md-3 col-lg-2 pt-12">
                <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>
            <!-- <section class="wrapper bg-light">
                    <div class="container py-8 py-md-6">
                        <h2 class="my-5">Data Lokasi Kecelakaan</h2>
                        <hr class="my-5">
                        <div class="row">
                            <div class="col-12">
                                <table id="example" class="table table-striped text-center" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Nama Jalan</th>
                                            <th>Tanggal</th>
                                            <th>Kecamatan</th>
                                            <th>Status Kerawanan</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($kecelakaan as $k)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $k->jalan->nama_jalan }}</td>
                                                <td><?php
                                                    // Mengubah format tanggal
                                                    $tanggal = $k->tanggal;
                                                    $tanggal_baru = date('d-m-Y', strtotime($tanggal));

                                                    echo $tanggal_baru;
                                                    ?></td>
                                                <td>{{ $k->kecamatan }}</td>
                                                <td>
                                                    @if ($k->tingkat_kerawanan == 'Aman')
                                                        <a
                                                            class="btn btn-green rounded-pill">{{ $k->tingkat_kerawanan }}</a>
                                                    @elseif ($k->tingkat_kerawanan == 'Rawan')
                                                        <a
                                                            class="btn btn-yellow rounded-pill">{{ $k->tingkat_kerawanan }}</a>
                                                    @else
                                                        <a class="btn btn-red rounded-pill">{{ $k->tingkat_kerawanan }}</a>
                                                    @endif
                                                </td>
                                                <td> <a href="{{ route('detail', $k->id) }}"
                                                        class="btn btn-outline-primary rounded-pill mx-1 mb-2 mb-md-0">Detail</a>
                                                </td>
                                            </tr> 
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>No</th>
                                            <th>Nama Jalan</th>
                                            <th>Alamat</th>
                                            <th>Status Kerawanan</th>
                                            <th>Action</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </section> -->

        </div>
    </div>
</section>

<section class="wrapper bg-gray">
    <div class="container py-8 py-md-6">
        <!-- Placeholder for additional content or buttons -->
    </div>
</section>

<section class="wrapper bg-light">
    <div class="container py-4 py-md-6">
        <h2 class="my-5">Data Tingkat Kerawanan Jalan</h2>
        <hr class="my-5">
        @include('users/pemetaan/data')

        <div class="row pt-5">
            <div class="col-12">
                <table id="example" class="table table-striped text-center" style="width:100%">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama Jalan</th>
                            <th>Tingkat Kerawanan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $dataItem)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td class="text-start">{{ $dataItem['nama_jalan'] }}</td>
                            <td>
                                @if ($dataItem['status_kerawanan'] == 'Aman')
                                <a class="btn btn-green rounded-pill">{{ $dataItem['status_kerawanan'] }}</a>
                                @elseif ($dataItem['status_kerawanan'] == 'Rawan')
                                <a class="btn btn-yellow rounded-pill">{{ $dataItem['status_kerawanan'] }}</a>
                                @else
                                <a class="btn btn-red rounded-pill">{{ $dataItem['status_kerawanan'] }}</a>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>No</th>
                            <th>Nama Jalan</th>
                            <th>Tingkat Kerawanan</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</section>

@include('users/pemetaan/modalCreate')
@include('users/pemetaan/modalDetail')
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<script>
    $(document).ready(function() {
        $('#example').DataTable();
    });

    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>${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