@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        @include('partials.header')
        @include('partials.sidebar')

        <div id="content" class="content">
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Information Display</a></li>
                <li class="breadcrumb-item active">Welcome Greetings</li>
            </ol>

            <h1 class="page-header">Welcome Greetings</h1>

            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn" style="gap: 5px;">
                        <a href="{{ route('welcome_greetings.create') }}" class="btn btn-sm btn-custom">
                            <i class="fa fa-plus"></i> Add New Greeting
                        </a>
                    </div>
                </div>
                <div class="panel-body">
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    <div class="table-responsive">
                        <table id="data-table-default" class="table table-striped table-bordered table-td-valign-middle">
                            <thead>
                                <tr>
                                    <th width="15%">Image</th>
                                    <th width="25%">Title</th>
                                    <th width="20%">Assignment Status</th>
                                    <th width="10%">Active</th>
                                    <th width="15%">File Info</th>
                                    <th width="15%">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($welcomeGreetings as $greeting)
                                    <tr>
                                        <td>
                                            @if ($greeting->imageExists())
                                                <img src="{{ $greeting->image_url }}"
                                                    alt="{{ $greeting->alt_text ?? $greeting->title }}"
                                                    class="img-thumbnail"
                                                    style="max-width: 100px; max-height: 80px; object-fit: cover;">
                                            @else
                                                <div class="alert alert-warning p-2 mb-0 text-center">
                                                    <i class="fa fa-exclamation-triangle"></i>
                                                    <small>Missing</small>
                                                </div>
                                            @endif
                                        </td>
                                        <td>
                                            <strong>{{ $greeting->title }}</strong>
                                            @if (!$greeting->is_active)
                                                <small class="text-muted d-block">(Inactive)</small>
                                            @endif
                                        </td>
                                        <td>
                                            @if ($greeting->assignment_summary['general'])
                                                <span class="badge badge-primary"><i class="fa fa-globe"></i> All
                                                    Rooms</span>
                                            @elseif ($greeting->assignment_summary['personal_rooms']->count() > 0)
                                                <span class="badge badge-info"><i class="fa fa-user"></i>
                                                    {{ $greeting->assignment_summary['personal_rooms']->count() }}
                                                    Room(s)</span>
                                                <div class="mt-1">
                                                    <small class="text-muted">
                                                        {{ Str::limit($greeting->assignment_summary['personal_rooms']->pluck('room')->join(', '), 50) }}
                                                    </small>
                                                </div>
                                            @else
                                                <span class="badge badge-secondary"><i class="fa fa-times"></i> Not
                                                    Assigned</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div
                                                class="switcher {{ $greeting->assignment_summary['general'] ? 'switcher-disabled' : '' }}">
                                                <input type="checkbox" name="active_status"
                                                    id="switcher_checkbox_{{ $greeting->id }}"
                                                    {{ $greeting->is_active ? 'checked' : '' }}
                                                    {{ $greeting->assignment_summary['general'] ? 'disabled' : '' }}
                                                    onchange="updateActiveStatus({{ $greeting->id }}, this.checked)">
                                                <label for="switcher_checkbox_{{ $greeting->id }}"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <small>
                                                <strong>{{ $greeting->human_file_size }}</strong><br>
                                                {{ pathinfo($greeting->original_filename, PATHINFO_EXTENSION) }}<br>
                                                {{ $greeting->created_at->format('M d, Y') }}
                                            </small>
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <button class="btn btn-sm btn-custom greeting-assign-btn"
                                                    data-greeting-id="{{ $greeting->id }}"
                                                    title="@if ($greeting->assignment_summary['general']) Manage All Rooms Assignment @else Assign to Rooms @endif">
                                                    <i class="fa fa-tasks"></i>
                                                </button>
                                                <a href="{{ route('welcome_greetings.show', $greeting->id) }}"
                                                    class="btn btn-sm btn-custom" title="View"><i
                                                        class="fa fa-eye"></i></a>
                                                <a href="{{ route('welcome_greetings.edit', $greeting->id) }}"
                                                    class="btn btn-sm btn-custom" title="Edit"><i
                                                        class="fa fa-edit"></i></a>
                                                <form action="{{ route('welcome_greetings.destroy', $greeting->id) }}"
                                                    method="POST" class="d-inline"
                                                    onsubmit="return confirm('Are you sure you want to delete this greeting?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-custom btn-danger"
                                                        title="Delete"><i class="fa fa-trash"></i></button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-4">No welcome greetings found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Assignment Modal -->
        <div class="modal fade" id="assignModal" tabindex="-1" role="dialog" aria-labelledby="assignModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="assignModalLabel">Manage Assignment</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="currentAssignmentStatusInModal" class="alert alert-info"></div>
                        <form id="assignForm">
                            <input type="hidden" id="modalGreetingId" name="greeting_id">
                            <div class="form-group">
                                <label>Assignment Type:</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="assignment_type"
                                        id="modal_assign_general" value="general">
                                    <label class="form-check-label" for="modal_assign_general"><i
                                            class="fa fa-globe text-primary"></i> Assign to All Rooms (General)</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="assignment_type"
                                        id="modal_assign_personal" value="personal">
                                    <label class="form-check-label" for="modal_assign_personal"><i
                                            class="fa fa-user text-info"></i> Assign to Specific Rooms (Personal)</label>
                                </div>
                            </div>

                            <div class="form-group" id="modalRoomSelection" style="display: none;">
                                <label>Select Rooms:</label>
                                <div class="room-selection-container">
                                    <input type="text" class="form-control mb-3" id="modalRoomSearch"
                                        placeholder="Search rooms...">
                                    <div class="room-list"
                                        style="max-height: 300px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; border-radius: 4px;">
                                        @foreach ($rooms as $room)
                                            <div class="form-check room-item">
                                                <input class="form-check-input room-checkbox" type="checkbox"
                                                    value="{{ $room->id }}" id="modal_room_{{ $room->id }}"
                                                    data-room-name="{{ strtolower($room->room) }}">
                                                <label class="form-check-label" for="modal_room_{{ $room->id }}">
                                                    <strong>{{ $room->room }}</strong> <span
                                                        class="text-muted">({{ $room->roomType->name ?? 'N/A' }})</span>
                                                </label>
                                                <small class="ml-2 text-danger room-assigned-notice"
                                                    style="display: none;">(Assigned to another greeting)</small>
                                            </div>
                                        @endforeach
                                    </div>
                                    <small class="text-muted mt-2 d-block">Selected: <span
                                            id="modalSelectedCount">0</span> room(s)</small>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-custom" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-custom" id="saveAssignmentBtn" onclick="saveAssignment()">
                            <i class="fa fa-save"></i> Save Assignment
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
            data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
    </div>

    <style>
        /* Loading state styles */
        .switcher.loading {
            opacity: 0.7;
            position: relative;
        }

        .switcher.loading::after {
            content: '';
            position: absolute;
            top: 2px;
            right: 2px;
            width: 8px;
            height: 8px;
            border: 1px solid #ccc;
            border-top-color: #007bff;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* Ensure switcher input is never visually disabled */
        .switcher input[type="checkbox"] {
            pointer-events: auto !important;
            opacity: 1 !important;
        }

        .switcher input[type="checkbox"]:disabled {
            pointer-events: none !important;
            opacity: 0.5 !important;
        }

        /* Disabled switcher styling */
        .switcher-disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }

        .switcher-disabled input[type="checkbox"] {
            cursor: not-allowed;
            pointer-events: none;
        }

        .switcher-disabled label {
            cursor: not-allowed;
            pointer-events: none;
            opacity: 0.5;
        }

        /* Override any existing switcher styles when disabled */
        .switcher-disabled label::before,
        .switcher-disabled label::after {
            cursor: not-allowed !important;
        }

        /* Room item styles */
        .room-item.disabled {
            color: #999;
            text-decoration: line-through;
            cursor: not-allowed;
        }

        .room-item.disabled label {
            cursor: not-allowed;
        }

        /* Alert styles for temporary messages */
        .alert-success {
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
        }

        .alert-info {
            color: #0c5460;
            background-color: #d1ecf1;
            border-color: #bee5eb;
        }
    </style>

    <script>
        let currentAssignmentData = null;
        document.addEventListener('DOMContentLoaded', function() {
            // --- FIX: Logic to read and display flash message from localStorage ---
            const successMessage = localStorage.getItem('toggle_status_success');

            if (successMessage) {
                // Display the message using the existing showTemporaryMessage helper function
                showTemporaryMessage(successMessage, 'success');

                // Clear the message immediately so it doesn't reappear on refresh
                localStorage.removeItem('toggle_status_success');
            }
            // ----------------------------------------------------------------------


            // Auto-dismiss success alerts after 3 seconds (for redirected users from show page)
            const successAlerts = document.querySelectorAll('.alert-success');

            successAlerts.forEach(alert => {
                // Add a fade-out animation after 3 seconds
                setTimeout(() => {
                    if (alert.parentNode) {
                        alert.style.transition = 'opacity 0.5s ease-out';
                        alert.style.opacity = '0';

                        // Remove the element after animation completes
                        setTimeout(() => {
                            if (alert.parentNode) {
                                alert.remove();
                            }
                        }, 500);
                    }
                }, 3000); // 3 second delay before starting fade
            });

            // Also auto-dismiss any error alerts after 5 seconds
            const errorAlerts = document.querySelectorAll('.alert-danger');

            errorAlerts.forEach(alert => {
                setTimeout(() => {
                    if (alert.parentNode) {
                        alert.style.transition = 'opacity 0.5s ease-out';
                        alert.style.opacity = '0';

                        setTimeout(() => {
                            if (alert.parentNode) {
                                alert.remove();
                            }
                        }, 500);
                    }
                }, 5000); // 5 second delay for error messages
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            // Initialize assignment buttons
            document.querySelectorAll('.greeting-assign-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const greetingId = this.dataset.greetingId;
                    openAssignmentModal(greetingId);
                });
            });

            // Check all switchers on page load to ensure none are disabled
            document.querySelectorAll('input[name="active_status"]').forEach(checkbox => {
                if (checkbox.disabled) {
                    console.warn('Found disabled switcher:', checkbox.id);
                    // Force enable it
                    checkbox.disabled = false;
                }
            });
        });

        function openAssignmentModal(greetingId) {
            resetModalForm();
            document.getElementById('modalGreetingId').value = greetingId;
            const url = `{{ url('welcome_greetings') }}/${greetingId}/assignment-details`;

            fetch(url)
                .then(res => res.json())
                .then(response => {
                    if (response.success) {
                        // The data is nested under response.data
                        currentAssignmentData = {
                            ...response.data,
                            assigned_room_ids: response.assigned_room_ids || [], // Ensure array exists
                            externally_assigned_room_ids: response.externally_assigned_room_ids ||
                            [] // Ensure array exists
                        };
                        preSelectCurrentAssignment();
                        $('#assignModal').modal('show');
                    } else {
                        alert('Failed to load assignment details.');
                    }
                })
                .catch(error => {
                    console.error('Error loading assignment details:', error);
                    alert('An error occurred while loading assignment details.');
                });
        }

        function resetModalForm() {
            document.getElementById('assignForm').reset();
            document.getElementById('modalRoomSelection').style.display = 'none';
            document.querySelectorAll('#assignModal .room-checkbox').forEach(cb => {
                cb.checked = false;
                cb.disabled = false;
                const roomItem = cb.closest('.room-item');
                roomItem.classList.remove('disabled');
                roomItem.querySelector('.room-assigned-notice').style.display = 'none';
            });
            document.getElementById('modalRoomSearch').value = '';
            filterRooms();
            updateSelectedRoomCount();

            // Reset all radio button states
            const generalRadio = document.getElementById('modal_assign_general');
            const personalRadio = document.getElementById('modal_assign_personal');

            generalRadio.disabled = false;
            personalRadio.disabled = false;

            const generalLabel = generalRadio.nextElementSibling;
            const personalLabel = personalRadio.nextElementSibling;

            generalLabel.style.opacity = '1';
            generalLabel.style.cursor = 'pointer';
            generalLabel.title = '';
            personalLabel.style.opacity = '1';
            personalLabel.style.cursor = 'pointer';
            personalLabel.title = '';
        }

        function preSelectCurrentAssignment() {
            if (!currentAssignmentData) return;

            const statusDiv = document.getElementById('currentAssignmentStatusInModal');

            // Safely retrieve assigned_room_ids (now guaranteed to be an array from openAssignmentModal)
            const assignedRoomIds = currentAssignmentData.assigned_room_ids;

            let statusText = '<strong>Currently:</strong> Not assigned.';
            if (currentAssignmentData.current_assignment_type === 'general') {
                statusText = '<strong>Currently:</strong> Assigned to All Rooms (General).';
            } else if (currentAssignmentData.current_assignment_type === 'personal') {
                statusText =
                    `<strong>Currently:</strong> Assigned to ${assignedRoomIds.length} specific room(s).`;
            }
            statusDiv.innerHTML = statusText;

            const currentType = currentAssignmentData.current_assignment_type;
            const generalRadio = document.getElementById('modal_assign_general');
            const personalRadio = document.getElementById('modal_assign_personal');

            if (currentType === 'personal') {
                // Disable general assignment option
                generalRadio.disabled = true;
                const generalLabel = generalRadio.nextElementSibling;
                generalLabel.style.opacity = '0.5';
                generalLabel.style.cursor = 'not-allowed';
                generalLabel.title = 'Cannot change from Personal to All Rooms assignment. Remove assignment first.';

                // Automatically select personal if current is personal
                personalRadio.checked = true;
                handleAssignmentTypeChange();
            } else if (currentType === 'general') {
                // Disable personal assignment option if current type is "general"  
                personalRadio.disabled = true;
                const personalLabel = personalRadio.nextElementSibling;
                personalLabel.style.opacity = '0.5';
                personalLabel.style.cursor = 'not-allowed';
                personalLabel.title = 'Cannot change from All Rooms to Personal assignment. Remove assignment first.';

                // Automatically select general if current is general
                generalRadio.checked = true;
                handleAssignmentTypeChange();
            } else {
                // No current assignment - enable both options
                generalRadio.disabled = false;
                personalRadio.disabled = false;
                const generalLabel = generalRadio.nextElementSibling;
                const personalLabel = personalRadio.nextElementSibling;
                generalLabel.style.opacity = '1';
                generalLabel.style.cursor = 'pointer';
                generalLabel.title = '';
                personalLabel.style.opacity = '1';
                personalLabel.style.cursor = 'pointer';
                personalLabel.title = '';
            }

            // Pre-select current personal rooms
            if (currentType === 'personal' && assignedRoomIds.length > 0) {
                assignedRoomIds.forEach(roomId => {
                    const checkbox = document.getElementById(`modal_room_${roomId}`);
                    if (checkbox) checkbox.checked = true;
                });
                updateSelectedRoomCount();
            }

            // Call the updated function
            updateRoomAvailability();
        }

        function updateRoomAvailability() {
            // Data is guaranteed to exist and contain arrays due to fix in openAssignmentModal
            const externallyAssignedIds = currentAssignmentData.externally_assigned_room_ids;
            const currentAssignedIds = currentAssignmentData.assigned_room_ids;

            document.querySelectorAll('#assignModal .room-checkbox').forEach(checkbox => {
                const roomId = parseInt(checkbox.value, 10);
                const roomItem = checkbox.closest('.room-item');

                // Only disable rooms that are assigned to OTHER greetings
                // Do NOT disable rooms assigned to the current greeting (currentAssignedIds)
                if (externallyAssignedIds.includes(roomId) && !currentAssignedIds.includes(roomId)) {
                    checkbox.disabled = true;
                    checkbox.checked = false; // Force uncheck if disabled
                    roomItem.classList.add('disabled');
                    roomItem.querySelector('.room-assigned-notice').style.display = 'inline';
                } else {
                    checkbox.disabled = false;
                    roomItem.classList.remove('disabled');
                    roomItem.querySelector('.room-assigned-notice').style.display = 'none';
                }
            });

            // Update count after disabling
            updateSelectedRoomCount();
        }

        // Event listeners for modal
        document.querySelectorAll('#assignModal input[name="assignment_type"]').forEach(radio => {
            radio.addEventListener('change', handleAssignmentTypeChange);
        });
        document.querySelectorAll('#assignModal .room-checkbox').forEach(checkbox => {
            checkbox.addEventListener('change', updateSelectedRoomCount);
        });
        document.getElementById('modalRoomSearch').addEventListener('input', filterRooms);

        function handleAssignmentTypeChange() {
            const type = document.querySelector('#assignModal input[name="assignment_type"]:checked')?.value;
            document.getElementById('modalRoomSelection').style.display = (type === 'personal') ? 'block' : 'none';
        }

        function updateSelectedRoomCount() {
            document.getElementById('modalSelectedCount').textContent = document.querySelectorAll(
                '#assignModal .room-checkbox:checked').length;
        }

        function filterRooms() {
            const term = document.getElementById('modalRoomSearch').value.toLowerCase();
            document.querySelectorAll('#assignModal .room-item').forEach(item => {
                const name = item.querySelector('.room-checkbox').dataset.roomName || '';
                item.style.display = name.includes(term) ? '' : 'none';
            });
        }

        function saveAssignment() {
            const greetingId = document.getElementById('modalGreetingId').value;
            const type = document.querySelector('#assignModal input[name="assignment_type"]:checked')?.value;

            if (!type) {
                alert('Please select an assignment type.');
                return;
            }

            const room_ids = (type === 'personal') ?
                Array.from(document.querySelectorAll('#assignModal .room-checkbox:checked')).map(cb => cb.value) : [];

            if (type === 'personal' && room_ids.length === 0) {
                alert('Please select at least one room for personal assignment.');
                return;
            }

            const payload = {
                assignment_type: type,
                room_ids: room_ids,
                _token: '{{ csrf_token() }}'
            };

            const url = `{{ url('welcome_greetings') }}/${greetingId}/assign`;

            // Show loading state
            const saveBtn = document.getElementById('saveAssignmentBtn');
            const originalText = saveBtn.innerHTML;
            saveBtn.disabled = true;
            saveBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Processing...';

            fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(payload)
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        alert(data.message);
                        window.location.reload();
                    } else {
                        alert(data.message || 'An error occurred.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred while processing the request.');
                })
                .finally(() => {
                    // Reset button state
                    saveBtn.disabled = false;
                    saveBtn.innerHTML = originalText;
                });
        }

        function updateActiveStatus(id, isActive) {
            const checkbox = document.getElementById(`switcher_checkbox_${id}`);
            const switcher = checkbox.closest('.switcher');

            // Add visual loading indicator without disabling functionality
            switcher.classList.add('loading');

            fetch(`{{ url('welcome_greetings') }}/${id}/toggle-active`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        is_active: isActive
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const message = isActive ?
                            'Welcome Greeting activated successfully.' :
                            'Welcome Greeting deactivated successfully.';

                        updateTitleStatusText(id, isActive);

                        showTemporaryMessage(message, 'success');
                    } else {
                        // Revert checkbox on error
                        checkbox.checked = !isActive;
                        console.error('Failed to update status:', data.message);
                        alert(data.message || 'Failed to update status.');
                    }
                })
                .catch(error => {
                    console.error('Error updating status:', error);
                    // Revert checkbox on error
                    checkbox.checked = !isActive;
                    alert('An error occurred while updating the status. Please try again.');
                })
                .finally(() => {
                    // Always remove loading state and ensure checkbox is enabled
                    switcher.classList.remove('loading');
                    checkbox.disabled = false;
                });
        }

        // Helper function to show temporary messages in main content area
        function showTemporaryMessage(message, type = 'info') {
            // Find the panel body where existing session alerts are shown
            const panelBody = document.querySelector('.panel-body');

            // Remove any existing temporary message
            const existingTempMessage = document.getElementById('temp-alert-message');
            if (existingTempMessage) {
                existingTempMessage.remove();
            }

            // Create the alert element
            const messageElement = document.createElement('div');
            messageElement.id = 'temp-alert-message';
            messageElement.className = `alert alert-${type} alert-dismissible fade show`;
            messageElement.setAttribute('role', 'alert');
            messageElement.innerHTML = `
        ${message}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    `;

            // Insert the message at the beginning of panel-body (after existing session alerts)
            const firstChild = panelBody.firstChild;
            panelBody.insertBefore(messageElement, firstChild);

            // Auto-remove after 3 seconds
            setTimeout(() => {
                if (messageElement.parentNode) {
                    messageElement.remove();
                }
            }, 3000);
        }

        function updateTitleStatusText(greetingId, isActive) {
            // Find the row containing the greeting
            const row = document.querySelector(`#switcher_checkbox_${greetingId}`).closest('tr');
            if (!row) return;

            // Find the title column (assuming the structure remains consistent)
            const titleCell = row.querySelector('td:nth-child(2)');

            // Attempt to find or create the small status element
            let smallStatus = titleCell.querySelector('small.text-muted');

            if (isActive) {
                // Status is now Active: remove the (Inactive) tag
                if (smallStatus) {
                    smallStatus.remove();
                }
            } else {
                // Status is now Inactive: ensure the (Inactive) tag exists
                if (!smallStatus) {
                    // Create the element if it doesn't exist
                    smallStatus = document.createElement('small');
                    smallStatus.className = 'text-muted d-block';
                    titleCell.appendChild(smallStatus);
                }
                smallStatus.textContent = '(Inactive)';
            }
        }
    </script>
@endsection