@extends('layouts.app')

@section('title', $course->title . ' - Edunetra')

@section('content')
<!-- Enrollment Success Message -->
@if(session('enrollment_success'))
<section class="bg-success py-3">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <div class="d-flex align-items-center text-white">
                    <i class="bi bi-check-circle-fill fs-3 me-3"></i>
                    <div>
                        <h5 class="mb-1 fw-bold">🎉 Welcome to {{ session('course_title') }}!</h5>
                        <p class="mb-0">You're now enrolled and ready to start learning. Your course is available in "My Courses".</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 text-lg-end">
                <a href="{{ route('my-courses') }}" class="btn btn-light btn-sm">
                    <i class="bi bi-collection me-1"></i>Go to My Courses
                </a>
            </div>
        </div>
    </div>
</section>
@endif

<!-- Course Header -->
<section class="py-5" style="background: linear-gradient(135deg, var(--edunetra-gradient-start) 0%, var(--edunetra-gradient-end) 100%);">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <div class="d-flex align-items-center mb-3">
                    <span class="badge bg-edunetra-dark me-3 px-3 py-2 fw-bold">
                        {{ ucfirst($course->level) }}
                    </span>
                    <span class=" opacity-90">
                        <i class="bi bi-clock me-1"></i> {{ $course->duration_weeks }} weeks
                    </span>
                    <span class=" opacity-90 ms-3">
                        <i class="bi bi-list-ol me-1"></i> {{ $course->sessions->count() }} sessions
                    </span>
                </div>
                <h1 class="display-4 fw-bold mb-3">{{ $course->title }}</h1>
                <p class="fs-5  opacity-90 mb-4">{{ $course->description }}</p>
                <div class="d-flex flex-wrap align-items-center opacity-90 mb-4">
                    <span class="me-4 mb-2">
                        <i class="bi bi-person-circle me-2"></i>{{ $course->teacher->name }}
                    </span>
                    <span class="me-4 mb-2">
                        <i class="bi bi-people me-2"></i>{{ $course->getEnrolledStudentsCount() }} students enrolled
                    </span>
                    <span class="mb-2">
                        <i class="bi bi-calendar me-2"></i>{{ $course->start_date ? $course->start_date->format('M d, Y') : 'Flexible start' }}
                    </span>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card border-0 shadow-lg">
                    <div class="card-body p-4">
                        <div class="text-center mb-4">
                            <h4 class="fw-bold text-edunetra-dark mb-2">Ready to Start Learning?</h4>
                            <p class="text-muted mb-0">Join thousands of students</p>
                        </div>

                        @auth
                            @if($isEnrolled)
                                <div class="text-center">
                                    <div class="alert alert-success d-flex align-items-center mb-3">
                                        <i class="bi bi-check-circle-fill me-2"></i>
                                        <span>You are enrolled in this course</span>
                                    </div>
                                    <div class="mb-4">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <small class="text-muted">Progress</small>
                                            <small class="text-muted">{{ $enrollment->progress }}%</small>
                                        </div>
                                        <div class="progress" style="height: 8px;">
                                            <div class="progress-bar bg-edunetra-yellow" role="progressbar"
                                                 style="width: {{ $enrollment->progress }}%"
                                                 aria-valuenow="{{ $enrollment->progress }}"
                                                 aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                    <a href="#sessions" class="btn btn-edunetra w-100 btn-lg">
                                        <i class="bi bi-play-circle me-2"></i>Continue Learning
                                    </a>
                                    @if(auth()->user()->isTeacher() && $course->teacher_id === auth()->id())
                                        <a href="{{ route('teacher.courses.sessions', $course) }}" class="btn btn-outline-edunetra w-100 mt-2">
                                            <i class="bi bi-gear me-2"></i>Course Management
                                        </a>
                                    @endif
                                    <form action="{{ route('courses.unenroll', $course) }}" method="POST" class="mt-2">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-outline-danger btn-sm w-100"
                                                onclick="return confirm('Are you sure you want to unenroll from this course?')">
                                            <i class="bi bi-x-circle me-1"></i>Unenroll
                                        </button>
                                    </form>
                                </div>
                            @else
                                <form action="{{ route('enrollments.store') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="course_id" value="{{ $course->id }}">
                                    <button type="submit" class="btn btn-edunetra w-100 btn-lg">
                                        <i class="bi bi-plus-circle me-2"></i>Enroll Now
                                    </button>
                                </form>
                            @endif
                        @else
                            <div class="text-center">
                                <a href="{{ route('login') }}" class="btn btn-edunetra w-100 btn-lg">
                                    <i class="bi bi-box-arrow-in-right me-2"></i>Login to Enroll
                                </a>
                                <p class="text-muted mt-3 mb-0">
                                    Don't have an account? <a href="{{ route('register') }}" class="text-edunetra-dark text-decoration-none fw-semibold">Sign up</a>
                                </p>
                            </div>
                        @endauth
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@guest
<!-- Information for Non-Enrolled Users -->
<section class="py-4 bg-light border-bottom">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="alert alert-info border-0 shadow-sm">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-info-circle fs-4 me-3 text-primary"></i>
                        <div>
                            <h6 class="fw-bold mb-1">Ready to Start Learning?</h6>
                            <p class="mb-0 small">Create an account or login to enroll in this course and access all learning materials, track your progress, and earn certificates.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endguest

@auth
@if(!$isEnrolled)
<!-- Information for Logged-in but Non-Enrolled Users -->
<section class="py-4 bg-light border-bottom">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="alert alert-warning border-0 shadow-sm">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-exclamation-triangle fs-4 me-3 text-warning"></i>
                        <div>
                            <h6 class="fw-bold mb-1">Enroll to Access Course Content</h6>
                            <p class="mb-0 small">Click "Enroll Now" above to join this course and start learning. Once enrolled, you can access all sessions and track your progress.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif
@endauth

<!-- Course Content -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row">
            <!-- Main Content -->
            <div class="col-lg-8">
                <!-- Course Description -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <h2 class="h3 fw-bold text-edunetra-dark mb-3">
                            <i class="bi bi-info-circle me-2"></i>About This Course
                        </h2>
                        <div class="text-muted">
                            <p class="mb-3">{{ $course->description }}</p>
                            <p class="mb-0">
                                This comprehensive {{ $course->duration_weeks }}-week program is designed to provide students with
                                a solid foundation in English learning, specifically tailored for young learners with visual impairments.
                                Our innovative teaching methods ensure accessibility while maintaining high educational standards.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Course Sessions -->
                <div id="sessions" class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-bottom">
                        <h2 class="h3 fw-bold text-edunetra-dark mb-0">
                            <i class="bi bi-list-ol me-2"></i>Course Sessions
                        </h2>
                        @if(auth()->check() && auth()->user()->isTeacher() && $course->teacher_id === auth()->id())
                            <div class="mt-2">
                                <a href="{{ route('teacher.courses.sessions', $course) }}" class="btn btn-outline-edunetra btn-sm">
                                    <i class="bi bi-gear me-1"></i>Course Management
                                </a>
                            </div>
                        @endif
                    </div>

                    <!-- Session Navigation Tabs (1-8) -->
                    <div class="card-body p-3 bg-light border-bottom">
                        <div class="row g-2">
                            @for($i = 1; $i <= 8; $i++)
                                @php
                                    $session = $course->sessions->where('session_number', $i)->first();
                                @endphp
                                <div class="col-6 col-md-3 col-lg-2">
                                    @if($session)
                                        @auth
                                            @if($isEnrolled)
                                                <a href="{{ route('courses.session', [$course->slug, $i]) }}"
                                                   class="btn btn-outline-edunetra w-100 session-tab {{ $i === 1 ? 'active' : '' }}"
                                                   data-session="{{ $i }}">
                                                    <div class="d-flex align-items-center justify-content-center">
                                                        <span class="badge bg-edunetra-yellow text-dark me-2">{{ $i }}</span>
                                                        <span class="small">SESI {{ $i }}</span>
                                                    </div>
                                                    @if(method_exists($session, 'isCompleted') && $session->isCompleted(auth()->id()))
                                                        <i class="bi bi-check-circle-fill text-success small"></i>
                                                    @endif
                                                </a>
                                            @else
                                                <button class="btn btn-outline-secondary w-100" disabled>
                                                    <div class="d-flex align-items-center justify-content-center">
                                                        <span class="badge bg-secondary me-2">{{ $i }}</span>
                                                        <span class="small">SESI {{ $i }}</span>
                                                    </div>
                                                    <small class="text-muted d-block">Enroll Required</small>
                                                </button>
                                            @endif
                                        @else
                                            <button class="btn btn-outline-secondary w-100" disabled>
                                                <div class="d-flex align-items-center justify-content-center">
                                                    <span class="badge bg-secondary me-2">{{ $i }}</span>
                                                    <span class="small">SESI {{ $i }}</span>
                                                </div>
                                                <small class="text-muted d-block">Login Required</small>
                                            </button>
                                        @endauth
                                    @else
                                        <button class="btn btn-outline-secondary w-100" disabled>
                                            <div class="d-flex align-items-center justify-content-center">
                                                <span class="badge bg-secondary me-2">{{ $i }}</span>
                                                <span class="small">SESI {{ $i }}</span>
                                            </div>
                                            <small class="text-muted d-block">Coming Soon</small>
                                        </button>
                                    @endif
                                </div>
                            @endfor
                        </div>
                    </div>

                    <!-- Session Content -->
                    <div class="card-body p-0">
                        @for($i = 1; $i <= 8; $i++)
                            @php
                                $session = $course->sessions->where('session_number', $i)->first();
                            @endphp
                            <div class="session-content p-4 {{ $i !== 1 ? 'd-none' : '' }}" id="session-{{ $i }}">
                                @if($session)
                                    <div class="row align-items-center">
                                        <div class="col-lg-8">
                                            <div class="d-flex align-items-start">
                                                <div class="me-3">
                                                    <span class="badge bg-edunetra-yellow text-dark rounded-circle" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;">
                                                        {{ $session->session_number }}
                                                    </span>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h4 class="fw-bold mb-2">{{ $session->title }}</h4>
                                                    <p class="text-muted mb-3">{{ $session->description }}</p>
                                                    <div class="d-flex align-items-center text-sm mb-3">
                                                        <span class="text-muted me-4">
                                                            <i class="bi bi-clock me-1"></i>{{ $session->duration_minutes }} minutes
                                                        </span>
                                                        @if($isEnrolled && $session->isCompleted(auth()->id()))
                                                            <span class="badge bg-success">
                                                                <i class="bi bi-check-circle me-1"></i>Completed
                                                            </span>
                                                        @endif
                                                    </div>
                                                    @if($session->content)
                                                        <div class="bg-light p-3 rounded">
                                                            <h6 class="fw-bold mb-2">Session Overview:</h6>
                                                            <p class="mb-0 small">{{ Str::limit($session->content, 200) }}</p>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                                            @auth
                                                @if($isEnrolled)
                                                    <div class="d-grid gap-2">
                                                        <a href="{{ route('courses.session', [$course->slug, $session->session_number]) }}" class="btn btn-edunetra">
                                                            @if(method_exists($session, 'isCompleted') && $session->isCompleted(auth()->id()))
                                                                <i class="bi bi-arrow-clockwise me-1"></i>Review Session
                                                            @else
                                                                <i class="bi bi-play-circle me-1"></i>Start Session
                                                            @endif
                                                        </a>
                                                        @if($session->materials && count($session->materials) > 0)
                                                            <small class="text-muted text-center">
                                                                <i class="bi bi-file-earmark me-1"></i>{{ count($session->materials) }} materials available
                                                            </small>
                                                        @endif
                                                    </div>
                                                @else
                                                    <div class="text-center">
                                                        <button class="btn btn-outline-secondary w-100" disabled>
                                                            <i class="bi bi-lock me-1"></i>Enroll to Access
                                                        </button>
                                                    </div>
                                                @endif
                                            @else
                                                <div class="text-center">
                                                    <button class="btn btn-outline-secondary w-100" disabled>
                                                        <i class="bi bi-person-plus me-1"></i>Login Required
                                                    </button>
                                                </div>
                                            @endauth
                                        </div>
                                    </div>
                                @else
                                    <div class="text-center py-4">
                                        <i class="bi bi-hourglass-split fs-1 text-muted mb-3"></i>
                                        <h5 class="fw-bold text-muted">Session {{ $i }} - Coming Soon</h5>
                                        <p class="text-muted mb-0">This session is being prepared and will be available soon.</p>
                                    </div>
                                @endif
                            </div>
                        @endfor
                    </div>
                </div>

                <!-- Instructor -->
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <h2 class="h3 fw-bold text-edunetra-dark mb-3">
                            <i class="bi bi-person-circle me-2"></i>Your Instructor
                        </h2>
                        <div class="d-flex align-items-start">
                            <div class="me-3">
                                <div class="bg-edunetra-yellow rounded-circle d-flex align-items-center justify-content-center"
                                     style="width: 60px; height: 60px;">
                                    <span class="text-dark fw-bold fs-4">{{ substr($course->teacher->name, 0, 1) }}</span>
                                </div>
                            </div>
                            <div>
                                <h4 class="fw-bold mb-2">{{ $course->teacher->name }}</h4>
                                <p class="text-muted mb-0">{{ $course->teacher->bio ?? 'Experienced educator specializing in inclusive learning and accessible education for students with visual impairments.' }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Course Info -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <h3 class="h5 fw-bold text-edunetra-dark mb-3">
                            <i class="bi bi-info-square me-2"></i>Course Information
                        </h3>
                        <div class="row g-3">
                            <div class="col-6">
                                <div class="text-center p-3 bg-light rounded">
                                    <i class="bi bi-clock text-edunetra-dark fs-4 mb-2"></i>
                                    <div class="fw-bold">{{ $course->duration_weeks }}</div>
                                    <small class="text-muted">Weeks</small>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center p-3 bg-light rounded">
                                    <i class="bi bi-list-ol text-edunetra-dark fs-4 mb-2"></i>
                                    <div class="fw-bold">{{ $course->sessions->count() }}</div>
                                    <small class="text-muted">Sessions</small>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center p-3 bg-light rounded">
                                    <i class="bi bi-bar-chart text-edunetra-dark fs-4 mb-2"></i>
                                    <div class="fw-bold">{{ ucfirst($course->level) }}</div>
                                    <small class="text-muted">Level</small>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center p-3 bg-light rounded">
                                    <i class="bi bi-people text-edunetra-dark fs-4 mb-2"></i>
                                    <div class="fw-bold">{{ $course->getEnrolledStudentsCount() }}</div>
                                    <small class="text-muted">Students</small>
                                </div>
                            </div>
                        </div>
                        @if($course->start_date)
                            <div class="mt-3 p-3 bg-light rounded text-center">
                                <i class="bi bi-calendar text-edunetra-dark fs-5 mb-2"></i>
                                <div class="fw-bold">{{ $course->start_date->format('M d, Y') }}</div>
                                <small class="text-muted">Start Date</small>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Tags -->
                @if($course->tags)
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body p-4">
                            <h3 class="h5 fw-bold text-edunetra-dark mb-3">
                                <i class="bi bi-tags me-2"></i>Tags
                            </h3>
                            <div class="d-flex flex-wrap gap-2">
                                @foreach($course->tags as $tag)
                                    <span class="badge bg-edunetra-yellow text-dark px-3 py-2">{{ $tag }}</span>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Quick Actions -->
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <h3 class="h5 fw-bold text-edunetra-dark mb-3">
                            <i class="bi bi-lightning me-2"></i>Quick Actions
                        </h3>
                        <div class="d-grid gap-2">
                            @auth
                                @if($isEnrolled)
                                    <a href="{{ route('my-courses') }}" class="btn btn-outline-edunetra btn-sm">
                                        <i class="bi bi-collection me-1"></i>My Courses
                                    </a>
                                    <a href="{{ route('courses.progress', $course) }}" class="btn btn-outline-edunetra btn-sm">
                                        <i class="bi bi-graph-up me-1"></i>View Progress
                                    </a>
                                @else
                                    <a href="{{ route('courses.public') }}" class="btn btn-outline-edunetra btn-sm">
                                        <i class="bi bi-grid me-1"></i>Browse Courses
                                    </a>
                                @endif
                            @else
                                <a href="{{ route('courses.public') }}" class="btn btn-outline-edunetra btn-sm">
                                    <i class="bi bi-grid me-1"></i>Browse Courses
                                </a>
                                <a href="{{ route('register') }}" class="btn btn-outline-edunetra btn-sm">
                                    <i class="bi bi-person-plus me-1"></i>Create Account
                                </a>
                            @endauth
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
function showSession(sessionNumber) {
    // Hide all session contents
    document.querySelectorAll('.session-content').forEach(content => {
        content.classList.add('d-none');
    });

    // Remove active class from all tabs
    document.querySelectorAll('.session-tab').forEach(tab => {
        tab.classList.remove('active');
        tab.classList.add('btn-outline-edunetra');
        tab.classList.remove('btn-edunetra');
    });

    // Show selected session content
    const selectedContent = document.getElementById('session-' + sessionNumber);
    if (selectedContent) {
        selectedContent.classList.remove('d-none');
    }

    // Add active class to selected tab
    const selectedTab = document.querySelector('[data-session="' + sessionNumber + '"]');
    if (selectedTab) {
        selectedTab.classList.add('active');
        selectedTab.classList.remove('btn-outline-edunetra');
        selectedTab.classList.add('btn-edunetra');
    }
}

// Initialize first session as active on page load
document.addEventListener('DOMContentLoaded', function() {
    showSession(1);
});
</script>
@endsection