@extends('layouts.app')

@section('content')
<div class="container py-4">
    <div class="row">
        <div class="col-12">
            <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-danger"></i>All Responses
                    </h3>
                    @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
                </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>
                                    <!-- 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="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="2" 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="3" 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="4" 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="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>
                        <button id="download-proofs" class="btn btn-success ms-2" disabled>
                            <i class="fas fa-download me-1"></i> Download Proofs
                        </button>
                    </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>Organising Institute</th>
                                    <th>Address</th>
                                    <th>Department</th>
                                    <th>Faculty</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Days</th>
                                    <th>Activity Type</th>
                                    <th>Category</th>
                                    <th>Level</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data will be loaded via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </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')
<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('activitiesAttended.downloadProofs') }}";
    const csrf_token = "{{ csrf_token() }}";
    $(document).ready(function() {
    // Handle "Select All" checkbox
    $('#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 = "Responses 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 - FIXED to check if responsive is initialized
    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({
            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: 'organising_institute',
                    name: 'organising_institute',
                    orderable: false
                },
                {
                    data: 'address',
                    name: 'address',
                    orderable: false
                },
                {
                    data: 'department_name',
                    name: 'department_name',
                    orderable: false,
                    searchable: false

                },
                {
                    data: 'user_name',
                    name: 'user_name',
                    orderable: false
                },
                {
                    data: 'start_date',
                    name: 'start_date',
                    orderable: false
                },
                {
                    data: 'end_date',
                    name: 'end_date',
                    orderable: false
                },
                {
                    data: 'num_days',
                    name: 'num_days',
                    orderable: false
                },
                {
                    data: 'activity_type',
                    name: 'activity_type',
                    orderable: false
                },
                {
                    data: 'category',
                    name: 'category',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'level',
                    name: 'level',
                    orderable: false
                },
                {
                    data: 'action',
                    name: 'proof',
                    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,
                    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_",
                searchPlaceholder: "Search records...",
                lengthMenu: "<i class='fas fa-list me-1'></i> _MENU_ records per page",
                info: "Showing _START_ to _END_ of _TOTAL_ entries",
                paginate: {
                    first: "<i class='fas fa-angle-double-left'></i>",
                    last: "<i class='fas fa-angle-double-right'></i>",
                    next: "<i class='fas fa-angle-right'></i>",
                    previous: "<i class='fas fa-angle-left'></i>"
                }
            },
            // Important: Initialize the column visibility after table is drawn
            initComplete: function() {
                // Now it's safe to 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;
    };

    // 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);

            $('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.ActivitiesAttendedResponses.data') }}";

    if (userRole === 'Coordinator') {
        dataRoute = "{{ route('coordinator.ActivitiesAttendedResponses.data') }}";
    }
    if (userRole === 'Faculty') {
        dataRoute = "{{ route('faculty.ActivitiesAttendedResponses.data') }}";
    }

    // Initialize the data table
    table = initAjaxRoute(dataRoute);

    // Attach change event listener to column visibility checkboxes AFTER table is initialized
    $('.column-checkbox').on('change', function() {
        toggleColumnVisibility();
    });

    // Ensure "Actions" column is always visible
    $('#column-actions').prop('disabled', true);

    // 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;
    }
    /* 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