{% include 'nav.html' %}

{% block content %}
    <!-- Toggle Options without form -->
    <div class="flex items-left space-x-4 text-xs w-full justify-start pl-2" id="chart_toggle">
        <label class="radio-label flex items-center space-x-2">
            <input type="radio" name="role" value="Initiative" onclick="toggleSummaryTable('Initiative')"  class="text-xs">
            <span>Initiative
            </span>
        </label>
    
        <label class="radio-label flex items-center space-x-2">
            <input type="radio" name="role" value="Executer" onclick="toggleSummaryTable('Executer')"checked class="text-xs">
            <span>Executer</span>
        </label>
    </div> 

    <!-- Summary Table Container -->
    <div class="container mx-auto m-2" id="summaryTableInitiative" style="display: block;" >
        <div class="overflow-y-auto border border-gray-300 rounded bg-white mx-2">
            <table class="min-w-full max-w-full border-collapse border border-gray-300 text-xs leading-tight">
                <thead class="bg-slate-700 text-white">
                    <tr>
                        <th class="border border-gray-300 px-2 py-1 text-center font-semibold w-10">SN</th>

                        {% for col in columnsTD %}
                        {% if loop.index > 4 %}
                            <th class="border border-gray-300 px-2 py-1 text-center text-yellow-400 font-bold w-20">{{ col }}</th>
                        {% elif col == "Total Delayed Projects" %}
                            <th class="border border-gray-300 px-2 py-1 text-center  font-semibold w-20">Delayed Projects</th>
                        {% else %}
                        <th class="border border-gray-300 px-2 py-1 text-center  font-semibold w-20">{{ col }}</th>
                        {% endif %}
                        

                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for row in table_data %}
                        <tr class="hover:bg-gray-100">
                            <!-- Add a cell for the Serial Number (SN) -->
                            <td class="border border-gray-300 px-2 py-1 text-center">
                                {{ loop.index }}
                            </td>

                            {% for col in columnsTD %}
                            {% if loop.index > 1 and loop.index < 5 %}
                                <td class="border border-gray-300 px-2 py-1 text-center">{{ row.get(col, 'N/A') }}</td>
                            {% elif loop.index > 4 %}
                                <td class="border border-gray-300 px-2 py-1 text-center 
                                    {% if row[col] == '0' or row[col] == 0 %} bg-gray-100 {% else %} bg-red-100 {% endif %}">
                                    {% if row[col] == '0' or row[col] == 0 %}
                                        <!-- Empty cell if value is '0' or 0 -->
                                    {% else %}
                                        {{ row[col] }}
                                    {% endif %}             
                                </td>
                            {% else %}
                            <td class="border border-gray-300 px-2 py-1 text-blue-600 font-semibold whitespace-nowrap">
                                <a href="{{ url_for('adeo.getAllRecords', param_type='initiative',param_name=row[col]) }}" class="hover:underline">
                                    {{ row[col] }}
                                </a>
                            </td>                            
                            {% endif %}
                        {% endfor %}
                        

                            </tr>
                    {% endfor %}
                        
                </tbody>
                <!-- Summary Sum -->
                <tfoot class="bg-slate-600 text-white">
                    <tr>
                        <td></td>
                        {% for col in columnsTD %}
                        <td class="border border-gray-300 px-2 py-1 font-bold text-center">
                            {% if loop.first %}
                                Total
                            {% elif col == "Total Budget (AED)" %}

                            {{ table_data | sum(col) | round(2)}}B

                            {% else %}
                                {{ table_data | sum(col) | round(2)}}
                            {% endif %}
                        </td>
                        {% endfor %}
                        <!-- <td class="border border-gray-300 px-2 py-1 font-bold text-left">
                            Number of Projects Delayed
                        </td> -->
                    </tr>
                    <!-- Delay Contribution % -->
                    <tr>
                        <td class="border border-gray-300 px-2 py-1 font-bold text-center"></td>
                        {% for col in columnsTD %}
                        <td class="border border-gray-300 px-2 py-1 font-bold text-center">
                            {% if loop.index == 1 %}

                            {% elif loop.index == 2 %}
                            <span class="text-red-300 text-sm" title="[Delay Criteria: Where Actual Delay Percentage > 0.0 % & Projects not included ('On Track', 'On Hold', 'Finished', 'Closure', 'Not Started')">KPI</span>

                            {% elif col == "Total Delayed Projects" %}
                            <span class="text-red-300 text-sm">
                                {{ ((table_data | sum("Total Delayed Projects")) / (table_data | sum("Total Projects")) * 100) | round(2) }} %
                            </span>
                            {% elif col == "Total Budget (AED)" %}

                            {% else %}
                                <span title="% of Total Projects Delayed">
                                    {{ ((table_data | sum(col)) / (table_data | sum("Total Delayed Projects")) * 100) | round(2) }} %
                                </span>
                            {% endif %}
                        </td>
                        {% endfor %}
                        <!-- <td class="border border-gray-300 px-2 py-1 font-bold text-left">
                            % of Total Delayed Projects
                        </td> -->
                    </tr>
                </tfoot>
            </table>

            <div class="w-[98%] flex justify-center items-center">
                <div class="w-full  ">
                    <!-- Render the Plotly chart here -->
                    {{ graph_html|safe }}
                </div>
            </div>
        </div>
    </div>

    <!-- Summary Table Container Executer -->
    <div class="container mx-auto m-2" id="summaryTableExecuter" style="display: block;" >
        <div class="overflow-y-auto border border-gray-300 rounded bg-white mx-2">
            <table class="table-fixed min-w-full max-w-full border-collapse border border-gray-300 text-[0.75rem] leading-tight">
                <thead class="bg-slate-700 text-white">
                        <tr>
                            <th class="border border-gray-300 px-2 py-1 text-center font-semibold w-10">SN</th>

                            {% for col in columnsTD_e %}
                            {% if loop.index > 4 %}
                                <th class="border border-gray-300 px-2 py-1 text-center text-yellow-400 font-bold w-20 ">
                                    {{ col }}
                                </th>
                            {% elif col == "Total Delayed Projects" %}
                                <th class="border border-gray-300 px-2 py-1 text-center  font-semibold w-20 ">Delayed Projects</th>
                            {% elif col == "Executer" %}
                            <th class="border border-gray-300 px-2 py-1 text-center  font-semibold w-1/4 ">Executer</th>
                            {% else %}
                            <th class="border border-gray-300 px-2 py-1 text-center  font-semibold w-20 ">{{ col }}</th>
                            {% endif %}
                            

                            {% endfor %}
                        </tr>
                </thead>
                <tbody>
                    {% for row in table_data_e %}
                        <tr class="hover:bg-gray-100">
                            <!-- Add a cell for the Serial Number (SN) -->
                            <td class="border border-gray-300 px-2 py-1 text-center">
                                {{ loop.index }}
                            </td>

                            {% for col in columnsTD_e %}
                            {% if loop.index > 1 and loop.index < 5 %}
                                <td class="border border-gray-300 px-2 py-1 text-center">{{ row.get(col) }}</td>
                            {% elif loop.index > 4 %}
                                <td class="border border-gray-300 px-2 py-1 text-center 
                                    {% if row[col] == '0' or row[col] == 0 %} bg-gray-100 {% else %} bg-red-100 {% endif %}">
                                    {% if row[col] == '0' or row[col] == 0 %}
                                        <!-- Empty cell if value is '0' or 0 -->
                                    {% else %}
                                        {{ row[col] }}
                                    {% endif %}             
                                </td>
                            {% else %}
                            <td class="border border-gray-300 px-2 py-1 text-blue-600 font-semibold whitespace-nowrap">
                                <a href="{{ url_for('adeo.getAllRecords', param_type='executer',param_name=row[col]) }}" class="hover:underline">
                                    {% if row[col] == "AAM" %}
                                    Al Ain Municipality
                                    {% elif row[col] == "DMT" %}
                                    Department of Municipalities and Transport
                                    {% elif row[col] == "ADM" %}
                                    Abu Dhabi Municipality
                                    {% elif row[col] == "ADHA" %}
                                    Abu Dhabi Housing Authority
                                    {% elif row[col] == "Al Dar" %}
                                    Aldar Properties
                                    {% elif row[col] == "ITC" %}
                                    Integrated Transport Center
                                    {% elif row[col] == "Musanada" %}
                                    Abu Dhabi General Services Company (Musanada)
                                    {% elif row[col] == "DRM" %}
                                    Al Dhafrah Municipality
                                    {% elif row[col] == "AD Ports" %}
                                    Abu Dhabi Ports
                                    {% endif%}
                                </a>
                            </td>    
                            {% endif %}
                        {% endfor %}
                        

                            </tr>
                    {% endfor %}
                        
                </tbody>
                <!-- Summary Sum -->
                <tfoot class="bg-slate-600 text-white">
                    <tr>
                        <td></td>
                        {% for col in columnsTD_e %}
                        <td class="border border-gray-300 px-2 py-1 font-bold text-center">
                            {% if loop.first %}
                                Total
                            {% elif col == "Total Budget (AED)" %}

                            AED {{ table_data_e | sum(col) | round(2)}}B

                            {% else %}
                                {{ table_data_e | sum(col) | round(2)}}
                            {% endif %}
                        </td>
                        {% endfor %}
                        <!-- <td class="border border-gray-300 px-2 py-1 font-bold text-left">
                            Number of Projects Delayed
                        </td> -->
                    </tr>
                    <!-- Delay Contribution % -->
                    <tr>
                        <td class="border border-gray-300 px-2 py-1 font-bold text-center"></td>
                        {% for col in columnsTD_e %}
                        <td class="border border-gray-300 px-2 py-1 font-bold text-center">
                            {% if loop.index == 1 %}

                            {% elif loop.index == 2 %}
                            <span class="text-red-300 text-sm" title="[Delay Criteria: Where Actual Delay Percentage > 0.0 % & Projects not included ('On Track', 'On Hold', 'Finished', 'Closure', 'Not Started')">KPI</span>

                            {% elif col == "Total Delayed Projects" %}
                                <span class="text-red-300 text-sm">
                                    {{((table_data_e | sum("Total Delayed Projects")) / (table_data_e | sum("Total Projects")) * 100) | round(2) }} %
                                </span>
                            {% elif col == "Total Budget (AED)" %}

                            {% else %}
                                <span title="% of Total Delayed Projects">
                                    {{ ((table_data_e | sum(col)) / (table_data_e | sum("Total Delayed Projects")) * 100) | round(2) }} %
                                </span>
                            {% endif %}
                        </td>
                        {% endfor %}
                        <!-- <td class="border border-gray-300 px-2 py-1 font-bold text-left">
                            % of Total Delayed Projects
                        </td> -->
                    </tr>
                </tfoot>
            </table>

            <div class="w-full flex justify-center items-center">
                <div class="w-full " >
                    <!-- Render the Plotly chart here -->
                    {{ graph_html_e|safe }}
                </div>
            </div>
        </div>
    </div>

      

    <!-- FILTER AND RAW DATA TABLE CONTAINER -->
    <div class="container mx-auto m-2">
    
       

    
    <!-- Filter Container -->
    <details  id="filtersPane" class="mx-auto m-2 overflow-x-auto">
        <summary class="ml-2 overflow-x-auto">Filters </summary>
            <div class="bg-yellow-50 rounded-lg p-4 shadow-sm" style="margin: 10px;">
                <!-- Filters Section -->
                <form method="POST" action="{{ url_for('adeo.getFilteredRecords') }}" id="filtersForm">
                    
                    <table class="border border-gray-300 border-collapse w-full">
                        <tbody>
                            <tr>
                                <td class="border border-gray-300 text-xs" >Phase:</td>
                                <td class="border border-gray-300 text-xs" >Search Term:</td>
                                <td class="border border-gray-300 text-xs" >Apply Search On Columns:</td>
                                <td class="border border-gray-300 text-xs">
                                    <a href="/adeo" id="removeAllFilters" class="bg-red-700  hover:bg-red-800 text-white px-1 text-xs rounded w-[150px]">
                                        Remove Filters
                                    </a>
                                </td>
                                <td class="border border-gray-300 text-xs ">
                                    <!-- Button to toggle select/deselect all checkboxes -->
                                    <button type="button" id="toggleSelectAll" class="bg-slate-700 text-white px-1 text-xs rounded w-[150px]">
                                        Select/Deselect All
                                    </button>
                                </td>
                                <td class="border border-gray-300 text-xs">
                                    <button type="submit" class="bg-green-800  hover:bg-blue-600 text-white px-1 text-xs rounded font-bold  w-[150px]">
                                        Apply Filters & Search
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td  class="border border-gray-300 p-2">
                                    <!-- Phase Filter -->
                                    <div class="mb-2 w-auto flex-grow">
                                        <label for="phase" class="text-gray-700 text-sm font-bold inline-block w-auto"></label>
                                        <div class="py-1">
                                            <select id="phase" name="phase" class="form-select mt-1 block w-full text-sm " multiple>
                                                <option value="All Phases">All Phases</option>
                                                <option value="Construction">Construction</option>
                                                <option value="Initiation">Initiation</option>
                                                <option value="Not Started">Not Started</option>
                                                <option value="Consultant Tender">Consultant Tender</option>
                                                <option value="On Hold">On Hold</option>
                                                <option value="Closure">Closure</option>
                                                <option value="Contractor Tender">Contractor Tender</option>
                                                <option value="Design">Design</option>
                                                <option value="Contractor tender">Contractor tender</option>
                                                <option value="Merged">Merged</option>
                                                <option value="Execution">Execution</option>
                                            </select>
                                        </div>
                                    </div>
                                </td>

                                <td  class="border border-gray-300 p-2">
                                    <!-- Search Term -->
                                    <div class="mb-2 flex-grow">
                                        <label for="searchTerm" class="text-gray-700 text-sm w-1/4 font-bold"></label>
                                        <div class="p-1">
                                            <input type="text" id="searchTerm" name="searchTerm" class="form-input mt-1 block w-full text-sm p-1" placeholder="Enter search text" autocomplete="off">
                                                <!-- Operators (Radio Buttons) -->
                                                <div class="mt-1">
                                                    <label class="flex items-center space-x-1">
                                                        <input type="radio" name="operator" value="greater" class="form-radio text-blue-500" checked>
                                                        <span class="text-sm">></span>
                                                    </label>
                                                    <label class="flex items-center space-x-1">
                                                        <input type="radio" name="operator" value="less" class="form-radio text-blue-500">
                                                        <span class="text-sm"><</span>
                                                    </label>
                                                    <label class="flex items-center space-x-1">
                                                        <input type="radio" name="operator" value="equal" class="form-radio text-blue-500">
                                                        <span class="text-sm">=</span>
                                                    </label>
                                                </div>
                                        </div>
                                    </div>
                                </td>

                                <td  class="border border-gray-300 p-2" colspan="4"> 
                                    <!-- Column Selection Checkboxes -->
                                    <div class="mb-2 flex-grow">
                                        <label class="block text-gray-700 text-sm mb-2 font-bold"></label>

                                        <div class="grid grid-cols-2 sm:grid-cols-8 lg:grid-cols-8 gap-1  p-1">
                                            <div>
                                                <input type="checkbox" id="applyToSN" name="columns" value="SN" class="mr-2" checked>
                                                <label for="applyToSN" class="text-gray-600 text-xs">SN</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToInitiative" name="columns" value="Initiative" class="mr-2" checked>
                                                <label for="applyToInitiative" class="text-gray-600 text-xs">Initiative</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToCPDS_Code" name="columns" value="CPDS_Code" class="mr-2" checked>
                                                <label for="applyToCPDS_Code" class="text-gray-600 text-xs">CPDS_Code</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToOwner" name="columns" value="Owner" class="mr-2" checked>
                                                <label for="applyToOwner" class="text-gray-600 text-xs">Owner</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToExecuter" name="columns" value="Executer" class="mr-2" checked>
                                                <label for="applyToExecuter" class="text-gray-600 text-xs">Executer</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToDOF_No" name="columns" value="DOF_No" class="mr-2" checked>
                                                <label for="applyToDOF_No" class="text-gray-600 text-xs">DOF_No</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToOwner_Comments" name="columns" value="Owner_Comments" class="mr-2" checked>
                                                <label for="applyToOwner_Comments" class="text-gray-600 text-xs">Owner Comments</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToProject_Name" name="columns" value="Project_Name" class="mr-2" checked>
                                                <label for="applyToProject_Name" class="text-gray-600 text-xs">Project Name</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToStart_Date" name="columns" value="Start_Date" class="mr-2" checked>
                                                <label for="applyToStart_Date" class="text-gray-600 text-xs">Start Date</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToEnd_Date" name="columns" value="End_Date" class="mr-2" checked>
                                                <label for="applyToEnd_Date" class="text-gray-600 text-xs">End Date</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToExpected_End_Date" name="columns" value="Expected_End_Date" class="mr-2" checked>
                                                <label for="applyToExpected_End_Date" class="text-gray-600 text-xs">Expected End Date</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToPlanned_Percent" name="columns" value="Planned_Percent" class="mr-2" checked>
                                                <label for="applyToPlanned_Percent" class="text-gray-600 text-xs">Planned Percent</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToBudget_Total" name="columns" value="Budget_Total" class="mr-2" checked>
                                                <label for="applyToBudget_Total" class="text-gray-600 text-xs">Budget Total</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToStatus" name="columns" value="Status" class="mr-2" checked>
                                                <label for="applyToStatus" class="text-gray-600 text-xs">Status</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToApproval_Status" name="columns" value="Approval_Status" class="mr-2" checked>
                                                <label for="applyToApproval_Status" class="text-gray-600 text-xs">Approval Status</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToActual_Percent" name="columns" value="Actual_Percent" class="mr-2" checked>
                                                <label for="applyToActual_Percent" class="text-gray-600 text-xs">Actual Percent</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToPDC_Comments" name="columns" value="PDC_Comments" class="mr-2" checked>
                                                <label for="applyToPDC_Comments" class="text-gray-600 text-xs">PDC Comments</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToActual_Expenditure" name="columns" value="Actual_Expenditure" class="mr-2" checked>
                                                <label for="applyToActual_Expenditure" class="text-gray-600 text-xs">Actual Expenditure</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToDelay_Percent" name="columns" value="Delay_Percent" class="mr-2" checked>
                                                <label for="applyToDelay_Percent" class="text-gray-600 text-xs">Delay Percent</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToDelay_Status" name="columns" value="Delay_Status" class="mr-2" checked>
                                                <label for="applyToDelay_Status" class="text-gray-600 text-xs">Delay Status</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToOriginal_Duration" name="columns" value="Original_Duration" class="mr-2" checked>
                                                <label for="applyToOriginal_Duration" class="text-gray-600 text-xs">Original Duration</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToSchedule_Variance" name="columns" value="Schedule_Variance" class="mr-2" checked>
                                                <label for="applyToSchedule_Variance" class="text-gray-600 text-xs">Schedule Variance</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToSDI" name="columns" value="SDI" class="mr-2" checked>
                                                <label for="applyToSDI" class="text-gray-600 text-xs">SDI</label>
                                            </div>
                                            <div>
                                                <input type="checkbox" id="applyToStatus_Final" name="columns" value="Status_Final" class="mr-2" checked>
                                                <label for="applyToStatus_Final" class="text-gray-600 text-xs">Status Final</label>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                     <!-- Add JavaScript to handle the button click -->
                     <script>
                        document.getElementById('toggleSelectAll').addEventListener('click', function() {
                            var checkboxes = document.querySelectorAll('input[name="columns"]');
                            var isAllSelected = true;
                    
                            // Check if any checkbox is not selected
                            checkboxes.forEach(function(checkbox) {
                                if (!checkbox.checked) {
                                    isAllSelected = false;
                                }
                            });
                    
                            // Toggle check/uncheck all
                            checkboxes.forEach(function(checkbox) {
                                checkbox.checked = !isAllSelected;
                            });
                    
                            // Optionally, change button text
                            this.textContent = isAllSelected ? 'Select All' : 'Deselect All';
                        });
                    </script>
                    
                </form>
            </div>
    </details>

    <!-- Row Count -->
    <div class="ml-2 text-sm  text-gray-700">
        <span class="font-bold">Delayed Projects Found: {{ rows | length }}</span> | <span class="text-xs">[Delay Criteria: Where Actual Delay Percentage > 0.0 % & Projects not included ('On Track', 'On Hold', 'Finished', 'Closure', 'Not Started')</span>
    </div>

    <!-- Table Div -->
    <div class="h-80 overflow-y-auto border border-gray-300 rounded bg-white mx-2">

    <!-- Table -->
    <table class="min-w-full border-collapse border border-gray-300 text-xs leading-tight">

        <!-- Table Head -->
        <thead>
            <tr class="bg-slate-800 text-white">
                {% for col in columns %}
                    <th class="border border-gray-300 px-2 py-1 text-left">{{ col }}</th>
                {% endfor %}
            </tr>
        </thead>

        <!-- Table Body -->
        <tbody>
            {% for row in rows %}
            <tr class="hover:bg-gray-100">
                {% for cell in row %}
                    <td class="border border-gray-300 px-2 py-1  whitespace-nowrap">{{ cell }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>

    </table>

    </div>
   </div>
   <br>

    <!-- SCRIPT TO SAVE FILTERS TO LOCAL STORAGE -->
    <script>
    // Save filters to local storage on form submission
    document.getElementById('filtersForm').addEventListener('submit', function(event) {
        const filters = {
            phase: Array.from(document.getElementById('phase').selectedOptions).map(option => option.value),
            searchTerm: document.getElementById('searchTerm').value,
            columns: Array.from(document.querySelectorAll('input[name="columns"]:checked')).map(checkbox => checkbox.value)
        };
        sessionStorage.setItem('appliedFilters', JSON.stringify(filters));
    });

    // Apply saved filters on page load
    document.addEventListener('DOMContentLoaded', function() {
        const savedFilters = JSON.parse(sessionStorage.getItem('appliedFilters'));
        if (savedFilters) {
            // Restore phase filter
            const phaseSelect = document.getElementById('phase');
            Array.from(phaseSelect.options).forEach(option => {
                option.selected = savedFilters.phase.includes(option.value);
            });

            // Restore search term
            document.getElementById('searchTerm').value = savedFilters.searchTerm;

            // Restore column checkboxes
            document.querySelectorAll('input[name="columns"]').forEach(checkbox => {
                checkbox.checked = savedFilters.columns.includes(checkbox.value);
            });
        }
    });

    // Clear filters from local storage when "Remove Filters" is clicked
    document.getElementById('removeFilters').addEventListener('click', function() {
        sessionStorage.removeItem('appliedFilters');
    });
    </script>

    <!-- SCRIPT TO REMOVE ALL FILTERS -->
    <script>
        document.getElementById('removeAllFilters').addEventListener('click', function () {
            // Cle      ar specific localStorage items
            sessionStorage.removeItem('appliedFilters'); // Remove filters
            // Add more keys to remove as needed, e.g., localStorage.removeItem('anotherKey');

            // Optionally, clear all localStorage items
            // localStorage.clear();
        });
    </script>

    <!-- SCRIPT TO SAVE STATE OF FILTERS PANE -->
    <script>
        // Get the <details> element
        const filtersPane = document.getElementById('filtersPane');

        // Check localStorage on page load to restore state
        document.addEventListener('DOMContentLoaded', () => {
            const isPaneOpen = localStorage.getItem('filtersPaneOpen') === 'true';
            filtersPane.open = isPaneOpen; // Set the open state
        });

        // Listen for changes to the <details> open state
        filtersPane.addEventListener('toggle', () => {
            const isPaneOpen = filtersPane.open;
            localStorage.setItem('filtersPaneOpen', isPaneOpen); // Save state to localStorage
        });
    </script>

    <!-- FUNCTION TO SHOW AND HIDE SUMMARY TABLES -->
    <script>
        // Function to toggle the display of summary tables
        function toggleSummaryTable(role) {
            // Hide both tables initially
            document.getElementById('summaryTableInitiative').style.display = 'none';
            document.getElementById('summaryTableExecuter').style.display = 'none';
            
            // Log the current role and check the visibility
            console.log('Toggling role:', role);
    
            // Show the selected table based on the role
            if (role === 'Initiative') {
                console.log('Showing summaryTableInitiative');
                document.getElementById('summaryTableInitiative').style.display = 'block';
                sessionStorage.setItem('selectedRole', 'Initiative'); // Save selection to session storage
            } else if (role === 'Executer') {
                console.log('Showing summaryTableExecuter');
                document.getElementById('summaryTableExecuter').style.display = 'block';
                sessionStorage.setItem('selectedRole', 'Executer'); // Save selection to session storage
            }
        }
    
        // Function to check for URL parameters and hide or show the chart toggle element
        function checkUrlParams() {
            const urlParams = new URLSearchParams(window.location.search);
            
            // Check if there are any URL parameters
            if (urlParams.toString()) {
                document.getElementById('chart_toggle').style.display = 'none'; // Hide if parameters exist
            } else {
                document.getElementById('chart_toggle').style.display = 'visible'; // Show if no parameters
            }
        }
    
        // Function to restore the selected table from session storage on page load
        window.onload = function() {
            const savedRole = sessionStorage.getItem('selectedRole');
        
            // Default to "Initiative" if no value is stored
            if (savedRole) {
                toggleSummaryTable(savedRole);
                const radioButton = document.querySelector(`input[name="role"][value="${savedRole}"]`);
                if (radioButton) {
                    radioButton.checked = true;
                }
            } else {
                toggleSummaryTable('Executer');
            }
        
            // Check URL parameters and hide/show chart toggle
            checkUrlParams();
        }
    </script>
    
    <!-- REDIRECT CLICK BAR CHART PROJECT CARD-->
    {% raw %}
    <script type="text/javascript">
        document.getElementById('graph_html_e').on('plotly_click', function(data) {
            var sn = data.points[0].x;
            var url = "/projectcard?sn=" + sn;  // Redirect URL
            var windowFeatures = "width=1200,height=600,scrollbars=yes,resizable=yes"; // Adjust dimensions as needed
            window.open(url, "_blank", windowFeatures);  // Open in a new window
        });
    </script>
    {% endraw %}    

<!-- REDIRECT CLICK BAR CHART 2 PROJECT CARD-->
{% raw %}
<script type="text/javascript">
    document.getElementById('graph_html').on('plotly_click', function(data) {
        var sn = data.points[0].x;
        
        // Extract the text including the parentheses using regex
        var match = sn.match(/\(.*?\)/); // Match the text with parentheses
        var extractedValue = match ? match[0] : null; // Get the matched result or null if no match
        
        if (extractedValue) {
            var url = "/projectcard?sn=" + extractedValue; // Redirect URL
            var windowFeatures = "width=1200,height=600,scrollbars=yes,resizable=yes"; // Adjust dimensions as needed
            window.open(url, "_blank", windowFeatures); // Open in a new window
        } else {
            console.error("No value with parentheses found.");
        }
    });
</script>
{% endraw %}



{% endblock %}