@extends('layouts.app')

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

@push('styles')
<style>
/* Student-specific styles */
.student-chat-container {
    background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    color: white;
}

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

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

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

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

.manager-avatar-student {
    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;
}

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

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

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

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

.message-container-student {
    border-left: 3px solid #4CAF50;
    background: #f8f9fa;
    border-radius: 0 10px 10px 0;
    padding: 15px;
}

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

.class-schedule-card .time {
    color: #4CAF50;
    font-weight: 600;
    font-size: 14px;
}

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

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

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

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

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

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

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

.schedule-time-student {
    font-weight: 600;
    color: #4CAF50;
    font-size: 14px;
}

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

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

.chat-header-student {
    background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
    color: white;
    padding: 15px;
    border-radius: 10px 10px 0 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.welcome-section-student {
    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-student {
    font-size: 48px;
    color: #4CAF50;
    margin-bottom: 20px;
}

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

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

.stat-value-student {
    font-size: 24px;
    font-weight: bold;
    color: #4CAF50;
    margin-bottom: 5px;
}

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

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

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

.assignment-item {
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #f8f9fa;
    transition: background 0.2s;
}

.assignment-item:hover {
    background: #e9ecef;
}

.assignment-subject {
    font-weight: 600;
    color: #2196F3;
}

.assignment-deadline {
    font-size: 12px;
    color: #666;
}

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

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

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

@section('content')
<div class="container-fluid py-3">
    <!-- Student Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="student-chat-container">
                <div class="row align-items-center">
                    <div class="col-md-2 text-center">
                        <div class="student-avatar">
                            <i class="fas fa-user-graduate"></i>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <h3 class="mb-2">Welcome, {{ auth()->user()->username }}!</h3>
                        <p class="mb-0">Student Chat Panel - Communicate with teachers, classmates, and managers</p>
                        <div class="mt-2">
                            @if(isset($batches) && $batches->count() > 0)
                                <span class="badge bg-white text-primary me-2">{{ $batches->count() }} Classes</span>
                            @endif
                            <span class="badge bg-white text-success me-2">{{ $teachers->count() ?? 0 }} Teachers</span>
                            <span class="badge bg-white text-warning">{{ $managers->count() ?? 0 }} 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: Student Info and Quick Actions -->
        <div class="col-lg-3">
            <!-- Quick Actions -->
            <div class="card mb-4">
                <div class="card-header bg-success text-white">
                    <h6 class="mb-0"><i class="fas fa-bolt me-2"></i>Quick Actions</h6>
                </div>
                <div class="card-body">
                    <div class="student-quick-actions">
                        <button class="btn btn-outline-success" 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-primary" id="refreshChatsBtn">
                            <i class="fas fa-sync-alt"></i>
                            <span>Refresh</span>
                        </button>
                        <button class="btn btn-outline-info" id="viewAssignmentsBtn">
                            <i class="fas fa-tasks"></i>
                            <span>Assignments</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Class Schedule -->
            <div class="card mb-4 schedule-card-student">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="fas fa-clock me-2 text-success"></i>Today's Classes</h6>
                </div>
                <div class="card-body">
                    <div class="schedule-details-student">
                        <div class="schedule-time-student">09:00 AM - 10:00 AM</div>
                        <div class="fw-bold">Mathematics</div>
                        <div class="small text-muted">Room 101 - Mr. Smith</div>
                    </div>
                    <div class="schedule-details-student">
                        <div class="schedule-time-student">11:00 AM - 12:00 PM</div>
                        <div class="fw-bold">Physics</div>
                        <div class="small text-muted">Lab 3 - Dr. Johnson</div>
                    </div>
                    <div class="schedule-details-student">
                        <div class="schedule-time-student">02:00 PM - 03:00 PM</div>
                        <div class="fw-bold">Chemistry</div>
                        <div class="small text-muted">Room 205 - Ms. Davis</div>
                    </div>
                </div>
            </div>

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

            <!-- Upcoming Assignments -->
            <div class="card upcoming-assignments">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="fas fa-tasks me-2 text-warning"></i>Upcoming Assignments</h6>
                </div>
                <div class="card-body">
                    <div class="assignment-item">
                        <div class="assignment-subject">Mathematics</div>
                        <div class="assignment-deadline">Due: Tomorrow</div>
                    </div>
                    <div class="assignment-item">
                        <div class="assignment-subject">Physics Lab</div>
                        <div class="assignment-deadline">Due: 2 days</div>
                    </div>
                    <div class="text-center pt-2">
                        <a href="#" class="text-decoration-none small">View all assignments</a>
                    </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-success"></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-success" 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-success" 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-student">
                    <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')
                                    @if($conversation->participants->firstWhere('user.user_type', 'teacher'))
                                    <div class="teacher-avatar" id="participantAvatar">
                                        {{ substr($conversation->title ?? 'T', 0, 1) }}
                                    </div>
                                    @elseif($conversation->participants->firstWhere('user.user_type', 'student'))
                                    <div class="student-avatar" id="participantAvatar" style="width: 40px; height: 40px;">
                                        {{ substr($conversation->title ?? 'S', 0, 1) }}
                                    </div>
                                    @else
                                    <div class="manager-avatar-student" id="participantAvatar">
                                        {{ substr($conversation->title ?? 'M', 0, 1) }}
                                    </div>
                                    @endif
                                @else
                                    <div class="batch-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')
                                                @if($conversation->participants->firstWhere('user.user_type', 'teacher'))
                                                    Teacher
                                                @elseif($conversation->participants->firstWhere('user.user_type', 'student'))
                                                    Classmate
                                                @else
                                                    Manager
                                                @endif
                                            @elseif($conversation->conversation_type === 'batch')
                                                Class Group
                                            @else
                                                Group
                                            @endif
                                        </span>
                                    </small>
                                    <span class="chat-role-badge-student" 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-success" 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">Teacher is typing...</small>
                    </div>
                </div>

                <!-- Message Input -->
                <div class="input-container-student">
                    <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-success" id="attachmentBtn">
                                    <i class="fas fa-paperclip"></i>
                                </button>
                                <input type="file" id="fileInput" style="display: none;">
                                <button type="submit" class="btn btn-success" id="sendMessageBtn">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                @else
                <!-- Welcome Screen -->
                <div class="welcome-section-student">
                    <div class="welcome-icon-student">
                        <i class="fas fa-comments"></i>
                    </div>
                    <h4 class="mb-3">Student Chat Center</h4>
                    <p class="text-muted mb-4">Connect with your teachers, classmates, and managers for academic support</p>

                    <div class="row g-3 mb-4">
                        <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-chalkboard-teacher me-2"></i>Chat with Teacher
                            </button>
                        </div>
                        <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 Classmate
                            </button>
                        </div>
                        <div class="col-md-4">
                            <button class="btn btn-warning 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>

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

        <!-- Right Column: Teachers and Classmates -->
        <div class="col-lg-3">
            <!-- Teachers List -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0"><i class="fas fa-chalkboard-teacher me-2"></i>My Teachers</h6>
                </div>
                <div class="card-body p-0">
                    <div id="teachersList" style="max-height: 300px; overflow-y: auto;">
                        @foreach($teachers as $teacher)
                        <div class="teacher-list-item" data-user-id="{{ $teacher['id'] }}">
                            <div class="teacher-avatar">
                                {{ substr($teacher['username'], 0, 1) }}
                            </div>
                            <div class="flex-grow-1">
                                <div class="fw-bold">{{ $teacher['username'] }}</div>
                                <small class="text-muted">
                                    @foreach($batches as $batch)
                                        @if(in_array($teacher['id'], $batch->teachers->pluck('user_id')->toArray()))
                                            {{ $batch->name }}
                                        @endif
                                    @endforeach
                                </small>
                            </div>
                            <button class="btn btn-sm btn-outline-primary start-chat-btn"
                                    data-user-id="{{ $teacher['id'] }}"
                                    data-user-name="{{ $teacher['username'] }}">
                                <i class="fas fa-comment"></i>
                            </button>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Classmates List -->
            <div class="card mb-4">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0"><i class="fas fa-user-graduate me-2"></i>Classmates</h6>
                </div>
                <div class="card-body p-0">
                    <div id="classmatesList" style="max-height: 200px; overflow-y: auto;">
                        <!-- Will be loaded via AJAX -->
                        <div class="text-center py-3">
                            <div class="spinner-border spinner-border-sm text-info" role="status">
                                <span class="visually-hidden">Loading classmates...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Managers List -->
            <div class="card">
                <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="teacher-list-item" data-user-id="{{ $manager->id }}">
                            <div class="manager-avatar-student">
                                {{ 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>
        </div>
    </div>
</div>

<!-- New Chat Modal for Student -->
<div class="modal fade" id="newChatModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success 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="teacher">Teacher</option>
                                <option value="classmate">Classmate</option>
                                <option value="manager">Manager</option>
                                <option value="class_group">Class Group</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">
                        <!-- 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($teachers as $teacher)
                                    <option value="{{ $teacher['id'] }}">{{ $teacher['username'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <!-- Classmate Field -->
                        <div class="row mb-3" id="classmateField" style="display: none;">
                            <div class="col-12">
                                <label class="form-label fw-bold">Select Classmate:</label>
                                <select class="form-select" id="classmateSelect">
                                    <option value="">-- Select Classmate --</option>
                                    <!-- Will be populated via AJAX -->
                                </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>

                        <!-- Class Group Field -->
                        <div class="row mb-3" id="classGroupField" style="display: none;">
                            <div class="col-12">
                                <label class="form-label fw-bold">Select Class:</label>
                                <select class="form-select" id="classGroupSelect">
                                    <option value="">-- Select Class --</option>
                                    @foreach($batches as $batch)
                                    <option value="{{ $batch->id }}">{{ $batch->name }}</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-success" 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();
                        loadOnlineClassmates();
                        loadClassmates();
                        loadWelcomeStats();

                        // Setup event listeners
                        setupEventListeners();

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

                    function initializePusher() {
                        // Initialize Pusher with your credentials
                        pusher = new Pusher('{{ config("services.pusher.key") }}', {
                            cluster: '{{ config("services.pusher.cluster") }}',
                            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);
                            }
                        });
                    }

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

                        // Load classmates when class group is selected
                        $('#classGroupSelect').on('change', function() {
                            if ($(this).val() && $('#targetType').val() === 'classmate') {
                                loadClassmatesByBatch($(this).val());
                            }
                        });

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

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

                        // View assignments button
                        $('#viewAssignmentsBtn').on('click', function() {
                            loadAssignments();
                        });

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

                    function loadConversations() {
                        $.ajax({
                            url: '{{ route("student.conversations.list") }}',
                            method: 'GET',
                            success: function(response) {
                                $('#conversationsList').html(response.html);
                            },
                            error: function(xhr) {
                                console.error('Failed to load conversations');
                                showToast('Failed to load conversations', 'error');
                            }
                        });
                    }

                    function loadMessages(conversationId) {
                        $.ajax({
                            url: '{{ route("messages.list") }}',
                            method: 'GET',
                            data: { conversation_id: conversationId },
                            success: function(response) {
                                $('#messagesArea').html(response.html);
                                scrollToBottom();
                                markMessagesAsRead(conversationId);
                            },
                            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 loadOnlineClassmates() {
                        $.ajax({
                            url: '{{ route("student.online.classmates") }}',
                            method: 'GET',
                            success: function(response) {
                                $('#onlineClassmatesList').html(response.html);
                            },
                            error: function(xhr) {
                                $('#onlineClassmatesList').html('<div class="text-center py-3 text-muted">Unable to load online classmates</div>');
                            }
                        });
                    }

                    function loadClassmates() {
                        $.ajax({
                            url: '{{ route("student.classmates") }}',
                            method: 'GET',
                            success: function(response) {
                                $('#classmatesList').html(response.html);
                            },
                            error: function(xhr) {
                                $('#classmatesList').html('<div class="text-center py-3 text-muted">Unable to load classmates</div>');
                            }
                        });
                    }

                    function loadClassmatesByBatch(batchId) {
                        $.ajax({
                            url: '{{ route("student.batch.classmates") }}',
                            method: 'GET',
                            data: { batch_id: batchId },
                            success: function(response) {
                                let options = '<option value="">-- Select Classmate --</option>';
                                response.classmates.forEach(function(classmate) {
                                    options += `<option value="${classmate.id}">${classmate.username}</option>`;
                                });
                                $('#classmateSelect').html(options);
                            },
                            error: function(xhr) {
                                showToast('Failed to load classmates', 'error');
                            }
                        });
                    }

                    function loadWelcomeStats() {
                        $.ajax({
                            url: '{{ route("student.chat.stats") }}',
                            method: 'GET',
                            success: function(response) {
                                $('#onlineCount').text(response.online_count || 0);
                                $('#unreadCount').text(response.unread_count || 0);
                                $('#activeTeachers').text(response.active_teachers || 0);
                            }
                        });
                    }

                    function loadAssignments() {
                        $.ajax({
                            url: '{{ route("student.assignments") }}',
                            method: 'GET',
                            success: function(response) {
                                // Show assignments in modal or side panel
                                alert('Assignments loaded: ' + response.assignments.length);
                            }
                        });
                    }

                    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("messages.send") }}',
                            method: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                $('#messageInput').val('');
                                $('#fileInput').val('');
                                appendMessage(response.message);
                                scrollToBottom();
                                loadConversations(); // Update conversation list
                            },
                            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 messageHtml = `
                            <div class="message-bubble-student ${message.is_own ? 'sent' : 'received'}" id="message-${message.id}" data-message-id="${message.id}">
                                ${message.is_own ? `
                                <div class="d-flex justify-content-between align-items-start mb-1">
                                    <div class="message-sender-student">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-sender-student">${message.sender.username} (${message.sender.user_type})</div>
                                `}
                                <div class="message-content">${message.message}</div>
                                ${message.attachment ? `
                                <div class="attachment-preview-student 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}
                                        </a>
                                        <small class="text-muted ms-2">(${message.attachment_size})</small>
                                    </div>
                                </div>
                                ` : ''}
                                <div class="message-time-student">
                                    ${message.created_at}
                                    ${message.is_edited ? '<span class="message-status-student"><i class="fas fa-edit"></i></span>' : ''}
                                </div>
                            </div>
                        `;

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

                    function startDirectChat(userId, userName) {
                        $.ajax({
                            url: '{{ route("conversations.start") }}',
                            method: 'POST',
                            data: {
                                user_id: userId,
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                window.location.href = '{{ route("student.chat") }}?conversation=' + response.conversation_id;
                            },
                            error: function(xhr) {
                                showToast('Failed to start chat', 'error');
                            }
                        });
                    }

                    function startNewChat() {
                        const targetType = $('#targetType').val();
                        const title = $('#conversationTitle').val();

                        if (!targetType) {
                            showToast('Please select recipient type', 'warning');
                            return;
                        }

                        let data = {
                            title: title,
                            target_type: targetType,
                            _token: '{{ csrf_token() }}'
                        };

                        switch(targetType) {
                            case 'teacher':
                                const teacherId = $('#teacherSelect').val();
                                if (!teacherId) {
                                    showToast('Please select a teacher', 'warning');
                                    return;
                                }
                                data.teacher_id = teacherId;
                                break;

                            case 'classmate':
                                const classmateId = $('#classmateSelect').val();
                                if (!classmateId) {
                                    showToast('Please select a classmate', 'warning');
                                    return;
                                }
                                data.user_id = classmateId;
                                break;

                            case 'manager':
                                const managerId = $('#managerSelect').val();
                                if (!managerId) {
                                    showToast('Please select a manager', 'warning');
                                    return;
                                }
                                data.manager_id = managerId;
                                break;

                            case 'class_group':
                                const batchId = $('#classGroupSelect').val();
                                if (!batchId) {
                                    showToast('Please select a class', 'warning');
                                    return;
                                }
                                data.batch_id = batchId;
                                break;
                        }

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

                        $.ajax({
                            url: '{{ route("student.conversations.create") }}',
                            method: 'POST',
                            data: data,
                            success: function(response) {
                                $('#newChatModal').modal('hide');
                                window.location.href = '{{ route("student.chat") }}?conversation=' + response.conversation_id;
                            },
                            error: function(xhr) {
                                showToast('Failed to create conversation', 'error');
                                $('#startChatBtn').prop('disabled', false).html('Start Chat');
                            }
                        });
                    }

                    function showConditionalFields(targetType) {
                        // Hide all fields first
                        $('#teacherField, #classmateField, #managerField, #classGroupField').hide();

                        // Show relevant fields
                        switch(targetType) {
                            case 'teacher':
                                $('#teacherField').show();
                                break;
                            case 'classmate':
                                $('#classmateField').show();
                                $('#classGroupField').show();
                                break;
                            case 'manager':
                                $('#managerField').show();
                                break;
                            case 'class_group':
                                $('#classGroupField').show();
                                break;
                        }
                    }

                    function showTypingIndicator(userName) {
                        $('#typingText').text(`${userName} is typing...`);
                        $('#typingIndicator').show();

                        setTimeout(() => {
                            $('#typingIndicator').hide();
                        }, 3000);
                    }

                    // ... (rest of the JavaScript functions from teacher panel, adapted for student)
                    // Functions like: uploadAttachment, openEditMessageModal, saveMessageEdit,
                    // deleteMessage, updateMessageDisplay, removeMessageDisplay, updateConversationBadge,
                    // viewConversationInfo, toggleMuteConversation, clearConversation, searchConversations,
                    // showNotification, showToast, scrollToBottom, formatTime, formatFileSize
                    // These would be similar to the teacher panel but with student-specific URLs and messages

                    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>
                        `);

                        $('#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);
                    }

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

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