@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">
                    <div class="alert alert-info mt-2 mb-3 small">
                        <strong>Greeting Status Guide:</strong>
                        <ul class="mb-0 ps-5">
                            <li>
                                <span class="badge bg-warning text-dark">Scheduled</span>  
                                The status will update automatically based on the configured schedule. Please refresh the page to view the most recent status.
                            </li>
                            <li>
                                <span class="badge bg-success">Active</span>  
                                The greeting cannot be manually switched on or off while it is in the “Active” period. It will automatically turn on when the schedule becomes active and automatically turn off once it reaches the expiration time.
                            </li>
                            <li>
                                <span class="badge bg-danger">Expired</span>  
                                The greeting has passed its scheduled end time and must be rescheduled before it can be activated again.
                            </li>
                            <li>
                                <span class="badge bg-primary">Never Expires</span>  
                                The greeting will remain active indefinitely.
                            </li>
                        </ul>
                    </div>

                    @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-welcome-greeting" class="table table-striped table-bordered table-td-valign-middle">
                            <thead>
                                <tr>
                                    <th width="5%">No</th>
                                    <th width="15%">Image</th>
                                    <th width="25%">Title</th>
                                    <th width="20%">Assignment Status</th>
                                    <th width="5%">Active</th>
                                    <th width="10%">Schedule</th>
                                    <th width="5%">Timezone</th>
                                    <th width="5%">Status</th>
                                    <th width="15%">File Info</th>
                                    <th width="15%">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($welcomeGreetings as $greeting)
                                    <tr>
                                        <td class="text-center">
                                            {{ $loop->iteration }}
                                        </td>
                                        <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>

                                        {{-- TITLE --}}
                                        <td>
                                            <strong>{{ $greeting->title }}</strong>
                                            @if (!$greeting->is_active && $greeting->schedule_status !== 'active')
                                                <small class="text-muted d-block">(Inactive)</small>
                                            @endif
                                        </td>

                                        {{-- ASSIGNMENT --}}
                                        <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>

                                        {{-- ACTIVE --}}
                                        <td>
                                            @php
                                                $shouldDisableSwitch =
                                                    $greeting->schedule_status === 'active' ||
                                                    $greeting->assignment_summary['general'] ||
                                                    $greeting->isExpired;
                                            @endphp
                                            <div class="switcher 
                                                {{ $shouldDisableSwitch ? 'switcher-disabled' : '' }}
                                            ">
                                                <input type="checkbox"
                                                    id="switcher_checkbox_{{ $greeting->id }}"
                                                    {{ ($greeting->is_active || $greeting->schedule_status === 'active') ? 'checked' : '' }}
                                                    {{ $shouldDisableSwitch ? 'disabled' : '' }}
                                                    onchange="updateActiveStatus({{ $greeting->id }}, this.checked)">
                                                <label for="switcher_checkbox_{{ $greeting->id }}"></label>
                                            </div>
                                        </td>

                                        {{-- 🆕 SCHEDULE --}}
                                        <td>
                                            @if ($greeting->start_date && $greeting->expired_date)
                                                <small>
                                                    <strong>From:</strong><br>
                                                    {{ $greeting->start_date->format('d M Y H:i') }}<br>
                                                    <strong>To:</strong><br>
                                                    {{ $greeting->expired_date->format('d M Y H:i') }}
                                                </small>
                                            @else
                                                <strong>-</strong>
                                            @endif
                                        </td>

                                        {{-- 🆕 TIMEZONE --}}
                                        <td>
                                            {{ $greeting->timezone->timezone ?? '-' }}
                                        </td>

                                        {{-- 🆕 EXPIRED --}}
                                        <td>
                                            @switch($greeting->schedule_status)
                                                @case('scheduled')
                                                    <span class="badge badge-warning">Scheduled</span>
                                                    @break

                                                @case('active')
                                                    <span class="badge badge-success">Active</span>
                                                    @break

                                                @case('expired')
                                                    <span class="badge badge-danger">Expired</span>
                                                    @break

                                                @default
                                                    <span class="badge badge-info">Never Expires</span>
                                            @endswitch
                                        </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>

                                        {{-- ACTIONS --}}
                                        <td>
                                            <div class="btn-group" role="group">
                                                <button class="btn btn-sm btn-custom greeting-assign-btn"
                                                    data-greeting-id="{{ $greeting->id }}"
                                                    title="Assign Rooms">
                                                    <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>
                                                <div class="btn-group" role="group">
                                                    {{-- tombol lain --}}

                                                    <button
                                                        id="delete_btn_{{ $greeting->id }}"
                                                        class="btn btn-sm btn-danger"
                                                        {{ $greeting->is_active ? 'disabled' : '' }}
                                                        title="{{ $greeting->is_active ? 'Deactivate this greeting before deleting' : 'Delete greeting' }}"
                                                        @unless($greeting->is_active)
                                                            onclick="confirmDelete({{ $greeting->id }})"
                                                        @endunless
                                                    >
                                                        <i class="fa {{ $greeting->is_active ? 'fa-lock' : 'fa-trash' }}"></i>
                                                    </button>

                                                    {{-- hidden delete form --}}
                                                    <form id="delete_form_{{ $greeting->id }}"
                                                        action="{{ route('welcome_greetings.destroy', $greeting->id) }}"
                                                        method="POST"
                                                        style="display:none;">
                                                        @csrf
                                                        @method('DELETE')
                                                    </form>
                                                </div>
                                            </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 id="personalScheduleNotice" class="alert alert-warning mt-2" style="display:none;">
                                    <i class="fa fa-exclamation-triangle"></i>
                                    Changing the assignment from <strong>Not Assigned</strong> to <strong>Personal</strong> will 
                                    automatically generate a schedule <strong>starting 1 hour</strong> from now and <strong> ending 24 hours </strong> later.
                                    <br>
                                    Any further adjustments to the schedule must be made from the 
                                    <strong>Edit Welcome Greeting</strong> page.
                                </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');
            }
            // ----------------------------------------------------------------------

            let table;

            if ($.fn.DataTable.isDataTable('#data-table-welcome-greeting')) {
                table = $('#data-table-welcome-greeting').DataTable();
            } else {
                table = $('#data-table-welcome-greeting').DataTable({
                    pageLength: 10,
                    lengthMenu: [10, 20, 50, 100, 200],
                });
            }

            // 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.addEventListener('click', function(e) {
                const btn = e.target.closest('.greeting-assign-btn');
                if (!btn) return;

                e.preventDefault();
                e.stopPropagation();

                const greetingId = btn.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 confirmDelete(id) {
            if (confirm('Are you sure you want to delete this greeting?')) {
                document.getElementById(`delete_form_${id}`).submit();
            }
        }

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

                // ensure notice state sync
                const notice = document.getElementById('personalScheduleNotice');
                if (currentType === 'personal') {
                    notice.style.display = 'block';
                } else {
                    notice.style.display = 'none';
                }
            } 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';
            
            const roomSelection = document.getElementById('modalRoomSelection');
            const notice = document.getElementById('personalScheduleNotice');

            if (type === 'personal') {
                roomSelection.style.display = 'block';
                if (notice) notice.style.display = 'block';
            } else {
                roomSelection.style.display = 'none';
                if (notice) notice.style.display = '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 updateDeleteButton(id, isActive) {
            const deleteBtn = document.getElementById(`delete_btn_${id}`);
            if (!deleteBtn) return;

            if (isActive) {
                // 🔒 aktif → disable delete
                deleteBtn.disabled = true;
                deleteBtn.title = 'Deactivate this greeting before deleting';
                deleteBtn.innerHTML = '<i class="fa fa-lock"></i>';
                deleteBtn.onclick = null;
            } else {
                // 🗑️ nonaktif → enable delete
                deleteBtn.disabled = false;
                deleteBtn.title = 'Delete greeting';
                deleteBtn.innerHTML = '<i class="fa fa-trash"></i>';
                deleteBtn.onclick = () => confirmDelete(id);
            }
        }

        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) {

                        updateTitleStatusText(id, isActive);
                        updateDeleteButton(id, isActive); // 🔥 TAMBAHAN PENTING

                        const message = isActive
                            ? 'Welcome Greeting activated successfully.'
                            : 'Welcome Greeting deactivated successfully.';

                        showTemporaryMessage(message, 'success');
                    } else {
                        checkbox.checked = !isActive;
                        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');
                });
        }

        // 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) {
            const checkbox = document.getElementById(`switcher_checkbox_${greetingId}`);
            if (!checkbox) return;

            const row = checkbox.closest('tr');
            if (!row) return;

            const titleCell = row.querySelector('td:nth-child(3)');
            if (!titleCell) return;

            let smallStatus = titleCell.querySelector('small.text-muted');

            if (isActive) {
                if (smallStatus) smallStatus.remove();
            } else {
                if (!smallStatus) {
                    smallStatus = document.createElement('small');
                    smallStatus.className = 'text-muted d-block';
                    titleCell.appendChild(smallStatus);
                }
                smallStatus.textContent = '(Inactive)';
            }
        }
    </script>
@endsection