@extends('public.layout.app')
@section('title', $course->title)

@section('body')
<section class="pt-5">
    <div class="container">
        @include('public.portals.student.partials.nav')

        <!-- Course Header -->
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-body p-4">
                <div class="row align-items-center">
                    <div class="col-lg-8 mb-4 mb-lg-0">
                        <div class="d-flex align-items-start">
                            <div class="flex-shrink-0">
                                <div class="bg-primary bg-opacity-10 rounded-3 p-3">
                                    <i class="fas fa-graduation-cap fa-2x text-primary"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-4">
                                <h2 class="fw-bold mb-2">{{ $course->title }}</h2>
                                <div class="d-flex flex-wrap gap-3 mb-3">
                                    <span class="badge bg-secondary">
                                        <i class="fas fa-code me-1"></i> {{ $course->code }}
                                    </span>
                                    <span class="badge bg-success">
                                        <i class="fas fa-clock me-1"></i> {{ $course->credit_hours }} Credits
                                    </span>
                                    @if($course->semester)
                                    <span class="badge bg-info">
                                        <i class="fas fa-calendar-alt me-1"></i> {{ $course->semester->name ?? 'Semester ' . $course->semester_id }}
                                    </span>
                                    @endif
                                </div>
                                <p class="text-muted mb-0">
                                    <i class="fas fa-user-check me-2"></i>
                                    {{ __('front.enrollment_status') }}
                                    <span class="fw-bold text-capitalize">{{ $enrollment->status }}</span> |
                                    Enrolled on {{ $enrollment->enrolled_at->format('F d, Y') }}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 text-lg-end">
                        <a href="{{ route('student.courses.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i> {{ __('front.back_to_courses') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Stats -->
        <div class="row g-3 mb-4">
            <div class="col-md-4">
                <div class="card border-0 bg-primary bg-opacity-10">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="bg-primary bg-opacity-25 rounded-circle p-3 me-3">
                                <i class="fas fa-book fa-2x text-primary"></i>
                            </div>
                            <div>
                                <h4 class="fw-bold mb-0">{{ $course->materials->count() }}</h4>
                                <p class="text-muted mb-0">{{ __('front.learning_materials') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 bg-success bg-opacity-10">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="bg-success bg-opacity-25 rounded-circle p-3 me-3">
                                <i class="fas fa-tasks fa-2x text-success"></i>
                            </div>
                            <div>
                                <h4 class="fw-bold mb-0">{{ $course->assignments->count() }}</h4>
                                <p class="text-muted mb-0">{{ __('front.assignments') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 bg-info bg-opacity-10">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="bg-info bg-opacity-25 rounded-circle p-3 me-3">
                                <i class="fas fa-question-circle fa-2x text-info"></i>
                            </div>
                            <div>
                                <h4 class="fw-bold mb-0">{{ $course->quizzes->count() }}</h4>
                                <p class="text-muted mb-0">{{ __('front.quizzes') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Course Content -->
        <div class="card shadow-sm border-0">
            <div class="card-header bg-white border-0 py-3">
                <ul class="nav nav-pills nav-fill" id="courseTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="materials-tab" data-bs-toggle="pill"
                                data-bs-target="#materials" type="button" role="tab">
                            <i class="fas fa-book me-2"></i> {{ __('front.materials') }}
                            <span class="badge bg-primary ms-2">{{ $course->materials->count() }}</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="assignments-tab" data-bs-toggle="pill"
                                data-bs-target="#assignments" type="button" role="tab">
                            <i class="fas fa-tasks me-2"></i> {{ __('front.assignments') }}
                            <span class="badge bg-success ms-2">{{ $course->assignments->count() }}</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="quizzes-tab" data-bs-toggle="pill"
                                data-bs-target="#quizzes" type="button" role="tab">
                            <i class="fas fa-question-circle me-2"></i> {{ __('front.quizzes') }}
                            <span class="badge bg-info ms-2">{{ $course->quizzes->count() }}</span>
                        </button>
                    </li>
                    @if($course->teachers->count() > 0)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="teachers-tab" data-bs-toggle="pill"
                                data-bs-target="#teachers" type="button" role="tab">
                            <i class="fas fa-chalkboard-teacher me-2"></i> {{ __('front.instructors') }}
                            <span class="badge bg-warning ms-2">{{ $course->teachers->count() }}</span>
                        </button>
                    </li>
                    @endif
                </ul>
            </div>

            <div class="card-body p-4">
                <div class="tab-content" id="courseTabContent">

                    <!-- Materials Tab (FIXED) -->
                    <div class="tab-pane fade show active" id="materials" role="tabpanel">
                        @if($course->materials->count() > 0)
                            <div class="row g-4">
                                @foreach($course->materials as $material)
                                <div class="col-md-6 col-lg-4">
                                    <div class="card border h-100 hover-shadow">
                                        <div class="card-body">
                                            <div class="d-flex align-items-start mb-3">
                                                <div class="flex-shrink-0">
                                                    @if($material->type == 'video')
                                                    <div class="bg-danger bg-opacity-10 rounded-3 p-3">
                                                        <i class="fas fa-video text-danger fa-xl"></i>
                                                    </div>
                                                    @else
                                                    <div class="bg-primary bg-opacity-10 rounded-3 p-3">
                                                        <i class="fas fa-file-pdf text-primary fa-xl"></i>
                                                    </div>
                                                    @endif
                                                </div>
                                                <div class="flex-grow-1 ms-3">
                                                    <h6 class="fw-bold mb-1 text-truncate">{{ $material->title }}</h6>
                                                    <p class="text-muted small mb-2">
                                                        {{ $material->type == 'video' ? 'Video Lecture' : 'Document' }}
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="d-flex justify-content-between align-items-center mt-3">
                                                <span class="text-muted small">
                                                    <i class="far fa-calendar me-1"></i>
                                                    {{ $material->created_at->format('M d, Y') }}
                                                </span>
                                                <div>
                                                    @if($material->type == 'video' && $material->video_url)
                                                    <a href="{{ $material->video_url }}" target="_blank"
                                                       class="btn btn-sm btn-danger">
                                                        <i class="fas fa-play me-1"></i> {{ __('front.watch') }}
                                                    </a>
                                                    @elseif($material->file_path)
                                                    <a href="{{ route('student.materials.download', $material->id) }}"
                                                       class="btn btn-sm btn-primary">
                                                        <i class="fas fa-download me-1"></i> {{ __('front.download') }}
                                                    </a>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        @else
                        <div class="text-center py-5">
                            <i class="fas fa-book fa-3x text-muted mb-3 opacity-50"></i>
                            <h5 class="text-muted mb-2">{{ __('front.no_materials_available') }}</h5>
                            <p class="text-muted mb-0">{{ __('front.course_materials_will_be_uploaded_by_your_instructor') }}</p>
                        </div>
                        @endif
                    </div>

                    <!-- Assignments Tab -->
                    <div class="tab-pane fade" id="assignments" role="tabpanel">
                        @if($course->assignments->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th width="25%">{{ __('front.assignment') }}</th>
                                        <th width="20%">{{ __('front.due_date') }}</th>
                                        <th width="10%">{{ __('front.grade') }}</th>
                                        <th width="15%">{{ __('front.status') }}</th>
                                        <th width="20%">{{ __('front.action') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($course->assignments as $assignment)
                                    @php
                                        $isSubmitted = in_array($assignment->id, $submittedAssignmentIds);
                                        $isOverdue = $assignment->due_at && now()->gt($assignment->due_at);
                                    @endphp
                                    <tr>
                                        <td>
                                            <div class="fw-bold">{{ $assignment->title }}</div>
                                            <div class="text-muted small">
                                                @if($assignment->creator)
                                                By {{ $assignment->creator->name }}
                                                @endif
                                            </div>
                                        </td>
                                        <td>
                                            @if($assignment->due_at)
                                            <div class="fw-semibold {{ $isOverdue ? 'text-danger' : '' }}">
                                                {{ $assignment->due_at->format('M d, Y') }}
                                            </div>
                                            <div class="text-muted small">
                                                {{ $assignment->due_at->format('h:i A') }}
                                            </div>
                                            @else
                                            <span class="text-muted">{{ __('front.no_due_date') }}</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge bg-secondary">
                                                {{ $assignment->max_grade }}
                                            </span>
                                        </td>
                                        <td>
                                            @if($isSubmitted)
                                            <span class="badge bg-success">
                                                <i class="fas fa-check me-1"></i> {{ __('front.submitted') }}
                                            </span>
                                            @elseif($isOverdue)
                                            <span class="badge bg-danger">
                                                <i class="fas fa-exclamation-triangle me-1"></i> {{ __('front.overdue') }}
                                            </span>
                                            @else
                                            <span class="badge bg-warning">
                                                <i class="fas fa-clock me-1"></i> {{ __('front.pending') }}
                                            </span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($isSubmitted)
                                            <a href="{{ route('student.assignments.show', $assignment->id) }}"
                                               class="btn btn-sm btn-outline-success">
                                                <i class="fas fa-eye me-1"></i> {{ __('front.view') }}
                                            </a>
                                            @else
                                            <a href="{{ route('student.assignments.create', $assignment->id) }}"
                                               class="btn btn-sm btn-primary">
                                                <i class="fas fa-upload me-1"></i> {{ __('front.submit') }}
                                            </a>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @else
                        <div class="text-center py-5">
                            <i class="fas fa-tasks fa-3x text-muted mb-3 opacity-50"></i>
                            <h5 class="text-muted mb-2">{{ __('front.no_assignments_yet') }}</h5>
                            <p class="text-muted mb-0">{{ __('front.assignments_will_be_posted_by_your_instructor') }}</p>
                        </div>
                        @endif
                    </div>

                    <!-- Quizzes Tab -->
                    <div class="tab-pane fade" id="quizzes" role="tabpanel">
                        @if($course->quizzes->count() > 0)
                        <div class="row g-4">
                            @foreach($course->quizzes as $quiz)
                            @php
                                $isAvailable = true;
                                $isUpcoming = false;
                                $isExpired = false;

                                if($quiz->start_date && $quiz->end_date) {
                                    $isAvailable = now()->between($quiz->start_date, $quiz->end_date);
                                    $isUpcoming = now()->lt($quiz->start_date);
                                    $isExpired = now()->gt($quiz->end_date);
                                }
                            @endphp
                            <div class="col-md-6 col-lg-4">
                                <div class="card border h-100">
                                    <div class="card-body">
                                        <div class="d-flex align-items-start mb-3">
                                            <div class="flex-shrink-0">
                                                <div class="bg-info bg-opacity-10 rounded-3 p-3">
                                                    <i class="fas fa-question-circle text-info fa-xl"></i>
                                                </div>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h6 class="fw-bold mb-1">{{ $quiz->title }}</h6>
                                                <p class="text-muted small mb-0">
                                                    {{ $quiz->questions_count ?? 0 }} Questions
                                                </p>
                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <span class="text-muted small">{{ __('front.duration') }}</span>
                                                <span class="fw-semibold">{{ $quiz->duration ?? 30 }} min</span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <span class="text-muted small">{{ __('front.max_score') }}</span>
                                                <span class="fw-semibold">{{ $quiz->total_marks ?? 100 }}</span>
                                            </div>
                                            @if($quiz->start_date && $quiz->end_date)
                                            <div class="d-flex justify-content-between align-items-center">
                                                <span class="text-muted small">{{ __('front.period') }}</span>
                                                <span class="fw-semibold small">
                                                    {{ $quiz->start_date->format('M d') }} - {{ $quiz->end_date->format('M d') }}
                                                </span>
                                            </div>
                                            @endif
                                        </div>

                                        <div class="mt-3">
                                            @if($isUpcoming)
                                            <button class="btn btn-outline-warning w-100" disabled>
                                                <i class="fas fa-clock me-1"></i> {{ __('front.starts_soon') }}
                                            </button>
                                            @elseif($isExpired)
                                            <button class="btn btn-outline-secondary w-100" disabled>
                                                <i class="fas fa-ban me-1"></i> {{ __('front.expired') }}
                                            </button>
                                            @elseif($isAvailable)
                                            <a href="{{ route('student.quizzes.take', $quiz->id) }}"
                                               class="btn btn-success w-100">
                                                <i class="fas fa-play me-1"></i> {{ __('front.start_quiz') }}
                                            </a>
                                            @else
                                            <button class="btn btn-outline-info w-100" disabled>
                                                <i class="fas fa-lock me-1"></i> {{ __('front.not_available') }}
                                            </button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @else
                        <div class="text-center py-5">
                            <i class="fas fa-question-circle fa-3x text-muted mb-3 opacity-50"></i>
                            <h5 class="text-muted mb-2">{{ __('front.no_quizzes_available') }}</h5>
                            <p class="text-muted mb-0">{{ __('front.quizzes_will_be_added_by_your_instructor') }}</p>
                        </div>
                        @endif
                    </div>

                    <!-- Teachers Tab -->
                    @if($course->teachers->count() > 0)
                    <div class="tab-pane fade" id="teachers" role="tabpanel">
                        <div class="row g-4">
                            @foreach($course->teachers as $teacher)
                            <div class="col-md-6 col-lg-4">
                                <div class="card border h-100">
                                    <div class="card-body">
                                        <div class="text-center mb-3">
                                            <div class="avatar-circle bg-primary text-white rounded-circle mx-auto mb-3"
                                                 style="width: 80px; height: 80px; line-height: 80px; font-size: 32px;">
                                                {{ substr($teacher->name, 0, 1) }}
                                            </div>
                                            <h5 class="fw-bold mb-1">{{ $teacher->name }}</h5>
                                            <p class="text-muted mb-2">{{ $teacher->email }}</p>
                                        </div>

                                        <div class="border-top pt-3">
                                            <div class="d-flex justify-content-center gap-2">
                                                @if($teacher->phone)
                                                <span class="badge bg-secondary">
                                                    <i class="fas fa-phone me-1"></i> {{ $teacher->phone }}
                                                </span>
                                                @endif
                                                @if($teacher->department)
                                                <span class="badge bg-info">
                                                    {{ $teacher->department }}
                                                </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif

                </div>
            </div>
        </div>

    </div>
</section>

<style>
.hover-shadow:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}
.nav-pills .nav-link {
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #dee2e6;
    margin: 0 2px;
}
.nav-pills .nav-link.active {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
}
.nav-pills .nav-link:not(.active) {
    background: white;
    color: #6c757d;
}
.nav-pills .nav-link:not(.active):hover {
    background: #f8f9fa;
}
.avatar-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
</style>
@endsection