@extends('layouts.app')

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

@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">
                KONTAK KAMI
                <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-4xl mx-auto text-center mb-10">
            <p class="text-gray-600 text-sm md:text-base leading-relaxed">
                Jika Anda memiliki pertanyaan, saran, atau membutuhkan informasi lebih lanjut mengenai WebGIS Produksi Padi Kecamatan Burau, silakan hubungi kami melalui informasi di bawah ini atau kirimkan pesan melalui formulir kontak.
            </p>
        </div>

        <!-- Grid Layout (1 Kolom di Mobile, 3 Kolom di Desktop) -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10">
            
            <!-- KOLOM KIRI (Formulir Kontak - Lebar 2/3 di Desktop) -->
            <div class="lg:col-span-2">
                <div class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-gray-100">
                    <div class="flex items-center mb-6 border-b border-gray-100 pb-4">
                        <div class="w-10 h-10 rounded-full bg-agri-50 text-agri-600 flex items-center justify-center mr-4">
                            <i class="fa-regular fa-envelope-open text-xl"></i>
                        </div>
                        <h3 class="font-display text-xl font-semibold text-gray-900">Kirim Pesan</h3>
                    </div>

                    <!-- Formulir -->
                    <form onsubmit="kirimWA(event)" class="space-y-5">
                        
                        <!-- Input Nama -->
                        <div>
                            <label for="nama" class="block text-sm font-medium text-gray-700 mb-1">Nama Lengkap</label>
                            <input type="text" id="nama" name="nama" placeholder="Masukkan nama lengkap" 
                                class="w-full rounded-lg border-gray-300 border bg-gray-50 px-4 py-3 text-sm focus:bg-white focus:border-agri-500 focus:ring-2 focus:ring-agri-200 outline-none transition-all" required>
                        </div>

                        <!-- Input Email -->
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                            <input type="email" id="email" name="email" placeholder="Masukkan email" 
                                class="w-full rounded-lg border-gray-300 border bg-gray-50 px-4 py-3 text-sm focus:bg-white focus:border-agri-500 focus:ring-2 focus:ring-agri-200 outline-none transition-all" required>
                        </div>

                        <!-- Input No. Telepon -->
                        <div>
                            <label for="telepon" class="block text-sm font-medium text-gray-700 mb-1">No. Telepon</label>
                            <input type="tel" id="telepon" name="telepon" placeholder="Masukkan nomor telepon" 
                                class="w-full rounded-lg border-gray-300 border bg-gray-50 px-4 py-3 text-sm focus:bg-white focus:border-agri-500 focus:ring-2 focus:ring-agri-200 outline-none transition-all">
                        </div>

                        <!-- Dropdown Subjek -->
                        <div>
                            <label for="subjek" class="block text-sm font-medium text-gray-700 mb-1">Subjek</label>
                            <div class="relative">
                                <select id="subjek" name="subjek" 
                                    class="w-full appearance-none rounded-lg border-gray-300 border bg-gray-50 px-4 py-3 text-sm text-gray-700 focus:bg-white focus:border-agri-500 focus:ring-2 focus:ring-agri-200 outline-none transition-all cursor-pointer">
                                    <option value="" disabled selected>Pilih subjek</option>
                                    <option value="pertanyaan">Pertanyaan Umum</option>
                                    <option value="saran">Saran / Masukan</option>
                                    <option value="data">Permintaan Data</option>
                                    <option value="lainnya">Lainnya</option>
                                </select>
                                <!-- Ikon Panah Bawah Kustom -->
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-gray-500">
                                    <i class="fa-solid fa-chevron-down text-sm"></i>
                                </div>
                            </div>
                        </div>

                        <!-- Textarea Pesan -->
                        <div>
                            <label for="pesan" class="block text-sm font-medium text-gray-700 mb-1">Pesan</label>
                            <textarea id="pesan" name="pesan" rows="5" placeholder="Tulis pesan Anda di sini..." 
                                class="w-full rounded-lg border-gray-300 border bg-gray-50 px-4 py-3 text-sm focus:bg-white focus:border-agri-500 focus:ring-2 focus:ring-agri-200 outline-none transition-all resize-none" required></textarea>
                        </div>

                        <!-- Tombol Submit -->
                        <div class="pt-2 flex justify-end">
                            <button type="submit" 
                                class="w-full sm:w-auto flex justify-center items-center px-6 py-3 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-agri-700 hover:bg-agri-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-agri-500 transition-colors">
                                <i class="fa-solid fa-paper-plane mr-2"></i> Kirim Pesan
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- KOLOM KANAN (Informasi Kontak - Lebar 1/3 di Desktop) -->
            <div class="lg:col-span-1 space-y-6">
                
                <!-- Card Informasi Kontak -->
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                    <div class="flex items-center mb-5 border-b border-gray-100 pb-3">
                        <i class="fa-solid fa-address-book text-agri-600 text-lg mr-3"></i>
                        <h3 class="font-display font-semibold text-lg text-gray-900">Informasi Kontak</h3>
                    </div>
                    
                    <div class="space-y-4">
                        <!-- Institusi -->
                        <div class="flex items-start">
                            <i class="fa-solid fa-building text-gray-400 mt-1 mr-4 w-5 text-center"></i>
                            <div>
                                <p class="text-sm font-semibold text-gray-800">Dinas Pertanian Kab. Luwu Timur</p>
                                <p class="text-sm text-gray-600">Bidang Tanaman Pangan</p>
                            </div>
                        </div>
                        <!-- Alamat -->
                        <div class="flex items-start">
                            <i class="fa-solid fa-location-dot text-gray-400 mt-1 mr-4 w-5 text-center"></i>
                            <div>
                                <p class="text-sm text-gray-500 font-medium mb-0.5">Alamat</p>
                                <p class="text-sm text-gray-700 leading-relaxed">
                                    Jl. Soekarno Hatta No. 01<br>
                                    Malili, Kec. Malili, Kab. Luwu Timur<br>
                                    Sulawesi Selatan
                                </p>
                            </div>
                        </div>
                        <!-- Telepon -->
                        <div class="flex items-start">
                            <i class="fa-solid fa-phone text-gray-400 mt-1 mr-4 w-5 text-center"></i>
                            <div>
                                <p class="text-sm text-gray-500 font-medium mb-0.5">Telepon</p>
                                <p class="text-sm text-gray-700">(0474) 321234</p>
                            </div>
                        </div>
                        <!-- Email -->
                        <div class="flex items-start">
                            <i class="fa-solid fa-envelope text-gray-400 mt-1 mr-4 w-5 text-center"></i>
                            <div>
                                <p class="text-sm text-gray-500 font-medium mb-0.5">Email</p>
                                <a href="mailto:pertanian@luwutimurkab.go.id" class="text-sm text-agri-600 hover:text-agri-800 transition-colors break-all">
                                    pertanian@luwutimurkab.go.id
                                </a>
                            </div>
                        </div>
                        <!-- Website -->
                        <div class="flex items-start">
                            <i class="fa-solid fa-globe text-gray-400 mt-1 mr-4 w-5 text-center"></i>
                            <div>
                                <p class="text-sm text-gray-500 font-medium mb-0.5">Website</p>
                                <a href="#" class="text-sm text-agri-600 hover:text-agri-800 transition-colors">
                                    www.luwutimurkab.go.id
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Card Jam Operasional -->
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                    <div class="flex items-center mb-4 border-b border-gray-100 pb-3">
                        <i class="fa-regular fa-clock text-agri-600 text-lg mr-3"></i>
                        <h3 class="font-display font-semibold text-lg text-gray-900">Jam Operasional</h3>
                    </div>
                    
                    <div class="space-y-2">
                        <div class="flex justify-between items-center text-sm">
                            <span class="text-gray-600 font-medium">Senin - Jumat</span>
                            <span class="text-gray-800 font-semibold bg-green-50 text-green-700 px-2 py-1 rounded">08.00 - 16.00 WITA</span>
                        </div>
                        <div class="flex justify-between items-center text-sm border-t border-dashed border-gray-200 pt-2">
                            <span class="text-gray-600 font-medium">Sabtu - Minggu</span>
                            <span class="text-gray-500 bg-gray-100 px-2 py-1 rounded">Tutup</span>
                        </div>
                    </div>
                </div>

                <!-- Card Media Sosial -->
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                    <div class="flex items-center mb-5 border-b border-gray-100 pb-3">
                        <i class="fa-regular fa-comments text-agri-600 text-lg mr-3"></i>
                        <h3 class="font-display font-semibold text-lg text-gray-900">Media Sosial</h3>
                    </div>
                    
                    <!-- Grid Ikon Sosial Media -->
                    <div class="grid grid-cols-4 gap-2">
                        <!-- Facebook -->
                        <a href="#" class="flex flex-col items-center group">
                            <div class="w-12 h-12 rounded-full bg-gray-50 flex items-center justify-center text-gray-500 group-hover:bg-blue-50 group-hover:text-blue-600 transition-all duration-300">
                                <i class="fa-brands fa-facebook-f text-xl"></i>
                            </div>
                            <span class="text-[10px] text-gray-500 mt-2 text-center group-hover:text-blue-600 transition-colors">Facebook</span>
                        </a>
                        
                        <!-- Instagram -->
                        <a href="#" class="flex flex-col items-center group">
                            <div class="w-12 h-12 rounded-full bg-gray-50 flex items-center justify-center text-gray-500 group-hover:bg-pink-50 group-hover:text-pink-600 transition-all duration-300">
                                <i class="fa-brands fa-instagram text-xl"></i>
                            </div>
                            <span class="text-[10px] text-gray-500 mt-2 text-center group-hover:text-pink-600 transition-colors">Instagram</span>
                        </a>
                        
                        <!-- YouTube -->
                        <a href="#" class="flex flex-col items-center group">
                            <div class="w-12 h-12 rounded-full bg-gray-50 flex items-center justify-center text-gray-500 group-hover:bg-red-50 group-hover:text-red-600 transition-all duration-300">
                                <i class="fa-brands fa-youtube text-xl"></i>
                            </div>
                            <span class="text-[10px] text-gray-500 mt-2 text-center group-hover:text-red-600 transition-colors">YouTube</span>
                        </a>
                        
                        <!-- Website (Alternatif Icon) -->
                        <a href="#" class="flex flex-col items-center group">
                            <div class="w-12 h-12 rounded-full bg-gray-50 flex items-center justify-center text-gray-500 group-hover:bg-agri-50 group-hover:text-agri-600 transition-all duration-300">
                                <i class="fa-solid fa-globe text-xl"></i>
                            </div>
                            <span class="text-[10px] text-gray-500 mt-2 text-center group-hover:text-agri-600 transition-colors">Website</span>
                        </a>
                    </div>
                </div>

            </div>

        </div>
    </main>



    <!-- Script untuk Toggle Menu Mobile -->
    <script>
        function toggleMobileMenu() {
            const menu = document.getElementById('mobile-menu');
            const icon = document.getElementById('mobile-menu-icon');
            
            if (menu.classList.contains('hidden')) {
                // Membuka menu
                menu.classList.remove('hidden');
                setTimeout(() => {
                    menu.classList.remove('opacity-0', '-translate-y-2');
                    menu.classList.add('opacity-100', 'translate-y-0');
                }, 10);
                
                // Ubah ikon ke 'X'
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-xmark');
            } else {
                // Menutup menu
                menu.classList.remove('opacity-100', 'translate-y-0');
                menu.classList.add('opacity-0', '-translate-y-2');
                
                setTimeout(() => {
                    menu.classList.add('hidden');
                }, 300);
                
                // Ubah ikon kembali ke hamburger
                icon.classList.remove('fa-xmark');
                icon.classList.add('fa-bars');
            }
        }
    </script>

    <script>
function kirimWA(event) {
    event.preventDefault();

    let nama = document.getElementById('nama').value;
    let email = document.getElementById('email').value;
    let telepon = document.getElementById('telepon').value;
    let subjek = document.getElementById('subjek').value;
    let pesan = document.getElementById('pesan').value;

    let nomorWA = "6287828371365"; // GANTI dengan nomor WA kamu

    let text = `Halo Admin,%0A%0A`
        + `Nama: ${nama}%0A`
        + `Email: ${email}%0A`
        + `Telepon: ${telepon}%0A`
        + `Subjek: ${subjek}%0A`
        + `Pesan:%0A${pesan}`;

    let url = `https://wa.me/${nomorWA}?text=${text}`;

    window.open(url, '_blank');
}
</script>
@endsection