complete this '@extends('layouts.app')

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

@push('styles')
<style>
/* Teacher-specific styles */
.teacher-chat-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    color: white;
}

.teacher-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #667eea;
    margin: 0 auto 15px;
}

.student-list-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #f8f9fa;
    transition: all 0.2s;
}

.student-list-item:hover {
    background: #e9ecef;
    transform: translateX(5px);
}

.student-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #4caf50;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 12px;
}

.manager-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ff9800;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 12px;
}

.quick-action-btn {
    border-radius: 20px;
    padding: 8px 20px;
    font-weight: 500;
    transition: all 0.3s;
}

.quick-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.batch-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
}

.message-container-teacher {
    border-left: 3px solid #667eea;
    background: #f8f9fa;
    border-radius: 0 10px 10px 0;
    padding: 15px;
}

.schedule-card {
    background: white;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    border-left: 4px solid #4caf50;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.schedule-card .time {
    color: #667eea;
    font-weight: 600;
    font-size: 14px;
}

.schedule-card .subject {
    font-weight: 500;
    margin-bottom: 5px;
}

.assignment-notice {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

.assignment-count {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}

.online-teachers {
    background: white;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

.online-teacher-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: background 0.2s;
}

.online-teacher-item:hover {
    background: #f5f5f5;
}

.teaching-schedule {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.schedule-time {
    font-weight: 600;
    color: #667eea;
    font-size: 14px;
}

.schedule-details {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.schedule-details:last-child {
    border-bottom: none;
}

.student-performance {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

.performance-metric {
    text-align: center;
    padding: 15px;
}

.performance-value {
    font-size: 24px;
    font-weight: bold;
    color: #667eea;
    margin-bottom: 5px;
}

.performance-label {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
}

.chat-header-teacher {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px;
    border-radius: 10px 10px 0 0;
}

.chat-header-teacher h5 {
    margin: 0;
    font-weight: 600;
}

.chat-role-badge {
    background: rgba(255,255,255,0.2);
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 12px;
    margin-left: 10px;
}

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

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

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

.message-sender {
    font-weight: 600;
    font-size: 13px;
    color: #667eea;
    margin-bottom: 4px;
}

.message-time-teacher {
    font-size: 11px;
    color: #999;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.message-status {
    margin-left: 5px;
    font-size: 10px;
}

.attachment-preview-teacher {
    margin-top: 8px;
    padding: 8px;
    background: rgba(0,0,0,0.05);
    border-radius: 8px;
    border-left: 3px solid #667eea;
}

.input-container-teacher {
    background: white;
    border-radius: 0 0 10px 10px;
    padding: 15px;
    border-top: 1px solid #e0e0e0;
}

.teacher-quick-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.teacher-quick-actions .btn {
    flex: 1;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.teacher-quick-actions i {
    font-size: 20px;
    margin-bottom: 5px;
}

.welcome-section-teacher {
    background: white;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.welcome-icon {
    font-size: 48px;
    color: #667eea;
    margin-bottom: 20px;
}

.welcome-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 30px;
}

.stat-card-teacher {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #667eea;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
}

/* Responsive */
@media (max-width: 768px) {
    .welcome-stats {
        grid-template-columns: 1fr;
    }

    .teacher-quick-actions {
        flex-direction: column;
    }

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

@section('content')
<div class="container-fluid py-3">
    <!-- Teacher Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="teacher-chat-container">
                <div class="row align-items-center">
                    <div class="col-md-2 text-center">
                        <div class="teacher-avatar">
                            <i class="fas fa-chalkboard-teacher"></i>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <h3 class="mb-2">Welcome, {{ auth()->user()->username }}!</h3>
                        <p class="mb-0">Teacher Chat Panel - Communicate with students, managers, and colleagues</p>
                        <div class="mt-2">
                            <span class="badge bg-white text-primary me-2">{{ $batches->count() }} Batches</span>
                            <span class="badge bg-white text-success me-2">{{ $students->count() }} Students</span>
                            <span class="badge bg-white text-info">{{ $managers->count() }} Managers</span>
                        </div>
                    </div>
                    <div class="col-md-3 text-center text-md-end">
                        <div id="onlineStatus" class="badge bg-success px-3 py-2 mb-2">
                            <i class="fas fa-wifi me-2"></i>Online
                        </div>
                        <div class="small text-white-50">Last seen: Just now</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Left Column: Teacher Info and Quick Actions -->
        <div class="col-lg-3">
            <!-- Quick Actions -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0"><i class="fas fa-bolt me-2"></i>Quick Actions</h6>
                </div>
                <div class="card-body">
                    <div class="teacher-quick-actions">
                        <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#newChatModal">
                            <i class="fas fa-comment-medical"></i>
                            <span>New Chat</span>
                        </button>
                        <button class="btn btn-outline-success" id="refreshChatsBtn">
                            <i class="fas fa-sync-alt"></i>
                            <span>Refresh</span>
                        </button>
                        <button class="btn btn-outline-info" id="viewScheduleBtn">
                            <i class="fas fa-calendar-alt"></i>
                            <span>Schedule</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Teaching Schedule -->
            <div class="card mb-4 teaching-schedule">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="fas fa-clock me-2 text-primary"></i>Today's Schedule</h6>
                </div>
                <div class="card-body">
                    <div class="schedule-details">
                        <div class="schedule-time">09:00 AM - 10:00 AM</div>
                        <div class="fw-bold">Mathematics</div>
                        <div class="small text-muted">Batch 10-A</div>
                    </div>
                    <div class="schedule-details">
                        <div class="schedule-time">11:00 AM - 12:00 PM</div>
                        <div class="fw-bold">Physics</div>
                        <div class="small text-muted">Batch 10-B</div>
                    </div>
                    <div class="schedule-details">
                        <div class="schedule-time">02:00 PM - 03:00 PM</div>
                        <div class="fw-bold">Chemistry</div>
                        <div class="small text-muted">Batch 10-C</div>
                    </div>
                </div>
            </div>

            <!-- Online Colleagues -->
            <div class="card online-teachers">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="fas fa-users me-2 text-success"></i>Online Colleagues</h6>
                </div>
                <div class="card-body">
                    <div id="onlineTeachersList">
                        <!-- Will be loaded via AJAX -->
                        <div class="text-center py-3">
                            <div class="spinner-border spinner-border-sm text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Middle Column: Conversations and Chat -->
        <div class="col-lg-6">
            <!-- Conversations Card -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center bg-white">
                    <h6 class="mb-0"><i class="fas fa-comments me-2 text-primary"></i>Recent Conversations</h6>
                    <div class="input-group input-group-sm" style="width: 200px;">
                        <input type="text" class="form-control" placeholder="Search..." id="conversationSearch">
                        <button class="btn btn-outline-secondary" type="button">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div id="conversationsList" style="max-height: 400px; overflow-y: auto;">
                        <!-- Conversations loaded via AJAX -->
                        <div class="text-center py-5">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading conversations...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Main Chat Area -->
            <div class="card chat-container">
                @if($conversation)
                <!-- Chat Header -->
                <div class="chat-header-teacher">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center">
                            <div class="position-relative me-3">
                                @if($conversation->conversation_type === 'direct')
                                <div class="student-avatar" id="participantAvatar">
                                    {{ substr($conversation->title ?? 'U', 0, 1) }}
                                </div>
                                @else
                                <div class="manager-avatar" id="participantAvatar">
                                    {{ substr($conversation->title ?? 'G', 0, 1) }}
                                </div>
                                @endif
                                <span class="position-absolute bottom-0 end-0 translate-middle p-1 bg-success border border-white rounded-circle">
                                    <span class="visually-hidden">Online</span>
                                </span>
                            </div>
                            <div>
                                <h5 class="mb-1" id="conversationTitle">{{ $conversation->title ?? 'Chat' }}</h5>
                                <div class="d-flex align-items-center">
                                    <small>
                                        <span id="participantType">
                                            @if($conversation->conversation_type === 'direct')
                                            Student
                                            @elseif($conversation->conversation_type === 'batch')
                                            Batch
                                            @else
                                            Group
                                            @endif
                                        </span>
                                    </small>
                                    <span class="chat-role-badge" id="onlineStatusBadge">Online</span>
                                </div>
                            </div>
                        </div>
                        <div class="dropdown">
                            <button class="btn btn-light btn-sm 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="viewInfoBtn">
                                        <i class="fas fa-info-circle me-2"></i>View Info
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#" id="muteBtn">
                                        <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="clearChatBtn">
                                        <i class="fas fa-trash me-2"></i>Clear Chat
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Messages Area -->
                <div class="flex-grow-1 p-3" style="max-height: 400px; overflow-y: auto;" id="messagesArea">
                    <!-- Messages 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 px-3 py-2" id="typingIndicator" style="display: none;">
                    <div class="d-flex align-items-center">
                        <div class="typing-dots me-2">
                            <span></span><span></span><span></span>
                        </div>
                        <small id="typingText">Student is typing...</small>
                    </div>
                </div>

                <!-- Message Input -->
                <div class="input-container-teacher">
                    <form id="messageForm">
                        <div class="d-flex gap-2 align-items-end">
                            <div class="flex-grow-1">
                                <textarea class="form-control" id="messageInput"
                                          placeholder="Type your message..."
                                          rows="2" style="resize: none;"></textarea>
                            </div>
                            <div class="d-flex flex-column gap-2">
                                <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;">
                                <button type="submit" class="btn btn-primary" id="sendMessageBtn">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                @else
                <!-- Welcome Screen -->
                <div class="welcome-section-teacher">
                    <div class="welcome-icon">
                        <i class="fas fa-comments"></i>
                    </div>
                    <h4 class="mb-3">Teacher Chat Center</h4>
                    <p class="text-muted mb-4">Select a conversation or start a new chat with students, managers, or colleagues</p>

                    <div class="row g-3 mb-4">
                        <div class="col-md-4">
                            <button class="btn btn-primary w-100 py-3" data-bs-toggle="modal" data-bs-target="#newChatModal">
                                <i class="fas fa-user-graduate me-2"></i>Chat with Student
                            </button>
                        </div>
                        <div class="col-md-4">
                            <button class="btn btn-success w-100 py-3" data-bs-toggle="modal" data-bs-target="#newChatModal">
                                <i class="fas fa-user-tie me-2"></i>Chat with Manager
                            </button>
                        </div>
                        <div class="col-md-4">
                            <button class="btn btn-info w-100 py-3" data-bs-toggle="modal" data-bs-target="#newChatModal">
                                <i class="fas fa-chalkboard-teacher me-2"></i>Chat with Teacher
                            </button>
                        </div>
                    </div>

                    <div class="welcome-stats">
                        <div class="stat-card-teacher">
                            <div class="stat-value" id="onlineCount">0</div>
                            <div class="stat-label">Online Now</div>
                        </div>
                        <div class="stat-card-teacher">
                            <div class="stat-value" id="unreadCount">0</div>
                            <div class="stat-label">Unread Messages</div>
                        </div>
                        <div class="stat-card-teacher">
                            <div class="stat-value" id="totalConversations">0</div>
                            <div class="stat-label">Active Chats</div>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>

        <!-- Right Column: Students and Managers -->
        <div class="col-lg-3">
            <!-- Students List -->
            <div class="card mb-4">
                <div class="card-header bg-success text-white">
                    <h6 class="mb-0"><i class="fas fa-user-graduate me-2"></i>My Students</h6>
                </div>
                <div class="card-body p-0">
                    <div id="studentsList" style="max-height: 300px; overflow-y: auto;">
                        @foreach($students->take(10) as $student)
                        <div class="student-list-item" data-user-id="{{ $student['id'] }}">
                            <div class="student-avatar">
                                {{ substr($student['username'], 0, 1) }}
                            </div>
                            <div class="flex-grow-1">
                                <div class="fw-bold">{{ $student['username'] }}</div>
                                <small class="text-muted">{{ $student['institute_id'] ?? 'Student' }}</small>
                            </div>
                            <button class="btn btn-sm btn-outline-success start-chat-btn"
                                    data-user-id="{{ $student['id'] }}"
                                    data-user-name="{{ $student['username'] }}">
                                <i class="fas fa-comment"></i>
                            </button>
                        </div>
                        @endforeach

                        @if($students->count() > 10)
                        <div class="text-center p-3">
                            <a href="#" class="text-decoration-none" id="viewAllStudents">
                                View all {{ $students->count() }} students
                            </a>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Managers List -->
            <div class="card mb-4">
                <div class="card-header bg-warning text-white">
                    <h6 class="mb-0"><i class="fas fa-user-tie me-2"></i>Managers</h6>
                </div>
                <div class="card-body p-0">
                    <div id="managersList" style="max-height: 200px; overflow-y: auto;">
                        @foreach($managers as $manager)
                        <div class="student-list-item" data-user-id="{{ $manager->id }}">
                            <div class="manager-avatar">
                                {{ substr($manager->username, 0, 1) }}
                            </div>
                            <div class="flex-grow-1">
                                <div class="fw-bold">{{ $manager->username }}</div>
                                <small class="text-muted">LMS Manager</small>
                            </div>
                            <button class="btn btn-sm btn-outline-warning start-chat-btn"
                                    data-user-id="{{ $manager->id }}"
                                    data-user-name="{{ $manager->username }}">
                                <i class="fas fa-comment"></i>
                            </button>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Other Teachers -->
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0"><i class="fas fa-chalkboard-teacher me-2"></i>Colleagues</h6>
                </div>
                <div class="card-body p-0">
                    <div id="teachersList" style="max-height: 200px; overflow-y: auto;">
                        @foreach($all_teachers as $teacher)
                        @if($teacher->id != auth()->id())
                        <div class="student-list-item" data-user-id="{{ $teacher->id }}">
                            <div class="student-avatar" style="background: #2196f3;">
                                {{ substr($teacher->username, 0, 1) }}
                            </div>
                            <div class="flex-grow-1">
                                <div class="fw-bold">{{ $teacher->username }}</div>
                                <small class="text-muted">Teacher</small>
                            </div>
                            <button class="btn btn-sm btn-outline-info start-chat-btn"
                                    data-user-id="{{ $teacher->id }}"
                                    data-user-name="{{ $teacher->username }}">
                                <i class="fas fa-comment"></i>
                            </button>
                        </div>
                        @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </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 bg-primary text-white">
                <h5 class="modal-title"><i class="fas fa-comment-medical me-2"></i>Start New Chat</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="newChatForm">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Chat With:</label>
                            <select class="form-select" id="targetType" required>
                                <option value="">-- Select Recipient --</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">
                            <label class="form-label fw-bold">Conversation Title:</label>
                            <input type="text" class="form-control" id="conversationTitle" placeholder="Optional">
                        </div>
                    </div>

                    <div id="conditionalFields">
                        <!-- Batch Field -->
                        <div class="row mb-3" id="batchField" style="display: none;">
                            <div class="col-12">
                                <label class="form-label fw-bold">Select Batch:</label>
                                <select class="form-select" id="batchSelect">
                                    <option value="">-- Select 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-12">
                                <label class="form-label fw-bold">Select Student:</label>
                                <select class="form-select" id="studentSelect">
                                    <option value="">-- Select Student --</option>
                                </select>
                            </div>
                        </div>

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

                        <!-- Manager Field -->
                        <div class="row mb-3" id="managerField" style="display: none;">
                            <div class="col-12">
                                <label class="form-label fw-bold">Select Manager:</label>
                                <select class="form-select" id="managerSelect">
                                    <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>

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

    // Initialize
    initializeChatSystem();

    function initializeChatSystem() {
        // Initialize Pusher for real-time updates
        initializePusher();

        // Load initial data
        loadConversations();
        loadOnlineTeachers();
        loadWelcomeStats();

        // Setup event listeners
        setupEventListeners();

        // If there's an active conversation, load its messages
        if (currentConversationId) {
            loadMessages(currentConversationId);
            markMessagesAsRead(currentConversationId);
        }
    }

    function initializePusher() {
        // Check if BROADCAST_CONNECTION is set to pusher
        if ('{{ config("broadcasting.default") }}' !== 'pusher') {
            console.log('Pusher not configured, using polling instead');
            startPolling();
            return;
        }

        try {
            // Initialize Pusher with your credentials
            pusher = new Pusher('{{ env("PUSHER_APP_KEY") }}', {
                cluster: '{{ env("PUSHER_APP_CLUSTER", "mt1") }}',
                encrypted: true,
                authEndpoint: '{{ route("pusher.auth") }}',
                auth: {
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                }
            });

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

            // Listen for new messages
            channel.bind('new-message', function(data) {
                if (data.conversation_id === currentConversationId) {
                    // If viewing this conversation, add message and scroll
                    appendMessage(data.message);
                    markMessagesAsRead(currentConversationId);
                } else {
                    // Update conversation list badge
                    updateConversationBadge(data.conversation_id);
                    showNotification(data.message);
                }
                loadWelcomeStats(); // Refresh unread count
            });

            // Listen for typing indicators
            channel.bind('typing', function(data) {
                if (data.conversation_id === currentConversationId && data.user_id !== userId) {
                    showTypingIndicator(data.user_name);
                }
            });

            // Listen for message updates
            channel.bind('message-updated', function(data) {
                if (data.conversation_id === currentConversationId) {
                    updateMessageDisplay(data.message);
                }
            });

            // Listen for message deletions
            channel.bind('message-deleted', function(data) {
                if (data.conversation_id === currentConversationId) {
                    removeMessageDisplay(data.message_id);
                }
            });

            // Listen for conversation updates
            channel.bind('conversation-updated', function(data) {
                loadConversations();
            });

        } catch (error) {
            console.error('Pusher initialization failed:', error);
            startPolling();
        }
    }

    function startPolling() {
        // Poll for new messages every 5 seconds if Pusher is not available
        setInterval(function() {
            if (currentConversationId) {
                checkForNewMessages();
            }
            loadWelcomeStats();
        }, 5000);
    }

    function checkForNewMessages() {
        $.ajax({
            url: '{{ route("chat.messages.list") }}',
            method: 'GET',
            data: { conversation_id: currentConversationId },
            success: function(response) {
                // Check if there are new messages
                if (response.messages && response.messages.length > 0) {
                    // Update messages area
                    updateMessagesDisplay(response.messages);
                }
            }
        });
    }

    function setupEventListeners() {
        // Message form submission
        $('#messageForm').on('submit', function(e) {
            e.preventDefault();
            sendMessage();
        });

        // Start chat buttons
        $('.start-chat-btn').on('click', function() {
            const userId = $(this).data('user-id');
            const userName = $(this).data('user-name');
            startDirectChat(userId, userName);
        });

        // New chat modal form
        $('#targetType').on('change', function() {
            showConditionalFields($(this).val());
        });

        // Batch selection for loading students
        $('#batchSelect').on('change', function() {
            if ($(this).val()) {
                loadStudentsByBatch($(this).val());
            }
        });

        // Start chat button in modal
        $('#startChatBtn').on('click', startNewChat);

        // Refresh chats button
        $('#refreshChatsBtn').on('click', function() {
            loadConversations();
            showToast('Conversations refreshed', 'success');
        });

        // View schedule button
        $('#viewScheduleBtn').on('click', function() {
            // Load schedule details
            loadTeachingSchedule();
        });

        // View info button
        $('#viewInfoBtn').on('click', function() {
            if (currentConversationId) {
                viewConversationInfo(currentConversationId);
            }
        });

        // Mute button
        $('#muteBtn').on('click', function() {
            if (currentConversationId) {
                toggleMuteConversation(currentConversationId);
            }
        });

        // Clear chat button
        $('#clearChatBtn').on('click', function() {
            if (currentConversationId && confirm('Are you sure you want to clear all messages in this chat?')) {
                clearConversation(currentConversationId);
            }
        });

        // Attachment button
        $('#attachmentBtn').on('click', function() {
            $('#fileInput').click();
        });

        // File input change
        $('#fileInput').on('change', function(e) {
            if (this.files.length > 0) {
                uploadAttachment(this.files[0]);
            }
        });

        // Message input typing detection
        $('#messageInput').on('input', function() {
            if (!isTyping) {
                sendTypingIndicator();
                isTyping = true;
            }
            clearTimeout(typingTimeout);
            typingTimeout = setTimeout(function() {
                isTyping = false;
            }, 1000);
        });

        // Search conversations
        $('#conversationSearch').on('keyup', function() {
            searchConversations($(this).val());
        });

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

        // Delete message functionality
        $(document).on('click', '.delete-message-btn', function() {
            const messageId = $(this).data('message-id');
            if (confirm('Are you sure you want to delete this message?')) {
                deleteMessage(messageId);
            }
        });

        // Save edit button
        $('#saveEditBtn').on('click', saveMessageEdit);

        // View all students
        $('#viewAllStudents').on('click', function(e) {
            e.preventDefault();
            loadAllStudents();
        });

        // Conversation click
        $(document).on('click', '.conversation-item', function() {
            const conversationId = $(this).data('conversation-id');
            selectConversation(conversationId);
        });
    }

    function loadConversations() {
        $.ajax({
            url: '{{ route("chat.conversations.list") }}', // CORRECTED: Use chat.conversations.list
            method: 'GET',
            success: function(response) {
                if (response.success && response.conversations) {
                    renderConversationsList(response.conversations);
                } else {
                    $('#conversationsList').html('<div class="text-center py-5 text-muted">No conversations found</div>');
                }
            },
            error: function(xhr) {
                console.error('Failed to load conversations');
                $('#conversationsList').html('<div class="text-center py-5 text-muted">Failed to load conversations</div>');
                showToast('Failed to load conversations', 'error');
            }
        });
    }

    function renderConversationsList(conversations) {
        if (conversations.length === 0) {
            $('#conversationsList').html('<div class="text-center py-5 text-muted">No conversations yet</div>');
            return;
        }

        let html = '';
        conversations.forEach(function(conversation) {
            html += `
            <div class="conversation-item p-3 border-bottom" data-conversation-id="${conversation.id}" style="cursor: pointer;">
                <div class="d-flex justify-content-between align-items-start">
                    <div class="d-flex align-items-center">
                        <div class="me-3">
                            ${conversation.conversation_type === 'direct' ?
                            '<div class="student-avatar" style="width: 40px; height: 40px;">' + (conversation.title ? conversation.title.charAt(0) : 'U') + '</div>' :
                            '<div class="batch-avatar" style="width: 40px; height: 40px;">' + (conversation.title ? conversation.title.charAt(0) : 'G') + '</div>'}
                        </div>
                        <div>
                            <div class="fw-bold">${conversation.title || 'Chat'}</div>
                            ${conversation.last_message ?
                            `<div class="small text-muted">
                                ${conversation.last_message.sender_id == userId ? 'You: ' : ''}${conversation.last_message.message}
                            </div>` : ''}
                        </div>
                    </div>
                    <div class="text-end">
                        ${conversation.last_message ?
                        `<div class="small text-muted">${conversation.last_message.created_at}</div>` : ''}
                        ${conversation.unread_count > 0 ?
                        `<span class="badge bg-danger unread-badge">${conversation.unread_count}</span>` : ''}
                    </div>
                </div>
            </div>`;
        });

        $('#conversationsList').html(html);
    }

    function loadMessages(conversationId) {
        $.ajax({
            url: '{{ route("chat.messages.list") }}', // CORRECTED: Use chat.messages.list
            method: 'GET',
            data: { conversation_id: conversationId },
            success: function(response) {
                if (response.success && response.messages) {
                    renderMessages(response.messages);
                    scrollToBottom();
                    markMessagesAsRead(conversationId);
                } else {
                    $('#messagesArea').html('<div class="text-center py-5 text-muted">No messages yet</div>');
                }
            },
            error: function(xhr) {
                console.error('Failed to load messages');
                $('#messagesArea').html('<div class="text-center py-5 text-muted">Failed to load messages</div>');
            }
        });
    }

    function renderMessages(messages) {
        let html = '';
        messages.forEach(function(message) {
            const isOwn = message.sender_id == userId;
            html += `
            <div class="message-bubble-teacher ${isOwn ? 'sent' : 'received'}" id="message-${message.id}" data-message-id="${message.id}">
                ${!isOwn ? `<div class="message-sender">${message.sender.username} (${message.sender.user_type})</div>` : ''}
                ${isOwn ? `
                <div class="d-flex justify-content-between align-items-start mb-1">
                    <div class="message-sender">You</div>
                    <div class="dropdown">
                        <button class="btn btn-sm btn-link text-muted p-0" type="button"
                                data-bs-toggle="dropdown" style="font-size: 10px;">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item edit-message-btn" href="#"
                                   data-message-id="${message.id}"
                                   data-message-text="${message.message.replace(/"/g, '&quot;')}">
                                    <i class="fas fa-edit me-2"></i>Edit
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item text-danger delete-message-btn" href="#"
                                   data-message-id="${message.id}">
                                    <i class="fas fa-trash me-2"></i>Delete
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                ` : ''}
                <div class="message-content">${message.message}</div>
                ${message.attachment ? `
                <div class="attachment-preview-teacher mt-2">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-paperclip me-2"></i>
                        <a href="${message.attachment_url || '#'}" target="_blank" class="text-decoration-none">
                            ${message.attachment_name || 'Attachment'}
                        </a>
                        ${message.attachment_size ? `<small class="text-muted ms-2">(${message.attachment_size})</small>` : ''}
                    </div>
                </div>
                ` : ''}
                <div class="message-time-teacher">
                    ${message.created_at}
                    ${message.is_edited ? '<span class="message-status"><i class="fas fa-edit"></i></span>' : ''}
                </div>
            </div>`;
        });

        $('#messagesArea').html(html);
    }

    function loadOnlineTeachers() {
        $.ajax({
            url: '{{ route("teacher.online.colleagues") }}', // This should exist in routes
            method: 'GET',
            success: function(response) {
                if (response.teachers && response.teachers.length > 0) {
                    renderOnlineTeachers(response.teachers);
                } else {
                    $('#onlineTeachersList').html('<div class="text-center py-3 text-muted">No online colleagues</div>');
                }
            },
            error: function(xhr) {
                $('#onlineTeachersList').html('<div class="text-center py-3 text-muted">Unable to load online colleagues</div>');
            }
        });
    }

    function renderOnlineTeachers(teachers) {
        let html = '';
        teachers.forEach(function(teacher) {
            html += `
            <div class="online-teacher-item">
                <div class="teacher-avatar" style="width: 30px; height: 30px; font-size: 14px;">
                    ${teacher.username ? teacher.username.charAt(0) : 'T'}
                </div>
                <div class="flex-grow-1">
                    <div class="small fw-bold">${teacher.username || 'Teacher'}</div>
                    <div class="${teacher.is_online ? 'text-success' : 'text-muted'} small">
                        <i class="fas fa-circle"></i> ${teacher.is_online ? 'Online' : 'Offline'}
                    </div>
                </div>
            </div>`;
        });
        $('#onlineTeachersList').html(html);
    }

    function loadWelcomeStats() {
        $.ajax({
            url: '{{ route("teacher.chat.stats") }}', // This should exist in routes
            method: 'GET',
            success: function(response) {
                $('#onlineCount').text(response.online_count || 0);
                $('#unreadCount').text(response.unread_count || 0);
                $('#totalConversations').text(response.total_conversations || 0);
            },
            error: function(xhr) {
                console.error('Failed to load stats');
            }
        });
    }

    function sendMessage() {
        const message = $('#messageInput').val().trim();
        const fileInput = $('#fileInput')[0];
        const attachment = fileInput.files[0];

        if (!message && !attachment) {
            showToast('Please enter a message or attach a file', 'warning');
            return;
        }

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

        if (attachment) {
            formData.append('attachment', attachment);
        }

        $('#sendMessageBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');

        $.ajax({
            url: '{{ route("chat.messages.send") }}', // CORRECTED: Use chat.messages.send
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('#messageInput').val('');
                $('#fileInput').val('');
                if (response.success && response.message) {
                    appendMessage(response.message);
                    scrollToBottom();
                    loadConversations(); // Update conversation list
                } else {
                    showToast('Failed to send message', 'error');
                }
            },
            error: function(xhr) {
                showToast('Failed to send message', 'error');
            },
            complete: function() {
                $('#sendMessageBtn').prop('disabled', false).html('<i class="fas fa-paper-plane"></i>');
            }
        });
    }

    function appendMessage(message) {
        const isOwn = message.sender_id == userId;
        const messageHtml = `
            <div class="message-bubble-teacher ${isOwn ? 'sent' : 'received'}" id="message-${message.id}" data-message-id="${message.id}">
                ${!isOwn ? `<div class="message-sender">${message.sender.username} (${message.sender.user_type})</div>` : ''}
                ${isOwn ? `
                <div class="d-flex justify-content-between align-items-start mb-1">
                    <div class="message-sender">You</div>
                    <div class="dropdown">
                        <button class="btn btn-sm btn-link text-muted p-0" type="button"
                                data-bs-toggle="dropdown" style="font-size: 10px;">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item edit-message-btn" href="#"
                                   data-message-id="${message.id}"
                                   data-message-text="${message.message.replace(/"/g, '&quot;')}">
                                    <i class="fas fa-edit me-2"></i>Edit
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item text-danger delete-message-btn" href="#"
                                   data-message-id="${message.id}">
                                    <i class="fas fa-trash me-2"></i>Delete
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                ` : ''}
                <div class="message-content">${message.message}</div>
                ${message.attachment ? `
                <div class="attachment-preview-teacher mt-2">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-paperclip me-2"></i>
                        <a href="${message.attachment_url || '#'}" target="_blank" class="text-decoration-none">
                            ${message.attachment_name || 'Attachment'}
                        </a>
                        ${message.attachment_size ? `<small class="text-muted ms-2">(${message.attachment_size})</small>` : ''}
                    </div>
                </div>
                ` : ''}
                <div class="message-time-teacher">
                    ${message.created_at}
                    ${message.is_edited ? '<span class="message-status"><i class="fas fa-edit"></i></span>' : ''}
                </div>
            </div>
        `;

        $('#messagesArea').append(messageHtml);
        scrollToBottom();
    }

    // ... rest of the functions remain similar but with corrected routes ...

    function showToast(message, type = 'info') {
        const toast = $(`
            <div class="toast align-items-center text-white bg-${type} border-0" role="alert">
                <div class="d-flex">
                    <div class="toast-body">${message}</div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                </div>
            </div>
        `);

        if (!$('#toastContainer').length) {
            $('body').append('<div id="toastContainer" class="position-fixed top-0 end-0 p-3" style="z-index: 1100"></div>');
        }

        $('#toastContainer').append(toast);
        const bsToast = new bootstrap.Toast(toast[0]);
        bsToast.show();

        toast.on('hidden.bs.toast', function() {
            $(this).remove();
        });
    }

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

    // Initialize Bootstrap tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Handle browser back/forward buttons
    window.onpopstate = function(event) {
        const urlParams = new URLSearchParams(window.location.search);
        const conversationId = urlParams.get('conversation');
        if (conversationId) {
            selectConversation(conversationId);
        } else {
            // Return to welcome screen
            currentConversationId = null;
            window.location.reload();
        }
    };
});
</script>

@emdpush