@extends('user.template')

@section('title', 'Beranda')

@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="{{ route('user.sig-tps') }}" class="btn-get-started scrollto">Lihat Peta</a>
            </div>
        </div>

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

    <!-- Featured Services Section -->
    <section id="featured-services" class="featured-services section">
        <div class="container">

            <div class="container section-title" data-aos="fade-up">
                <h2>Sampah</h2>
                <p>Total sampah yang terkumpul di seluruh wilayah Kabupaten Nganjuk pada tahun
                    {{ $sampah->tahun ?? 'Tahun Tidak Tersedia' }}</p>
            </div><!-- End Section Title -->

            <div class="row gy-4">

                <!-- Total Timbulan Sampah -->
                <div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100">
                    <div class="text-center service-item position-relative">
                        <div class="icon">
                            <i class="bi bi-trash2 icon"></i>
                        </div>
                        <h2>
                            {{ number_format($sampah->total_sampah ?? 0, 2, ',', '.') }}
                        </h2>
                        <p>Total Timbulan Sampah (ton)</p>
                    </div>
                </div>

                <!-- Total Sampah Dikelola -->
                <div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="200">
                    <div class="text-center service-item position-relative">
                        <div class="icon">
                            <i class="bi bi-gear icon"></i>
                        </div>
                        <h2>
                            {{ number_format($sampah->total_kelola ?? 0, 2, ',', '.') }}
                        </h2>
                        <p>Total Sampah Dikelola (ton)</p>
                    </div>
                </div>

                <!-- Total Sampah Didaur Ulang -->
                <div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="300">
                    <div class="text-center service-item position-relative">
                        <div class="icon">
                            <i class="bi bi-recycle icon"></i>
                        </div>
                        <h2>
                            {{ number_format($sampah->total_daur_ulang ?? 0, 2, ',', '.') }}
                        </h2>
                        <p>Total Sampah Didaur Ulang (ton)</p>
                    </div>
                </div>

                <!-- Total Sisa Sampah -->
                <div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="400">
                    <div class="text-center service-item position-relative">
                        <div class="icon">
                            <i class="bi bi-exclamation-triangle icon"></i>
                        </div>
                        <h2>
                            {{ number_format($sampah->sisa_sampah ?? 0, 2, ',', '.') }}
                        </h2>
                        <p>Total Sisa Sampah (ton)</p>
                    </div>
                </div>

            </div>


        </div>
    </section>
    <!-- /Featured Services Section -->


    <!-- 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 && file_exists(public_path('assets/admin/images/kategori-tps/' . $item->foto_kategori)))
                                    <img src="{{ asset('assets/admin/images/kategori-tps/' . $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">
        <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);
        });

        /* ===== LEGEND KATEGORI (BALIK 😤) ===== */
        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>
    </section>

    <section id="faq" class="faq section">

        <div class="container-fluid">

            <div class="row gy-4 justify-content-center">

                <div class="order-2 col-lg-7 d-flex flex-column justify-content-center order-lg-1">

                    <div class="text-center content px-xl-6" data-aos="fade-up" data-aos-delay="100">
                        <h3><span>Pertanyaan yang Sering </span><strong>Diajukan</strong></h3>
                        <p>
                            Berikut adalah beberapa pertanyaan yang sering diajukan oleh pengguna terkait
                            informasi, fitur, dan layanan pada website.
                        </p>
                    </div>

                    <div class="faq-container px-xl-5" data-aos="fade-up" data-aos-delay="200">

                        <!-- FAQ 1 -->
                        <div class="faq-item faq-active">
                            <i class="faq-icon bi bi-question-circle"></i>
                            <h3>Apa tujuan utama website ini?</h3>
                            <div class="faq-content">
                                <p>
                                    Website ini bertujuan untuk menyediakan informasi yang akurat dan mudah diakses
                                    oleh masyarakat mengenai lokasi dan data Tempat Pembuangan Sampah (TPS). Dengan adanya
                                    website ini, diharapkan masyarakat dapat lebih memahami kondisi
                                    TPS serta mendukung pengelolaan lingkungan yang lebih baik.
                                </p>
                            </div>
                            <i class="faq-toggle bi bi-chevron-right"></i>
                        </div><!-- End Faq item-->

                        <!-- FAQ 2 -->
                        <div class="faq-item">
                            <i class="faq-icon bi bi-question-circle"></i>
                            <h3>Bagaimana cara melihat peta sebaran TPS?</h3>
                            <div class="faq-content">
                                <p>
                                    Peta sebaran TPS dapat dilihat melalui menu Sebaran TPS yang tersedia pada halaman utama
                                    website. Peta tersebut bersifat interaktif dan menampilkan lokasi TPS berdasarkan
                                    wilayah. Pengguna dapat mengklik setiap penanda lokasi untuk melihat detail informasi
                                    seperti alamat TPS dan keterangan tambahan lainnya.
                                </p>
                                {{-- <p>

                                </p> --}}
                            </div>
                            <i class="faq-toggle bi bi-chevron-right"></i>
                        </div><!-- End Faq item-->

                        <!-- FAQ 3 -->
                        <div class="faq-item">
                            <i class="faq-icon bi bi-question-circle"></i>
                            <h3>Bagaimana cara mengadukan permasalahan TPS?</h3>
                            <div class="faq-content">
                                <p>
                                    Pengaduan permasalahan TPS dapat dilakukan melalui menu Aduan TPS yang tersedia
                                    pada website dengan mengisi formulir yang telah disediakan. Laporan yang masuk akan
                                    diteruskan kepada pihak terkait untuk ditindaklanjuti
                                    guna meningkatkan kualitas pengelolaan TPS.
                                </p>
                            </div>
                            <i class="faq-toggle bi bi-chevron-right"></i>
                        </div><!-- End Faq item-->

                        <!-- FAQ 4 -->
                        <div class="faq-item">
                            <i class="faq-icon bi bi-question-circle"></i>
                            <h3>Apakah website ini dapat diakses melalui perangkat mobile?</h3>
                            <div class="faq-content">
                                <p>
                                    Ya, website ini dirancang secara responsif sehingga dapat diakses melalui
                                    berbagai perangkat, termasuk smartphone dan tablet. Tampilan website akan menyesuaikan
                                    ukuran layar perangkat pengguna tanpa
                                    mengurangi fungsi dan informasi yang tersedia.
                                </p>
                            </div>
                            <i class="faq-toggle bi bi-chevron-right"></i>
                        </div><!-- End Faq item-->

                    </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