Add Month Filter and Button

Please update the provided HTML code by adding a new select option for months, and include a button that resets the filter and reloads the page accordingly. The updated code should maintain the original styling and structure in the code snippet. Make sure to initialize the new month dropdown properly, and ensure that the button triggers the filtering action. Here's the updated code snippet: ```html <div class="card-toolbar"> <div class="input-group w-100 float-end"> <div class="btn-group"> <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <i class="ki-duotone ki-abstract-37 fs-2x me-2 text-primary"> <span class="path1"></span> <span class="path2"></span> </i> Year : @Model.ActiveYear </button> <ul class="dropdown-menu"> <li><a asp-controller="Rent" asp-action="Rentals" asp-route-year="0" class="dropdown-item">All</a></li> @foreach (int year in Model.ActiveYears.Take(10)) { <li><a asp-controller="Rent" asp-action="Rentals" asp-route-year="@year" class="dropdown-item">@year</a></li> } </ul> </div> <div class="input-group"> <select id="monthSelect" class="form-select"> <option value="0">Select Month</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <button id="filterButton" class="btn btn-primary" onclick="applyFilter()">Apply Filter</button> </div> </div> </div> ``` Additionally, please create the appropriate JavaScript function `applyFilter()` that grabs the selected month and year, then reloads the page according to the filters applied. The following is an example of how you can implement this function: ```javascript function applyFilter() { var selectedYear = document.querySelector('.btn-group .dropdown-toggle').innerText.split(': ')[1]; // Get the current selected year var selectedMonth = document.getElementById('monthSelect').value; window.location.href = `/Rent/Rentals?year=${selectedYear}&month=${selectedMonth}`; // Redirect to the filtered URL } ``` This will ensure that when users select a month and click the button, they will be redirected to the Rentals page with the specified filters activated. Make sure to test the functionality after implementation to verify that the filters work as intended!