@extends('layouts.app')

@section('title', 'Primary Learning Tutor')

@section('content')
<div class="container">
    <!-- Header -->
    <header class="header">
        <div class="header-content">
            <h1>📚 Primary Learning Tutor</h1>
            <p class="subtitle">Your friendly AI tutor for learning</p>
            <div class="header-actions mt-3">
                <a href="{{ route('blogs.index') }}" class="btn btn-primary btn-lg me-2">
                    📝 View Blogs
                </a>
                <a href="{{ route('videos.index') }}" class="btn btn-primary btn-lg me-2">
                    📺 Watch Videos
                </a>
                <a href="{{ route('faqs.index') }}" class="btn btn-primary btn-lg me-2">
                    ❓ FAQs
                </a>
                <a href="{{ route('compare') }}" class="btn btn-outline-primary btn-lg">
                    ⚖️ Compare
                </a>
            </div>
        </div>
    </header>

    <!-- Quick Access Section -->
    <section class="quick-access-section mb-4">
        <div class="row g-3">
            <div class="col-md-3">
                <a href="{{ route('blogs.index') }}" class="quick-access-card">
                    <div class="quick-access-icon">📝</div>
                    <h4>Read Blogs</h4>
                    <p>Discover helpful articles, tips, and learning guides</p>
                    <span class="quick-access-link">Explore Blogs →</span>
                </a>
            </div>
            <div class="col-md-3">
                <a href="{{ route('videos.index') }}" class="quick-access-card">
                    <div class="quick-access-icon">📺</div>
                    <h4>Watch Videos</h4>
                    <p>Learn through interactive videos and lessons</p>
                    <span class="quick-access-link">Browse Videos →</span>
                </a>
            </div>
            <div class="col-md-3">
                <a href="{{ route('faqs.index') }}" class="quick-access-card">
                    <div class="quick-access-icon">❓</div>
                    <h4>FAQs</h4>
                    <p>Find answers to frequently asked questions</p>
                    <span class="quick-access-link">View FAQs →</span>
                </a>
            </div>
            <div class="col-md-3">
                <div class="quick-access-card" style="cursor: default;">
                    <div class="quick-access-icon">💬</div>
                    <h4>Chat with Tutor</h4>
                    <p>Get instant help from your AI tutor below</p>
                    <span class="quick-access-link">Scroll Down ↓</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Upload Section -->
    <section class="upload-section">
        <div class="upload-card">
            <div class="upload-icon">📄</div>
            <h3>Upload Learning Material</h3>
            <p class="upload-hint">Upload PDF, DOCX, TXT, or image files to get started</p>
            
            <div class="file-upload-area" id="fileUploadArea">
                <input type="file" id="fileInput" accept=".pdf,.docx,.doc,.txt,.xlsx,.csv,.png,.jpg,.jpeg" hidden>
                <div class="upload-placeholder">
                    <div class="upload-icon-large">📤</div>
                    <p>Click to browse or drag and drop your file here</p>
                    <span class="file-types">PDF, DOCX, DOC, TXT, XLSX, CSV, PNG, JPG, JPEG</span>
                </div>
            </div>
            
            <div id="fileInfo" class="file-info hidden"></div>
            <button id="uploadBtn" class="btn btn-primary" onclick="uploadFile()" disabled>
                <span class="btn-text">Upload File</span>
                <span class="btn-loader hidden"></span>
            </button>
            <div id="uploadStatus" class="status-message"></div>
        </div>
    </section>

    <!-- Chat Section -->
    <section class="chat-section">
        <div class="chat-container">
            <div class="chat-header">
                <h3>💬 Chat with Your Tutor</h3>
                <button class="btn-icon" id="clearChatBtn" onclick="clearChat()" title="Clear chat">
                    🗑️
                </button>
            </div>
            
            <div class="chat-messages" id="chatBox">
                <div class="welcome-message">
                    <div class="welcome-icon">👋</div>
                    <h4>Welcome!</h4>
                    <p>Upload a file first, then ask me any questions about it. I'm here to help you learn!</p>
                </div>
            </div>
            
            <div class="chat-input-container">
                <div class="input-wrapper">
                    <input 
                        type="text" 
                        id="questionInput" 
                        placeholder="Ask your question here..." 
                        onkeypress="handleKeyPress(event)"
                        disabled
                    >
                    <button id="askBtn" class="btn btn-send" onclick="askQuestion()" disabled>
                        <span class="btn-text">Send</span>
                        <span class="btn-loader hidden"></span>
                    </button>
                </div>
                <div id="questionStatus" class="status-message"></div>
            </div>
        </div>
    </section>
</div>

@push('styles')
<style>
.quick-access-section {
    margin: 30px 0;
}

.quick-access-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 30px;
    text-align: center;
    text-decoration: none;
    color: var(--text-primary);
    display: block;
    transition: all 0.3s ease;
    box-shadow: var(--shadow);
    height: 100%;
    border: 2px solid transparent;
}

.quick-access-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
    text-decoration: none;
    color: var(--text-primary);
}

.quick-access-icon {
    font-size: 3.5rem;
    margin-bottom: 15px;
}

.quick-access-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.quick-access-card p {
    color: var(--text-secondary);
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.quick-access-link {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-block;
    transition: transform 0.2s ease;
}

.quick-access-card:hover .quick-access-link {
    transform: translateX(5px);
}

.header-actions .btn-lg {
    padding: 14px 28px;
    font-size: 1.1rem;
    font-weight: 600;
}

@media (max-width: 768px) {
    .quick-access-section .row {
        margin: 0;
    }
    
    .quick-access-section .col-md-3 {
        margin-bottom: 15px;
    }
    
    .header-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .header-actions .btn {
        width: 100%;
        margin: 0 !important;
    }
}

@media (max-width: 576px) {
    .quick-access-card {
        padding: 20px 15px;
    }
    
    .quick-access-icon {
        font-size: 2.5rem;
    }
    
    .quick-access-card h4 {
        font-size: 1.1rem;
    }
}
</style>
@endpush

@push('scripts')
<script src="{{ asset('js/chat.js') }}"></script>
@endpush
@endsection