@{
    Layout = "~/Views/Website/Shared/_Layout.cshtml";
    ViewData["Title"] = "Jasa Pengolahan Sampah";
}

<div class="mx-auto bg-gray-50">
     <div class="bg-cyan-700 pt-30 pb-10 mb-8 shadow-md rounded-br-4xl rounded-bl-4xl relative overflow-hidden">
        <div class="absolute inset-0" style="background-image: radial-gradient(circle at 85% 1%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 96%, transparent 96%, transparent 100%), radial-gradient(circle at 14% 15%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 1%, transparent 1%, transparent 100%), radial-gradient(circle at 60% 90%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 20%, transparent 20%, transparent 100%), radial-gradient(circle at 79% 7%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 78%, transparent 78%, transparent 100%), radial-gradient(circle at 55% 65%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 52%, transparent 52%, transparent 100%), linear-gradient(135deg, rgb(0, 163, 227), rgb(6, 182, 212));"></div>
        
        <div class="max-w-6xl mx-auto px-6 hidden md:block relative z-10">
            <nav class="flex items-center text-white text-sm space-x-2" aria-label="Breadcrumb">
                <a href="@Url.Action("Index", "Home")" class="hover:underline">Beranda</a>
                <i class="w-4 h-4 text-white transition-colors duration-300" data-lucide="chevron-right"></i>
                <span class="font-semibold">Pengolahan Sampah</span>
            </nav>
        </div>
        
        <div class="max-w-6xl mx-auto justify-between flex flex-col md:flex-row items-center px-6 gap-8 relative z-10">
            <div class="flex-1 text-center max-w-xl md:text-left">
                <h1 class="text-3xl md:text-4xl font-medium text-white mb-3">Jasa Pengolahan Sampah</h1>
                <p class="text-lg text-white mb-4">Solusi pengelolaan sampah sesuai Pergub DKI Jakarta untuk kawasan permukiman, komersial, dan industri.</p>
                <div class="w-20 h-1 bg-white mt-4 mx-auto md:mx-0 rounded-full"></div>
            </div>
            <div class="flex-shrink-0 hidden md:block">
                <img src="@Url.Content("~/website/images/bg-header.webp")" alt="Usaha Pesapakawan" class="w-75 h-auto">
            </div>
        </div>
    </div>

    <div class="max-w-6xl mx-auto px-4">
        <div class="mb-6">
            <div class="dropdown-header" onclick="toggleDropdown('section1')">
                <div class="flex items-center space-x-4">
                    <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-3 shadow-lg">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-xl font-bold text-gray-800 mb-1">Izin Usaha Pengolahan Sampah</h2>
                        <p class="text-gray-600 text-sm">Persyaratan dan mekanisme perolehan izin usaha pengolahan sampah</p>
                    </div>
                </div>
                <div class="dropdown-icon flex items-center space-x-2">
                    <i class="w-4 h-4 text-gray-500 transition-colors duration-300" data-lucide="chevron-down"></i>
                </div>
            </div>
            <div class="dropdown-content" id="section1">
                <div>
                    <p class="text-gray-600 leading-relaxed mb-4">
                        Dalam melaksanakan kegiatan usaha pengolahan sampah, badan usaha yang melakukan usaha pengolahan sampah wajib memiliki izin usaha pengolahan sampah. Jenis izin yang diterbitkan sesuai dengan <span class="font-semibold text-blue-600">Peraturan Gubernur Nomor 47 Tahun 2017</span> tentang Petunjuk Pelaksanaan Pelayanan Terpadu Satu Pintu.
                    </p>
                    <p class="text-gray-600 leading-relaxed mb-4">
                        Mekanisme perolehan Izin Usaha didaftarkan melalui Unit Pengelola Penanaman Modal dan Pelayanan Terpadu Satu Pintu Kota (UP PMPTSP Kota). Adapun formulir dan kelengkapan dokumen sesuai dengan ketentuan yang diatur oleh UP PMPTSP Kota.
                    </p>
                    <div class="bg-blue-50 rounded-lg p-4 mb-4">
                        <p class="text-blue-800 text-sm">
                            <strong>Proses Survey:</strong> Setelah berkas administrasi dinyatakan lengkap dan lolos verifikasi, dilanjutkan dengan pengecekan/survey terhadap lokasi dan teknologi pengolahan sampah yang diajukan dalam proses permohonan izin.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="mb-6">
            <div class="dropdown-header" onclick="toggleDropdown('section2')">
                <div class="flex items-center space-x-4">
                    <div class="bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl p-3 shadow-lg">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-xl font-bold text-gray-800 mb-1">Teknologi Pengolahan</h2>
                        <p class="text-gray-600 text-sm">Jenis teknologi yang diizinkan untuk pengolahan sampah</p>
                    </div>
                </div>
                <div class="dropdown-icon flex items-center space-x-2">
                    <i class="w-4 h-4 text-gray-500 transition-colors duration-300" data-lucide="chevron-down"></i>
                </div>
            </div>
            <div class="dropdown-content" id="section2">
                <div>
                    <p class="text-gray-600 mb-4">
                        Dalam pelaksanaan survey/pengecekan lokasi dan teknologi pengolahan sampah, dilakukan pemeriksaan kesesuaian persyaratan teknis yang diatur dalam <span class="font-semibold text-blue-600">SK Kepala Dinas Lingkungan Hidup Nomor 374 Tahun 2017</span> tentang Persyaratan Teknis Izin Usaha Pengelolaan Sampah.
                    </p>
                    <div class="grid md:grid-cols-2 gap-4 mb-4">
                        <div class="bg-blue-50 p-4 rounded-xl border border-blue-200">
                            <h4 class="font-bold text-blue-900 mb-2">Teknologi Fisik</h4>
                            <p class="text-blue-800 text-sm">Pengurangan ukuran, pemadatan, pemisahan magnetis, masa-jenis, dan optik</p>
                        </div>
                        <div class="bg-green-50 p-4 rounded-xl border border-green-200">
                            <h4 class="font-bold text-green-900 mb-2">Teknologi Biologi</h4>
                            <p class="text-green-800 text-sm">Pengolahan aerobik dan/atau anaerobik seperti pengomposan dan biogasifikasi</p>
                        </div>
                        <div class="bg-orange-50 p-4 rounded-xl border border-orange-200">
                            <h4 class="font-bold text-orange-900 mb-2">Teknologi Termal</h4>
                            <p class="text-orange-800 text-sm">Gasifikasi, pirolisis, plasma dan insenerasi</p>
                        </div>
                        <div class="bg-purple-50 p-4 rounded-xl border border-purple-200">
                            <h4 class="font-bold text-purple-900 mb-2">Teknologi Lainnya</h4>
                            <p class="text-purple-800 text-sm">Teknologi lain atau gabungan dari beberapa macam teknologi</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mb-6">
            <div class="dropdown-header" onclick="toggleDropdown('section3')">
                <div class="flex items-center space-x-4">
                    <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-3 shadow-lg">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-xl font-bold text-gray-800 mb-1">Persyaratan Umum</h2>
                        <p class="text-gray-600 text-sm">Persyaratan umum untuk izin usaha pengolahan sampah</p>
                    </div>
                </div>
                <div class="dropdown-icon flex items-center space-x-2">
                   <i class="w-4 h-4 text-gray-500 transition-colors duration-300" data-lucide="chevron-down"></i>
                </div>
            </div>
            <div class="dropdown-content" id="section3">
                <div>
                    <div class="bg-gray-50 rounded-lg p-4 mb-6">
                        <ul class="pl-5 text-gray-700 space-y-3">
                            <li class="flex items-start">
                                <span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">1</span>
                                Pemohon wajib berbadan usaha
                            </li>
                            <li class="flex items-start">
                                <span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">2</span>
                                Melampirkan deskripsi dari lokasi kegiatan dengan tata letak (layout) di lokasi kegiatan
                            </li>
                            <li class="flex items-start">
                                <span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">3</span>
                                Papan nama yang mudah terlihat dengan tulisan "Fasilitas Pengolahan Sampah Non B3"
                            </li>
                            <li class="flex items-start">
                                <span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">4</span>
                                Melampirkan dokumen rencana pengolahan sampah yang menjelaskan jenis, karakteristik, jumlah, komposisi dan asal/sumber sampah
                            </li>
                            <li class="flex items-start">
                                <span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">5</span>
                                Melampirkan dokumen studi kelayakan
                            </li>
                            <li class="flex items-start">
                                <span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">6</span>
                                Melampirkan dokumen lingkungan (Amdal/UKL-UPL) dan izin lingkungan atau SPPL
                            </li>
                            <li class="flex items-start">
                                <span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">7</span>
                                Melampirkan DED/detailed engineering design fasilitas pengolahan sampah
                            </li>
                            <li class="flex items-start">
                                <span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">8</span>
                                Memiliki fasilitas pendukung berupa peralatan/instalasi pengendalian pencemaran lingkungan
                            </li>
                            <li class="flex items-start">
                                <span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">9</span>
                                Melampirkan Standar Operasional Prosedur (SOP)
                            </li>
                            <li class="flex items-start">
                                <span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">10</span>
                                Memiliki Alat Pelindung Diri (APD) untuk petugas
                            </li>
                            <li class="flex items-start">
                                <span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">11</span>
                                Memiliki alat perlengkapan peralatan tanggap darurat
                            </li>
                            <li class="flex items-start">
                                <span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">12</span>
                                Melampirkan Izin Gangguan – Tempat Usaha Berdasarkan Undang-Undang Gangguan (UUG/HO)
                            </li>
                            <li class="flex items-start">
                                <span class=" w-6 h-6 bg-purple-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">13</span>
                                Memiliki fasilitas pendukung: ruang pemilahan dan bak penampung air lindi
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="mb-6">
            <div class="dropdown-header" onclick="toggleDropdown('section4')">
                <div class="flex items-center space-x-4">
                    <div class="bg-gradient-to-br from-orange-500 to-red-600 rounded-xl p-3 shadow-lg">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-xl font-bold text-gray-800 mb-1">Persyaratan Khusus Teknologi</h2>
                        <p class="text-gray-600 text-sm">Persyaratan spesifik berdasarkan jenis teknologi yang digunakan</p>
                    </div>
                </div>
                <div class="dropdown-icon flex items-center space-x-2">
                   <i class="w-4 h-4 text-gray-500 transition-colors duration-300" data-lucide="chevron-down"></i>
                </div>
            </div>
            <div class="dropdown-content" id="section4">
                <div>
                    <div class="space-y-4">
                        <div class="bg-blue-50 p-4 rounded-xl border border-blue-200">
                            <h4 class="font-bold text-blue-900 mb-2">Teknologi Fisik</h4>
                            <p class="text-blue-800 text-sm">Kapasitas minimal 20 ton/hari atau luas lahan minimal 200 m²</p>
                        </div>
                        <div class="bg-green-50 p-4 rounded-xl border border-green-200">
                            <h4 class="font-bold text-green-900 mb-2">Teknologi Biologi</h4>
                            <ul class="text-green-800 text-sm space-y-1">
                                <li>• Kapasitas minimal 10 ton/hari atau luas >200 m²</li>
                                <li>• Wajib memenuhi baku mutu kebauan</li>
                                <li>• Wajib memenuhi baku mutu air lindi</li>
                            </ul>
                        </div>
                        <div class="bg-orange-50 p-4 rounded-xl border border-orange-200">
                            <h4 class="font-bold text-orange-900 mb-2">Teknologi Termal</h4>
                            <ul class="text-orange-800 text-sm space-y-1">
                                <li>• Insinerasi: minimal 8000°C</li>
                                <li>• Pirolisis: minimal 4000°C</li>
                                <li>• Gasifikasi: minimal 7000°C</li>
                                <li>• Plasma: minimal 5000°C</li>
                                <li>• Wajib memenuhi baku mutu emisi</li>
                            </ul>
                        </div>
                        <div class="bg-purple-50 p-4 rounded-xl border border-purple-200">
                            <h4 class="font-bold text-purple-900 mb-2">Teknologi Lainnya</h4>
                            <ul class="text-purple-800 text-sm space-y-1">
                                <li>• Kapasitas minimal 20 ton/hari atau luas lahan minimal 200 m²</li>
                                <li>• Wajib memenuhi persyaratan khusus pada semua jenis teknologi yang digunakan</li>
                                <li>• Memenuhi baku mutu lingkungan</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mb-6">
            <div class="dropdown-header" onclick="toggleDropdown('section5')">
                <div class="flex items-center space-x-4">
                    <div class="bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl p-3 shadow-lg">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-xl font-bold text-gray-800 mb-1">Kewajiban Setelah Memperoleh Izin</h2>
                        <p class="text-gray-600 text-sm">Kewajiban yang harus dipenuhi setelah mendapat izin usaha</p>
                    </div>
                </div>
                <div class="dropdown-icon flex items-center space-x-2">
                   <i class="w-4 h-4 text-gray-500 transition-colors duration-300" data-lucide="chevron-down"></i>
                </div>
            </div>
            <div class="dropdown-content" id="section5">
                <div>
                    <p class="text-gray-600 mb-4 leading-relaxed">
                        Setelah memperoleh Izin Usaha Pengelolaan Sampah, penyedia jasa pengolahan sampah wajib melaporkan izinnya kepada Dinas Lingkungan Hidup Provinsi DKI Jakarta untuk melakukan pendaftaran/registrasi secara online melalui website ini.
                    </p>
                    <div class="bg-green-50 rounded-lg p-4 mb-4">
                        <h4 class="font-bold text-green-900 mb-3">Penyedia jasa pengolahan sampah wajib melakukan:</h4>
                        <div class="grid md:grid-cols-3 gap-4">
                            <div class="bg-white p-4 rounded-lg text-center border border-green-200">
                                <div class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-bold mb-2 inline-block">1</div>
                                <p class="text-green-800 text-sm font-semibold">Pendaftaran sebagai penyedia jasa yang teregistrasi</p>
                            </div>
                            <div class="bg-white p-4 rounded-lg text-center border border-green-200">
                                <div class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-bold mb-2 inline-block">2</div>
                                <p class="text-green-800 text-sm font-semibold">Melaporkan kontrak kerjasama pengolahan sampah</p>
                            </div>
                            <div class="bg-white p-4 rounded-lg text-center border border-green-200">
                                <div class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-bold mb-2 inline-block">3</div>
                                <p class="text-green-800 text-sm font-semibold">Melaporkan hasil kegiatan pengolahan sampah</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="my-12 max-w-6xl mx-auto px-4">
        <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
            <div class="mb-6">
                <h2 class="text-2xl font-bold text-gray-800 mb-2">Daftar Jasa Pengolahan Sampah</h2>
                <p class="text-gray-600">Data perusahaan yang memiliki izin pengolahan sampah di DKI Jakarta</p>
            </div>
            
            <div class="overflow-x-auto">
                <table id="pengolahanTable" class="min-w-full bg-white">
                    <thead class="bg-cyan-400 text-white">
                        <tr>
                            <th class="px-6 py-4 text-left text-white text-sm font-semibold uppercase tracking-wider">No</th>
                            <th class="px-6 py-4 text-left text-white text-sm font-semibold uppercase tracking-wider">Perusahaan</th>
                            <th class="px-6 py-4 text-left text-white text-sm font-semibold uppercase tracking-wider">Alamat</th>
                            <th class="px-6 py-4 text-left text-white text-sm font-semibold uppercase tracking-wider">Berlaku Hingga</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        
                    </tbody>
                </table>
            </div>
            
            <div class="mt-4 text-sm text-gray-500 text-center" id="loadingIndicator">
                <div class="inline-flex items-center">
                    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Memuat data...
                </div>
            </div>
        </div>
    </div>

</div>