@extends('layouts.app')

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

        <!-- begin #sidebar -->
        @include('partials.sidebar')
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Page Options</a></li>
                <li class="breadcrumb-item active">Message</li>
            </ol>
            <!-- end breadcrumb -->

            <!-- begin page-header -->
            <h1 class="page-header">Message</h1>
            <!-- end page-header -->

            <!-- begin filter panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" href="#filter-panel">
                            <i class="fa fa-filter"></i> Filters
                        </a>
                    </h4>
                </div>
                <div id="filter-panel"
                    class="panel panel-inverse {{ request()->anyFilled(['type', 'read_status', 'sent_status', 'room_id', 'group_id', 'sender', 'subject', 'date_from', 'date_to', 'search']) ? 'show' : '' }}">
                    <div class="panel-body">
                        <form method="GET" action="{{ route('messages.index') }}">
                            <div class="row">
                                <div class="col-md-3">
                                    <label>Search</label>
                                    <input type="text" class="form-control" name="search"
                                        value="{{ request('search') }}" placeholder="Search messages...">
                                </div>
                                <div class="col-md-2">
                                    <label>Type</label>
                                    <select class="form-control" name="type">
                                        <option value="all">All Types</option>
                                        <option value="broadcast" {{ request('type') == 'broadcast' ? 'selected' : '' }}>
                                            Broadcast</option>
                                        <option value="personal" {{ request('type') == 'personal' ? 'selected' : '' }}>
                                            Personal</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label>Read Status</label>
                                    <select class="form-control" name="read_status">
                                        <option value="all">All</option>
                                        <option value="read" {{ request('read_status') == 'read' ? 'selected' : '' }}>Read
                                        </option>
                                        <option value="unread" {{ request('read_status') == 'unread' ? 'selected' : '' }}>
                                            Unread</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label>Room</label>
                                    <select class="form-control" name="room_id">
                                        <option value="all">All Rooms</option>
                                        @if (isset($rooms))
                                            @foreach ($rooms as $room)
                                                <option value="{{ $room->id }}"
                                                    {{ request('room_id') == $room->id ? 'selected' : '' }}>
                                                    {{ $room->room }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="col-md-1">
                                    <label>&nbsp;</label>
                                    <button type="submit" class="btn btn-custom btn-block">Filter</button>
                                </div>
                            </div>

                            <div class="row mt-3">
                                {{-- <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="expiration_status">Expiration Status</label>
                                        <select class="form-control" name="expiration_status" id="expiration_status">
                                            <option value="">All Messages</option>
                                            <option value="active"
                                                {{ request('expiration_status') == 'active' ? 'selected' : '' }}>
                                                Active Messages
                                            </option>
                                            <option value="expired"
                                                {{ request('expiration_status') == 'expired' ? 'selected' : '' }}>
                                                Expired Messages
                                            </option>
                                            <option value="expiring_soon"
                                                {{ request('expiration_status') == 'expiring_soon' ? 'selected' : '' }}>
                                                Expiring Soon (24h)
                                            </option>
                                            <option value="permanent"
                                                {{ request('expiration_status') == 'permanent' ? 'selected' : '' }}>
                                                Permanent Messages
                                            </option>
                                        </select>
                                    </div>
                                </div> --}}
                                <div class="col-md-2">
                                    <label>Date From</label>
                                    <input type="date" class="form-control" name="date_from"
                                        value="{{ request('date_from') }}">
                                </div>
                                <div class="col-md-2">
                                    <label>Date To</label>
                                    <input type="date" class="form-control" name="date_to"
                                        value="{{ request('date_to') }}">
                                </div>
                                <div class="col-md-2">
                                    <label>Sender</label>
                                    <input type="text" class="form-control" name="sender"
                                        value="{{ request('sender') }}" placeholder="Filter by sender">
                                </div>
                                <div class="col-md-2">
                                    <label>Subject</label>
                                    <input type="text" class="form-control" name="subject"
                                        value="{{ request('subject') }}" placeholder="Filter by subject">
                                </div>
                                <div class="col-md-1">
                                    <label>&nbsp;</label>
                                    <a href="{{ route('messages.index') }}" class="btn btn-custom btn-block">Clear</a>
                                </div>
                                {{-- <div class="col-md-1">
                                    <label>&nbsp;</label>
                                    <a href="{{ route('messages.export', request()->query()) }}"
                                        class="btn btn-success btn-block">
                                        <i class="fa fa-download"></i> Export
                                    </a>
                                </div> --}}
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- end filter panel -->

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="{{ route('messages.create') }}" class="btn btn-custom mr-2">
                            <i class="fa fa-paper-plane"></i> New Message
                        </a>
                        <button type="button" class="btn btn-danger mr-2" id="bulk-delete-btn" style="display: none;">
                            <i class="fa fa-trash"></i> Delete Selected (<span id="selected-count">0</span>)
                        </button>
                        <button type="button" class="btn btn-secondary" id="clear-selection-btn" style="display: none;">
                            <i class="fa fa-times"></i> Clear Selection
                        </button>
                    </div>
                </div>
                <div class="panel-body">
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

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

                    @if (isset($messages) && $messages->count() > 0)
                        <div class="alert alert-info">
                            <i class="fa fa-info-circle"></i>
                            Showing {{ $messages->count() }} of {{ $messages->total() }} 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>Room</th>
                                    <th>Subject</th>
                                    <th width="30px">Sender</th>
                                    <th>Type</th>
                                    <th>Sent Status</th>
                                    <th>Read Status</th>
                                    <th>Sent Date</th>
                                    <th>Expiration Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($messages as $message)
                                    <tr>
                                        <td>
                                            <input type="checkbox" class="message-checkbox" value="{{ $message->id }}"
                                                data-message-id="{{ $message->id }}">
                                        </td>
                                        {{-- <td>{{ $message->room->room ?? 'No Room' }}</td> --}}
                                        <td>
                                            @if ($message->type === 'broadcast')
                                                <span class="badge badge-primary">All Rooms</span>
                                            @elseif($message->type === 'group' && $message->group)
                                                <span class="badge badge-warning">Group:
                                                    {{ $message->group->groups }}</span>
                                                <small class="text-muted d-block">{{ $message->room_count }} rooms</small>
                                            @elseif($message->type === 'personal')
                                                @if ($message->room_count === 1)
                                                    {{ $message->rooms->first()->room }}
                                                @else
                                                    <span class="badge badge-info">{{ $message->room_count }} rooms</span>
                                                    <small class="text-muted d-block" title="{{ $message->room_names }}">
                                                        {{ \Str::limit($message->room_names, 30) }}
                                                    </small>
                                                @endif
                                            @else
                                                <span class="text-muted">No room</span>
                                            @endif
                                        </td>
                                        <td>{{ \Str::limit($message->subject, 40) }}</td>
                                        <td>{{ $message->sender }}</td>
                                        <td>
                                            <span
                                                class="badge 
                                                @if ($message->type === 'broadcast') badge-primary
                                                @elseif($message->type === 'group') badge-warning
                                                @else badge-info @endif">
                                                {{ ucfirst($message->type) }}
                                            </span>
                                        </td>
                                        <td>
                                            <span
                                                class="badge {{ $message->sent_status ? 'badge-success' : 'badge-danger' }}">
                                                {{ $message->sent_status ? 'Sent' : 'Not Sent' }}
                                            </span>
                                        </td>
                                        <td>
                                            <span
                                                class="badge {{ $message->read_status ? 'badge-success' : 'badge-secondary' }}">
                                                {{ $message->read_status ? 'Read' : 'Unread' }}
                                            </span>
                                        </td>
                                        <td>{{ $message->sent_date ? $message->sent_date->format('M d, Y H:i') : 'N/A' }}
                                        </td>
                                        <td>
                                            @php
                                                $expirationStatus = $message->expiration_status;
                                            @endphp
                                            <span class="{{ $expirationStatus['badge_class'] }}"
                                                title="{{ $expirationStatus['tooltip'] }}" data-bs-toggle="tooltip">
                                                {{ $expirationStatus['display_text'] }}
                                            </span>

                                            @if ($expirationStatus['is_expired'])
                                                <i class="fas fa-exclamation-triangle text-warning ms-1"
                                                    title="This message is expired and not visible in hospitality apps"></i>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm" role="group">
                                                <a href="{{ route('messages.show', $message->id) }}"
                                                    class="btn btn-custom" title="View">
                                                    <i class="fa fa-eye"></i>
                                                </a>
                                                <button type="button" class="btn btn-custom btn-danger delete-single-btn"
                                                    data-message-id="{{ $message->id }}" title="Delete">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @else
                        <div class="alert alert-warning text-center">
                            <h4>No Messages Found</h4>
                            <p>No messages match your current filters.</p>
                        </div>
                    @endif
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

        <!-- begin scroll to top btn -->
        <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>
        <!-- end scroll to top btn -->
    </div>

    <!-- Bulk Delete Modal -->
    <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">
                        <i class="fa fa-exclamation-triangle text-warning"></i>
                        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 <strong><span id="modal-selected-count">0</span></strong> selected
                        message(s)?</p>
                    <div class="alert alert-warning">
                        <i class="fa fa-warning"></i>
                        <strong>Warning:</strong> This action cannot be undone.
                    </div>
                </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 Messages
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Single Delete Modal -->
    <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">
                        <i class="fa fa-exclamation-triangle text-warning"></i>
                        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 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>
        // Wait for DataTables to be fully loaded
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize after a short delay to ensure DataTables is ready
            setTimeout(initializeMessageSelection, 500);
        });

        function initializeMessageSelection() {
            console.log('Initializing message selection...');

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

                console.log(`Checked: ${checkedCount}, Total: ${totalCount}`);

                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() {
                    console.log('Select all clicked:', this.checked);
                    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')) {
                    console.log('Individual checkbox changed:', e.target.value, e.target.checked);
                    updateBulkActions();
                }
            });

            // Clear selection button
            if (clearSelectionBtn) {
                clearSelectionBtn.addEventListener('click', function() {
                    console.log('Clear selection clicked');
                    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 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 messages selected.', 'warning');
                        return;
                    }

                    console.log('Deleting messages:', selectedIds);

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

                    // Prepare form data
                    const formData = new FormData();
                    formData.append('_token', document.querySelector('meta[name="csrf-token"]')?.content ||
                        '{{ csrf_token() }}');
                    formData.append('_method', 'DELETE');
                    selectedIds.forEach(id => formData.append('message_ids[]', id));

                    // Send request
                    fetch('{{ route('messages.bulk-destroy') }}', {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                showAlert(data.message, 'success');
                                setTimeout(() => window.location.reload(), 1500);
                            } else {
                                showAlert('Failed to delete messages: ' + (data.message || 'Unknown error'),
                                    'error');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            showAlert('Failed to delete 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('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();

            console.log('Message selection initialized successfully');
        }

        // Show alert function
        function showAlert(message, type = 'info') {
            const alertClass = type === 'success' ? 'alert-success' :
                type === 'error' ? 'alert-danger' :
                type === 'warning' ? 'alert-warning' : 'alert-info';

            const alert = document.createElement('div');
            alert.className = `alert ${alertClass} alert-dismissible fade show`;
            alert.innerHTML = `
        <i class="fa fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : type === 'warning' ? 'exclamation-triangle' : 'info-circle'}"></i>
        ${message}
        <button type="button" class="close" onclick="this.parentElement.remove()">
            <span>&times;</span>
        </button>
    `;

            // Remove existing alerts
            const existingAlerts = document.querySelectorAll('.alert:not(.alert-info)');
            existingAlerts.forEach(alert => alert.remove());

            // Add new alert
            const content = document.getElementById('content');
            content.insertBefore(alert, content.firstChild);

            // Auto-hide after 5 seconds
            setTimeout(() => {
                if (alert.parentNode) {
                    alert.remove();
                }
            }, 5000);
        }

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

        // Keyboard shortcuts
        document.addEventListener('keydown', function(e) {
            // Ctrl+A to select all
            if (e.ctrlKey && e.key === 'a' && !['INPUT', 'TEXTAREA'].includes(e.target.tagName)) {
                e.preventDefault();
                const selectAll = document.getElementById('select-all');
                if (selectAll) {
                    selectAll.checked = true;
                    selectAll.dispatchEvent(new Event('change'));
                }
            }

            // Escape to clear selection
            if (e.key === 'Escape') {
                const clearBtn = document.getElementById('clear-selection-btn');
                if (clearBtn && clearBtn.style.display !== 'none') {
                    clearBtn.click();
                }
            }
        });
    </script>

    <style>
        .badge {
            font-size: 0.75em;
            padding: 0.25em 0.6em;
            border-radius: 3px;
        }

        .badge-primary {
            background-color: #007bff;
            color: white;
        }

        .badge-warning {
            background-color: #ffc107;
            color: #212529;
        }

        .badge-info {
            background-color: #17a2b8;
            color: white;
        }

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

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

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

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

        /* Inline Action Buttons Styling */
        .btn-group-sm .btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
            border-radius: 0.2rem;
        }

        .btn-group .btn:not(:last-child) {
            margin-right: 2px;
        }

        .btn-group .btn:hover {
            z-index: 1;
        }

        /* Ensure consistent button sizing */
        .btn-group-sm .btn i {
            font-size: 12px;
        }

        /* Optional: Add some spacing between button groups in table */
        td .btn-group {
            white-space: nowrap;
        }

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

        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .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;
        }

        .fa-spinner {
            animation: spin 1s linear infinite;
        }

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

            to {
                transform: rotate(360deg);
            }
        }
    </style>
@endsection