@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <div class="row">
        <!-- Left Sidebar -->
        <div class="col-md-4 col-lg-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Chat</h5>
                </div>
                <div class="card-body p-0">
                    <!-- New Conversation Form -->
                    <div class="p-3 border-bottom">
                        <button class="btn btn-primary w-100 mb-2" data-bs-toggle="modal" data-bs-target="#newChatModal">
                            <i class="fas fa-plus me-2"></i> Start New Chat
                        </button>

                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search conversations..." id="searchConversations">
                            <button class="btn btn-outline-secondary" type="button">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Conversations List -->
                    <div id="conversationsList" style="max-height: 500px; overflow-y: auto;">
                        <!-- AJAX loaded -->
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Chat Area -->
        <div class="col-md-8 col-lg-9">
            @if($conversation)
                <div class="card h-100">
                    <!-- Chat header with participant info -->
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-0" id="conversationTitle">{{ $conversation->title ?? 'Chat' }}</h5>
                            <small class="text-muted">
                                <span id="participantRole"></span>
                                <span id="onlineStatus" class="ms-2"></span>
                            </small>
                        </div>
                        <div>
                            <button class="btn btn-sm btn-outline-secondary" id="chatInfoBtn">
                                <i class="fas fa-info-circle"></i>
                            </button>
                            @if($conversation->conversation_type === 'direct')
                            <button class="btn btn-sm btn-outline-danger" id="deleteChatBtn">
                                <i class="fas fa-trash"></i>
                            </button>
                            @endif
                        </div>
                    </div>

                    <!-- Messages Container -->
                    <div class="card-body p-0 position-relative">
                        <div id="messagesContainer" style="height: 500px; overflow-y: auto; padding: 1rem;">
                            <!-- Messages loaded via AJAX -->
                        </div>

                        <!-- Typing indicator -->
                        <div id="typingIndicator" class="position-absolute bottom-0 start-0 p-2" style="display: none;">
                            <div class="typing-dots">
                                <span></span><span></span><span></span>
                            </div>
                            <small class="text-muted ms-2">typing...</small>
                        </div>
                    </div>

                    <!-- Message Input with Attachment -->
                    <div class="card-footer">
                        <form id="messageForm" class="d-flex gap-2 align-items-end">
                            <input type="hidden" name="conversation_id" value="{{ $conversation->id }}">

                            <!-- Attachment Preview -->
                            <div id="attachmentPreview" class="mb-2" style="display: none;">
                                <div class="d-flex align-items-center bg-light p-2 rounded">
                                    <i class="fas fa-paperclip me-2"></i>
                                    <span id="fileName" class="small"></span>
                                    <button type="button" class="btn-close ms-2" id="removeAttachment"></button>
                                </div>
                            </div>

                            <!-- Main Input Area -->
                            <div class="flex-grow-1">
                                <textarea class="form-control" name="message"
                                          placeholder="Type your message..."
                                          rows="1" id="messageInput"></textarea>
                            </div>

                            <!-- Action Buttons -->
                            <div class="d-flex flex-column gap-2">
                                <!-- Attachment Button -->
                                <div class="btn-group">
                                    <button type="button" class="btn btn-outline-secondary dropdown-toggle"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fas fa-paperclip"></i>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a class="dropdown-item" href="#" id="attachImageBtn">
                                                <i class="fas fa-image me-2"></i>Image
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="#" id="attachFileBtn">
                                                <i class="fas fa-file me-2"></i>File
                                            </a>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <a class="dropdown-item" href="#" id="recordAudioBtn">
                                                <i class="fas fa-microphone me-2"></i>Voice Message
                                            </a>
                                        </li>
                                    </ul>
                                </div>

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

                            <!-- Hidden File Inputs -->
                            <input type="file" id="imageInput" accept="image/*" style="display: none;">
                            <input type="file" id="fileInput" style="display: none;">
                        </form>
                    </div>
                </div>
            @else
                <!-- Welcome Screen -->
                <div class="card h-100">
                    <div class="card-body d-flex flex-column justify-content-center align-items-center">
                        <div class="text-center mb-4">
                            <div class="avatar-circle mb-3" style="width: 80px; height: 80px;">
                                <i class="fas fa-chalkboard-teacher fa-2x"></i>
                            </div>
                            <h4 class="mb-2">Welcome Teacher!</h4>
                            <p class="text-muted mb-4">Chat with students, managers, and other teachers</p>

                            <div class="row g-3">
                                <div class="col-6">
                                    <button class="btn btn-outline-primary w-100" data-bs-toggle="modal" data-bs-target="#newChatModal">
                                        <i class="fas fa-plus me-2"></i>New Chat
                                    </button>
                                </div>
                                <div class="col-6">
                                    <button class="btn btn-outline-secondary w-100" id="loadAllConversations">
                                        <i class="fas fa-sync me-2"></i>Refresh
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Quick Stats -->
                        <div class="row text-center mt-4">
                            <div class="col-4">
                                <div class="stat-card">
                                    <h5 class="mb-0" id="onlineCount">0</h5>
                                    <small class="text-muted">Online</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="stat-card">
                                    <h5 class="mb-0" id="unreadCount">0</h5>
                                    <small class="text-muted">Unread</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="stat-card">
                                    <h5 class="mb-0" id="totalChats">0</h5>
                                    <small class="text-muted">Chats</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- New Chat Modal for Teacher -->
<div class="modal fade" id="newChatModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Start New Chat</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="newChatForm">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Chat With:</label>
                            <select class="form-select" name="target_type" id="targetType" required>
                                <option value="">-- Select Type --</option>
                                <option value="specific_student">Specific Student</option>
                                <option value="all_students">All Students in Batch</option>
                                <option value="specific_teacher">Another Teacher</option>
                                <option value="manager">Manager</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Conversation Title:</label>
                            <input type="text" class="form-control" name="title" placeholder="Optional">
                        </div>
                    </div>

                    <!-- Conditional Fields -->
                    <div id="conditionalFields">
                        <!-- Batch Field (for students) -->
                        <div class="row mb-3" id="batchField" style="display: none;">
                            <div class="col-md-12">
                                <label class="form-label">Select Batch:</label>
                                <select class="form-select" name="batch_id" id="batchSelect" required>
                                    <option value="">-- Select Your Batch --</option>
                                    @foreach($batches as $batch)
                                        <option value="{{ $batch['id'] }}">{{ $batch['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <!-- Student Field -->
                        <div class="row mb-3" id="studentField" style="display: none;">
                            <div class="col-md-12">
                                <label class="form-label">Select Student:</label>
                                <select class="form-select" name="student_id" id="studentSelect" required>
                                    <option value="">-- Select Student --</option>
                                </select>
                            </div>
                        </div>

                        <!-- Teacher Field -->
                        <div class="row mb-3" id="teacherField" style="display: none;">
                            <div class="col-md-12">
                                <label class="form-label">Select Teacher:</label>
                                <select class="form-select" name="teacher_id" id="teacherSelect" required>
                                    <option value="">-- Select Teacher --</option>
                                    @foreach($all_teachers as $teacher)
                                        <option value="{{ $teacher->id }}">{{ $teacher->username }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <!-- Manager Field -->
                        <div class="row mb-3" id="managerField" style="display: none;">
                            <div class="col-md-12">
                                <label class="form-label">Select Manager:</label>
                                <select class="form-select" name="manager_id" id="managerSelect" required>
                                    <option value="">-- Select Manager --</option>
                                    @foreach($managers as $manager)
                                        <option value="{{ $manager->id }}">{{ $manager->username }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </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="startChatBtn">Start Chat</button>
            </div>
        </div>
    </div>
</div>

<!-- Conversation Info Modal -->
<div class="modal fade" id="conversationInfoModal" 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="conversationInfoContent">
                <!-- 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-info-circle 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('styles')
<style>
.avatar-circle {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.stat-card {
    padding: 10px;
    border-radius: 10px;
    background: #f8f9fa;
}

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

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

.message-bubble.received {
    background: #f8f9fa;
    color: #333;
    margin-right: auto;
    border-bottom-left-radius: 5px;
}

.message-time {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 5px;
}

.typing-dots {
    display: inline-flex;
    gap: 3px;
}

.typing-dots span {
    width: 8px;
    height: 8px;
    background: #666;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

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

.message-bubble:hover .message-actions {
    display: flex;
}
</style>
@endpush

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

    // Initialize chat system
    initializeChat();

    function initializeChat() {
        initializePusher();
        loadConversations();
        updateOnlineStatus(true);

        if (currentConversationId) {
            loadConversationDetails(currentConversationId);
        } else {
            updateDashboardStats();
        }

        setupEventListeners();
    }

    function initializePusher() {
        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() }}'
                    }
                }
            });

            // Subscribe to user's presence channel
            const userChannel = pusher.subscribe('presence-user.' + userId);

            userChannel.bind('pusher:subscription_succeeded', function() {
                console.log('Subscribed to user channel');
            });
        }
    }

    function loadConversations() {
        $.ajax({
            url: '{{ route("chat.conversations") }}',
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    renderConversations(response.conversations);
                    updateUnreadCount(response.conversations);
                }
            }
        });
    }

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

        if (conversations.length === 0) {
            container.html(`
                <div class="text-center py-5">
                    <i class="fas fa-comments fa-3x text-muted mb-3"></i>
                    <p class="text-muted">No conversations yet</p>
                </div>
            `);
            return;
        }

        conversations.forEach(conv => {
            const conversationItem = createConversationItem(conv);
            container.append(conversationItem);
        });

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

    function createConversationItem(conversation) {
        const unreadBadge = conversation.unread_count > 0
            ? `<span class="badge bg-danger rounded-pill">${conversation.unread_count}</span>`
            : '';

        const onlineIndicator = conversation.is_online
            ? `<span class="badge bg-success rounded-pill" style="width: 8px; height: 8px;"></span>`
            : '';

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

        const timeAgo = getTimeAgo(conversation.updated_at);

        return `
            <div class="list-group-item list-group-item-action border-0 conversation-item
                       ${currentConversationId === conversation.id ? 'active' : ''}"
                 data-conversation-id="${conversation.id}"
                 data-conversation-type="${conversation.conversation_type}">
                <div class="d-flex align-items-center">
                    <div class="position-relative me-3">
                        <div class="avatar-circle" style="width: 40px; height: 40px;">
                            <i class="fas fa-${getConversationIcon(conversation)}"></i>
                        </div>
                        ${onlineIndicator}
                    </div>
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">${conversation.title}</h6>
                            <div class="d-flex align-items-center gap-1">
                                ${unreadBadge}
                                <small class="text-muted">${timeAgo}</small>
                            </div>
                        </div>
                        ${lastMessage}
                    </div>
                </div>
            </div>
        `;
    }

    function getConversationIcon(conversation) {
        switch(conversation.conversation_type) {
            case 'direct':
                const participant = conversation.participants[0];
                if (participant) {
                    switch(participant.user_type) {
                        case 'student': return 'user-graduate';
                        case 'teacher': return 'chalkboard-teacher';
                        case 'lms_manager': return 'user-tie';
                        default: return 'user';
                    }
                }
                return 'user';
            case 'batch': return 'users';
            default: return 'comments';
        }
    }

    function getTimeAgo(timestamp) {
        // Implement time ago calculation
        return moment(timestamp).fromNow();
    }

    function switchToConversation(conversationId) {
        currentConversationId = conversationId;
        updateURL(conversationId);
        loadConversationDetails(conversationId);
        markConversationAsRead(conversationId);
        subscribeToConversation(conversationId);
        updateActiveConversationUI(conversationId);
    }

    function loadConversationDetails(conversationId) {
        // Load conversation info
        $.ajax({
            url: `/api/chat/conversations/${conversationId}/info`,
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    updateConversationHeader(response.conversation);
                }
            }
        });

        // Load messages
        loadMessages(conversationId);
    }

    function updateConversationHeader(conversation) {
        $('#conversationTitle').text(conversation.title);

        // Update participant info
        if (conversation.conversation_type === 'direct' && conversation.participants.length > 0) {
            const participant = conversation.participants[0];
            $('#participantRole').text(participant.user_type.charAt(0).toUpperCase() + participant.user_type.slice(1));
            $('#onlineStatus').html(participant.is_online
                ? '<span class="text-success"><i class="fas fa-circle"></i> Online</span>'
                : '<span class="text-muted"><i class="far fa-circle"></i> Offline</span>'
            );
        }
    }

    function loadMessages(conversationId, page = 1) {
        $.ajax({
            url: `/api/chat/conversations/${conversationId}/messages`,
            type: 'GET',
            data: { page: page },
            success: function(response) {
                if (response.success) {
                    renderMessages(response.messages);
                }
            }
        });
    }

    function renderMessages(messages) {
        const container = $('#messagesContainer');
        container.empty();

        if (messages.length === 0) {
            container.html(`
                <div class="text-center py-5">
                    <i class="fas fa-comment-slash fa-3x text-muted mb-3"></i>
                    <p class="text-muted">No messages yet. Start the conversation!</p>
                </div>
            `);
            return;
        }

        let lastSenderId = null;
        let lastDate = null;

        messages.forEach(msg => {
            // Add date separator if needed
            const messageDate = moment(msg.created_at).format('YYYY-MM-DD');
            if (messageDate !== lastDate) {
                container.append(`
                    <div class="text-center my-3">
                        <span class="badge bg-light text-dark">${moment(msg.created_at).format('MMMM D, YYYY')}</span>
                    </div>
                `);
                lastDate = messageDate;
            }

            const isOwn = msg.is_own;
            const showSender = !isOwn && (msg.sender.id !== lastSenderId);
            lastSenderId = msg.sender.id;

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

        scrollToBottom();
    }

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

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

        const messageActions = isOwn
            ? `<div class="message-actions">
                  <button class="btn btn-sm btn-outline-secondary edit-message-btn"
                          data-message-id="${message.id}"
                          data-message-text="${message.message.replace(/"/g, '&quot;')}">
                      <i class="fas fa-edit"></i>
                  </button>
                  <button class="btn btn-sm btn-outline-danger delete-message-btn"
                          data-message-id="${message.id}">
                      <i class="fas fa-trash"></i>
                  </button>
               </div>`
            : '';

        return `
            <div class="d-flex ${isOwn ? 'justify-content-end' : 'justify-content-start'} mb-2">
                <div class="message-bubble ${isOwn ? 'sent' : 'received'}"
                     data-message-id="${message.id}">
                    ${senderInfo}
                    <div class="message-content">${message.message}</div>
                    <div class="d-flex justify-content-between align-items-center mt-1">
                        <small class="message-time">
                            ${moment(message.created_at).format('h:mm A')}
                            ${editedBadge}
                        </small>
                        ${isOwn ? '<i class="fas fa-check ms-2"></i>' : ''}
                    </div>
                    ${messageActions}
                </div>
            </div>
        `;
    }

    // Message sending
    $('#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
        }

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

    // Attachment handling
    $('#attachImageBtn').click(function(e) {
        e.preventDefault();
        $('#imageInput').click();
    });

    $('#attachFileBtn').click(function(e) {
        e.preventDefault();
        $('#fileInput').click();
    });

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

    $('#removeAttachment').click(function() {
        clearAttachment();
    });

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

    // Edit message
    $(document).on('click', '.edit-message-btn', 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');
                    updateMessageInUI(messageId, newText);
                }
            }
        });
    });

    function updateMessageInUI(messageId, newText) {
        const messageElement = $(`.message-bubble[data-message-id="${messageId}"]`);
        messageElement.find('.message-content').html(newText);
        messageElement.find('.message-time').append(' <small class="text-muted">(edited)</small>');
    }

    // Delete message
    $(document).on('click', '.delete-message-btn', 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();
                    }
                }
            });
        }
    });

    // New Chat Modal
    $('#targetType').change(function() {
        const targetType = $(this).val();
        $('.row[id$="Field"]').hide().find('select').prop('required', false);

        switch(targetType) {
            case 'specific_student':
                $('#batchField').show().find('select').prop('required', true);
                $('#studentField').show().find('select').prop('required', true);
                break;
            case 'all_students':
                $('#batchField').show().find('select').prop('required', true);
                break;
            case 'specific_teacher':
                $('#teacherField').show().find('select').prop('required', true);
                break;
            case 'manager':
                $('#managerField').show().find('select').prop('required', true);
                break;
        }
    });

    $('#batchSelect').change(function() {
        const batchId = $(this).val();
        const targetType = $('#targetType').val();

        if (batchId && targetType === 'specific_student') {
            loadBatchStudents(batchId);
        }
    });

    function loadBatchStudents(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
                        ));
                    });
                }
            }
        });
    }

    $('#startChatBtn').click(function() {
        const formData = $('#newChatForm').serialize();

        $.ajax({
            url: '/api/chat/conversations',
            type: 'POST',
            data: formData,
            success: function(response) {
                if (response.success) {
                    $('#newChatModal').modal('hide');
                    switchToConversation(response.conversation.id);
                    loadConversations(); // Refresh list
                }
            }
        });
    });

    // Utility functions
    function updateURL(conversationId) {
        window.history.pushState({}, '', `/chat?conversation=${conversationId}`);
    }

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

    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('App\\Events\\ChatMessageEdited', function(data) {
                updateMessageInUI(data.id, data.message);
            });

            channel.bind('App\\Events\\ChatMessageDeleted', function(data) {
                $(`.message-bubble[data-message-id="${data.message_id}"]`).closest('.d-flex').remove();
            });
        }
    }

    function addNewMessage(data) {
        const container = $('#messagesContainer');
        const isOwn = false;
        const showSender = true;

        const messageHtml = createMessageHTML({
            id: data.id,
            message: data.message,
            sender: {
                id: data.sender_id,
                username: data.sender_name
            },
            created_at: data.created_at,
            is_edited: false,
            is_own: false
        }, isOwn, showSender);

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

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

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

    function updateDashboardStats() {
        $.ajax({
            url: '/api/chat/online-users',
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    $('#onlineCount').text(response.online_users.length);
                }
            }
        });

        $.ajax({
            url: '/api/chat/conversations',
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    $('#totalChats').text(response.conversations.length);
                }
            }
        });
    }

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

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

    function playNotificationSound() {
        const audio = new Audio('/notification.mp3');
        audio.play().catch(e => console.log('Audio play failed:', e));
    }

    function setupEventListeners() {
        // Conversation info
        $('#chatInfoBtn').click(function() {
            if (currentConversationId) {
                $.ajax({
                    url: `/api/chat/conversations/${currentConversationId}/info`,
                    type: 'GET',
                    success: function(response) {
                        if (response.success) {
                            $('#conversationInfoContent').html(`
                                <h6>${response.conversation.title}</h6>
                                <p>Type: ${response.conversation.conversation_type}</p>
                                <p>Created: ${response.conversation.created_at}</p>
                                <h6 class="mt-3">Participants:</h6>
                                <ul class="list-unstyled">
                                    ${response.conversation.participants.map(p => `
                                        <li class="mb-2">
                                            <i class="fas fa-user me-2"></i>
                                            ${p.username} (${p.user_type})
                                            ${p.is_online ? '<span class="badge bg-success ms-2">Online</span>' : ''}
                                        </li>
                                    `).join('')}
                                </ul>
                            `);
                            $('#conversationInfoModal').modal('show');
                        }
                    }
                });
            }
        });

        // Delete chat
        $('#deleteChatBtn').click(function() {
            if (confirm('Are you sure you want to delete this conversation?')) {
                $.ajax({
                    url: `/api/chat/conversations/${currentConversationId}`,
                    type: 'DELETE',
                    data: { _token: '{{ csrf_token() }}' },
                    success: function(response) {
                        if (response.success) {
                            window.location.href = '/chat';
                        }
                    }
                });
            }
        });

        // Refresh conversations
        $('#loadAllConversations').click(function() {
            loadConversations();
            updateDashboardStats();
        });

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

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