@extends('layouts.student')

@section('title', 'Chat IA - MentoraMind')

@section('content')
<div class="page-header d-flex justify-content-between align-items-center">
    <div>
        <a href="{{ route('student.chat.history') }}" class="btn btn-sm btn-outline-secondary mb-2">
            <i class="bi bi-arrow-left me-1"></i>{{ __('student.chat.back_to_history') }}
        </a>
        <h1>{{ __('student.chat.history_sample_1_title') }}</h1>
        <p>
            <small class="text-muted">
                <i class="bi bi-clock me-1"></i>{{ __('student.chat.time_2h_ago') }}
                <span class="mx-2">•</span>
                <i class="bi bi-chat me-1"></i>{{ __('student.chat.messages_count', ['count' => 12]) }}
            </small>
        </p>
    </div>
    <a href="{{ route('student.chat.index') }}" class="btn btn-primary">
        <i class="bi bi-plus-circle me-2"></i>{{ __('student.chat.new_chat_button') }}
    </a>
</div>

<div class="chat-container">
    <div class="chat-messages" id="chatMessages">
        <div class="chat-message ai">
            <div class="chat-message-avatar">
                <i class="bi bi-robot"></i>
            </div>
            <div class="chat-message-content">
                {{ __('student.chat.show_message_1') }}
            </div>
        </div>
        <div class="chat-message user">
            <div class="chat-message-avatar">
                <i class="bi bi-person-fill"></i>
            </div>
            <div class="chat-message-content">
                {{ __('student.chat.show_message_2') }}
            </div>
        </div>
        <div class="chat-message ai">
            <div class="chat-message-avatar">
                <i class="bi bi-robot"></i>
            </div>
            <div class="chat-message-content">
                {{ __('student.chat.show_message_3') }}
            </div>
        </div>
        <div class="chat-message user">
            <div class="chat-message-avatar">
                <i class="bi bi-person-fill"></i>
            </div>
            <div class="chat-message-content">
                {{ __('student.chat.show_message_4') }}
            </div>
        </div>
        <div class="chat-message ai">
            <div class="chat-message-avatar">
                <i class="bi bi-robot"></i>
            </div>
            <div class="chat-message-content">
                {!! __('student.chat.show_message_5') !!}
            </div>
        </div>
    </div>
    <div class="chat-input-area">
        <div class="chat-input-group">
            <input type="text" placeholder="{{ __('student.chat.input_placeholder') }}" id="chatInput" disabled>
            <button disabled style="opacity: 0.5; cursor: not-allowed;">
                <i class="bi bi-send-fill"></i>
            </button>
        </div>
        <small class="text-muted d-block text-center mt-2">{{ __('student.chat.archived_chat_note') }}</small>
    </div>
</div>
@endsection