filter protoype

resources/views/project.blade.php

 
             <div class="relative w-fit">
                 <select
-                    class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    id="selectProjectStatus"
+                    class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    onchange="renderFDITable()">
                     <option value="all" selected>Status</option>
-                    <option value="final">Perjanjian Muktamad</option>
-                    <option value="draft">Deraf Perjanjian</option>
+                    <option value="1">Perjanjian Muktamad</option>
+                    <option value="0">Deraf Perjanjian</option>
                 </select>
             </div>
 
             <div class="relative w-fit">
                 <select
-                    class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    id="selectProjectArea"
+                    class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    onchange="renderFDITable()">
                     <option value="all" selected>Daerah</option>
-                    <option value="1">Gambang</option>
-                    <option value="2">Pekan</option>
+                    <option value="Gambang">Gambang</option>
+                    <option value="Pekan">Pekan</option>
                 </select>
             </div>
 
             <div class="relative w-fit">
                 <select
-                    class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    id="selectProjectYear"
+                    class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    onchange="renderFDITable()">
                     <option value="all" selected>Tahun</option>
                     <option value="2026">2026</option>
                     <option value="2025">2025</option>
 
 @section('scripts')
     <script>
+
+        var FDIProject = [];
+        var DDIProject = [];
+
         async function fetchAndRenderProjects() {
 
             const selectedType = document.getElementById('selectProjectType').value;
 
                 if (!data.FDIProject || !data.DDIProject) return
 
-                renderFDITable(data.FDIProject)
+                FDIProject = data.FDIProject
+                renderFDITable()
 
             } catch (error) {
                 console.error('Error fetching projects:', error);
             }
         }
 
-        function renderFDITable(data) {
+        function renderFDITable() {
 
             const tbody = document.getElementById('FDItableBody');
             tbody.innerHTML = ''; // Clear existing content
 
+            data = filterData(FDIProject)
+
             data.forEach((project, index) => {
                 const statusHTML = (() => {
                     switch (project.status) {
 
         }
 
+        function filterData(data){
+
+            const status = document.getElementById("selectProjectStatus").value
+            const area = document.getElementById("selectProjectArea").value
+            const year = document.getElementById("selectProjectYear").value
+
+            // filter by status
+            data = data.filter(project => (status === "all" || parseInt(status) === parseInt(project.status)))
+
+            // filter by area
+            data = data.filter(project => (area === "all" || area === project.area))
+
+            // filter by year
+            data = data.filter(project => (year === "all" || parseInt(year) === parseInt(project.year)))
+
+            return data
+        }
+
         document.addEventListener('DOMContentLoaded', fetchAndRenderProjects);
     </script>
 @endsection

routes/web.php

                 "type" => "Data Center",
                 "status" => 1,
                 "note" => "Dalam Proses Submit",
-                "moa_date" => "22-02-2025",
+                "moa_date" => "22-02-2026",
+                "year" => "2026",
                 "area" => "Gambang",
                 "invesment_approx" => 100000000,
                 "labour_approx" => 50,
                 "status" => 0,
                 "note" => "Loi Ditandatangani pada 14-03-2025",
                 "moa_date" => "22-02-2025",
+                "year" => "2025",
                 "area" => "Pekan",
                 "invesment_approx" => 100000000,
                 "labour_approx" => 50,