@extends('user.template')

@section('content')
    <!-- Hero Section -->
    <section id="hero" class="hero section">

        <div class="container text-center d-flex flex-column justify-content-center align-items-center position-relative">
            <h1>Selamat Datang di <span>SIG TPS</span></h1>
            <p>Sistem Informasi Geografis Pemetaan Tempat Pembuangan Sampah di Kabupaten Nganjuk</p>
            <div class="d-flex">
                <a href="#sebaranTPS" class="btn-get-started scrollto">Lihat Peta</a>
            </div>
        </div>

    </section><!-- /Hero Section -->

    <section id="grafik-sampah" class="section">
        <div class="container">

            <div class="section-title">
                <h2>Dashboard Sampah {{ $tahun }}</h2>
                <p>Statistik pengelolaan sampah Kabupaten Nganjuk</p>
            </div>

            <!-- Rekap Tahunan -->
            <div class="mb-4 text-center row">

                <div class="col-md-3">
                    <h4>{{ number_format($rekap['timbulan'], 0, ',', '.') }} Ton</h4>
                    <p>Total Timbulan</p>
                </div>

                <div class="col-md-3">
                    <h4>{{ number_format($rekap['kelola'], 0, ',', '.') }} Ton</h4>
                    <p>Total Dikelola</p>
                </div>

                <div class="col-md-3">
                    <h4>{{ number_format($rekap['daur'], 0, ',', '.') }} Ton</h4>
                    <p>Total Daur Ulang</p>
                </div>

                <div class="col-md-3">
                    <h4>{{ number_format($rekap['sisa'], 0, ',', '.') }} Ton</h4>
                    <p>Total Sisa</p>
                </div>

            </div>

            <!-- Grafik -->
            <div class="row justify-content-center">
                <div class="text-center col-md-8">
                    <canvas id="grafikSampah"></canvas>
                </div>
            </div>

        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        const ctx = document.getElementById('grafikSampah');

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: @json($bulan),
                datasets: [{
                        label: 'Timbulan Sampah',
                        data: @json($timbulan),
                        backgroundColor: '#dc3545'
                    },
                    {
                        label: 'Sampah Dikelola',
                        data: @json($kelola),
                        backgroundColor: '#0d6efd'
                    },
                    {
                        label: 'Daur Ulang',
                        data: @json($daur),
                        backgroundColor: '#198754'
                    },
                    {
                        label: 'Sisa Sampah',
                        data: @json($sisa),
                        backgroundColor: '#ffc107'
                    }
                ]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': ' + context.raw.toLocaleString('id-ID') +
                                    ' Ton';
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Jumlah Sampah (Ton)'
                        },
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Bulan'
                        }
                    }
                }
            }
        });
    </script>

    <!-- About Section -->
    <section id="about" class="about section">

        <!-- Section Title -->
        <div class="container section-title" data-aos="fade-up">
            <h2>Tentang</h2>
            <p>Sistem Informasi Geografis yang menampilkan data lokasi secara visual dan interaktif.</p>
        </div><!-- End Section Title -->

        <div class="container" data-aos="fade-up">
            <div class="row g-4 g-lg-5" data-aos="fade-up" data-aos-delay="200">
                <div class="col-lg-5">
                    <div class="about-img">
                        <img src="{{ asset('assets/user/img/tentang-lg.png') }}" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="col-lg-7">
                    <h3 class="pt-0 pt-lg-5">Sistem Informasi Geografis Tempat Pembuangan Sampah di Kabupaten Nganjuk</h3>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="about-tab1">
                            <p class="fst-italic">Sistem Informasi Geografis yang menampilkan visualisasi lokasi Tempat
                                Pembuangan Sampah di Kabupaten Nganjuk secara mudah, cepat, dan interaktif.</p>
                            <div class="mt-4 d-flex align-items-center">
                                <i class="bi bi-check2"></i>
                                <h4>Peta Interaktif Lokasi TPS</h4>
                            </div>
                            <p>Peta digital yang memudahkan pengguna menemukan lokasi TPS terdekat, lengkap dengan tampilan
                                yang intuitif sehingga informasi dapat diakses dengan cepat dan jelas.</p>
                            <div class="mt-4 d-flex align-items-center">
                                <i class="bi bi-check2"></i>
                                <h4>Informasi TPS Lengkap</h4>
                            </div>
                            <p>Menyajikan berbagai informasi penting seperti kapasitas, kondisi, status, hingga jenis
                                pengelolaan TPS, sehingga pengguna dapat memahami keadaan TPS secara menyeluruh.</p>
                            <div class="mt-4 d-flex align-items-center">
                                <i class="bi bi-check2"></i>
                                <h4>Layanan Aduan TPS</h4>
                            </div>
                            <p>Fitur yang memungkinkan masyarakat menyampaikan keluhan atau laporan terkait TPS dengan
                                mudah, membantu pemerintah dalam memperbaiki serta meningkatkan pengelolaan sampah.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section><!-- /About Section -->

    <!-- Services Section -->
    <section id="services" class="services section">

        <div class="container" data-aos="fade-up" data-aos-delay="100">

            <div class="row gy-5">

                @foreach ($kategoriTps as $index => $item)
                    <div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="{{ 200 + $index * 100 }}">

                        <div class="service-item">
                            <div class="img">

                                @if ($item->foto_kategori)
                                    <img src="{{ asset('storage/' . $item->foto_kategori) }}" class="img-fluid"
                                        alt="{{ $item->nama_kategori }}">
                                @else
                                    <img src="{{ asset('assets/user/img/services-1.jpg') }}" class="img-fluid"
                                        alt="Default">
                                @endif

                            </div>

                            <div class="details position-relative">

                                <div class="icon">
                                    @if ($item->nama_kategori == 'TPS')
                                        <i class="bi bi-trash"></i>
                                    @elseif ($item->nama_kategori == 'TPS 3R')
                                        <i class="bi bi-recycle"></i>
                                    @elseif ($item->nama_kategori == 'TPA')
                                        <i class="bi bi-geo-alt"></i>
                                    @else
                                        <i class="bi bi-archive"></i>
                                    @endif
                                </div>

                                <a href="{{ route('user.about.kategori', ['id' => $item->id_kategori_tps]) }}"
                                    class="stretched-link">
                                    <h3>{{ $item->kepanjangan_kategori }}</h3>
                                </a>

                                <p>
                                    {{ explode('.', $item->deskripsi)[0] }}.
                                </p>

                            </div>
                        </div>

                    </div>
                @endforeach

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

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

    <style>
        header,
        .navbar,
        #header {
            position: sticky;
            top: 0;
            z-index: 2000 !important;
            background: #fff;
        }

        .leaflet-top,
        .leaflet-bottom,
        .leaflet-control {
            z-index: 400 !important;
        }

        #mapTPS {
            width: 100%;
            height: 450px;
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
        }

        .legend {
            background: #fff;
            padding: 10px 12px;
            border-radius: 10px;
            font-size: 14px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
            line-height: 18px;
        }

        .legend i {
            width: 16px;
            height: 16px;
            float: left;
            margin-right: 8px;
        }

        .user-location {
            filter: drop-shadow(0 0 8px rgba(13, 110, 253, 0.8)) drop-shadow(0 0 16px rgba(13, 110, 253, 0.6));
        }
    </style>

    <section class="section" id="sebaranTPS">
        <!-- Section Title -->
        <div class="container section-title" data-aos="fade-up">
            <h2>Peta Sebaran TPS</h2>
            <p>Peta interaktif yang menampilkan sebaran Tempat Pembuangan Sampah di Kabupaten Nganjuk.</p>
        </div><!-- End Section Title -->
        <div class="container">
            <div class="map-wrapper">
                <div class="map-action">
                    <div class="map-action-text">
                        Temukan <b>TPS terdekat</b> dari lokasi Anda saat ini
                    </div>
                    <button type="button" id="btnLokasi" class="btn-lokasi">
                        Cari TPS Terdekat
                    </button>
                </div>

                <div id="mapTPS"></div>
            </div>
        </div>
    </section>

    <script>
        var map = L.map('mapTPS').setView([-7.6078, 111.903], 12);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap'
        }).addTo(map);

        function icon(color) {
            return new L.Icon({
                iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-${color}.png`,
                shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34]
            });
        }

        var iconTPS = icon('green');
        var iconTPS3R = icon('blue');
        var iconTPA = icon('red');

        var iconNear = new L.Icon({
            iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-gold.png',
            shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34]
        });

        var tpsData = @json($tps);
        var markers = [];

        tpsData.forEach(tps => {
            if (!tps.latitude || !tps.longitude) return;

            let iconUse = iconTPS;
            if (tps.kategori_tps_id == 2) iconUse = iconTPS3R;
            if (tps.kategori_tps_id == 3) iconUse = iconTPA;

            let marker = L.marker([tps.latitude, tps.longitude], {
                    icon: iconUse
                })
                .bindPopup(`
                <strong>${tps.nama_tps}</strong><br>
                <small>${tps.alamat_tps ?? '-'}</small><br>
                <span class="badge bg-success">${tps.status_tps ?? '-'}</span>
                <hr style="margin:6px 0">
                <a href="/tps/${tps.id_tps}" style="font-size:13px">Detail TPS</a>
            `)
                .addTo(map);

            marker.tpsData = tps;
            markers.push(marker);
        });
        var legend = L.control({
            position: 'bottomleft'
        });
        legend.onAdd = function() {
            var div = L.DomUtil.create('div', 'legend');
            div.innerHTML = `
            <strong>Kategori TPS</strong><br>
            <i style="background:#198754"></i> TPS<br>
            <i style="background:#0d6efd"></i> TPS 3R<br>
            <i style="background:#dc3545"></i> TPA
        `;
            return div;
        };
        legend.addTo(map);

        function getDistance(lat1, lon1, lat2, lon2) {
            const R = 6371;
            const dLat = (lat2 - lat1) * Math.PI / 180;
            const dLon = (lon2 - lon1) * Math.PI / 180;
            const a =
                Math.sin(dLat / 2) ** 2 +
                Math.cos(lat1 * Math.PI / 180) *
                Math.cos(lat2 * Math.PI / 180) *
                Math.sin(dLon / 2) ** 2;
            return R * (2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)));
        }

        document.getElementById('btnLokasi').addEventListener('click', function() {

            if (!navigator.geolocation) {
                alert('Browser tidak mendukung GPS');
                return;
            }

            navigator.geolocation.getCurrentPosition(pos => {
                let userLat = pos.coords.latitude;
                let userLng = pos.coords.longitude;

                L.circleMarker([userLat, userLng], {
                        radius: 6,
                        color: '#0d6efd',
                        fillColor: '#0d6efd',
                        fillOpacity: 1,
                        className: 'user-location'
                    }).addTo(map)
                    .bindPopup('Lokasi Anda')
                    .openPopup();

                setInterval(() => {
                    let pulse = L.circle([userLat, userLng], {
                        radius: 40,
                        color: '#0d6efd',
                        fillColor: '#0d6efd',
                        fillOpacity: 0.35,
                        weight: 0
                    }).addTo(map);

                    setTimeout(() => map.removeLayer(pulse), 1000);
                }, 1200);

                let nearest = null;
                let minDist = Infinity;

                markers.forEach(m => {
                    let tps = m.tpsData;
                    let dist = getDistance(userLat, userLng, tps.latitude, tps.longitude);
                    if (dist < minDist) {
                        minDist = dist;
                        nearest = m;
                    }
                });

                if (nearest) {
                    nearest.setIcon(iconNear);
                    nearest.openPopup();
                    map.setView(nearest.getLatLng(), 15);
                }
            });
        });
    </script>

    <section class="geo-stat-section">
        <div class="geo-bg"></div>

        <div class="container position-relative" data-aos="fade-up" data-aos-delay="100">
            <div class="row align-items-center">

                <!-- KIRI -->
                <div class="mb-4 col-lg-5 mb-lg-0">
                    <span class="geo-badge">Statistik SIG TPS</span>
                    <h2 class="geo-title">
                        Pemetaan & Pengelolaan<br>
                        Sampah Kabupaten Nganjuk
                    </h2>
                    <p class="geo-desc">
                        Menampilkan jumlah fasilitas persampahan berbasis
                        Sistem Informasi Geografis secara terintegrasi.
                    </p>
                </div>

                <!-- KANAN -->
                <div class="col-lg-7">
                    <div class="geo-stats">

                        <div class="geo-item">
                            <div class="geo-icon">
                                <i class="bi bi-trash"></i>
                            </div>
                            <h3 class="counter" data-target="{{ $jumlahTps }}">0</h3>
                            <span>TPS</span>
                        </div>

                        <div class="geo-line"></div>

                        <div class="geo-item">
                            <div class="geo-icon recycle">
                                <i class="bi bi-recycle"></i>
                            </div>
                            <h3 class="counter" data-target="{{ $jumlahTps3r }}">0</h3>
                            <span>TPS 3R</span>
                        </div>

                        <div class="geo-line"></div>

                        <div class="geo-item">
                            <div class="geo-icon location">
                                <i class="bi bi-geo-alt"></i>
                            </div>
                            <h3 class="counter" data-target="{{ $jumlahTpa }}">0</h3>
                            <span>TPA</span>
                        </div>

                    </div>
                </div>

            </div>
        </div>
        <script>
            document.addEventListener("DOMContentLoaded", () => {
                document.querySelectorAll(".counter").forEach(el => {
                    const target = +el.dataset.target;
                    let val = 0;

                    const step = () => {
                        val += Math.ceil(target / 90);
                        if (val < target) {
                            el.textContent = val;
                            requestAnimationFrame(step);
                        } else {
                            el.textContent = target;
                        }
                    };
                    step();
                });
            });
        </script>
    </section>
@endsection