@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">
                    <div class="icon"><i class="bi bi-trash2 icon"></i></div>
                    <h1><a href="#" class="stretched-link"></a>23,893.07</h1>
                    <p><strong>Total Timbulan Sampah</strong></p>
                </div>
            </div><!-- End Service Item -->

            <!-- 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">
                    <div class="icon"><i class="bi bi-gear icon"></i></div>
                    <h1><a href="#" class="stretched-link"></a>7,479.65</h1>
                    <p><strong>Total Sampah Dikelola</strong></p>
                </div>
            </div><!-- End Service Item -->

            <!-- 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">
                    <div class="icon"><i class="bi bi-recycle icon"></i></div>
                    <h1><a href="#" class="stretched-link"></a>2,780.05</h1>
                    <p><strong>Total Sampah Didaur Ulang</strong></p>
                </div>
            </div><!-- End Service Item -->

            <!-- 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">
                    <div class="icon"><i class="bi bi-exclamation-triangle icon"></i></div>
                    <h1><a href="#" class="stretched-link"></a>13,633.35</h1>
                    <p><strong>Total Sisa Sampah</strong></p>
                </div>
            </div><!-- End Service Item -->

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

            <div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="200">
                <div class="service-item">
                    <div class="img">
                        <img src="{{ asset('assets/user/img/services-1.jpg') }}" class="img-fluid" alt="">
                    </div>
                    <div class="details position-relative">
                        <div class="icon">
                            <i class="bi bi-activity"></i>
                        </div>
                        <a href="service-details.html" class="stretched-link">
                            <h3>Tempat Pembuangan Sampah</h3>
                        </a>
                        <p>Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores iure perferendis.</p>
                    </div>
                </div>
            </div><!-- End Service Item -->

            <div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="300">
                <div class="service-item">
                    <div class="img">
                        <img src="{{ asset('assets/user/img/services-2.jpg') }}" class="img-fluid" alt="">
                    </div>
                    <div class="details position-relative">
                        <div class="icon">
                            <i class="bi bi-broadcast"></i>
                        </div>
                        <a href="service-details.html" class="stretched-link">
                            <h3>Tempat Pengolahan Sampah Reduce, Reuse, Recycle</h3>
                        </a>
                        <p>Ut autem aut autem non a. Sint sint sit facilis nam iusto sint. Libero corrupti neque eum hic non ut nesciunt dolorem.</p>
                    </div>
                </div>
            </div><!-- End Service Item -->

            <div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="400">
                <div class="service-item">
                    <div class="img">
                        <img src="{{ asset('assets/user/img/services-3.jpg') }}" class="img-fluid" alt="">
                    </div>
                    <div class="details position-relative">
                        <div class="icon">
                            <i class="bi bi-easel"></i>
                        </div>
                        <a href="service-details.html" class="stretched-link">
                            <h3>Tempat Pembuangan Akhir</h3>
                        </a>
                        <p>Ut excepturi voluptatem nisi sed. Quidem fuga consequatur. Minus ea aut. Vel qui id voluptas adipisci eos earum corrupti.</p>
                    </div>
                </div>
            </div><!-- End Service Item -->
        </div>
    </div>
</section><!-- /Services Section -->

<!-- Call To Action 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>
    /* Hilangkan padding section */
    #call-to-action.call-to-action {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Container dibuat flex agar map bisa center */
    #call-to-action .container {
        display: flex;
        justify-content: center;
        padding: 20px 0;
    }

    /* Wrapper card map modern */
    .map-wrapper {
        width: 100%;
        max-width: 1100px;
        /* agar map di tengah */
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

    /* Map full card */
    #mapTPS {
        width: 100%;
        height: 450px;
    }

    /* Zoom Button Modern */
    .leaflet-control-zoom {
        border-radius: 10px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
        overflow: hidden !important;
    }

    /* Popup Modern */
    .leaflet-popup-content-wrapper {
        border-radius: 14px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
</style>

<section id="call-to-action" class="call-to-action section">
    <div class="container" data-aos="fade-up">

        <div class="map-wrapper">
            <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', {
        attribution: "Leaflet | © OpenStreetMap contributors",
        maxZoom: 19
    }).addTo(map);

    var tpsData = [{
            name: "TPS 1 Berbek",
            lat: -7.5978,
            lng: 111.917
        },
        {
            name: "TPS 2 Loceret",
            lat: -7.6280,
            lng: 111.910
        },
        {
            name: "TPS 3 Nganjuk Kota",
            lat: -7.6140,
            lng: 111.900
        }
    ];

    tpsData.forEach(tps => {
        L.marker([tps.lat, tps.lng])
            .addTo(map)
            .bindPopup(`<b style='font-size:16px;'>${tps.name}</b>`);
    });
</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