@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>
                    <button class="btn btn-sm btn-info ml-2"
                        data-toggle="modal"
                        data-target="#guideWelcomeGreeting"
                        title="User Guide">

                        <i class="fa fa-info-circle text-primary"></i>
                    </button>
                </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 is currently running and cannot be modified.  
                                You cannot edit the schedule, manage room assignments, or delete this greeting while it is active.  
                                <br>
                                To make changes, please <strong>Deactivate</strong> the greeting first.  
                                Once deactivated, the status will change to <strong>Expired</strong> and the end time will be set to the current time.  
                                After that, you can edit and update the greeting as needed.
                            </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->is_schedule_active ||
                                                    $greeting->is_schedule_expired ||
                                                    $greeting->is_general_assigned;
                                            @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 }}"
                                                    data-is-active="{{ $greeting->is_active ? 1 : 0 }}"
                                                    data-schedule-status="{{ $greeting->schedule_status }}"
                                                    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>

        <x-user-guide 
            id="guideWelcomeGreeting"
            title="User Guide - Welcome Greeting">

            <div class="guide-container">

                <div class="guide-section">
                    <h5 class="guide-title">
                        <i class="fa fa-info-circle text-info"></i>
                        Feature Description
                    </h5>

                    <p class="guide-text">
                        <strong>Welcome Greeting</strong> digunakan untuk menampilkan pesan atau gambar
                        sambutan pada TV kamar tamu hotel ketika tamu pertama kali masuk kamar.
                    </p>
                </div>


                <div class="guide-section">

                    <h5 class="guide-title">
                        <i class="fa fa-list-ol text-primary"></i>
                        How to Use
                    </h5>

                    <div class="guide-steps">

                        <div class="guide-step">
                            <div class="step-number">1</div>
                            <div class="step-text">
                                Klik <strong>Add New Greeting</strong>
                            </div>
                        </div>

                        <div class="guide-step">
                            <div class="step-number">2</div>
                            <div class="step-text">
                                Masukkan <strong>Title Greeting</strong>
                            </div>
                        </div>

                        <div class="guide-step">
                            <div class="step-number">3</div>
                            <div class="step-text">
                                Upload <strong>Welcome Image</strong>
                            </div>
                        </div>

                        <div class="guide-step">
                            <div class="step-number">4</div>
                            <div class="step-text">
                                Pilih <strong>Assignment Type</strong>
                            </div>
                        </div>

                        <div class="guide-step">
                            <div class="step-number">5</div>
                            <div class="step-text">
                                Jika memilih <strong>Personal</strong> → pilih kamar yang dituju
                            </div>
                        </div>

                        <div class="guide-step">
                            <div class="step-number">6</div>
                            <div class="step-text">
                                Atur <strong>Schedule</strong> jika diperlukan
                            </div>
                        </div>

                        <div class="guide-step">
                            <div class="step-number">7</div>
                            <div class="step-text">
                                Klik <strong>Create Greeting</strong>
                            </div>
                        </div>

                    </div>

                </div>


                <div class="guide-section">

                    <h5 class="guide-title">
                        <i class="fa fa-exclamation-circle text-warning"></i>
                        Important Notes
                    </h5>

                    <div class="guide-notes">

                        <div class="note-item">
                            <i class="fa fa-clock"></i>
                            Schedule tidak bisa diubah jika greeting sedang aktif
                        </div>

                        <div class="note-item">
                            <i class="fa fa-calendar"></i>
                            End Date harus lebih besar dari Start Date
                        </div>

                        <div class="note-item">
                            <i class="fa fa-clock"></i>
                            Greeting yang expired harus dijadwalkan ulang
                        </div>

                        <div class="note-item">
                            <i class="fa fa-globe"></i>
                            General greeting akan tampil di semua kamar
                        </div>

                    </div>

                </div>

            </div>

        </x-user-guide>

        <!-- BLOCK MODAL -->
        <div class="modal fade" id="blockedModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">

                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title">
                    <i class="fa fa-exclamation-triangle"></i> Cannot Be Activated
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                    </button>
                </div>

                <div class="modal-body" id="blockedModalText">
                    <!-- isi text dari JS -->
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    Close
                    </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;
        }

        /* USER GUIDE STYLE */
        .guide-container{
            padding:10px;
        }

        .guide-section{
            margin-bottom:25px;
        }

        .guide-title{
            font-weight:600;
            margin-bottom:10px;
        }

        .guide-text{
            color:#555;
        }

        /* STEP STYLE */

        .guide-steps{
            display:flex;
            flex-direction:column;
            gap:10px;
        }

        .guide-step{
            display:flex;
            align-items:center;
            background:#f8f9fa;
            padding:10px 12px;
            border-radius:6px;
        }

        .step-number{
            width:30px;
            height:30px;
            background:#007bff;
            color:white;
            font-weight:600;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            margin-right:10px;
        }

        /* NOTES */

        .guide-notes{
            display:flex;
            flex-direction:column;
            gap:8px;
        }

        .note-item{
            background:#fff3cd;
            padding:10px;
            border-radius:6px;
            font-size:14px;
        }

        .note-item i{
            margin-right:8px;
        }
    </style>

    <script>
        let currentAssignmentData = null;
        let currentRequestId = 0;
        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();

            const requestId = ++currentRequestId; // 🔥 increment
            
            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
                            // 🔥 TAMBAHAN
                            is_active: response.is_active
                        };
                        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();

            // 🔥 RESET GLOBAL DATA
            currentAssignmentData = null;

            // 🔥 RESET ALERT
            const statusDiv = document.getElementById('currentAssignmentStatusInModal');
            statusDiv.className = 'alert alert-info';
            statusDiv.innerHTML = '';

            // 🔥 ENABLE BUTTON LAGI
            document.getElementById('saveAssignmentBtn').disabled = false;

            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 = '';
            updateSelectedRoomCount();

            // reset radio
            const generalRadio = document.getElementById('modal_assign_general');
            const personalRadio = document.getElementById('modal_assign_personal');

            generalRadio.checked = false;
            personalRadio.checked = false;

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

        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 hasAssignment =
                currentAssignmentData.current_assignment_type === 'general' ||
                (currentAssignmentData.assigned_room_ids?.length > 0);

            const isLocked = currentAssignmentData.is_active && hasAssignment;

            if (isLocked) {
                document.querySelectorAll('#assignModal .room-checkbox').forEach(cb => {
                    cb.disabled = true;
                });

                document.getElementById('modal_assign_general').disabled = true;
                document.getElementById('modal_assign_personal').disabled = true;

                document.getElementById('saveAssignmentBtn').disabled = true;

                const statusDiv = document.getElementById('currentAssignmentStatusInModal');
                statusDiv.classList.remove('alert-info');
                statusDiv.classList.add('alert-danger');
                statusDiv.innerHTML = '<strong>Locked:</strong> Cannot modify assignment while greeting is active and already assigned.';
            }

            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) {
                showBlockedModal(
                    '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) {
                showBlockedModal(
                    '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 {
                        showBlockedModal(
                            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 showBlockedModal(message){
            document.getElementById('blockedModalText').innerHTML = message;
            $('#blockedModal').modal('show');
        }

        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;
                        showBlockedModal(data.message);
                    }
                })
                .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