@extends('layouts.app')

@section('title', 'Chat - Admin Panel')

@push('styles')
<style>
.chat-container {
    height: calc(100vh - 200px);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.conversation-list {
    border-right: 1px solid #dee2e6;
    height: 100%;
    overflow-y: auto;
}

.conversation-item {
    padding: 12px 15px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background-color 0.2s;
}

.conversation-item:hover {
    background-color: #f8f9fa;
}

.conversation-item.active {
    background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
}

.conversation-item .unread-badge {
    width: 20px;
    height: 20px;
    background: #f44336;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.message-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.messages-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f5f5f5;
}

.message-bubble {
    max-width: 70%;
    margin-bottom: 10px;
    padding: 10px 15px;
    border-radius: 15px;
    position: relative;
}

.message-bubble.sent {
    background: #dcf8c6;
    margin-left: auto;
    border-bottom-right-radius: 5px;
}

.message-bubble.received {
    background: white;
    margin-right: auto;
    border-bottom-left-radius: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.message-time {
    font-size: 11px;
    color: #999;
    margin-top: 5px;
}

.message-input-container {
    border-top: 1px solid #dee2e6;
    padding: 15px;
    background: white;
}

.typing-indicator {
    font-size: 12px;
    color: #666;
    padding: 5px 10px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(45deg, #2196f3, #21cbf3);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

.online-dot {
    width: 10px;
    height: 10px;
    background: #4caf50;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 2px solid white;
}

.attachment-preview {
    max-width: 200px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 5px;
    margin-top: 5px;
}

.filter-section {
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
}

.filter-section select {
    font-size: 14px;
}

.conversation-header {
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
    background: white;
}

.conversation-header h5 {
    margin: 0;
}

.conversation-info {
    font-size: 12px;
    color: #666;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.search-box {
    position: relative;
}

.search-box input {
    padding-left: 35px;
}

.search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
}

.message-actions {
    position: absolute;
    top: -25px;
    right: 0;
    background: white;
    border-radius: 15px;
    padding: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: none;
}

.message-bubble:hover .message-actions {
    display: flex;
}

.message-action-btn {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
}

.message-action-btn:hover {
    background: #f5f5f5;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Responsive */
@media (max-width: 768px) {
    .chat-container {
        height: calc(100vh - 150px);
    }

    .message-bubble {
        max-width: 85%;
    }
}
</style>
@endpush

@section('content')
<div class="container-fluid py-3">
    <div class="row mb-3">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h3 class="mb-0">
                    <i class="fas fa-comments me-2 text-primary"></i>Chat System
                    <small class="text-muted fs-6">(Admin/LMS Manager Panel)</small>
                </h3>
                <div class="d-flex align-items-center gap-2">
                    <div class="input-group input-group-sm" style="width: 250px;">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input type="text" class="form-control" id="globalSearch" placeholder="Search conversations...">
                    </div>
                    <div id="onlineStatus" class="badge bg-success">
                        <i class="fas fa-circle me-1"></i>Online
                    </div>
                </div>
            </div>
            <hr class="mt-2 mb-3">
        </div>
    </div>

    <div class="row g-3">
        <!-- Left Column: Filters and Conversations -->
        <div class="col-md-4 col-lg-3">
            <!-- New Chat Card -->
            <div class="card mb-3">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0"><i class="fas fa-plus-circle me-2"></i>Start New Chat</h6>
                </div>
                <div class="card-body">
                    <div class="filter-section">
                        <div class="mb-3">
                            <label class="form-label small fw-bold">Chat With:</label>
                            <select class="form-select form-select-sm" id="targetType">
                                <option value="">-- Select Type --</option>
                                <option value="specific_student">Specific Student</option>
                                <option value="all_students">All Students</option>
                                <option value="specific_teacher">Specific Teacher</option>
                                <option value="all_teachers">All Teachers</option>
                                <option value="batch">Batch Students</option>
                                <option value="individual">Individual User</option>
                            </select>
                        </div>

                        <!-- Conditional Fields -->
                        <div id="conditionalFields">
                            <!-- Batch Field -->
                            <div class="mb-3" id="batchField" style="display: none;">
                                <label class="form-label small fw-bold">Select Batch:</label>
                                <select class="form-select form-select-sm" id="batchSelect">
                                    <option value="">-- Select Batch --</option>
                                    @foreach($batches as $batch)
                                    <option value="{{ $batch->id }}">{{ $batch->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Student Field -->
                            <div class="mb-3" id="studentField" style="display: none;">
                                <label class="form-label small fw-bold">Select Student:</label>
                                <select class="form-select form-select-sm" id="studentSelect">
                                    <option value="">-- Select Student --</option>
                                </select>
                            </div>

                            <!-- Teacher Field -->
                            <div class="mb-3" id="teacherField" style="display: none;">
                                <label class="form-label small fw-bold">Select Teacher:</label>
                                <select class="form-select form-select-sm" id="teacherSelect">
                                    <option value="">-- Select Teacher --</option>
                                    @foreach($teachers as $teacher)
                                    <option value="{{ $teacher->id }}">{{ $teacher->username }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Individual User Field -->
                            <div class="mb-3" id="individualField" style="display: none;">
                                <label class="form-label small fw-bold">Select User:</label>
                                <select class="form-select form-select-sm" id="userSelect">
                                    <option value="">-- Select User --</option>
                                    @foreach($all_users as $user)
                                    <option value="{{ $user->id }}">
                                        {{ $user->username }} ({{ ucfirst($user->user_type) }})
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Title Field -->
                            <div class="mb-3" id="titleField" style="display: none;">
                                <label class="form-label small fw-bold">Conversation Title:</label>
                                <input type="text" class="form-control form-control-sm" id="conversationTitle" placeholder="Optional">
                            </div>
                        </div>

                        <button class="btn btn-primary btn-sm w-100" id="startNewChatBtn">
                            <i class="fas fa-paper-plane me-1"></i> Start Chat
                        </button>
                    </div>
                </div>
            </div>

            <!-- Conversations List Card -->
            <div class="card">
                <div class="card-header bg-secondary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0"><i class="fas fa-comments me-2"></i>Conversations</h6>
                        <span class="badge bg-light text-dark" id="totalConversations">0</span>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="conversation-list" id="conversationsList">
                        <!-- Conversations will be loaded via AJAX -->
                        <div class="empty-state">
                            <i class="fas fa-comment-dots"></i>
                            <p>No conversations yet</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column: Chat Area -->
        <div class="col-md-8 col-lg-9">
            <div class="card chat-container">
                @if($conversation)
                <!-- Chat Header -->
                <div class="card-header conversation-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center gap-3">
                            <div class="position-relative">
                                <div class="user-avatar" id="conversationAvatar">
                                    {{ substr($conversation->title ?? 'C', 0, 1) }}
                                </div>
                                <span class="online-dot" id="onlineStatusDot" style="display: none;"></span>
                            </div>
                            <div>
                                <h5 class="mb-1" id="conversationName">{{ $conversation->title ?? 'Chat' }}</h5>
                                <div class="conversation-info" id="conversationInfo">
                                    @if($conversation->conversation_type === 'batch')
                                    <span class="badge bg-info me-2">Batch</span>
                                    @elseif($conversation->conversation_type === 'direct')
                                    <span class="badge bg-success me-2">Direct</span>
                                    @endif
                                    <span id="participantCount">2 participants</span>
                                </div>
                            </div>
                        </div>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
                                    data-bs-toggle="dropdown">
                                <i class="fas fa-ellipsis-v"></i>
                            </button>
                            <ul class="dropdown-menu">
                                <li>
                                    <a class="dropdown-item" href="#" id="conversationInfoBtn">
                                        <i class="fas fa-info-circle me-2"></i>Info
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#" id="muteConversationBtn">
                                        <i class="fas fa-bell-slash me-2"></i>Mute
                                    </a>
                                </li>
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <a class="dropdown-item text-danger" href="#" id="deleteConversationBtn">
                                        <i class="fas fa-trash me-2"></i>Delete
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Messages Area -->
                <div class="flex-grow-1 messages-area" id="messagesArea">
                    <!-- Messages will be loaded via AJAX -->
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading messages...</span>
                        </div>
                    </div>
                </div>

                <!-- Typing Indicator -->
                <div class="typing-indicator" id="typingIndicator" style="display: none;">
                    <i class="fas fa-ellipsis-h me-2"></i>
                    <span id="typingUser">Someone</span> is typing...
                </div>

                <!-- Message Input -->
                <div class="message-input-container">
                    <form id="messageForm">
                        <!-- Attachment Preview -->
                        <div class="mb-2" id="attachmentPreview" style="display: none;">
                            <div class="attachment-preview d-flex justify-content-between align-items-center">
                                <div>
                                    <i class="fas fa-paperclip me-2"></i>
                                    <span id="fileName" class="small"></span>
                                </div>
                                <button type="button" class="btn-close" id="removeAttachment"></button>
                            </div>
                        </div>

                        <div class="d-flex gap-2">
                            <!-- Attachment Button -->
                            <div class="btn-group">
                                <button type="button" class="btn btn-outline-secondary" id="attachmentBtn">
                                    <i class="fas fa-paperclip"></i>
                                </button>
                                <input type="file" id="fileInput" style="display: none;" accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.txt">
                            </div>

                            <!-- Message Input -->
                            <div class="flex-grow-1">
                                <textarea class="form-control" id="messageInput"
                                          placeholder="Type your message..."
                                          rows="1" style="resize: none;"></textarea>
                            </div>

                            <!-- Send Button -->
                            <button type="submit" class="btn btn-primary" id="sendMessageBtn">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </form>
                </div>

                @else
                <!-- Welcome Screen (No conversation selected) -->
                <div class="card-body d-flex flex-column justify-content-center align-items-center h-100">
                    <div class="empty-state">
                        <i class="fas fa-comments fa-4x mb-4 text-primary"></i>
                        <h4 class="mb-3">Welcome to Chat</h4>
                        <p class="text-muted mb-4">Select a conversation or start a new chat</p>

                        <div class="row g-2">
                            <div class="col-md-6">
                                <div class="card text-center h-100">
                                    <div class="card-body">
                                        <i class="fas fa-user-graduate fa-2x mb-3 text-success"></i>
                                        <h6>Chat with Student</h6>
                                        <p class="small text-muted">Start a conversation with a specific student</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card text-center h-100">
                                    <div class="card-body">
                                        <i class="fas fa-chalkboard-teacher fa-2x mb-3 text-info"></i>
                                        <h6>Chat with Teacher</h6>
                                        <p class="small text-muted">Connect with teachers</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4">
                            <h6 class="text-muted mb-3">Quick Stats</h6>
                            <div class="row text-center">
                                <div class="col-4">
                                    <div class="stat-item">
                                        <h4 class="mb-0" id="onlineCount">0</h4>
                                        <small class="text-muted">Online</small>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="stat-item">
                                        <h4 class="mb-0" id="unreadCount">0</h4>
                                        <small class="text-muted">Unread</small>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="stat-item">
                                        <h4 class="mb-0" id="totalUsers">{{ $all_users->count() ?? 0 }}</h4>
                                        <small class="text-muted">Users</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Modals -->
<!-- Conversation Info Modal -->
<div class="modal fade" id="infoModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Conversation Info</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="infoModalContent">
                <!-- Content loaded via AJAX -->
            </div>
        </div>
    </div>
</div>

<!-- Edit Message Modal -->
<div class="modal fade" id="editMessageModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Message</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editMessageForm">
                    <input type="hidden" id="editMessageId">
                    <div class="mb-3">
                        <label class="form-label">Message:</label>
                        <textarea class="form-control" id="editMessageText" rows="4" required></textarea>
                    </div>
                    <div class="alert alert-info">
                        <i class="fas fa-clock me-2"></i>
                        Messages can only be edited within 15 minutes of sending.
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveEditBtn">Save Changes</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let currentConversationId = {{ $conversation->id ?? 'null' }};
    let userId = {{ auth()->id() }};
    let pusher = null;
    let isTyping = false;
    let typingTimeout = null;
    let lastMessageId = 0;

    // Initialize Pusher
    function initPusher() {
        if (typeof Pusher !== 'undefined') {
            pusher = new Pusher('{{ env('PUSHER_APP_KEY') }}', {
                cluster: '{{ env('PUSHER_APP_CLUSTER') }}',
                encrypted: true,
                authEndpoint: '/broadcasting/auth',
                auth: {
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                }
            });
        }
    }

    // Load conversations
    function loadConversations() {
        $.ajax({
            url: '/api/chat/conversations',
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    renderConversations(response.conversations);
                    updateConversationStats(response.conversations);
                }
            }
        });
    }

    // Render conversations list
    function renderConversations(conversations) {
        const container = $('#conversationsList');
        container.empty();

        if (!conversations || conversations.length === 0) {
            container.html(`
                <div class="empty-state">
                    <i class="fas fa-comment-dots"></i>
                    <p>No conversations yet</p>
                </div>
            `);
            return;
        }

        $('#totalConversations').text(conversations.length);

        conversations.forEach(conv => {
            const unreadBadge = conv.unread_count > 0
                ? `<span class="unread-badge">${conv.unread_count}</span>`
                : '';

            const lastMessage = conv.last_message
                ? `<small class="text-muted d-block text-truncate">${conv.last_message.message}</small>`
                : `<small class="text-muted d-block">No messages yet</small>`;

            const timeAgo = getTimeAgo(conv.updated_at);

            const conversationItem = `
                <div class="conversation-item ${currentConversationId === conv.id ? 'active' : ''}"
                     data-conversation-id="${conv.id}"
                     data-conversation-type="${conv.conversation_type}"
                     data-conversation-title="${conv.title}">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0">${conv.title}</h6>
                        ${unreadBadge}
                    </div>
                    ${lastMessage}
                    <div class="d-flex justify-content-between align-items-center mt-2">
                        <small class="text-muted">
                            ${conv.conversation_type === 'batch' ? '<i class="fas fa-users me-1"></i>' : ''}
                            ${conv.conversation_type === 'direct' ? '<i class="fas fa-user me-1"></i>' : ''}
                        </small>
                        <small class="text-muted">${timeAgo}</small>
                    </div>
                </div>
            `;

            container.append(conversationItem);
        });

        // Add click handlers
        $('.conversation-item').click(function() {
            const conversationId = $(this).data('conversation-id');
            const title = $(this).data('conversation-title');
            switchToConversation(conversationId, title);
        });
    }

    // Switch to conversation
    function switchToConversation(conversationId, title) {
        currentConversationId = conversationId;

        // Update URL
        window.history.pushState({}, '', `/chat?conversation=${conversationId}`);

        // Update UI
        $('.conversation-item').removeClass('active');
        $(`.conversation-item[data-conversation-id="${conversationId}"]`).addClass('active');

        // Load conversation
        loadConversation(conversationId, title);
    }

    // Load conversation details
    function loadConversation(conversationId, title) {
        $('#conversationName').text(title);
        $('#conversationAvatar').text(title.charAt(0).toUpperCase());

        // Load messages
        loadMessages(conversationId);

        // Load conversation info
        loadConversationInfo(conversationId);

        // Mark as read
        markConversationAsRead(conversationId);

        // Subscribe to real-time updates
        subscribeToConversation(conversationId);
    }

    // Load messages
    function loadMessages(conversationId) {
        $.ajax({
            url: `/api/chat/conversations/${conversationId}/messages`,
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    renderMessages(response.messages);
                    if (response.messages.length > 0) {
                        lastMessageId = response.messages[response.messages.length - 1].id;
                    }
                }
            }
        });
    }

    // Render messages
    function renderMessages(messages) {
        const container = $('#messagesArea');
        container.empty();

        if (!messages || messages.length === 0) {
            container.html(`
                <div class="empty-state">
                    <i class="fas fa-comment-slash"></i>
                    <p>No messages yet</p>
                    <small class="text-muted">Start the conversation!</small>
                </div>
            `);
            return;
        }

        let lastSenderId = null;
        let lastDate = null;

        messages.forEach(msg => {
            // Check if date changed
            const msgDate = new Date(msg.created_at).toLocaleDateString();
            if (msgDate !== lastDate) {
                container.append(`
                    <div class="text-center my-3">
                        <span class="badge bg-secondary">${msgDate}</span>
                    </div>
                `);
                lastDate = msgDate;
            }

            const isOwn = msg.sender.id === userId;
            const showSender = !isOwn && msg.sender.id !== lastSenderId;
            lastSenderId = msg.sender.id;

            const messageHtml = createMessageHtml(msg, isOwn, showSender);
            container.append(messageHtml);
        });

        scrollToBottom();
    }

    // Create message HTML
    function createMessageHtml(msg, isOwn, showSender) {
        const editedBadge = msg.is_edited ? '<small class="text-muted ms-2">(edited)</small>' : '';

        const senderInfo = showSender
            ? `<div class="small fw-bold mb-1">${msg.sender.username}</div>`
            : '';

        const messageActions = isOwn
            ? `<div class="message-actions">
                  <button class="message-action-btn edit-message"
                          data-message-id="${msg.id}"
                          data-message-text="${msg.message}">
                      <i class="fas fa-edit"></i>
                  </button>
                  <button class="message-action-btn delete-message"
                          data-message-id="${msg.id}">
                      <i class="fas fa-trash"></i>
                  </button>
               </div>`
            : '';

        return `
            <div class="d-flex ${isOwn ? 'justify-content-end' : 'justify-content-start'}">
                <div class="message-bubble ${isOwn ? 'sent' : 'received'}"
                     data-message-id="${msg.id}">
                    ${senderInfo}
                    <div class="message-text">${msg.message}</div>
                    ${messageActions}
                    <div class="message-time">
                        ${new Date(msg.created_at).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
                        ${editedBadge}
                    </div>
                </div>
            </div>
        `;
    }

    // Send message
    $('#messageForm').submit(function(e) {
        e.preventDefault();
        sendMessage();
    });

    function sendMessage() {
        const message = $('#messageInput').val().trim();
        if (!message) return;

        const formData = new FormData();
        formData.append('message', message);
        formData.append('_token', '{{ csrf_token() }}');

        // Add file if attached
        const fileInput = $('#fileInput')[0];
        if (fileInput.files.length > 0) {
            formData.append('attachment', fileInput.files[0]);
            formData.append('attachment_type', 'file');
        }

        $.ajax({
            url: `/api/chat/conversations/${currentConversationId}/messages`,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    $('#messageInput').val('');
                    clearAttachment();
                }
            }
        });
    }

    // Typing indicator
    $('#messageInput').on('input', function() {
        if (!isTyping) {
            isTyping = true;
            // Send typing started event
            sendTypingEvent(true);
        }

        clearTimeout(typingTimeout);
        typingTimeout = setTimeout(() => {
            isTyping = false;
            // Send typing stopped event
            sendTypingEvent(false);
        }, 1000);
    });

    function sendTypingEvent(isTyping) {
        if (pusher && currentConversationId) {
            const channel = pusher.channel(`private-chat.${currentConversationId}`);
            if (channel) {
                channel.trigger('client-typing', {
                    user_id: userId,
                    is_typing: isTyping,
                    user_name: '{{ auth()->user()->username }}'
                });
            }
        }
    }

    // Attachment handling
    $('#attachmentBtn').click(function() {
        $('#fileInput').click();
    });

    $('#fileInput').change(function() {
        const file = this.files[0];
        if (file) {
            $('#fileName').text(file.name);
            $('#attachmentPreview').show();
        }
    });

    $('#removeAttachment').click(function() {
        $('#fileInput').val('');
        $('#attachmentPreview').hide();
        $('#fileName').text('');
    });

    function clearAttachment() {
        $('#fileInput').val('');
        $('#attachmentPreview').hide();
        $('#fileName').text('');
    }

    // New Chat Modal Logic
    $('#targetType').change(function() {
        const targetType = $(this).val();

        // Hide all fields first
        $('[id$="Field"]').hide();
        $('#titleField').hide();

        // Show relevant fields
        switch(targetType) {
            case 'specific_student':
                $('#batchField').show();
                $('#studentField').show();
                $('#titleField').show();
                break;
            case 'all_students':
                $('#titleField').show();
                break;
            case 'specific_teacher':
                $('#teacherField').show();
                $('#titleField').show();
                break;
            case 'all_teachers':
                $('#titleField').show();
                break;
            case 'batch':
                $('#batchField').show();
                $('#titleField').show();
                break;
            case 'individual':
                $('#individualField').show();
                break;
        }
    });

    // Load students when batch selected
    $('#batchSelect').change(function() {
        const batchId = $(this).val();
        if (batchId) {
            $.ajax({
                url: `/api/chat/batch/${batchId}/students`,
                type: 'GET',
                success: function(response) {
                    if (response.success) {
                        const select = $('#studentSelect');
                        select.empty();
                        select.append('<option value="">-- Select Student --</option>');

                        response.students.forEach(student => {
                            select.append(new Option(
                                `${student.username} (${student.institute_id})`,
                                student.id
                            ));
                        });
                    }
                }
            });
        }
    });

    // Start new chat
    $('#startNewChatBtn').click(function() {
        const targetType = $('#targetType').val();
        if (!targetType) {
            alert('Please select chat type');
            return;
        }

        const data = {
            target_type: targetType,
            title: $('#conversationTitle').val() || null,
            _token: '{{ csrf_token() }}'
        };

        switch(targetType) {
            case 'specific_student':
                data.batch_id = $('#batchSelect').val();
                data.student_id = $('#studentSelect').val();
                break;
            case 'batch':
                data.batch_id = $('#batchSelect').val();
                break;
            case 'specific_teacher':
                data.teacher_id = $('#teacherSelect').val();
                break;
            case 'individual':
                data.user_id = $('#userSelect').val();
                break;
        }

        $.ajax({
            url: '/api/chat/conversations',
            type: 'POST',
            data: data,
            success: function(response) {
                if (response.success) {
                    // Clear form
                    $('#targetType').val('');
                    $('#conversationTitle').val('');
                    $('[id$="Field"]').hide();

                    // Switch to new conversation
                    switchToConversation(response.conversation.id, response.conversation.title);

                    // Refresh conversations list
                    loadConversations();
                }
            }
        });
    });

    // Edit message
    $(document).on('click', '.edit-message', function() {
        const messageId = $(this).data('message-id');
        const messageText = $(this).data('message-text');

        $('#editMessageId').val(messageId);
        $('#editMessageText').val(messageText);
        $('#editMessageModal').modal('show');
    });

    $('#saveEditBtn').click(function() {
        const messageId = $('#editMessageId').val();
        const newText = $('#editMessageText').val().trim();

        if (!newText) return;

        $.ajax({
            url: `/api/chat/messages/${messageId}`,
            type: 'PUT',
            data: {
                message: newText,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    $('#editMessageModal').modal('hide');
                    // Update message in UI
                    $(`.message-bubble[data-message-id="${messageId}"] .message-text`).text(newText);
                    $(`.message-bubble[data-message-id="${messageId}"] .message-time`).append(' <small class="text-muted">(edited)</small>');
                }
            }
        });
    });

    // Delete message
    $(document).on('click', '.delete-message', function() {
        const messageId = $(this).data('message-id');

        if (confirm('Are you sure you want to delete this message?')) {
            $.ajax({
                url: `/api/chat/messages/${messageId}`,
                type: 'DELETE',
                data: { _token: '{{ csrf_token() }}' },
                success: function(response) {
                    if (response.success) {
                        $(`.message-bubble[data-message-id="${messageId}"]`).closest('.d-flex').remove();
                    }
                }
            });
        }
    });

    // Conversation info
    $('#conversationInfoBtn').click(function() {
        if (currentConversationId) {
            $.ajax({
                url: `/api/chat/conversations/${currentConversationId}/info`,
                type: 'GET',
                success: function(response) {
                    if (response.success) {
                        const conv = response.conversation;
                        const participantsHtml = conv.participants.map(p => `
                            <div class="d-flex align-items-center mb-2">
                                <div class="user-avatar me-2">${p.username.charAt(0)}</div>
                                <div>
                                    <div>${p.username}</div>
                                    <small class="text-muted">${p.user_type}</small>
                                </div>
                                ${p.is_online ? '<span class="badge bg-success ms-auto">Online</span>' : ''}
                            </div>
                        `).join('');

                        $('#infoModalContent').html(`
                            <h6>${conv.title}</h6>
                            <p><strong>Type:</strong> ${conv.conversation_type}</p>
                            <p><strong>Created:</strong> ${conv.created_at}</p>
                            <hr>
                            <h6>Participants</h6>
                            ${participantsHtml}
                        `);
                        $('#infoModal').modal('show');
                    }
                }
            });
        }
    });

    // Utility functions
    function getTimeAgo(timestamp) {
        const now = new Date();
        const date = new Date(timestamp);
        const diffMs = now - date;
        const diffMins = Math.floor(diffMs / 60000);

        if (diffMins < 1) return 'Just now';
        if (diffMins < 60) return `${diffMins}m ago`;
        if (diffMins < 1440) return `${Math.floor(diffMins / 60)}h ago`;
        return `${Math.floor(diffMins / 1440)}d ago`;
    }

    function scrollToBottom() {
        const container = $('#messagesArea');
        container.scrollTop(container[0].scrollHeight);
    }

    function markConversationAsRead(conversationId) {
        $.ajax({
            url: `/api/chat/conversations/${conversationId}/read`,
            type: 'POST',
            data: { _token: '{{ csrf_token() }}' }
        });
    }

    function updateConversationStats(conversations) {
        let unreadTotal = 0;
        if (conversations) {
            unreadTotal = conversations.reduce((sum, conv) => sum + conv.unread_count, 0);
        }
        $('#unreadCount').text(unreadTotal);
    }

    function loadConversationInfo(conversationId) {
        $.ajax({
            url: `/api/chat/conversations/${conversationId}/info`,
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    const conv = response.conversation;
                    $('#participantCount').text(`${conv.participants.length} participants`);
                }
            }
        });
    }

    function subscribeToConversation(conversationId) {
        if (pusher) {
            const channel = pusher.subscribe(`private-chat.${conversationId}`);

            channel.bind('App\\Events\\NewChatMessage', function(data) {
                if (data.sender_id !== userId) {
                    addNewMessage(data);
                    playNotificationSound();
                }
            });

            channel.bind('client-typing', function(data) {
                if (data.user_id !== userId) {
                    if (data.is_typing) {
                        $('#typingUser').text(data.user_name);
                        $('#typingIndicator').show();
                    } else {
                        $('#typingIndicator').hide();
                    }
                }
            });
        }
    }

    function addNewMessage(data) {
        const container = $('#messagesArea');

        const messageHtml = `
            <div class="d-flex justify-content-start">
                <div class="message-bubble received">
                    <div class="small fw-bold mb-1">${data.sender_name}</div>
                    <div class="message-text">${data.message}</div>
                    <div class="message-time">
                        ${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
                    </div>
                </div>
            </div>
        `;

        container.append(messageHtml);
        scrollToBottom();
    }

    function playNotificationSound() {
        // Add notification sound if needed
        console.log('New message received');
    }

    // Auto-resize textarea
    $('#messageInput').on('input', function() {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
    });

    // Global search
    $('#globalSearch').on('input', function() {
        const searchTerm = $(this).val().toLowerCase();
        $('.conversation-item').each(function() {
            const text = $(this).text().toLowerCase();
            $(this).toggle(text.includes(searchTerm));
        });
    });

    // Initialize online status
    function updateOnlineStatus(online) {
        const action = online ? 'online' : 'offline';
        $.post(`/api/chat/${action}`, {
            _token: '{{ csrf_token() }}',
            connection_id: 'admin_' + Date.now()
        });
    }

    // Initialize
    initPusher();
    loadConversations();

    if (currentConversationId) {
        loadConversation(currentConversationId, '{{ $conversation->title ?? "Chat" }}');
    } else {
        // Load online users count
        $.get('/api/chat/online-users', function(response) {
            if (response.success) {
                $('#onlineCount').text(response.online_users.length);
            }
        });
    }

    updateOnlineStatus(true);

    // Cleanup on page unload
    $(window).on('beforeunload', function() {
        updateOnlineStatus(false);
    });
});
</script>
@endpush