@extends('layouts.app')

@section('title', 'WebGIS Produksi Padi - Petunjuk')

@section('content')

    <!-- Konten Utama -->
    <main class="flex-grow max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-10 w-full">
        
        <!-- Judul Halaman -->
        <div class="mb-6 md:mb-8 text-center border-b border-gray-200 pb-5 md:pb-6">
            <h2 class="font-display text-2xl md:text-3xl font-bold text-gray-900 inline-block relative">
                PETUNJUK PENGGUNAAN SISTEM
                <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-1/2 h-1 bg-padi-500 rounded-full -mb-2.5 md:-mb-3"></span>
            </h2>
        </div>

        <!-- Teks Pengantar -->
        <div class="max-w-3xl mx-auto text-center mb-10">
            <p class="text-gray-600 text-sm md:text-base leading-relaxed">
                Halaman ini berisi panduan penggunaan WebGIS Produksi Padi Kecamatan Burau agar Anda dapat mengakses informasi spasial maupun tabel data dengan mudah dan optimal.
            </p>
        </div>

        <!-- Grid Panduan (2 Kolom) -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8 mb-8">
            
            <!-- Card 1: Cara Menggunakan Peta -->
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 guide-card">
                <h3 class="font-display font-semibold text-lg text-gray-900 mb-4 pb-2 border-b border-gray-100">
                    1. Cara Menggunakan Peta
                </h3>
                <div class="flex flex-col sm:flex-row gap-5 items-start">
                    <!-- Ilustrasi Kontrol Peta -->
                    <div class="flex-shrink-0 bg-gray-50 border border-gray-200 rounded-lg p-2 flex flex-col space-y-2">
                        <div class="w-8 h-8 flex items-center justify-center bg-white border border-gray-300 rounded shadow-sm text-gray-600 text-sm font-bold"><i class="fa-solid fa-plus"></i></div>
                        <div class="w-8 h-8 flex items-center justify-center bg-white border border-gray-300 rounded shadow-sm text-gray-600 text-sm font-bold"><i class="fa-solid fa-minus"></i></div>
                        <div class="w-8 h-8 flex items-center justify-center bg-white border border-gray-300 rounded shadow-sm text-gray-600 text-sm"><i class="fa-solid fa-hand"></i></div>
                        <div class="w-8 h-8 flex items-center justify-center bg-white border border-gray-300 rounded shadow-sm text-gray-600 text-sm"><i class="fa-solid fa-crosshairs"></i></div>
                    </div>
                    <!-- Teks Penjelasan -->
                    <ul class="text-sm text-gray-600 space-y-3">
                        <li class="flex items-start">
                            <i class="fa-solid fa-circle text-[8px] text-agri-500 mt-1.5 mr-2"></i>
                            <span>Gunakan tombol <strong>"+"</strong> untuk <em>zoom in</em> (memperbesar peta).</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-circle text-[8px] text-agri-500 mt-1.5 mr-2"></i>
                            <span>Gunakan tombol <strong>"-"</strong> untuk <em>zoom out</em> (memperkecil peta).</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-circle text-[8px] text-agri-500 mt-1.5 mr-2"></i>
                            <span>Klik dan tahan (<em>drag</em>) peta, lalu geser kursor untuk berpindah posisi wilayah (<em>pan</em>).</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-circle text-[8px] text-agri-500 mt-1.5 mr-2"></i>
                            <span>Klik tombol ikon target (bidik) untuk mengembalikan peta ke posisi dan skala awal (kamera awal).</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Card 2: Cara Melihat Data Produksi -->
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 guide-card">
                <h3 class="font-display font-semibold text-lg text-gray-900 mb-4 pb-2 border-b border-gray-100">
                    2. Cara Melihat Data Produksi
                </h3>
                <div class="flex flex-col sm:flex-row gap-5 items-start">
                    <!-- Ilustrasi Peta & Popup -->
                    <div class="flex-shrink-0 w-28 h-32 bg-blue-50/50 border border-blue-100 rounded-lg relative overflow-hidden flex items-center justify-center">
                        <i class="fa-regular fa-map text-blue-200 text-6xl"></i>
                        <!-- Mockup Popup -->
                        <div class="absolute top-3 right-2 bg-white border border-gray-200 shadow-md rounded p-1.5 w-16 z-10">
                            <div class="h-1 bg-gray-200 mb-1 rounded w-3/4"></div>
                            <div class="h-1 bg-gray-200 mb-1 rounded w-full"></div>
                            <div class="h-1 bg-gray-200 rounded w-1/2"></div>
                        </div>
                        <!-- Kursor -->
                        <i class="fa-solid fa-arrow-pointer absolute text-gray-800 text-lg bottom-6 left-10 drop-shadow-md z-20"></i>
                    </div>
                    <!-- Teks Penjelasan -->
                    <ul class="text-sm text-gray-600 space-y-3">
                        <li class="flex items-start">
                            <i class="fa-solid fa-circle text-[8px] text-blue-500 mt-1.5 mr-2"></i>
                            <span>Arahkan kursor lalu <strong>Klik</strong> pada wilayah polygon desa yang ingin dilihat informasinya.</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-circle text-[8px] text-blue-500 mt-1.5 mr-2"></i>
                            <span>Informasi rincian produksi padi akan muncul secara otomatis dalam bentuk kotak dialog (<em>popup</em>).</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-circle text-[8px] text-blue-500 mt-1.5 mr-2"></i>
                            <span>Data yang ditampilkan dalam popup meliputi: nama desa, total produksi (Ton), luas panen (Ha), dan tingkat produktivitas.</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Card 3: Keterangan Simbol dan Warna (Legend) -->
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 guide-card">
                <h3 class="font-display font-semibold text-lg text-gray-900 mb-4 pb-2 border-b border-gray-100">
                    3. Keterangan Simbol & Warna
                </h3>
                <div class="flex flex-col sm:flex-row gap-6 items-start">
                    <!-- Visual Legenda -->
                    <div class="flex-shrink-0 flex flex-col space-y-1.5 bg-gray-50 border border-gray-100 p-3 rounded-lg min-w-[120px]">
                        <div class="flex items-center text-xs text-gray-600">
                            <span class="w-5 h-5 bg-agri-100 border border-gray-200 mr-2 rounded-sm shadow-sm"></span> &lt; 50 Ton
                        </div>
                        <div class="flex items-center text-xs text-gray-600">
                            <span class="w-5 h-5 bg-agri-300 border border-gray-200 mr-2 rounded-sm shadow-sm"></span> 50 - 100 Ton
                        </div>
                        <div class="flex items-center text-xs text-gray-600">
                            <span class="w-5 h-5 bg-agri-500 border border-gray-200 mr-2 rounded-sm shadow-sm"></span> 100 - 150 Ton
                        </div>
                        <div class="flex items-center text-xs text-gray-600">
                            <span class="w-5 h-5 bg-agri-700 border border-gray-200 mr-2 rounded-sm shadow-sm"></span> 150 - 200 Ton
                        </div>
                        <div class="flex items-center text-xs text-gray-600">
                            <span class="w-5 h-5 bg-agri-900 border border-gray-200 mr-2 rounded-sm shadow-sm"></span> &gt; 200 Ton
                        </div>
                    </div>
                    <!-- Teks Penjelasan -->
                    <ul class="text-sm text-gray-600 space-y-3">
                        <li class="flex items-start">
                            <i class="fa-solid fa-circle text-[8px] text-padi-500 mt-1.5 mr-2"></i>
                            <span>Warna (gradasi hijau) pada peta menunjukkan klasifikasi jumlah produksi padi per desa.</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-circle text-[8px] text-padi-500 mt-1.5 mr-2"></i>
                            <span><strong>Semakin gelap</strong> warna hijau pada suatu wilayah, menandakan semakin <strong>besar/tinggi</strong> nilai produksi padi di wilayah tersebut.</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-circle text-[8px] text-padi-500 mt-1.5 mr-2"></i>
                            <span>Legenda warna (keterangan interval nilai) dapat dilihat pada bagian pojok kiri atau kanan bawah di halaman Peta.</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Card 4: Navigasi Sistem -->
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 guide-card">
                <h3 class="font-display font-semibold text-lg text-gray-900 mb-4 pb-2 border-b border-gray-100">
                    4. Navigasi Sistem
                </h3>
                <div class="flex flex-col sm:flex-row gap-5 items-start">
                    <!-- Ilustrasi Navbar Atas -->
                    <div class="flex-shrink-0 w-full sm:w-28 border border-gray-200 rounded-lg overflow-hidden flex flex-col bg-gray-50">
                        <div class="bg-white border-b border-gray-200 p-2 flex space-x-1 justify-center">
                            <div class="w-4 h-1.5 bg-gray-300 rounded"></div>
                            <div class="w-4 h-1.5 bg-agri-500 rounded"></div>
                            <div class="w-4 h-1.5 bg-gray-300 rounded"></div>
                        </div>
                        <div class="p-3 flex items-center justify-center">
                            <i class="fa-regular fa-window-maximize text-gray-300 text-3xl"></i>
                        </div>
                    </div>
                    <!-- Teks Penjelasan -->
                    <ul class="text-sm text-gray-600 space-y-3">
                        <li class="flex items-start">
                            <i class="fa-solid fa-circle text-[8px] text-purple-500 mt-1.5 mr-2"></i>
                            <span>Gunakan <strong>Menu Navigasi di bagian atas</strong> layar untuk berpindah antar halaman aplikasi.</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-circle text-[8px] text-purple-500 mt-1.5 mr-2"></i>
                            <span>Menu <strong>Peta</strong> untuk melihat visualisasi peta wilayah secara spasial.</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-circle text-[8px] text-purple-500 mt-1.5 mr-2"></i>
                            <span>Menu <strong>Data Produksi</strong> untuk melihat rekapitulasi data dalam bentuk tabel lengkap.</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa-solid fa-circle text-[8px] text-purple-500 mt-1.5 mr-2"></i>
                            <span>Menu <strong>Tentang</strong> dan <strong>Kontak</strong> untuk informasi seputar sistem dan developer.</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Bagian Bawah: Catatan & Bantuan -->
        <div class="grid grid-cols-1 lg:grid-cols-1 gap-6">
            
            <!-- Box Catatan -->
            <div class="lg:col-span-2 bg-amber-50 p-6 rounded-2xl shadow-sm border border-amber-200 flex items-start">
                <div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center text-amber-500 text-xl mr-4 flex-shrink-0">
                    <i class="fa-regular fa-lightbulb"></i>
                </div>
                <div>
                    <h4 class="font-display font-semibold text-amber-900 mb-1">Catatan Penting</h4>
                    <p class="text-sm text-amber-800 leading-relaxed text-justify">
                        Data produksi yang ditampilkan pada sistem WebGIS ini bersumber dari instansi terkait (Dinas Pertanian Kabupaten Luwu Timur) dan dapat berubah/diperbarui sewaktu-waktu sesuai dengan siklus panen tahunan berjalan.
                    </p>
                </div>
            </div>



        </div>

    </main>



    <!-- Script untuk Toggle Menu Mobile dengan Animasi -->
    <script>
        function toggleMobileMenu() {
            const menu = document.getElementById('mobile-menu');
            const icon = document.getElementById('mobile-menu-icon');
            
            if (menu.classList.contains('hidden')) {
                menu.classList.remove('hidden');
                setTimeout(() => {
                    menu.classList.remove('opacity-0', '-translate-y-2');
                    menu.classList.add('opacity-100', 'translate-y-0');
                }, 10);
                
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-xmark');
            } else {
                menu.classList.remove('opacity-100', 'translate-y-0');
                menu.classList.add('opacity-0', '-translate-y-2');
                
                setTimeout(() => {
                    menu.classList.add('hidden');
                }, 300);
                
                icon.classList.remove('fa-xmark');
                icon.classList.add('fa-bars');
            }
        }
    </script>
@endsection