From f20b51b78ed5351ad3539a8e9bd428637472833b Mon Sep 17 00:00:00 2001
From: Sallu9007 <sallumoghul007@gmail.com>
Date: Sat, 10 May 2025 13:49:43 +0530
Subject: [PATCH] Feat: create toggle for columns

---
 .../pages/activities-attended/index.blade.php | 237 +++++++++++++++++-
 1 file changed, 233 insertions(+), 4 deletions(-)

diff --git a/resources/views/pages/activities-attended/index.blade.php b/resources/views/pages/activities-attended/index.blade.php
index 59f251c..5e95a3f 100644
--- a/resources/views/pages/activities-attended/index.blade.php
+++ b/resources/views/pages/activities-attended/index.blade.php
@@ -7,10 +7,10 @@
             <div class="card shadow-sm">
                 <div class="card-header d-flex justify-content-between align-items-center">
                     <h3 class="page-title m-0">
-                        <i class="fas fa-list-alt me-2 text-primary"></i>All Responses
+                        <i class="fas fa-list-alt me-2 text-danger"></i>All Responses
                     </h3>
                     @if(auth()->user()->role->name === 'Admin')
-                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#missingProofsModal">
+                    <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#missingProofsModal">
                         <i class="fas fa-search me-1"></i> Check Missing Proofs
                     </button>
                     @endif
@@ -49,6 +49,97 @@
                         </div>
                     </div>
 
+                    <!-- Column Selector -->
+                    <div class="col-md-12 mt-3 mb-4">
+                        <div class="dropdown">
+                            <button class="btn btn-danger dropdown-toggle" type="button" id="columnSelectorDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+                                <i class="fas fa-columns me-1"></i> Customize Columns
+                            </button>
+                            <div class="dropdown-menu p-3 shadow-sm" style="width: 320px;">
+                                <h6 class="dropdown-header border-bottom pb-2 mb-2">Toggle Columns Visibility</h6>
+
+                                <div class="row g-2">
+                                    <div class="col-6">
+                                        <div class="form-check form-switch">
+                                            <input class="form-check-input column-checkbox" type="checkbox" value="1" id="column-title" checked>
+                                            <label class="form-check-label" for="column-title">Title</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-6">
+                                        <div class="form-check form-switch">
+                                            <input class="form-check-input column-checkbox" type="checkbox" value="2" id="column-institute" checked>
+                                            <label class="form-check-label" for="column-institute">Organising Institute</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-6">
+                                        <div class="form-check form-switch">
+                                            <input class="form-check-input column-checkbox" type="checkbox" value="3" id="column-address" checked>
+                                            <label class="form-check-label" for="column-address">Address</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-6">
+                                        <div class="form-check form-switch">
+                                            <input class="form-check-input column-checkbox" type="checkbox" value="4" id="column-department" checked>
+                                            <label class="form-check-label" for="column-department">Department</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-6">
+                                        <div class="form-check form-switch">
+                                            <input class="form-check-input column-checkbox" type="checkbox" value="5" id="column-faculty" checked>
+                                            <label class="form-check-label" for="column-faculty">Faculty</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-6">
+                                        <div class="form-check form-switch">
+                                            <input class="form-check-input column-checkbox" type="checkbox" value="6" id="column-start-date" checked>
+                                            <label class="form-check-label" for="column-start-date">Start Date</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-6">
+                                        <div class="form-check form-switch">
+                                            <input class="form-check-input column-checkbox" type="checkbox" value="7" id="column-end-date" checked>
+                                            <label class="form-check-label" for="column-end-date">End Date</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-6">
+                                        <div class="form-check form-switch">
+                                            <input class="form-check-input column-checkbox" type="checkbox" value="8" id="column-days" checked>
+                                            <label class="form-check-label" for="column-days">Days</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-6">
+                                        <div class="form-check form-switch">
+                                            <input class="form-check-input column-checkbox" type="checkbox" value="9" id="column-activity-type" checked>
+                                            <label class="form-check-label" for="column-activity-type">Activity Type</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-6">
+                                        <div class="form-check form-switch">
+                                            <input class="form-check-input column-checkbox" type="checkbox" value="10" id="column-category" checked>
+                                            <label class="form-check-label" for="column-category">Category</label>
+                                        </div>
+                                    </div>
+                                    <div class="col-6">
+                                        <div class="form-check form-switch">
+                                            <input class="form-check-input column-checkbox" type="checkbox" value="11" id="column-level" checked>
+                                            <label class="form-check-label" for="column-level">Level</label>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="dropdown-divider my-2"></div>
+
+                                <div class="d-flex justify-content-between">
+                                    <button id="select-all-columns" class="btn btn-sm btn-outline-danger">
+                                        <i class="fas fa-check-square me-1"></i> Select All
+                                    </button>
+                                    <button id="deselect-all-columns" class="btn btn-sm btn-outline-secondary">
+                                        <i class="fas fa-square me-1"></i> Deselect All
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                     <!-- Table -->
                     <div class="table-responsive">
                         <table id="responses-table" class="table table-striped table-hover">
@@ -87,7 +178,7 @@
         <div class="modal-content">
             <div class="modal-header bg-light">
                 <h5 class="modal-title" id="missingProofsModalLabel">
-                    <i class="fas fa-check-square me-2 text-primary"></i>Select Categories to Check
+                    <i class="fas fa-check-square me-2 text-danger"></i>Select Categories to Check
                 </h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
@@ -159,7 +250,7 @@
                     <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                         <i class="fas fa-times me-1"></i>Close
                     </button>
-                    <button type="submit" class="btn btn-primary">
+                    <button type="submit" class="btn btn-danger">
                         <i class="fas fa-paper-plane me-1"></i>Send Email
                     </button>
                 </div>
@@ -448,6 +539,144 @@
 
         // Initialize the data table
         initAjaxRoute(dataRoute);
+
+        // Function to toggle column visibility
+        function toggleColumnVisibility() {
+            $('.column-checkbox').each(function() {
+                const columnIndex = $(this).val();
+                const isChecked = $(this).is(':checked');
+
+                // Show or hide the column based on checkbox state
+                table.column(columnIndex).visible(isChecked);
+            });
+
+            // Adjust table layout to prevent horizontal scrolling
+            table.columns.adjust().responsive.recalc();
+        }
+
+        // Attach change event listener to checkboxes
+        $('.column-checkbox').off('change').on('change', function() {
+            toggleColumnVisibility();
+        });
+
+        // Ensure "Actions" column is always visible
+        $('#column-actions').prop('disabled', true);
+
+        // Initial call to set column visibility
+        toggleColumnVisibility();
     });
 </script>
+<script>
+$(document).ready(function() {
+    // Select all columns button
+    $('#select-all-columns').click(function() {
+        $('.column-checkbox').prop('checked', true).trigger('change');
+    });
+    
+    // Deselect all columns button
+    $('#deselect-all-columns').click(function() {
+        $('.column-checkbox').prop('checked', false).trigger('change');
+    });
+    
+    // Prevent dropdown from closing when clicking inside it
+    $('.dropdown-menu').on('click', function(e) {
+        e.stopPropagation();
+    });
+});
+</script>
+<style>
+    .form-check-input:checked {
+        background-color: #b7202e;
+        border-color: #ed1c24;
+    }
+
+   
+    .dropdown-menu {
+        background-color: #fff;
+        border-radius: 0.5rem;
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    }    
+    .dropdown-menu .form-check-input:checked {
+        background-color: #b7202e;
+        border-color: #ed1c24;
+    }
+    .dropdown-menu .form-check-input:focus {
+        box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
+    }
+    .dropdown-menu .form-check-input:checked:focus {
+        box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
+    }
+    .dropdown-menu .form-check-input:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
+    }
+    .dropdown-menu .form-check-input:checked:focus-visible {
+        box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
+    }
+    .dropdown-menu .form-check-input:focus-visible:checked {
+        box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
+    }
+    .dropdown-menu .form-check-input:focus-visible:not(:checked) {
+        box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
+    }
+    .dropdown-menu .form-check-input:focus-visible:not(:checked):checked {
+        box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
+    }
+    .dropdown-menu .form-check-input:focus-visible:not(:checked):not(:checked) {
+        box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
+    }
+    .dropdown-menu .form-check-input:focus-visible:not(:checked):not(:checked):checked {
+        box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
+    }
+    .dropdown-menu .form-check-input:focus-visible:not(:checked):not(:checked):not(:checked) {
+        box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
+    }
+    .dropdown-menu .form-check-input:focus-visible:not(:checked):not(:checked):not(:checked):checked {
+        box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
+    }
+    .dropdown-menu .form-check-input:focus-visible:not(:checked):not(:checked):not(:checked):not(:checked) {
+        box-shadow: 0 0 0 0.2rem rgba(189, 72, 46, 0.25);
+    }   
+    
+    .form-switch .form-check-input {
+        width: 2.5em;
+        margin-left: -2.8em;
+        position: relative;
+    }
+    
+    .form-switch .form-check-input:focus {
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
+    }
+    
+    .form-switch .form-check-input:checked {
+        background-position: right center;
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+        transition: background-position 0.15s ease-in-out;
+    }
+    
+    /* Enhance the toggle appearance */
+    .form-switch .form-check-input {
+        background-size: contain;
+        transition: 0.2s;
+    }
+    
+    .dropdown-menu {
+        max-height: 400px;
+        overflow-y: auto;
+    }
+</style>
+
+
+<style>
+    /* Ensure the table container is responsive */
+    .table-responsive {
+        overflow-x: auto;
+        white-space: nowrap;
+    }
+
+    /* Ensure the table fits within the container */
+    #responses-table {
+        width: 100% !important;
+    }
+</style>
 @endsection
\ No newline at end of file