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

@section('body')
<section class="pt-5" style="background-color: #f5f7fc;">
    <div class="container">

        @include('public.portals.teacher.partials.nav')

        {{-- Course Header with Back Button --}}
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
            <div>
                <h4 class="fw-bold mb-1">{{ $course->title }}</h4>
                <p class="text-muted2 mb-0">
                    <i class="fas fa-code me-1"></i> {{ $course->code ?? '—' }} •
                    <i class="fas fa-clock me-1"></i> {{ $course->credit_hours ?? '—' }} Credits
                </p>
            </div>
            <a href="{{ route('teacher.courses.index') }}" class="btn btn-outline-secondary btn-rounded">
                <i class="fas fa-arrow-left me-2"></i> {{ __('front.back_to_courses') }}
            </a>
        </div>

        {{-- Quick Stats Row --}}
        <div class="row g-3 mb-4">
            <div class="col-md-3">
                <div class="card-soft p-3 shadow-soft d-flex align-items-center">
                    <div class="bg-primary bg-opacity-10 rounded-circle p-2 me-3">
                        <i class="fas fa-users text-primary"></i>
                    </div>
                    <div>
                        <span class="text-muted2 small">{{ __('front.students') }}</span>
                        <h5 class="fw-bold mb-0">{{ $studentCount ?? 0 }}</h5>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card-soft p-3 shadow-soft d-flex align-items-center">
                    <div class="bg-success bg-opacity-10 rounded-circle p-2 me-3">
                        <i class="fas fa-file-alt text-success"></i>
                    </div>
                    <div>
                        <span class="text-muted2 small">{{ __('front.materials') }}</span>
                        <h5 class="fw-bold mb-0">{{ $materialsCount ?? 0 }}</h5>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card-soft p-3 shadow-soft d-flex align-items-center">
                    <div class="bg-warning bg-opacity-10 rounded-circle p-2 me-3">
                        <i class="fas fa-tasks text-warning"></i>
                    </div>
                    <div>
                        <span class="text-muted2 small">{{ __('front.assignments') }}</span>
                        <h5 class="fw-bold mb-0">{{ $assignmentsCount ?? 0 }}</h5>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card-soft p-3 shadow-soft d-flex align-items-center">
                    <div class="bg-info bg-opacity-10 rounded-circle p-2 me-3">
                        <i class="fas fa-question-circle text-info"></i>
                    </div>
                    <div>
                        <span class="text-muted2 small">{{ __('front.quizzes') }}</span>
                        <h5 class="fw-bold mb-0">{{ $quizzesCount ?? 0 }}</h5>
                    </div>
                </div>
            </div>
        </div>

        {{-- Main Tabs Card --}}
        <div class="card-soft p-4 shadow-soft">
            <ul class="nav nav-tabs mb-4" id="courseTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="overview-tab" data-bs-toggle="tab"
                            data-bs-target="#overview" type="button" role="tab">
                        <i class="fas fa-info-circle me-2"></i> {{ __('front.overview') }}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="materials-tab" data-bs-toggle="tab"
                            data-bs-target="#materials" type="button" role="tab">
                        <i class="fas fa-file-alt me-2"></i> {{ __('front.materials') }}
                        <span class="badge bg-success ms-2">{{ $materialsCount ?? 0 }}</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="assignments-tab" data-bs-toggle="tab"
                            data-bs-target="#assignments" type="button" role="tab">
                        <i class="fas fa-tasks me-2"></i> {{ __('front.assignments') }}
                        <span class="badge bg-warning ms-2">{{ $assignmentsCount ?? 0 }}</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="quizzes-tab" data-bs-toggle="tab"
                            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">{{ $quizzesCount ?? 0 }}</span>
                    </button>
                </li>
            </ul>

            <div class="tab-content" id="courseTabContent">

                {{-- ========== OVERVIEW TAB ========== --}}
                <div class="tab-pane fade show active" id="overview" role="tabpanel">
                    <div class="row">
                        <div class="col-lg-6">
                            <h6 class="fw-bold mb-3"><i class="fas fa-info-circle me-2"></i> {{ __('front.course_details') }}</h6>
                            <table class="table table-borderless">
                                <tr>
                                    <td class="text-muted2">{{ __('front.course_id') }}</td>
                                    <td class="fw-semibold">#{{ $course->id }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted2">{{ __('front.title') }}</td>
                                    <td class="fw-semibold">{{ $course->title }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted2">{{ __('front.code_2') }}</td>
                                    <td class="fw-semibold">{{ $course->code ?? '—' }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted2">{{ __('front.credit_hours') }}</td>
                                    <td class="fw-semibold">{{ $course->credit_hours ?? '—' }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted2">{{ __('front.semester') }}</td>
                                    <td class="fw-semibold">{{ $course->semester->name ?? $course->semester_id ?? '—' }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted2">{{ __('front.created_2') }}</td>
                                    <td class="fw-semibold">{{ $course->created_at }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-lg-6">
                            <h6 class="fw-bold mb-3"><i class="fas fa-users me-2"></i> {{ __('front.enrolled_students') }}</h6>
                            @if(($students ?? collect())->count() > 0)
                                <div class="list-group list-group-flush">
                                    @foreach($students->take(5) as $student)
                                        <div class="list-group-item border-0 px-0 d-flex align-items-center">
                                            <div class="avatar-circle bg-secondary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3"
                                                 style="width: 36px; height: 36px;">
                                                {{ substr($student->name, 0, 1) }}
                                            </div>
                                            <div>
                                                <div class="fw-semibold">{{ $student->name }}</div>
                                                <div class="text-muted2 small">{{ $student->email }}</div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                @if($students->count() > 5)
                                    <div class="mt-3">
                                        <a href="{{ route('teacher.courses.students', $course->id) }}" class="btn btn-link p-0">
                                            View all {{ $students->count() }} students <i class="fas fa-arrow-right ms-1"></i>
                                        </a>
                                    </div>
                                @endif
                            @else
                                <p class="text-muted2">{{ __('front.no_students_enrolled_yet') }}</p>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- ========== MATERIALS TAB ========== --}}
                <div class="tab-pane fade" id="materials" role="tabpanel">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="fw-bold mb-0"><i class="fas fa-file-alt me-2"></i> {{ __('front.course_materials') }}</h6>
                        <a href="{{ route('teacher.materials.create', ['course' => $course->id]) }}"
                           class="btn btn-primary btn-sm rounded-pill">
                            <i class="fas fa-plus me-1"></i> {{ __('front.add_material') }}
                        </a>
                    </div>

                    @if(($materials ?? collect())->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>{{ __('front.title') }}</th>
                                        <th>{{ __('front.type') }}</th>
                                        <th>{{ __('front.uploaded') }}</th>
                                        <th>{{ __('front.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($materials as $material)
                                        <tr>
                                            <td class="fw-semibold">{{ $material->title }}</td>
                                            <td>
                                                @if($material->type == 'video')
                                                    <span class="badge bg-danger">{{ __('front.video') }}</span>
                                                @else
                                                    <span class="badge bg-primary">{{ __('front.document') }}</span>
                                                @endif
                                            </td>
                                            <td class="text-muted2 small">
                                                {{ $material->created_at }}
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm">
                                                    <a href="{{ route('teacher.materials.show', $material->id) }}"
                                                       class="btn btn-outline-primary">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{{ route('teacher.materials.edit', $material->id) }}"
                                                       class="btn btn-outline-secondary">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <button type="button" class="btn btn-outline-danger"
                                                            onclick="confirmDelete('material-{{ $material->id }}')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                    <form id="material-{{ $material->id }}"
                                                          action="{{ route('teacher.materials.destroy', $material->id) }}"
                                                          method="POST" class="d-none">
                                                        @csrf @method('DELETE')
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-file-alt fa-3x text-muted mb-3 opacity-50"></i>
                            <p class="text-muted2 mb-2">{{ __('front.no_materials_uploaded_yet') }}</p>
                            <a href="{{ route('teacher.materials.create', ['course' => $course->id]) }}"
                               class="btn btn-primary btn-sm rounded-pill">
                                <i class="fas fa-plus me-1"></i> {{ __('front.upload_your_first_material') }}
                            </a>
                        </div>
                    @endif
                </div>

                {{-- ========== ASSIGNMENTS TAB ========== --}}
                <div class="tab-pane fade" id="assignments" role="tabpanel">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="fw-bold mb-0"><i class="fas fa-tasks me-2"></i> {{ __('front.assignments') }}</h6>
                        <a href="{{ route('teacher.assignments.create', ['course' => $course->id]) }}"
                           class="btn btn-primary btn-sm rounded-pill">
                            <i class="fas fa-plus me-1"></i> {{ __('front.add_assignment') }}
                        </a>
                    </div>

                    @if(($assignments ?? collect())->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>{{ __('front.title') }}</th>
                                        <th>{{ __('front.due_date') }}</th>
                                        <th>{{ __('front.max_grade') }}</th>
                                        <th>{{ __('front.submissions') }}</th>
                                        <th>{{ __('front.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($assignments as $assignment)
                                        <tr>
                                            <td class="fw-semibold">{{ $assignment->title }}</td>
                                            <td>
                                                @if($assignment->due_at)
                                                    <span class="{{ now()->gt($assignment->due_at) ? 'text-danger' : '' }}">
                                                        {{ $assignment->due_at }}
                                                    </span>
                                                    <small class="text-muted2 d-block">{{ $assignment->due_at }}</small>
                                                @else
                                                    <span class="text-muted2">{{ __('front.no_due_date') }}</span>
                                                @endif
                                            </td>
                                            <td><span class="badge bg-secondary">{{ $assignment->max_grade }}</span></td>
                                            <td>
                                                <span class="badge bg-info">{{ $assignment->submissions_count ?? 0 }}</span>
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm">
                                                    <a href="{{ route('teacher.assignments.show', $assignment->id) }}"
                                                       class="btn btn-outline-primary">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{{ route('teacher.assignments.edit', $assignment->id) }}"
                                                       class="btn btn-outline-secondary">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <button type="button" class="btn btn-outline-danger"
                                                            onclick="confirmDelete('assignment-{{ $assignment->id }}')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                    <form id="assignment-{{ $assignment->id }}"
                                                          action="{{ route('teacher.assignments.destroy', $assignment->id) }}"
                                                          method="POST" class="d-none">
                                                        @csrf @method('DELETE')
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-tasks fa-3x text-muted mb-3 opacity-50"></i>
                            <p class="text-muted2 mb-2">{{ __('front.no_assignments_created_yet') }}</p>
                            <a href="{{ route('teacher.assignments.create', ['course' => $course->id]) }}"
                               class="btn btn-primary btn-sm rounded-pill">
                                <i class="fas fa-plus me-1"></i> {{ __('front.create_your_first_assignment') }}
                            </a>
                        </div>
                    @endif
                </div>

                {{-- ========== QUIZZES TAB ========== --}}
                <div class="tab-pane fade" id="quizzes" role="tabpanel">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="fw-bold mb-0"><i class="fas fa-question-circle me-2"></i> {{ __('front.quizzes') }}</h6>
                        <a href="{{ route('teacher.quizzes.create', ['course' => $course->id]) }}"
                           class="btn btn-primary btn-sm rounded-pill">
                            <i class="fas fa-plus me-1"></i> {{ __('front.add_quiz') }}
                        </a>
                    </div>

                    @if(($quizzes ?? collect())->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>{{ __('front.title') }}</th>
                                        <th>{{ __('front.duration_2') }}</th>
                                        <th>{{ __('front.total_marks_2') }}</th>
                                        <th>{{ __('front.availability') }}</th>
                                        <th>{{ __('front.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($quizzes as $quiz)
                                        <tr>
                                            <td class="fw-semibold">{{ $quiz->title }}</td>
                                            <td>{{ $quiz->duration ?? '—' }} min</td>
                                            <td><span class="badge bg-secondary">{{ $quiz->total_marks ?? '—' }}</span></td>
                                            <td>
                                                @php
                                                    $now = now();
                                                    $start = $quiz->starts_at ? $now->gte($quiz->starts_at) : true;
                                                    $end = $quiz->ends_at ? $now->lte($quiz->ends_at) : true;
                                                    $active = $start && $end;
                                                @endphp
                                                @if($active)
                                                    <span class="badge bg-success">{{ __('front.active') }}</span>
                                                @elseif($quiz->starts_at && $now->lt($quiz->starts_at))
                                                    <span class="badge bg-warning">{{ __('front.upcoming') }}</span>
                                                @else
                                                    <span class="badge bg-secondary">{{ __('front.expired') }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm">
                                                    <a href="{{ route('teacher.quizzes.show', $quiz->id) }}"
                                                       class="btn btn-outline-primary">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{{ route('teacher.quizzes.edit', $quiz->id) }}"
                                                       class="btn btn-outline-secondary">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <button type="button" class="btn btn-outline-danger"
                                                            onclick="confirmDelete('quiz-{{ $quiz->id }}')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                    <form id="quiz-{{ $quiz->id }}"
                                                          action="{{ route('teacher.quizzes.destroy', $quiz->id) }}"
                                                          method="POST" class="d-none">
                                                        @csrf @method('DELETE')
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-question-circle fa-3x text-muted mb-3 opacity-50"></i>
                            <p class="text-muted2 mb-2">{{ __('front.no_quizzes_created_yet') }}</p>
                            <a href="{{ route('teacher.quizzes.create', ['course' => $course->id]) }}"
                               class="btn btn-primary btn-sm rounded-pill">
                                <i class="fas fa-plus me-1"></i> {{ __('front.create_your_first_quiz') }}
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

    </div>
</section>

{{-- Delete Confirmation Script --}}
<script>
    function confirmDelete(formId) {
        if (confirm('{{ __('front.are_you_sure_you_want_to_delete_this_item_this_action_c') }}')) {
            document.getElementById(formId).submit();
        }
    }
</script>

<style>
    .nav-tabs .nav-link {
        border: none;
        color: #6c757d;
        font-weight: 500;
        padding: 0.75rem 1.25rem;
    }
    .nav-tabs .nav-link.active {
        color: #0d6efd;
        border-bottom: 2px solid #0d6efd;
        background: transparent;
    }
    .avatar-circle {
        width: 36px;
        height: 36px;
        font-size: 14px;
        font-weight: 600;
    }
    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
    }
</style>
@endsection