@extends('user.template')

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

        <div class="container d-flex flex-column justify-content-center align-items-center text-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="#about" class="btn-get-started scrollto">Lihat Peta</a>
                <!-- <a href="https://www.youtube.com/watch?v=Y7f98aduVJ8" class="glightbox btn-watch-video d-flex align-items-center"><i class="bi bi-play-circle"></i><span>Watch Video</span></a> -->
            </div>
        </div>

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

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

            <!-- Section Title -->
            <div class="section-title text-center" data-aos="fade-up">
                <h2>Timbulan Sampah</h2>
                <p>Data berikut menunjukkan total timbulan, pengelolaan, daur ulang, dan sisa sampah dalam <strong>ton per
                        hari</strong>.</p>
            </div>

            <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="service-item position-relative text-center">
                        <div class="icon">
                            <i class="bi bi-trash2 icon"></i>
                        </div>
                        <h1>
                            {{ number_format($sampah->total_sampah ?? 0, 2, ',', '.') }}
                        </h1>
                        <p><strong>Total Timbulan Sampah</strong></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="service-item position-relative text-center">
                        <div class="icon">
                            <i class="bi bi-gear icon"></i>
                        </div>
                        <h1>
                            {{ number_format($sampah->total_kelola ?? 0, 2, ',', '.') }}
                        </h1>
                        <p><strong>Total Sampah Dikelola</strong></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="service-item position-relative text-center">
                        <div class="icon">
                            <i class="bi bi-recycle icon"></i>
                        </div>
                        <h1>
                            {{ number_format($sampah->total_daur_ulang ?? 0, 2, ',', '.') }}
                        </h1>
                        <p><strong>Total Sampah Didaur Ulang</strong></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="service-item position-relative text-center">
                        <div class="icon">
                            <i class="bi bi-exclamation-triangle icon"></i>
                        </div>
                        <h1>
                            {{ number_format($sampah->sisa_sampah ?? 0, 2, ',', '.') }}
                        </h1>
                        <p><strong>Total Sisa Sampah</strong></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/about-portrait.jpg') }}" 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>

                    <!-- Tab Content -->
                    <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="d-flex align-items-center mt-4">
                                <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="d-flex align-items-center mt-4">
                                <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="d-flex align-items-center mt-4">
                                <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><!-- End Tab 1 Content -->
                    </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="#" class="stretched-link">
                                    <h3>{{ $item->kepanjangan_kategori }}</h3>
                                </a>

                                <p>
                                    {{ $item->deskripsi }}
                                </p>
                            </div>
                        </div>

                    </div>
                @endforeach

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

    {{-- Leaflet CSS & JS --}}
    <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>
        /* =============================
           MAP SECTION
           ============================= */
        #call-to-action.call-to-action {
            padding: 0 !important;
            margin: 0 !important;
        }

        #call-to-action .container {
            display: flex;
            justify-content: center;
            padding: 20px 0;
        }

        .map-wrapper {
            width: 100%;
            max-width: 1100px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
            position: relative;
        }

        #mapTPS {
            width: 100%;
            height: 450px;
            position: relative;
            z-index: 1;
        }

        .leaflet-popup-content-wrapper {
            border-radius: 14px !important;
        }

        /* =============================
           FIX LEAFLET VS NAVBAR
           ============================= */
        header,
        .navbar,
        #header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: #fff;
        }

        /* paksa semua control leaflet turun dari navbar */
        .leaflet-top {
            top: 0px !important;
            /* SESUAIKAN TINGGI NAVBAR */
            z-index: 400 !important;
        }

        .leaflet-bottom {
            bottom: 0px !important;
        }

        /* =============================
           Legend
           ============================= */
        .legend {
            background: white;
            padding: 10px 12px;
            border-radius: 10px;
            line-height: 18px;
            color: #333;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
            font-size: 14px;
        }

        .legend i {
            width: 16px;
            height: 16px;
            float: left;
            margin-right: 8px;
            opacity: 1;
        }
    </style>

    <section id="call-to-action" class="call-to-action section">

        <!-- SECTION TITLE -->
        <div class="section-title" data-aos="fade-up">
            <h2>Peta Sebaran TPS</h2>
            <p>Sistem Informasi Geografis Tempat Pembuangan Sampah</p>
        </div>

        <!-- MAP -->
        <div class="container" data-aos="fade-up">
            <div class="map-wrapper">
                <div id="mapTPS"></div>
            </div>
        </div>

    </section>

    <script>
        // =============================
        // INIT MAP
        // =============================
        var map = L.map('mapTPS', {
            zoomControl: true
        }).setView([-7.6078, 111.903], 12);

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

        // =============================
        // ICON MARKER PER KATEGORI
        // =============================
        function markerIcon(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],
                shadowSize: [41, 41]
            });
        }

        var iconTPS = markerIcon('green'); // TPS
        var iconTPS3R = markerIcon('blue'); // TPS 3R
        var iconTPA = markerIcon('red'); // TPA
        var iconDefault = markerIcon('black');

        // =============================
        // DATA TPS DARI DATABASE
        // =============================
        var tpsData = @json($lokasiTps);

        tpsData.forEach(function(tps) {
            if (tps.latitude && tps.longitude) {

                let iconKategori = iconDefault;

                // SESUAIKAN ID KATEGORI
                if (tps.kategori_tps_id == 3) {
                    iconKategori = iconTPS;
                } else if (tps.kategori_tps_id == 5) {
                    iconKategori = iconTPS3R;
                } else if (tps.kategori_tps_id == 6) {
                    iconKategori = iconTPA;
                }

                L.marker([tps.latitude, tps.longitude], {
                        icon: iconKategori
                    })
                    .addTo(map)
                    .bindPopup(`
                <div style="min-width:200px">
                    <strong>${tps.nama_tps}</strong><br>
                    ${tps.alamat_tps ?? '-'}<br>
                    <small>Status: ${tps.status_tps ?? '-'}</small>
                </div>
            `);
            }
        });

        // =============================
        // LEGEND
        // =============================
        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);
    </script>


    <!-- Contact Section -->
    <section id="contact" class="contact section">

        <!-- Section Title -->
        <div class="container section-title" data-aos="fade-up">
            <h2>Contact</h2>
            <p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
        </div><!-- End Section Title -->

        <div class="container" data-aos="fade">

            <div class="row gy-5 gx-lg-5">

                <div class="col-lg-4">

                    <div class="info">
                        <h3>Get in touch</h3>
                        <p>Et id eius voluptates atque nihil voluptatem enim in tempore minima sit ad mollitia commodi
                            minus.</p>

                        <div class="info-item d-flex">
                            <i class="bi bi-geo-alt flex-shrink-0"></i>
                            <div>
                                <h4>Location:</h4>
                                <p>A108 Adam Street, New York, NY 535022</p>
                            </div>
                        </div><!-- End Info Item -->

                        <div class="info-item d-flex">
                            <i class="bi bi-envelope flex-shrink-0"></i>
                            <div>
                                <h4>Email:</h4>
                                <p>info@example.com</p>
                            </div>
                        </div><!-- End Info Item -->

                        <div class="info-item d-flex">
                            <i class="bi bi-phone flex-shrink-0"></i>
                            <div>
                                <h4>Call:</h4>
                                <p>+1 5589 55488 55</p>
                            </div>
                        </div><!-- End Info Item -->

                    </div>

                </div>

                <div class="col-lg-8">
                    <form action="forms/contact.php" method="post" role="form" class="php-email-form">
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <input type="text" name="name" class="form-control" id="name"
                                    placeholder="Your Name" required="">
                            </div>
                            <div class="col-md-6 form-group mt-3 mt-md-0">
                                <input type="email" class="form-control" name="email" id="email"
                                    placeholder="Your Email" required="">
                            </div>
                        </div>
                        <div class="form-group mt-3">
                            <input type="text" class="form-control" name="subject" id="subject"
                                placeholder="Subject" required="">
                        </div>
                        <div class="form-group mt-3">
                            <textarea class="form-control" name="message" placeholder="Message" required=""></textarea>
                        </div>
                        <div class="my-3">
                            <div class="loading">Loading</div>
                            <div class="error-message"></div>
                            <div class="sent-message">Your message has been sent. Thank you!</div>
                        </div>
                        <div class="text-center"><button type="submit">Send Message</button></div>
                    </form>
                </div><!-- End Contact Form -->

            </div>

        </div>

    </section>
@endsection