BRE03

document.addEventListener('DOMContentLoaded', function(){
   let form = document.getElementById('formEx4');

   form.addEventListener('submit', function(event){
       event.preventDefault();

       let filterSelect = document.getElementById('statusFilter');
       let filter = filterSelect.value;

       let activeRows = document.querySelectorAll("tr.active");
       let inactiveRows = document.querySelectorAll("tr.inactive");

       if(filter === "all")
       {
           for(let i = 0; i < activeRows.length; i++)
           {
               activeRows[i].style.display = "grid";
           }

           for(let i = 0; i < inactiveRows.length; i++)
           {
               inactiveRows[i].style.display = "grid";
           }
       }
       else if(filter === "active")
       {
           for(let i = 0; i < activeRows.length; i++)
           {
               activeRows[i].style.display = "grid";
           }

           for(let i = 0; i < inactiveRows.length; i++)
           {
               inactiveRows[i].style.display = "none";
           }
       }
       else
       {
           for(let i = 0; i < activeRows.length; i++)
           {
               activeRows[i].style.display = "none";
           }

           for(let i = 0; i < inactiveRows.length; i++)
           {
               inactiveRows[i].style.display = "grid";
           }
       }
   });
});