<section class="bg-gray-100">
    <div class="container mx-auto max-w-7xl px-4 py-8 sm:py-15">
      <!-- Header -->
      <div class="mb-4">
        <h1 class="text-2xl sm:text-4xl font-bold text-blue-900">Daftar Pengumuman & Informasi</h1>
        <p class="text-gray-700 mt-1 text-sm sm:text-base">Daftar Pengumuman dan Informasi terkait kegiatan yang mengajukan izin lingkungan</p>
      </div>

      <!-- Filter Buttons and Search -->
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-6">
        <div class="flex flex-wrap gap-2 w-full sm:w-auto">
            <button id="tab-amdal" class="tab-btn bg-white border border-gray-300 px-3 sm:px-6 py-2 rounded text-sm sm:text-base" onclick="changeTab('amdal')">AMDAL</button>
            <button id="tab-addendum" class="tab-btn bg-white border border-gray-300 px-3 sm:px-6 py-2 rounded text-sm sm:text-base" onclick="changeTab('addendum')">Addendum</button>
            <button id="tab-ukl-upl" class="tab-btn bg-white border border-gray-300 px-3 sm:px-6 py-2 rounded text-sm sm:text-base" onclick="changeTab('ukl-upl')">UKL - UPL</button>
            <button id="tab-audit" class="tab-btn bg-blue-800 text-white px-3 sm:px-6 py-2 rounded text-sm sm:text-base" onclick="changeTab('audit')">AUDIT</button>
        </div>
        <div class="flex gap-2 w-full sm:w-auto mt-3 sm:mt-0">
            <div class="relative flex-grow sm:flex-grow-0">
                <input type="text" placeholder="Search" class="pl-10 pr-3 py-2 border border-gray-300 rounded w-full sm:w-64">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 absolute left-3 top-2.5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
            </div>
            <div class="relative">
                <button id="filter-button" class="bg-yellow-500 text-white px-4 sm:px-6 py-2 rounded flex items-center text-sm sm:text-base whitespace-nowrap">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 sm:h-5 w-4 sm:w-5 mr-1 sm:mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                    </svg>
                    Filters
                </button>
            </div>
        </div>
    </div>

    <!-- Filter dropdown section - positioned below the filters button -->
    <div id="filter-section" class="hidden w-full mb-6 bg-white border border-gray-200 rounded-md p-4 shadow-md">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label for="provinsi" class="block text-sm font-medium text-gray-700 mb-1">Provinsi</label>
                <select id="provinsi" name="provinsi" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                    <option value="">Semua Provinsi</option>
                    <option value="aceh">Aceh</option>
                    <option value="sumut">Sumatera Utara</option>
                    <option value="sumbar">Sumatera Barat</option>
                    <!-- Add more provinces as needed -->
                </select>
            </div>
            <div>
                <label for="kabkota" class="block text-sm font-medium text-gray-700 mb-1">Kabupaten/Kota</label>
                <select id="kabkota" name="kabkota" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                    <option value="">Semua Kabupaten/Kota</option>
                    <option value="aceh">Aceh</option>
                </select>
            </div>
        </div>
        <div class="mt-4 flex justify-end gap-2">
            <button id="clear-filter" class="bg-gray-600 text-white px-4 py-2 rounded text-sm">Clear Filter</button>
            <button class="bg-blue-600 text-white px-4 py-2 rounded text-sm">Terapkan Filter</button>
        </div>
        </div>

      <!-- AMDAL Content -->
      <div id="content-amdal" class="tab-content hidden bg-blue-900 rounded overflow-hidden">
        <!-- Announcement 1 -->
        <div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <div class="flex gap-3 sm:gap-4 w-full">
            <div class="flex-shrink-0">
              <div class="bg-blue-500 p-2 rounded">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
              </div>
            </div>
            <div>
              <h2 class="text-white font-bold text-sm sm:text-base">Kegiatan Penggalian Kuarsa/Pasir Kuarsa, LUKITO HARTONO LAWY</h2>
              <p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">Dampak Potensials: Penurunan Kualitas Udara, Peningkatan Kebisingan, Peningkatan Air Larian, Peningkatan Timbulan Sampah, Terjadinya Gangguan Lalu Lintas, Terbukanya Kes</p>
              <a href="#" class="text-lime-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
            </div>
          </div>
          <div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
            <div class="text-white text-xs sm:text-sm text-right">27 Maret - 10 April 2025</div>
            <button class="bg-lime-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
          </div>
        </div>

        <!-- Announcement 2 -->
        <div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <div class="flex gap-3 sm:gap-4 w-full">
            <div class="flex-shrink-0">
              <div class="bg-blue-500 p-2 rounded">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
              </div>
            </div>
            <div>
              <h2 class="text-white font-bold text-sm sm:text-base">Pembangunan Waterfront Malalayang, TARCISIUS ASWIN JULIZAR, W</h2>
              <p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">Dampak Potensials: Pra Konstruksi 1. Persepsi Masyarakat Tahap Konstruksi 1. Peningkatan Kesempatan Kerja dan Berusaha 2. Peningkatan Sedimentasi 3. Perubahan Garis</p>
              <a href="#" class="text-lime-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
            </div>
          </div>
          <div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
            <div class="text-white text-xs sm:text-sm text-right">26 Maret - 9 April 2025</div>
            <button class="bg-lime-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
          </div>
        </div>
      </div>

      <!-- Addendum Content -->
      <div id="content-addendum" class="tab-content hidden bg-blue-900 rounded overflow-hidden">
        <!-- Similar content as AMDAL but for Addendum -->
        <div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <div class="flex gap-3 sm:gap-4 w-full">
            <div class="flex-shrink-0">
              <div class="bg-blue-500 p-2 rounded">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
              </div>
            </div>
            <div>
              <h2 class="text-white font-bold text-sm sm:text-base">Pembangunan Waterfront Malalayang, TARCISIUS ASWIN JULIZAR, W</h2>
              <p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">Dampak Potensials: Pra Konstruksi 1. Persepsi Masyarakat Tahap Konstruksi 1. Peningkatan Kesempatan Kerja dan Berusaha 2. Peningkatan Sedimentasi 3. Perubahan Garis</p>
              <a href="#" class="text-lime-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
            </div>
          </div>
          <div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
            <div class="text-white text-xs sm:text-sm text-right">26 Maret - 9 April 2025</div>
            <button class="bg-lime-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
          </div>
        </div>
      </div>

      <!-- UKL-UPL Content -->
      <div id="content-ukl-upl" class="tab-content hidden bg-blue-900 rounded overflow-hidden">
        <div class="border-b border-blue-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <div class="flex gap-3 sm:gap-4 w-full">
            <div class="flex-shrink-0">
              <div class="bg-blue-500 p-2 rounded">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
              </div>
            </div>
            <div>
              <h2 class="text-white font-bold text-sm sm:text-base">Pembangunan Waterfront Malalayang, TARCISIUS ASWIN JULIZAR, W</h2>
              <p class="text-blue-200 mt-1 sm:mt-2 text-xs sm:text-sm">Dampak Potensials: Pra Konstruksi 1. Persepsi Masyarakat Tahap Konstruksi 1. Peningkatan Kesempatan Kerja dan Berusaha 2. Peningkatan Sedimentasi 3. Perubahan Garis</p>
              <a href="#" class="text-lime-300 mt-1 block text-xs sm:text-sm">Baca selengkapnya ...</a>
            </div>
          </div>
          <div class="flex flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-end gap-2 w-full sm:w-auto mt-2 sm:mt-0">
            <div class="text-white text-xs sm:text-sm text-right">26 Maret - 9 April 2025</div>
            <button class="bg-lime-500 text-white px-3 sm:px-6 py-1.5 sm:py-2 rounded text-xs sm:text-sm whitespace-nowrap">Berikan Tanggapan</button>
          </div>
        </div>
      </div>

      <!-- AUDIT Content - Table View -->
      <div id="content-audit" class="tab-content bg-white rounded overflow-hidden shadow">
        <div class="overflow-x-auto">
          <table class="w-full text-xs sm:text-base">
            <thead>
              <tr class="bg-blue-800 text-white">
                <th class="py-2 sm:py-3 px-2 sm:px-4 text-left w-12 sm:w-16">No</th>
                <th class="py-2 sm:py-3 px-2 sm:px-4 text-left">Nama PT</th>
                <th class="py-2 sm:py-3 px-2 sm:px-4 text-left">Judul</th>
                <th class="py-2 sm:py-3 px-2 sm:px-4 text-left hidden md:table-cell">Deskripsi</th>
                <th class="py-2 sm:py-3 px-2 sm:px-4 text-center w-20 sm:w-32">Aksi</th>
              </tr>
            </thead>
            <tbody>
              <tr class="border-b border-gray-200">
                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top">1</td>
                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top">PT PETROKIMIA GRESIK</td>
                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top">PENGUMUMAN AUDIT LINGKUNGAN HIDUP WAJIB BERKALA INDUSTRI PETROKIMIA</td>
                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top hidden md:table-cell">
                  <div class="max-h-24 sm:max-h-32 overflow-y-auto pr-2">
                    PT Petrokimia Gresik merupakan Kegiatan pada sektor Industri Petrokimia : Industri Pupuk dan Bahan Kimia (Amonia, Pupuk, Asam Sulfat, Asam Fosfat, dan Asam Klorida) yang telah dikenakan Audit Lingkungan Hidup Wajib Berkala untuk kegiatan berisiko tinggi terhadap lingkungan berdasarkan Lampiran I Peraturan
                  </div>
                </td>
                <td class="py-3 sm:py-4 px-2 sm:px-4 align-top">
                  <button class="bg-lime-500 text-white px-2 sm:px-4 py-1.5 sm:py-2 rounded w-full text-xs sm:text-sm">Download</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <script>
        document.getElementById('filter-button').addEventListener('click', function() {
            const filterSection = document.getElementById('filter-section');
            filterSection.classList.toggle('hidden');
        });

        document.getElementById('clear-filter').addEventListener('click', function() {
            // Reset province and city dropdowns
            document.getElementById('provinsi').value = '';
            document.getElementById('kabkota').value = '';

            // Reset search input
            const searchInput = document.querySelector('input[placeholder="Search"]');
            if (searchInput) searchInput.value = '';
        });
    </script>

    <script>
      function changeTab(tabName) {
        const contentSections = document.querySelectorAll('.tab-content');
        contentSections.forEach(section => {
          section.classList.add('hidden');
        });

        const tabButtons = document.querySelectorAll('.tab-btn');
        tabButtons.forEach(button => {
          button.classList.remove('bg-blue-900', 'text-white');
          button.classList.add('bg-white', 'border', 'border-gray-300');
        });

        const selectedTab = document.getElementById('tab-' + tabName);
        selectedTab.classList.remove('bg-white', 'border', 'border-gray-300');
        selectedTab.classList.add('bg-blue-900', 'text-white');

        const selectedContent = document.getElementById('content-' + tabName);
        selectedContent.classList.remove('hidden');
      }

      document.addEventListener('DOMContentLoaded', function() {
        changeTab('amdal');
      });
    </script>
  </section>
