Enhance Activities Organised Page with Filters, Column Selector, and Download Functionality

- Updated the page title icon color for better visibility.
- Added filter controls for Department, Category, and Date Range.
- Implemented a column selector for customizable table views.
- Integrated reusable components for sending emails and downloading proofs.
- Enhanced DataTable initialization with dynamic filtering based on user selections.
- Added functionality for selecting/deselecting all rows and managing download button state.
- Implemented toast notifications for user feedback on actions.
- Improved styling for checkboxes and dropdown menus for better user experience.

app/Http/Controllers/ActivitiesOrganisedController.php

@@ -115,7 +115,7 @@ class ActivitiesOrganisedController extends Controller
         return response()->json(['success' => 'Record deleted successfully']);
     }
 
-    public function getActivitiesOrganisedResponses()
+    public function getActivitiesOrganisedResponses(Request $request)
     {
         $user = auth()->user();
         $isAdmin = $user->role->name === 'Admin';
@@ -137,6 +137,25 @@ class ActivitiesOrganisedController extends Controller
                 ->where('faculty_id', $user->id);
         }
 
+        // Apply filters
+        if ($request->has('department') && !empty($request->department)) {
+            $responses->whereHas('department', function ($query) use ($request) {
+                $query->where('id', $request->department);
+            });
+        }
+
+        if ($request->has('category') && !empty($request->category)) {
+            $responses->where('category', $request->category);
+        }
+
+        if ($request->has('dateFrom') && !empty($request->dateFrom)) {
+            $responses->where('start_date', '>=', $request->dateFrom);
+        }
+
+        if ($request->has('dateTo') && !empty($request->dateTo)) {
+            $responses->where('end_date', '<=', $request->dateTo);
+        }
+
         return DataTables::of($responses)
             ->addColumn('user_name', function ($response) {
                 return $response->user->name ?? 'Unknown';
@@ -161,9 +180,9 @@ class ActivitiesOrganisedController extends Controller
 
                 // View proof button for everyone
                 if ($response->proof) {
-                    $actions[] = '<a href="' . asset('storage/' . $response->proof) . '" target="_blank" class="btn btn-sm btn-primary mr-1">View</a>';
+                    $actions[] = '<a href="' . asset('storage/' . $response->proof) . '" target="_blank" class="btn btn-sm btn-primary mr-1"><i class="fas fa-eye"></i></a>';
                 } else {
-                    $actions[] = 'No Proof';
+                    $actions[] = '<span class="text-muted"><i class="fas fa-times-circle"></i></span>';
                 }
 
                 // Edit button with role-appropriate route
@@ -177,10 +196,10 @@ class ActivitiesOrganisedController extends Controller
                     $editRoute = route('faculty.ActivitiesOrganised.edit', $response->id);
                 }
 
-                $actions[] = '<a href="' . $editRoute . '" class="btn btn-sm btn-info mx-1">Edit</a>';
+                $actions[] = '<a href="' . $editRoute . '" class="btn btn-sm btn-info mx-1"><i class="fas fa-edit"></i></a>';
 
                 $deleteRoute = route('activitiesOrganised.destroy', $response->id);
-                $actions[] = '<button type="button" class="btn btn-sm btn-danger delete-btn" data-id="' . $response->id . '" data-url="' . $deleteRoute . '">Delete</button>';
+                $actions[] = '<button type="button" class="btn btn-sm btn-danger delete-btn" data-id="' . $response->id . '" data-url="' . $deleteRoute . '"><i class="fas fa-trash"></i></button>';
 
                 return implode(' ', $actions);
             })

app/Http/Controllers/AdminController.php

@@ -44,31 +44,38 @@ class AdminController extends Controller
     }
     public function viewActivitiesOrganisedResponses()
     {
-        return view('pages.activities-organised.index');
+        $departments = Department::all();
+        return view('pages.activities-organised.index', compact('departments'));
     }
     public function viewIvOrganisedResponses()
     {
-        return view('pages.iv-organised.index');
+        $departments = Department::all();
+        return view('pages.iv-organised.index', compact('departments'));
     }
     public function viewPublicationsResponses()
     {
-        return view('pages.publications.index');
+        $departments = Department::all();
+        return view('pages.publications.index', compact('departments'));
     }
     public function viewBooksPublishedResponses()
     {
-        return view('pages.booksPublished.index');
+        $departments = Department::all();
+        return view('pages.booksPublished.index', compact('departments'));
     }
     public function viewExternalEngagementResponses()
     {
-        return view('pages.externalEngagement.index');
+        $departments = Department::all();
+        return view('pages.externalEngagement.index', compact('departments'));
     }
     public function viewOnlineCoursesResponses()
     {
-        return view('pages.onlineCourses.index');
+        $departments = Department::all();
+        return view('pages.onlineCourses.index', compact('departments'));
     }
     public function viewPatentsResponses()
     {
-        return view('pages.patents.index');
+        $departments = Department::all();
+        return view('pages.patents.index', compact('departments'));
     }
 
 public function downloadProofs(Request $request, ProofDownloadService $proofDownloadService)

resources/views/components/column-selector.blade.php

@@ -0,0 +1,29 @@
+@props(['columns' => []])
+<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 column-selector-dropdown" style="width: 320px;">
+        <h6 class="dropdown-header border-bottom pb-2 mb-2">Toggle Columns Visibility</h6>
+        <div class="row g-2">
+            @foreach($columns as $column)
+                <div class="col-6">
+                    <div class="form-check form-switch">
+                        <input class="form-check-input column-checkbox" type="checkbox" value="{{ $column['value'] }}" id="{{ $column['id'] }}" @checked($column['checked'] ?? false)>
+                        <label class="form-check-label" for="{{ $column['id'] }}">{{ $column['label'] }}</label>
+                    </div>
+                </div>
+            @endforeach
+        </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" type="button">
+                <i class="fas fa-check-square me-1"></i> Select All
+            </button>
+            <button id="deselect-all-columns" class="btn btn-sm btn-outline-secondary" type="button">
+                <i class="fas fa-square me-1"></i> Deselect All
+            </button>
+        </div>
+    </div>
+</div>
+

resources/views/components/send-email.blade.php

@@ -0,0 +1,94 @@
+@if(auth()->user()->role->name === 'Admin')
+<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
+
+<!-- Missing Proofs Modal -->
+@if(auth()->user()->role->name === 'Admin')
+<div class="modal fade" id="missingProofsModal" tabindex="-1" aria-labelledby="missingProofsModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <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-danger"></i>Select Categories to Check
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <form id="missingProofsForm" action="{{ route('missing-proofs.check') }}" method="POST">
+                @csrf
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="form-check mb-3">
+                                <input class="form-check-input" type="checkbox" name="categories[]" value="activities_attended" id="checkActivitiesAttended">
+                                <label class="form-check-label" for="checkActivitiesAttended">
+                                    1. Activities Attended
+                                </label>
+                            </div>
+                            <div class="form-check mb-3">
+                                <input class="form-check-input" type="checkbox" name="categories[]" value="activities_organised" id="checkActivitiesOrganised">
+                                <label class="form-check-label" for="checkActivitiesOrganised">
+                                    2. Activities Organised
+                                </label>
+                            </div>
+                            <div class="form-check mb-3">
+                                <input class="form-check-input" type="checkbox" name="categories[]" value="iv_organised" id="checkIVOrganised">
+                                <label class="form-check-label" for="checkIVOrganised">
+                                    3. IV Organised
+                                </label>
+                            </div>
+                            <div class="form-check mb-3">
+                                <input class="form-check-input" type="checkbox" name="categories[]" value="publications" id="checkPublications">
+                                <label class="form-check-label" for="checkPublications">
+                                    4. Publications
+                                </label>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-check mb-3">
+                                <input class="form-check-input" type="checkbox" name="categories[]" value="books_published" id="checkBooksPublished">
+                                <label class="form-check-label" for="checkBooksPublished">
+                                    5. Books Published
+                                </label>
+                            </div>
+                            <div class="form-check mb-3">
+                                <input class="form-check-input" type="checkbox" name="categories[]" value="external_engagement" id="checkExternalEngagement">
+                                <label class="form-check-label" for="checkExternalEngagement">
+                                    6. External Engagement
+                                </label>
+                            </div>
+                            <div class="form-check mb-3">
+                                <input class="form-check-input" type="checkbox" name="categories[]" value="online_courses" id="checkOnlineCourses">
+                                <label class="form-check-label" for="checkOnlineCourses">
+                                    7. Online Courses
+                                </label>
+                            </div>
+                            <div class="form-check mb-3">
+                                <input class="form-check-input" type="checkbox" name="categories[]" value="patents_copyrights" id="checkPatentsCopyrights">
+                                <label class="form-check-label" for="checkPatentsCopyrights">
+                                    8. Patents/Copyrights
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-check mb-2">
+                        <input class="form-check-input" type="checkbox" id="selectAll">
+                        <label class="form-check-label" for="selectAll">
+                            <strong>Select All Categories</strong>
+                        </label>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <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-danger">
+                        <i class="fas fa-paper-plane me-1"></i>Send Email
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+@endif

resources/views/pages/activities-attended/index.blade.php

@@ -9,11 +9,8 @@
                     <h3 class="page-title m-0">
                         <i class="fas fa-list-alt me-2 text-danger"></i>All Responses
                     </h3>
-                    @if(auth()->user()->role->name === 'Admin')
+                    <x-send-email />
-                    <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
                 </div>
                 <div class="card-body">
                     <!-- Filter Controls -->
@@ -35,6 +32,11 @@
                                 <span class="input-group-text bg-light">Category</span>
                                 <select id="category-filter" class="form-select">
                                     <option value="">All Categories</option>
+                                    @if(isset($dropdowns['categories']) && is_array($dropdowns['categories']))
+                                    @foreach($dropdowns['categories'] as $key => $label)
+                                    <option value="{{ $key }}">{{ $label }}</option>
+                                    @endforeach
+                                    @endif
                                     <!-- Category options would be populated dynamically -->
                                 </select>
                             </div>
@@ -53,94 +55,32 @@
                     <div class="flex justify-between col-md-12 mt-3 mb-4">
                         <!-- Include the reusable download-proofs component -->
                         <x-download-proofs :route="route('admin.downloadProofs')" :model="'ActivitiesAttended'" />
-                        <div class="dropdown">
+                        @php
-                            <button class="btn btn-danger dropdown-toggle" type="button" id="columnSelectorDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+                        use Illuminate\Support\Str;
-                                <i class="fas fa-columns me-1"></i> Customize Columns
+                        $labels = [
-                            </button>
+                        'Title',
-                            <div class="dropdown-menu p-3 shadow-sm" style="width: 320px;">
+                        'Organising Institute',
-                                <h6 class="dropdown-header border-bottom pb-2 mb-2">Toggle Columns Visibility</h6>
+                        'Address',
-
+                        'Department',
-                                <div class="row g-2">
+                        'Faculty',
-                                    <div class="col-6">
+                        'Start Date',
-                                        <div class="form-check form-switch">
+                        'End Date',
-                                            <input class="form-check-input column-checkbox" type="checkbox" value="2" id="column-title" checked>
+                        'Days',
-                                            <label class="form-check-label" for="column-title">Title</label>
+                        'Activity Type',
-                                        </div>
+                        'Category',
-                                    </div>
+                        'Level',
-                                    <div class="col-6">
+                        ];
-                                        <div class="form-check form-switch">
+                        $columns = [];
-                                            <input class="form-check-input column-checkbox" type="checkbox" value="3" id="column-institute" checked>
+                        foreach ($labels as $i => $label) {
-                                            <label class="form-check-label" for="column-institute">Organising Institute</label>
+                        $columns[] = [
-                                        </div>
+                        'label' => $label,
-                                    </div>
+                        'id' => 'column-' . Str::slug($label, '-'),
-                                    <div class="col-6">
+                        'value' => $i + 2,
-                                        <div class="form-check form-switch">
+                        'checked' => $label !== 'Days',
-                                            <input class="form-check-input column-checkbox" type="checkbox" value="4" id="column-address" checked>
+                        ];
-                                            <label class="form-check-label" for="column-address">Address</label>
+                        }
-                                        </div>
+                        @endphp
-                                    </div>
+                        <x-column-selector :columns="$columns" />
-                                    <div class="col-6">
-                                        <div class="form-check form-switch">
-                                            <input class="form-check-input column-checkbox" type="checkbox" value="5" 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="6" 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="7" 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="8" 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="9" id="column-days" unchecked>
-                                            <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="10" 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="11" 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="12" 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 -->
@@ -175,94 +115,6 @@
     </div>
 </div>
 
-<!-- Missing Proofs Modal -->
-@if(auth()->user()->role->name === 'Admin')
-<div class="modal fade" id="missingProofsModal" tabindex="-1" aria-labelledby="missingProofsModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered">
-        <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-danger"></i>Select Categories to Check
-                </h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <form id="missingProofsForm" action="{{ route('missing-proofs.check') }}" method="POST">
-                @csrf
-                <div class="modal-body">
-                    <div class="row">
-                        <div class="col-md-6">
-                            <div class="form-check mb-3">
-                                <input class="form-check-input" type="checkbox" name="categories[]" value="activities_attended" id="checkActivitiesAttended">
-                                <label class="form-check-label" for="checkActivitiesAttended">
-                                    1. Activities Attended
-                                </label>
-                            </div>
-                            <div class="form-check mb-3">
-                                <input class="form-check-input" type="checkbox" name="categories[]" value="activities_organised" id="checkActivitiesOrganised">
-                                <label class="form-check-label" for="checkActivitiesOrganised">
-                                    2. Activities Organised
-                                </label>
-                            </div>
-                            <div class="form-check mb-3">
-                                <input class="form-check-input" type="checkbox" name="categories[]" value="iv_organised" id="checkIVOrganised">
-                                <label class="form-check-label" for="checkIVOrganised">
-                                    3. IV Organised
-                                </label>
-                            </div>
-                            <div class="form-check mb-3">
-                                <input class="form-check-input" type="checkbox" name="categories[]" value="publications" id="checkPublications">
-                                <label class="form-check-label" for="checkPublications">
-                                    4. Publications
-                                </label>
-                            </div>
-                        </div>
-                        <div class="col-md-6">
-                            <div class="form-check mb-3">
-                                <input class="form-check-input" type="checkbox" name="categories[]" value="books_published" id="checkBooksPublished">
-                                <label class="form-check-label" for="checkBooksPublished">
-                                    5. Books Published
-                                </label>
-                            </div>
-                            <div class="form-check mb-3">
-                                <input class="form-check-input" type="checkbox" name="categories[]" value="external_engagement" id="checkExternalEngagement">
-                                <label class="form-check-label" for="checkExternalEngagement">
-                                    6. External Engagement
-                                </label>
-                            </div>
-                            <div class="form-check mb-3">
-                                <input class="form-check-input" type="checkbox" name="categories[]" value="online_courses" id="checkOnlineCourses">
-                                <label class="form-check-label" for="checkOnlineCourses">
-                                    7. Online Courses
-                                </label>
-                            </div>
-                            <div class="form-check mb-3">
-                                <input class="form-check-input" type="checkbox" name="categories[]" value="patents_copyrights" id="checkPatentsCopyrights">
-                                <label class="form-check-label" for="checkPatentsCopyrights">
-                                    8. Patents/Copyrights
-                                </label>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-check mb-2">
-                        <input class="form-check-input" type="checkbox" id="selectAll">
-                        <label class="form-check-label" for="selectAll">
-                            <strong>Select All Categories</strong>
-                        </label>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <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-danger">
-                        <i class="fas fa-paper-plane me-1"></i>Send Email
-                    </button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
-@endif
 @endsection
 
 @section('scripts')
@@ -797,6 +649,7 @@
         max-height: 400px;
         overflow-y: auto;
     }
+
     /* Ensure the table container is responsive */
     .table-responsive {
         overflow-x: auto;

resources/views/pages/activities-organised/index.blade.php

@@ -7,15 +7,88 @@
             <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 Activities Organised
+                        <i class="fas fa-list-alt me-2 text-danger"></i>All Activities Organised
                     </h3>
+                    <!-- Include the reusable send-email component -->
+                    <x-send-email /> 
                 </div>
                 <div class="card-body">
+                    <!-- Filter Controls -->
+                    <div class="row mb-4">
+                        <div class="col-md-4">
+                            <div class="input-group">
+                                <span class="input-group-text bg-light">Department</span>
+                                <select id="department-filter" class="form-select">
+                                    <option value="">All Departments</option>
+                                    @foreach($departments as $department)
+                                    <option value="{{ $department->id }}">{{ $department->name }}</option>
+                                    @endforeach
+                                </select>
+                            </div>
+                        </div>
+
+                        <div class="col-md-4">
+                            <div class="input-group">
+                                <span class="input-group-text bg-light">Category</span>
+                                <select id="category-filter" class="form-select">
+                                    <option value="">All Categories</option>
+                                    @if(isset($dropdowns['categories']) && is_array($dropdowns['categories']))
+                                    @foreach($dropdowns['categories'] as $key => $label)
+                                    <option value="{{ $key }}">{{ $label }}</option>
+                                    @endforeach
+                                    @endif
+                                    <!-- Category options would be populated dynamically -->
+                                </select>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="input-group">
+                                <span class="input-group-text bg-light">Date Range</span>
+                                <input type="date" id="date-from" class="form-control">
+                                <span class="input-group-text bg-light">to</span>
+                                <input type="date" id="date-to" class="form-control">
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Column Selector -->
+                    <div class="flex justify-between col-md-12 mt-3 mb-4">
+                        <!-- Include the reusable download-proofs component -->
+                        <x-download-proofs :route="route('admin.downloadProofs')" :model="'ActivitiesOrganised'" />
+                        @php
+                            use Illuminate\Support\Str;
+                            $labels = [
+                                'Title',
+                                'Resource Person',
+                                'Organisation',
+                                'Target Audience',
+                                'Department',
+                                'Faculty',
+                                'Venue',
+                                'Activity Type',
+                                'Category',
+                                'Level',
+                                'Participants',
+                            ];
+                            $columns = [];
+                            foreach ($labels as $i => $label) {
+                                $columns[] = [
+                                    'label' => $label,
+                                    'id' => 'column-' . Str::slug($label, '-'),
+                                    'value' => $i + 2,
+                                    'checked' => $label !== 'Venue' && $label !== 'Activity Type',
+                                ];
+                            }
+                        @endphp
+                        <x-column-selector :columns="$columns" />
+                    </div>
+
                     <!-- Table -->
                     <div class="table-responsive">
                         <table id="responses-table" class="table table-striped table-hover">
                             <thead>
                                 <tr>
+                                    <th class="select-checkbox"></th>
                                     <th>ID</th>
                                     <th>Title</th>
                                     <th>Resource Person</th>
@@ -44,20 +117,101 @@
 @endsection
 
 @section('scripts')
+<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js" integrity="sha512-Tn2m0TIpgVyTzzvmxLNuqbSJH3JP8jm+Cy3hvHrW7ndTDcJ1w5mBiksqDBb8GpE2ksktFvDB/ykZ0mDpsZj20w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script>
+    const downloadProofsRoute = "{{ route('admin.downloadProofs') }}";
+    const currentModel = "{{ isset($model) ? $model : 'ActivitiesOrganised' }}";
+    const csrf_token = "{{ csrf_token() }}";
     $(document).ready(function() {
-        const sheetName = "Activities Organised";
+        // Handle "Select All" checkbox for missing proofs modal
+        $('#selectAll').change(function() {
+            const isChecked = $(this).prop('checked');
+            $('input[name="categories[]"]').prop('checked', isChecked);
+        });
+
+        // Update "Select All" when individual checkboxes change
+        $('input[name="categories[]"]').change(function() {
+            const totalCheckboxes = $('input[name="categories[]"]').length;
+            const checkedCheckboxes = $('input[name="categories[]"]:checked').length;
+            $('#selectAll').prop('checked', totalCheckboxes === checkedCheckboxes);
+        });
+
+        // Form validation for the modal
+        const form = document.getElementById('missingProofsForm');
+        if (form) {
+            form.addEventListener('submit', function(e) {
+                const checkboxes = form.querySelectorAll('input[type="checkbox"]:checked');
+
+                if (checkboxes.length === 0) {
+                    e.preventDefault();
+                    alert('Please select at least one category before sending emails.');
+                }
+            });
+        }
+
+        const sheetName = "Activities Organised Report";
+        let table; // Declare table variable in the outer scope
+
+        function exportOptions() {
+            return {
+                columns: ':visible',
+                format: {
+                    body: function(data, row, column, node) {
+                        if ($(node).find('select').length) {
+                            return $(node).find("select option:selected").text();
+                        }
+                        return $(node).text();
+                    }
+                }
+            };
+        }
+
+        // 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
+                if (table) {
+                    table.column(columnIndex).visible(isChecked);
+                }
+            });
+
+            // Adjust table layout only if table and responsive are initialized
+            if (table && table.responsive) {
+                table.columns.adjust().responsive.recalc();
+            } else if (table) {
+                table.columns.adjust();
+            }
+        }
 
         var initAjaxRoute = function(route) {
+            // If table already exists, destroy it before re-initializing
+            if ($.fn.DataTable.isDataTable('#responses-table')) {
+                $('#responses-table').DataTable().destroy();
+            }
+
             table = $("#responses-table").DataTable({
-                fnDestroy: true,
                 processing: true,
                 serverSide: true,
                 responsive: true,
                 ajax: {
                     url: route,
+                    data: function(d) {
+                        d.department = $('#department-filter').val();
+                        d.category = $('#category-filter').val();
+                        d.dateFrom = $('#date-from').val();
+                        d.dateTo = $('#date-to').val();
+                    }
                 },
                 columns: [
+                    {
+                        data: null,
+                        defaultContent: '',
+                        orderable: false,
+                        searchable: false
+                    },
                     { data: 'id', name: 'id', searchable: false },
                     { data: 'title', name: 'title', orderable: false },
                     { data: 'resource_person_name', name: 'resource_person_name', orderable: false },
@@ -70,18 +224,66 @@
                     { data: 'category', name: 'category', orderable: false, searchable: false },
                     { data: 'level', name: 'level', orderable: false },
                     { data: 'number_of_participants', name: 'number_of_participants', orderable: false },
-                    { data: 'action', name: 'action', orderable: false, searchable: false },
+                    { data: 'action', name: 'action', orderable: false, searchable: false }
                 ],
                 columnDefs: [
+                    {
+                        targets: 0,
+                        orderable: false,
+                        className: 'select-checkbox',
+                        render: function(data, type, row) {
+                            return row.proof ?
+                                '<input type="checkbox" class="row-checkbox" data-id="' + row.id + '">' :
+                                '<input type="checkbox" disabled>';
+                        }
+                    },
                     { targets: '_all', className: 'text-center wrap-text' },
+                    {
+                        targets: 13,
+                        render: function(data, type, row) {
+                            return '<div class="btn-group" role="group">' +
+                                data +
+                                '</div>';
+                        }
+                    }
                 ],
                 dom: '<"d-flex justify-content-between align-items-center mb-3"<"d-flex align-items-center"l><"d-flex"f<"ms-2"B>>>rtip',
                 buttons: [
-                    { extend: 'copy', text: '<i class="fas fa-copy me-1"></i> Copy', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    {
-                    { extend: 'csv', text: '<i class="fas fa-file-csv me-1"></i> CSV', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                        extend: 'copy',
-                    { extend: 'excel', text: '<i class="fas fa-file-excel me-1"></i> Excel', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                        text: '<i class="fas fa-copy me-1"></i> Copy',
-                    { extend: 'pdf', text: '<i class="fas fa-file-pdf me-1"></i> PDF', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                        className: 'btn btn-sm btn-outline-white',
-                    { extend: 'print', text: '<i class="fas fa-print me-1"></i> Print', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                        title: sheetName,
+                        exportOptions: exportOptions()
+                    },
+                    {
+                        extend: 'csv',
+                        text: '<i class="fas fa-file-csv me-1"></i> CSV',
+                        className: 'btn btn-sm btn-outline-white',
+                        title: sheetName,
+                        exportOptions: exportOptions()
+                    },
+                    {
+                        extend: 'excel',
+                        text: '<i class="fas fa-file-excel me-1"></i> Excel',
+                        className: 'btn btn-sm btn-outline-white',
+                        title: sheetName,
+                        exportOptions: exportOptions()
+                    },
+                    {
+                        extend: 'pdf',
+                        text: '<i class="fas fa-file-pdf me-1"></i> PDF',
+                        className: 'btn btn-sm btn-outline-white',
+                        title: sheetName,
+                        exportOptions: exportOptions()
+                    },
+                    {
+                        extend: 'print',
+                        text: '<i class="fas fa-print me-1"></i> Print',
+                        className: 'btn btn-sm btn-outline-white',
+                        title: sheetName,
+                        exportOptions: exportOptions()
+                    }
                 ],
                 language: {
                     search: "<i class='fas fa-search'></i> _INPUT_",
@@ -94,11 +296,163 @@
                         next: "<i class='fas fa-angle-right'></i>",
                         previous: "<i class='fas fa-angle-left'></i>"
                     }
+                },
+                // Initialize the column visibility after table is drawn
+                initComplete: function() {
+                    // Set column visibility
+                    toggleColumnVisibility();
+                    
+                    // Add select-all checkbox
+                    addSelectAllCheckbox();
+                },
+                drawCallback: function() {
+                    // Ensure select-all checkbox is present on redraw
+                    addSelectAllCheckbox();
                 }
             });
+
+            // Apply filters when they change
+            $('#department-filter, #category-filter, #date-from, #date-to').change(function() {
+                table.ajax.reload();
+            });
+
+            return table;
         };
 
-        // Set appropriate route based on user role
+        // Delete button handler
+        $('#responses-table').on('click', '.delete-btn', function() {
+            if (confirm('Are you sure you want to delete this record?')) {
+                const id = $(this).data('id');
+                const url = $(this).data('url');
+
+                $.ajax({
+                    url: url,
+                    type: 'DELETE',
+                    data: {
+                        "_token": "{{ csrf_token() }}"
+                    },
+                    success: function(result) {
+                        table.ajax.reload();
+                        showToast('Record deleted successfully', 'success');
+                    },
+                    error: function(error) {
+                        console.error(error);
+                        showToast('Error deleting record', 'danger');
+                    }
+                });
+            }
+        });
+
+        // Handle row selection and Download button state
+        $('#responses-table').on('change', '.row-checkbox', function() {
+            const selectedRows = $('.row-checkbox:checked').length;
+            $('#download-proofs').prop('disabled', selectedRows === 0);
+        });
+
+        // Download proofs button handler
+        $('#download-proofs').on('click', function() {
+            const selectedIds = [];
+
+            $('.row-checkbox:checked').each(function() {
+                const id = $(this).data('id');
+                if (id) selectedIds.push(id);
+            });
+
+            if (selectedIds.length > 0) {
+                // Create a form to submit the request
+                const form = $('<form></form>')
+                    .attr('method', 'POST')
+                    .attr('action', downloadProofsRoute)
+                    .css('display', 'none');
+
+                // Add CSRF token
+                $('<input>')
+                    .attr('type', 'hidden')
+                    .attr('name', '_token')
+                    .attr('value', csrf_token)
+                    .appendTo(form);
+
+                // Add selected IDs
+                $('<input>')
+                    .attr('type', 'hidden')
+                    .attr('name', 'ids')
+                    .attr('value', JSON.stringify(selectedIds))
+                    .appendTo(form);
+                    
+                // Add model name
+                $('<input>')
+                    .attr('type', 'hidden')
+                    .attr('name', 'model')
+                    .attr('value', currentModel)
+                    .appendTo(form);
+
+                $('body').append(form);
+                form.submit();
+            }
+        });
+
+        // Function to add select-all checkbox to the table header
+        function addSelectAllCheckbox() {
+            // Only add if it doesn't exist yet
+            if ($('#select-all-checkbox').length === 0) {
+                const selectAllCheckbox = $('<input>', {
+                    type: 'checkbox',
+                    id: 'select-all-checkbox',
+                    class: 'form-check-input'
+                });
+
+                // Add to the first header column
+                $('#responses-table thead th.select-checkbox').html(selectAllCheckbox);
+
+                // Handle the select all functionality
+                $('#select-all-checkbox').on('change', function() {
+                    const isChecked = $(this).prop('checked');
+                    $('.row-checkbox:not(:disabled)').prop('checked', isChecked);
+
+                    // Update download button state
+                    const selectedRows = $('.row-checkbox:checked').length;
+                    $('#download-proofs').prop('disabled', selectedRows === 0);
+                });
+            }
+        }
+
+        // Toast notification function
+        function showToast(message, type) {
+            const toastContainer = document.createElement('div');
+            toastContainer.className = 'position-fixed bottom-0 start-0 p-3';
+            toastContainer.style.zIndex = '1050';
+
+            const toastEl = document.createElement('div');
+            toastEl.className = `toast align-items-center text-white bg-${type} border-0`;
+            toastEl.setAttribute('role', 'alert');
+            toastEl.setAttribute('aria-live', 'assertive');
+            toastEl.setAttribute('aria-atomic', 'true');
+
+            toastEl.innerHTML = `
+            <div class="d-flex">
+                <div class="toast-body">
+                    ${message}
+                </div>
+                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+        `;
+
+            toastContainer.appendChild(toastEl);
+            document.body.appendChild(toastContainer);
+
+            const toast = new bootstrap.Toast(toastEl, {
+                autohide: true,
+                delay: 3000
+            });
+
+            toast.show();
+
+            toastEl.addEventListener('hidden.bs.toast', function() {
+                document.body.removeChild(toastContainer);
+            });
+        }
+
+        // Set the appropriate data route based on user role
         const userRole = "{{ auth()->user()->role->name }}";
         let dataRoute = "{{ route('admin.ActivitiesOrganisedResponses.data') }}";
 
@@ -109,7 +463,174 @@
             dataRoute = "{{ route('faculty.ActivitiesOrganisedResponses.data') }}";
         }
 
-        initAjaxRoute(dataRoute);
+        // Initialize the data table
+        table = initAjaxRoute(dataRoute);
+
+        // Attach change event listener to column visibility checkboxes
+        $('.column-checkbox').on('change', function() {
+            toggleColumnVisibility();
+        });
+
+        // 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();
+        });
+
+        // Set department filter from query string if present
+        $(document).ready(function() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const departmentId = urlParams.get('department_id');
+            if (departmentId) {
+                $('#department-filter').val(departmentId).trigger('change');
+            }
+        });
     });
 </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;
+    }
+    /* 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;
+    }
+
+
+    .select-checkbox {
+        width: 30px;
+        text-align: center;
+    }
+
+    .select-checkbox input[type="checkbox"] {
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
+    }
+
+    .select-checkbox input[type="checkbox"]:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    /* Style the Download button */
+    #download-proofs {
+        background-color: #28a745;
+        border-color: #28a745;
+    }
+
+    #download-proofs:hover:not(:disabled) {
+        background-color: #218838;
+        border-color: #218838;
+    }
+
+    #download-proofs:disabled {
+        opacity: 0.65;
+        cursor: not-allowed;
+    }
+</style>
 @endsection