@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="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Emergency</a></li>
                <li class="breadcrumb-item active">Emergency Messages</li>
            </ol>
            <h1 class="page-header">Emergency Messages</h1>

            {{-- Alert container for dynamic messages --}}
            <div id="alert-container"></div>

            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" id="session-success-alert">
                    <button type="button" class="close" data-dismiss="alert">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <i class="fa fa-check-circle"></i> {{ session('success') }}

                    <!-- Progress bar for visual countdown -->
                    <div class="alert-progress-bar" id="alert-progress"></div>
                </div>

                <script>
                    // Execute immediately, don't wait for DOMContentLoaded since it may have already fired
                    (function() {
                        const alertElement = document.getElementById('session-success-alert');
                        const progressBar = document.getElementById('alert-progress');

                        if (alertElement) {
                            const duration = 5000; // 5 seconds
                            const interval = 50; // Update every 50ms
                            let elapsed = 0;

                            // Update progress bar
                            const progressTimer = setInterval(() => {
                                elapsed += interval;
                                const progress = (elapsed / duration) * 100;
                                progressBar.style.width = progress + '%';

                                if (elapsed >= duration) {
                                    clearInterval(progressTimer);
                                }
                            }, interval);

                            // Auto-dismiss after duration
                            setTimeout(() => {
                                alertElement.classList.remove('show');
                                setTimeout(() => {
                                    if (alertElement.parentNode) {
                                        alertElement.remove();
                                    }
                                }, 150);
                            }, duration);

                            // Clear progress timer if manually dismissed
                            alertElement.addEventListener('closed.bs.alert', () => {
                                clearInterval(progressTimer);
                            });
                        }
                    })();
                </script>

                <style>
                    .alert-progress-bar {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        height: 3px;
                        background-color: rgba(255, 255, 255, 0.3);
                        transition: width 50ms linear;
                        border-radius: 0 0 3px 3px;
                    }

                    .alert-success {
                        position: relative;
                        overflow: hidden;
                    }
                </style>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show">
                    <button type="button" class="close" data-dismiss="alert">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <i class="fa fa-exclamation-triangle"></i>
                    @foreach ($errors->all() as $error)
                        {{ $error }}<br>
                    @endforeach
                </div>
            @endif

            {{-- Statistics Cards (will be updated via AJAX) --}}
            <div class="row mb-4" id="statistics-container">
                <div class="col-md-3">
                    <div class="card border-success">
                        <div class="card-body text-center">
                            <h5 class="card-title text-success">
                                <i class="fas fa-check-circle"></i> Active
                            </h5>
                            <h3 class="text-success" id="stat-active">{{ $statistics['active'] ?? 0 }}</h3>
                            <small class="text-muted">Active Messages</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border-secondary">
                        <div class="card-body text-center">
                            <h5 class="card-title text-secondary">
                                <i class="fas fa-pause-circle"></i> Inactive
                            </h5>
                            <h3 class="text-secondary" id="stat-inactive">{{ $statistics['inactive'] ?? 0 }}</h3>
                            <small class="text-muted">Inactive Messages</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border-warning">
                        <div class="card-body text-center">
                            <h5 class="card-title text-warning">
                                <i class="fas fa-clock"></i> Expiring
                            </h5>
                            <h3 class="text-warning" id="stat-expiring">{{ $statistics['expiring'] ?? 0 }}</h3>
                            <small class="text-muted">Auto-Expire Messages</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border-info">
                        <div class="card-body text-center">
                            <h5 class="card-title text-info">
                                <i class="fas fa-list"></i> Total
                            </h5>
                            <h3 class="text-info" id="stat-total">{{ $statistics['total'] ?? 0 }}</h3>
                            <small class="text-muted">All Messages</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="{{ route('emergency-messages.create') }}" class="btn btn-custom mr-2">
                            <i class="fas fa-exclamation-triangle"></i> New Emergency Message
                        </a>
                        @if (($statistics['expired'] ?? 0) > 0)
                            <button type="button" class="btn btn-warning mr-2" id="deactivate-expired-btn">
                                <i class="fa fa-clock"></i> Deactivate Expired (<span
                                    id="expired-count">{{ $statistics['expired'] ?? 0 }}</span>)
                            </button>
                        @endif
                        <button type="button" class="btn btn-danger mr-2" id="bulk-delete-btn">
                            <i class="fa fa-trash"></i> Delete Selected (<span id="selected-count">0</span>)
                        </button>
                        <button type="button" class="btn btn-secondary mr-2" id="clear-selection-btn"
                            style="display: none;">
                            <i class="fa fa-times"></i> Clear Selection
                        </button>
                    </div>
                </div>
                <div class="panel-body">
                    @if (isset($messages) && $messages->count() > 0)
                        <div class="alert alert-info">
                            <i class="fa fa-info-circle"></i>
                            Showing {{ $messages->count() }} of {{ $messages->total() }} emergency messages
                        </div>

                        <table id="data-table-default" class="table table-striped table-bordered table-td-valign-middle">
                            <thead>
                                <tr>
                                    <th width="30px">
                                        <input type="checkbox" id="select-all" class="select-all-checkbox">
                                    </th>
                                    <th>Subject</th>
                                    <th>Status</th>
                                    <th>Expiry</th>
                                    <th>Sent Date</th>
                                    <th>Activate</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($messages as $message)
                                    @php
                                        $isExpired = $message->hasExpired();
                                    @endphp
                                    <tr class="{{ $isExpired && $message->is_active ? 'table-warning' : '' }}"
                                        id="message-row-{{ $message->id }}">
                                        <td>
                                            <input type="checkbox" class="message-checkbox" value="{{ $message->id }}"
                                                data-message-id="{{ $message->id }}">
                                        </td>
                                        <td>
                                            <strong>{{ \Str::limit($message->subject, 40) }}</strong>
                                            @if ($message->is_active && !$isExpired)
                                                <i class="fas fa-exclamation-triangle text-warning ml-1 active-indicator"
                                                    title="Active Emergency"></i>
                                            @endif
                                            @if ($isExpired && $message->is_active)
                                                <i class="fas fa-clock text-danger ml-1 expired-indicator"
                                                    title="Expired"></i>
                                            @endif
                                        </td>
                                        <td class="status-cell">
                                            @if ($message->is_active)
                                                @if ($isExpired)
                                                    <span class="badge badge-danger status-badge">
                                                        <i class="fas fa-exclamation-circle"></i> Inactive (Expired)
                                                    </span>
                                                @else
                                                    <span class="badge badge-success status-badge">
                                                        <i class="fas fa-check-circle"></i> Active
                                                    </span>
                                                @endif
                                            @else
                                                <span class="badge badge-secondary status-badge">
                                                    <i class="fas fa-pause-circle"></i> Inactive
                                                </span>
                                            @endif
                                        </td>
                                        <td>
                                            @if ($message->expires)
                                                <span class="badge badge-warning">
                                                    <i class="fas fa-clock"></i> 24h
                                                </span>
                                                <br>
                                                <small class="text-muted">{{ $message->expiry_status }}</small>
                                            @else
                                                <span class="badge badge-info">
                                                    <i class="fas fa-infinity"></i> Never
                                                </span>
                                            @endif
                                        </td>
                                        <td class="sent-date-cell">
                                            <span class="sent-date"
                                                style="color: black !important;">{{ $message->sent_date ? $message->sent_date->format('M d, Y H:i') : 'N/A' }}</span>
                                            <br>
                                            <small
                                                class="text-muted sent-date-human">{{ $message->sent_date ? $message->sent_date->diffForHumans() : '' }}</small>
                                        </td>
                                        <td>
                                            @if ($isExpired)
                                                <div class="switcher switcher-disabled" id="switcher-{{ $message->id }}"
                                                    title="Cannot toggle expired message. Please reactivate from view page.">
                                                    <input type="checkbox" name="active_status"
                                                        id="switcher_checkbox_{{ $message->id }}"
                                                        {{ $message->is_active ? 'checked' : '' }} disabled>
                                                    <label for="switcher_checkbox_{{ $message->id }}"></label>
                                                </div>
                                            @else
                                                <div class="switcher" id="switcher-{{ $message->id }}">
                                                    <input type="checkbox" name="active_status"
                                                        id="switcher_checkbox_{{ $message->id }}"
                                                        {{ $message->is_active ? 'checked' : '' }}
                                                        onchange="updateEmergencyMessageStatus({{ $message->id }}, this.checked)">
                                                    <label for="switcher_checkbox_{{ $message->id }}"></label>
                                                </div>
                                            @endif
                                        </td>
                                        <td>
                                            <a href="{{ route('emergency-messages.show', $message->id) }}"
                                                class="btn btn-custom btn-sm">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                            <a href="{{ route('emergency-messages.edit', $message->id) }}"
                                                class="btn btn-custom btn-sm">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            <button type="button" class="btn btn-custom btn-sm delete-single-btn"
                                                data-message-id="{{ $message->id }}">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @else
                        <div class="alert alert-warning text-center">
                            <h4>No Emergency Messages Found</h4>
                            @if (request()->hasAny(['status', 'search', 'date_from', 'date_to', 'sender', 'subject', 'expiry_status']))
                                <p>No emergency messages match your current filter criteria.</p>
                                <a href="{{ route('emergency-messages.index') }}" class="btn btn-custom">Clear
                                    Filters</a>
                            @else
                                <p>You haven't created any emergency messages yet.</p>
                                <a href="{{ route('emergency-messages.create') }}" class="btn btn-custom">
                                    <i class="fas fa-plus"></i> Create First Emergency Message
                                </a>
                            @endif
                        </div>
                    @endif
                </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>

    {{-- MODALS --}}
    <div class="modal fade" id="bulk-delete-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Bulk Delete</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete <span id="modal-selected-count">0</span> selected emergency
                        message(s)?</p>
                    <p class="text-danger">This action cannot be undone.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirm-bulk-delete">
                        <i class="fa fa-trash"></i> Delete Selected
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="single-delete-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Delete</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this emergency message?</p>
                    <p class="text-danger">This action cannot be undone.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <form id="single-delete-form" method="POST" style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            <i class="fa fa-trash"></i> Delete Message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize after a short delay to ensure DataTables is ready
            setTimeout(initializeMessageSelection, 500);
            setupDeactivateExpiredButton();
        });

        /**
         * OPTIMIZED: Update emergency message status without page reload
         */
        function updateEmergencyMessageStatus(messageId, isActive) {
            const checkbox = document.getElementById(`switcher_checkbox_${messageId}`);
            const switcherContainer = document.getElementById(`switcher-${messageId}`);
            const messageRow = document.getElementById(`message-row-${messageId}`);

            if (!checkbox || !switcherContainer || !messageRow) {
                console.error('Required elements not found for message ID:', messageId);
                showAlert('System error: UI elements not found.', 'error');
                return;
            }

            // Disable checkbox and show loading
            checkbox.disabled = true;
            switcherContainer.classList.add('loading');

            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
                '{{ csrf_token() }}';

            fetch(`{{ url('emergency-messages') }}/${messageId}/toggle-status`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: JSON.stringify({
                        is_active: isActive
                    })
                })
                .then(async response => {
                    const data = await response.json();
                    if (!response.ok) {
                        throw new Error(data.message || `HTTP ${response.status}: ${response.statusText}`);
                    }
                    return data;
                })
                .then(data => {
                    if (data.success) {
                        // Update UI without page reload
                        updateMessageRowUI(messageId, data);
                        updateAllOtherSwitchers(messageId, isActive);
                        updateStatistics(data.statistics);
                        showAlert(data.message, 'success');
                    } else {
                        throw new Error(data.message || 'Server returned unsuccessful response');
                    }
                })
                .catch(error => {
                    console.error('Error updating status:', {
                        messageId: messageId,
                        error: error.message
                    });
                    checkbox.checked = !isActive; // Revert checkbox on error
                    showAlert(error.message || 'Failed to update status.', 'error');
                })
                .finally(() => {
                    checkbox.disabled = false;
                    switcherContainer.classList.remove('loading');
                });
        }

        /**
         * Update the message row UI after successful status change
         */
        function updateMessageRowUI(messageId, data) {
            const messageRow = document.getElementById(`message-row-${messageId}`);
            const statusCell = messageRow.querySelector('.status-cell .status-badge');
            const activeIndicator = messageRow.querySelector('.active-indicator');
            const sentDateCell = messageRow.querySelector('.sent-date-cell');

            // Update status badge
            if (data.is_active) {
                statusCell.className = 'badge badge-success status-badge';
                statusCell.innerHTML = '<i class="fas fa-check-circle"></i> Active';

                // Show active indicator if not present
                if (!activeIndicator) {
                    const subjectCell = messageRow.querySelector('td:nth-child(2) strong');
                    const indicator = document.createElement('i');
                    indicator.className = 'fas fa-exclamation-triangle text-warning ml-1 active-indicator';
                    indicator.title = 'Active Emergency';
                    subjectCell.parentNode.appendChild(indicator);
                }
            } else {
                statusCell.className = 'badge badge-secondary status-badge';
                statusCell.innerHTML = '<i class="fas fa-pause-circle"></i> Inactive';

                // Hide active indicator
                if (activeIndicator) {
                    activeIndicator.remove();
                }
            }

            // Update sent date if provided
            if (data.updated_at) {
                const sentDate = sentDateCell.querySelector('.sent-date');
                const sentDateHuman = sentDateCell.querySelector('.sent-date-human');
                if (sentDate && sentDateHuman) {
                    sentDate.textContent = data.updated_at;
                    sentDateHuman.textContent = data.updated_at_human;
                }
            }

            // Remove table warning class if deactivated
            if (!data.is_active) {
                messageRow.classList.remove('table-warning');
            }
        }

        /**
         * Update other switchers when one is activated (only one can be active)
         */
        function updateAllOtherSwitchers(activatedMessageId, isActive) {
            if (isActive) {
                // Find all other switcher checkboxes and uncheck them
                document.querySelectorAll('input[name="active_status"]').forEach(checkbox => {
                    if (checkbox.id !== `switcher_checkbox_${activatedMessageId}`) {
                        checkbox.checked = false;

                        // Update UI for deactivated messages
                        const messageId = checkbox.id.replace('switcher_checkbox_', '');
                        const messageRow = document.getElementById(`message-row-${messageId}`);
                        if (messageRow) {
                            const statusCell = messageRow.querySelector('.status-cell .status-badge');
                            const activeIndicator = messageRow.querySelector('.active-indicator');

                            if (statusCell) {
                                statusCell.className = 'badge badge-secondary status-badge';
                                statusCell.innerHTML = '<i class="fas fa-pause-circle"></i> Inactive';
                            }

                            if (activeIndicator) {
                                activeIndicator.remove();
                            }

                            messageRow.classList.remove('table-warning');
                        }
                    }
                });
            }
        }

        /**
         * Update statistics cards without page reload
         */
        function updateStatistics(statistics) {
            if (statistics) {
                document.getElementById('stat-active').textContent = statistics.active || 0;
                document.getElementById('stat-inactive').textContent = statistics.inactive || 0;
                document.getElementById('stat-expiring').textContent = statistics.expiring || 0;
                document.getElementById('stat-total').textContent = statistics.total || 0;

                // Update expired count button
                const expiredButton = document.getElementById('deactivate-expired-btn');
                const expiredCountSpan = document.getElementById('expired-count');
                if (expiredButton && expiredCountSpan) {
                    expiredCountSpan.textContent = statistics.expired || 0;
                    if (statistics.expired > 0) {
                        expiredButton.style.display = 'inline-block';
                    } else {
                        expiredButton.style.display = 'none';
                    }
                }
            }
        }

        /**
         * OPTIMIZED: Deactivate expired messages without page reload
         */
        function setupDeactivateExpiredButton() {
            const deactivateBtn = document.getElementById('deactivate-expired-btn');
            if (deactivateBtn) {
                deactivateBtn.addEventListener('click', function() {
                    if (!confirm('Are you sure you want to deactivate all expired emergency messages?')) {
                        return;
                    }

                    const originalText = this.innerHTML;
                    this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Processing...';
                    this.disabled = true;

                    fetch('{{ route('emergency-messages.deactivate-expired') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ||
                                    '{{ csrf_token() }}',
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // Update UI for deactivated messages without reload
                                updateExpiredMessagesUI();
                                updateStatistics(data.statistics);
                                showAlert(data.message, 'success');
                            } else {
                                showAlert(data.message || 'Failed to deactivate expired messages.', 'error');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            showAlert('Failed to deactivate expired messages. Please try again.', 'error');
                        })
                        .finally(() => {
                            this.innerHTML = originalText;
                            this.disabled = false;
                        });
                });
            }
        }

        /**
         * Update UI for expired messages that were deactivated
         */
        function updateExpiredMessagesUI() {
            document.querySelectorAll('.table-warning').forEach(row => {
                const checkbox = row.querySelector('input[name="active_status"]');
                const statusCell = row.querySelector('.status-cell .status-badge');
                const activeIndicator = row.querySelector('.active-indicator');

                if (checkbox && statusCell) {
                    checkbox.checked = false;
                    statusCell.className = 'badge badge-secondary status-badge';
                    statusCell.innerHTML = '<i class="fas fa-pause-circle"></i> Inactive';

                    if (activeIndicator) {
                        activeIndicator.remove();
                    }

                    row.classList.remove('table-warning');
                }
            });
        }

        function initializeMessageSelection() {
            // Get elements
            const selectAllCheckbox = document.getElementById('select-all');
            const bulkDeleteBtn = document.getElementById('bulk-delete-btn');
            const clearSelectionBtn = document.getElementById('clear-selection-btn');
            const selectedCountSpan = document.getElementById('selected-count');
            const modalSelectedCountSpan = document.getElementById('modal-selected-count');
            const confirmBulkDeleteBtn = document.getElementById('confirm-bulk-delete');

            // Function to get all message checkboxes (including those in DataTables)
            function getMessageCheckboxes() {
                return document.querySelectorAll('.message-checkbox');
            }

            // Function to get checked message checkboxes
            function getCheckedCheckboxes() {
                return document.querySelectorAll('.message-checkbox:checked');
            }

            // Update button visibility and count
            function updateBulkActions() {
                const checkedCount = getCheckedCheckboxes().length;
                const totalCount = getMessageCheckboxes().length;

                if (checkedCount > 0) {
                    bulkDeleteBtn.style.display = 'inline-block';
                    clearSelectionBtn.style.display = 'inline-block';
                    selectedCountSpan.textContent = checkedCount;
                } else {
                    bulkDeleteBtn.style.display = 'none';
                    clearSelectionBtn.style.display = 'none';
                }

                // Update select all state
                if (checkedCount === 0) {
                    selectAllCheckbox.indeterminate = false;
                    selectAllCheckbox.checked = false;
                } else if (checkedCount === totalCount) {
                    selectAllCheckbox.indeterminate = false;
                    selectAllCheckbox.checked = true;
                } else {
                    selectAllCheckbox.indeterminate = true;
                    selectAllCheckbox.checked = false;
                }
            }

            // Select all functionality
            if (selectAllCheckbox) {
                selectAllCheckbox.addEventListener('change', function() {
                    const checkboxes = getMessageCheckboxes();
                    checkboxes.forEach(function(checkbox) {
                        checkbox.checked = selectAllCheckbox.checked;
                    });
                    updateBulkActions();
                });
            }

            // Individual checkbox change (using event delegation)
            document.addEventListener('change', function(e) {
                if (e.target && e.target.classList.contains('message-checkbox')) {
                    updateBulkActions();
                }
            });

            // Clear selection button
            if (clearSelectionBtn) {
                clearSelectionBtn.addEventListener('click', function() {
                    const checkboxes = getMessageCheckboxes();
                    checkboxes.forEach(function(checkbox) {
                        checkbox.checked = false;
                    });
                    selectAllCheckbox.checked = false;
                    updateBulkActions();
                    showAlert('Selection cleared successfully', 'info');
                });
            }

            // Bulk delete button
            if (bulkDeleteBtn) {
                bulkDeleteBtn.addEventListener('click', function() {
                    const checkedCount = getCheckedCheckboxes().length;
                    if (checkedCount === 0) {
                        showAlert('Please select at least one emergency message to delete.', 'warning');
                        return;
                    }

                    modalSelectedCountSpan.textContent = checkedCount;

                    // Show modal (Bootstrap 3/4 compatible)
                    if (typeof $ !== 'undefined') {
                        $('#bulk-delete-modal').modal('show');
                    } else {
                        document.getElementById('bulk-delete-modal').style.display = 'block';
                    }
                });
            }

            // Confirm bulk delete
            if (confirmBulkDeleteBtn) {
                confirmBulkDeleteBtn.addEventListener('click', function() {
                    const checkedCheckboxes = getCheckedCheckboxes();
                    const selectedIds = Array.from(checkedCheckboxes).map(cb => cb.value);

                    if (selectedIds.length === 0) {
                        showAlert('No emergency messages selected.', 'warning');
                        return;
                    }

                    // Show loading state
                    const originalText = this.innerHTML;
                    this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Deleting...';
                    this.disabled = true;

                    // Delete messages one by one (can be optimized with bulk delete endpoint)
                    let deletedCount = 0;
                    const deletePromises = selectedIds.map(id => {
                        const formData = new FormData();
                        formData.append('_token', document.querySelector('meta[name="csrf-token"]')
                            ?.content || '{{ csrf_token() }}');
                        formData.append('_method', 'DELETE');

                        return fetch(`{{ route('emergency-messages.index') }}/${id}`, {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        }).then(response => {
                            if (response.ok) {
                                deletedCount++;
                                // Remove row from table
                                const row = document.getElementById(`message-row-${id}`);
                                if (row) {
                                    row.remove();
                                }
                            }
                            return response;
                        });
                    });

                    Promise.all(deletePromises)
                        .then(() => {
                            if (deletedCount > 0) {
                                showAlert(`${deletedCount} emergency message(s) deleted successfully.`,
                                    'success');
                                updateBulkActions();
                                // Optionally refresh statistics
                                setTimeout(() => window.location.reload(), 2000);
                            } else {
                                showAlert('Failed to delete emergency messages.', 'error');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            showAlert('Failed to delete emergency messages. Please try again.', 'error');
                        })
                        .finally(() => {
                            // Restore button state
                            confirmBulkDeleteBtn.innerHTML = originalText;
                            confirmBulkDeleteBtn.disabled = false;

                            // Hide modal
                            if (typeof $ !== 'undefined') {
                                $('#bulk-delete-modal').modal('hide');
                            } else {
                                document.getElementById('bulk-delete-modal').style.display = 'none';
                            }
                        });
                });
            }

            // Single delete buttons (using event delegation)
            document.addEventListener('click', function(e) {
                if (e.target && e.target.classList.contains('delete-single-btn')) {
                    const messageId = e.target.getAttribute('data-message-id');
                    const form = document.getElementById('single-delete-form');
                    if (form) {
                        form.action = '{{ route('emergency-messages.destroy', ':id') }}'.replace(':id', messageId);

                        // Show modal
                        if (typeof $ !== 'undefined') {
                            $('#single-delete-modal').modal('show');
                        } else {
                            document.getElementById('single-delete-modal').style.display = 'block';
                        }
                    }
                }
            });

            // Initialize the UI
            updateBulkActions();
        }

        /**
         * OPTIMIZED: Show alert function with auto-dismiss and better UX
         */
        function showAlert(message, type = 'info', duration = 5000) {
            const alertContainer = document.getElementById('alert-container');
            const alertClass = type === 'success' ? 'alert-success' :
                type === 'error' ? 'alert-danger' :
                type === 'warning' ? 'alert-warning' : 'alert-info';

            const iconClass = type === 'success' ? 'fa-check-circle' :
                type === 'error' ? 'fa-exclamation-circle' :
                type === 'warning' ? 'fa-exclamation-triangle' : 'fa-info-circle';

            const alert = document.createElement('div');
            alert.className = `alert ${alertClass} alert-dismissible fade show`;
            alert.innerHTML = `
                <i class="fa ${iconClass}"></i>
                ${message}
                <button type="button" class="close" onclick="this.parentElement.remove()">
                    <span>&times;</span>
                </button>
            `;

            // Remove existing alerts of the same type
            const existingAlerts = alertContainer.querySelectorAll(`.${alertClass}`);
            existingAlerts.forEach(alert => alert.remove());

            // Add new alert
            alertContainer.appendChild(alert);

            // Auto-hide after specified duration
            setTimeout(() => {
                if (alert.parentNode) {
                    alert.classList.remove('show');
                    setTimeout(() => alert.remove(), 300);
                }
            }, duration);
        }

        // Handle modal close buttons
        document.addEventListener('click', function(e) {
            if (e.target && e.target.hasAttribute('data-dismiss') && e.target.getAttribute('data-dismiss') ===
                'modal') {
                const modal = e.target.closest('.modal');
                if (modal) {
                    if (typeof $ !== 'undefined') {
                        $(modal).modal('hide');
                    } else {
                        modal.style.display = 'none';
                    }
                }
            }
        });

        // Enhanced form submission for filters (if any)
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('form[method="GET"]');
            if (form) {
                // Auto-submit on select changes
                const selects = form.querySelectorAll('select');
                selects.forEach(select => {
                    select.addEventListener('change', function() {
                        form.submit();
                    });
                });
            }
        });
    </script>

    <style>
        /* Optimized styles for better performance */
        .badge {
            font-size: 0.75em;
            padding: 0.25em 0.6em;
            border-radius: 3px;
        }

        .badge-success {
            background-color: #28a745;
            color: white;
        }

        .badge-secondary {
            background-color: #6c757d;
            color: white;
        }

        .badge-danger {
            background-color: #dc3545;
            color: white;
        }

        .mt-3 {
            margin-top: 1rem;
        }

        #select-all:indeterminate {
            opacity: 0.6;
        }

        /* Loading state for switcher */
        .switcher.loading {
            opacity: 0.5;
            pointer-events: none;
        }

        .switcher.loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 16px;
            height: 16px;
            margin: -8px 0 0 -8px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #333;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        /* Disabled state for expired message switcher */
        .switcher-disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

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

        .switcher-disabled label {
            cursor: not-allowed;
        }

        /* Smooth transitions */
        .status-badge,
        .active-indicator,
        .expired-indicator {
            transition: all 0.3s ease;
        }

        /* Alert improvements */
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
            transition: opacity 0.3s ease;
        }

        .alert-success {
            color: #3c763d;
            background-color: #dff0d8;
            border-color: #d6e9c6;
        }

        .alert-danger {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }

        .alert-warning {
            color: #8a6d3b;
            background-color: #fcf8e3;
            border-color: #faebcc;
        }

        .alert-info {
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .text-warning {
            color: #ffc107 !important;
        }

        .ml-1 {
            margin-left: 0.25rem;
        }

        /* Table improvements */
        .table td {
            color: #333;
            vertical-align: middle;
        }

        .table tbody tr td {
            color: #212529;
        }

        /* Responsive improvements */
        @media (max-width: 768px) {
            .panel-heading-btn {
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;
            }

            .panel-heading-btn .btn {
                margin: 0.25rem 0;
            }
        }
    </style>
@endsection