@extends('layouts.appLayout')

@section('title', 'Course Review')

@section('content')
<div class="container my-3">
    <h1 class="mb-1 text-center text-white">Course Review</h1>

    {{-- Course Overview --}}
    <div class="card mb-4 mt-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <img src="{{ asset('img/coverIMG/cover' . $courseData['course']->id . '.jpg') }}" class="img-fluid rounded" alt="Course Cover">
                </div>
                <div class="col-md-8">
                    <h2 class="card-title mt-3 mt-md-0">{{ $courseData['course']->title }}</h2>
                    <p class="text-muted">Author: {{ $courseData['course']->owner->name }}</p>
                    <p class="text-muted">Category: {{ $courseData['course']->subcategory->category->name }}</p>
                    <p class="text-muted">Subcategory: {{ $courseData['course']->subcategory->name }}</p>
                    <p class="card-text">{{ $courseData['course']->description }}</p>

                    {{-- Course Stats --}}
                    <div class="row mt-3">
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h5>Chapters</h5>
                                    <h3>{{ $courseData['stats']['total_chapters'] }}</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mt-3 mt-md-0">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h5>Exercises</h5>
                                    <h3>{{ $courseData['stats']['total_exercises'] }}</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mt-3 mt-md-0">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h5>Lessons</h5>
                                    <h3>{{ $courseData['stats']['total_lessons'] }}</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mt-3 mt-md-0">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h5>Has Exam</h5>
                                    <h3>{{ $courseData['stats']['has_exam'] ? 'Yes' : 'No' }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{{-- Chapter Navigation Card --}}
<div class="card mb-4">
    <div class="card-header">
        <h4 class="mb-0 d-flex justify-content-between align-items-center"
        data-bs-toggle="collapse"
        data-bs-target="#chapterButtonsCollapse"
        aria-expanded="false"
        aria-controls="chapterButtonsCollapse"
        style="cursor: pointer;">
                Chapters
        <i class="bi bi-chevron-down ms-2 transition" id="chapterToggleIcon"></i>
        </h4>
    </div>
    <div id="chapterButtonsCollapse" class="collapse">
        <div class="card-body pt-3">
            <div class="row g-2">
                @foreach($courseData['chapters'] as $index => $chapter)
                    <div class="col-12 col-md-2">
                        <button type="button"
                                class="btn btn1 chapter-btn w-100 m-0"
                                data-chapter="{{ $index }}"
                                onclick="showChapter({{ $index }})">
                            @if($chapter['is_exam'])
                                <i class="fas fa-file-alt me-1"></i>
                                Exam
                            @else
                                Chapter {{ $chapter['chapter_number'] }}
                            @endif
                        </button>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

    {{-- Course Content Review --}}
    <div class="card">
        <div class="card-header">
            <h3 class="mb-0">Course Content</h3>
        </div>
        <div class="card-body">

            {{-- Chapters Content --}}
            @foreach($courseData['chapters'] as $index => $chapter)
                <div class="chapter mb-4" id="chapter-{{ $index }}" style="display: {{ $index === 0 ? 'block' : 'none' }}">
                    <div class="mb-3">
                        <h4 class="d-flex align-items-center gap-2">
                            @if($chapter['is_exam'])
                                <span class="badge bg-danger flex-shrink-0">Exam</span>
                            @else
                                <span class="badge bg-primary flex-shrink-0">Chapter {{ $chapter['chapter_number'] }}</span>
                            @endif
                            <span class="fw-semibold">{{ $chapter['title'] }}</span>
                        </h4>
                    </div>

                    {{-- Chapter Description and Content --}}
                    <div class="card mb-3">
                        <div class="card-body">
                            <h4 class="card-title text-primary">
                                <i class="fas fa-info-circle me-2"></i>
                                Chapter Description
                            </h4>
                            <p class="card-text">{{ $chapter['description'] }}</p>

                            <h4 class="card-title text-primary mt-4">
                                <i class="fas fa-book me-2"></i>
                                Chapter Content
                            </h4>
                            <div class="ck-content">
                                {!! $chapter['content'] !!}
                            </div>
                        </div>
                    </div>

                    {{-- Exercises Section --}}
                        <div class="list-group mb-3">
                            <h4 class="card-title text-primary mb-3">
                                <i class="fas fa-tasks me-2"></i>
                                Chapter Exercises
                            </h4>
                            @foreach($chapter['exercises'] as $exercise)
                                <div class="card mb-3">

                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <h5 class="mb-0">{{ $exercise['title'] }}</h5>
                                            <span class="badge bg-info">{{ $exercise['type'] }}</span>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <p class="card-text">{{ $exercise['content'] }}</p>

                                        <div class="mt-3">
                                            @if( $exercise['type'] == 'input')
                                            <h6 class="text-muted">Answer:</h6>
                                            @else
                                            <h6 class="text-muted">Answers:</h6>
                                            @endif
                                            <div class="list-group">
                                                @foreach($exercise['options'] as $option)
                                                    <div class="list-group-item d-flex justify-content-between align-items-center {{ $option['is_correct'] ? 'bg-light-success' : '' }}">
                                                        <span>{{ $option['content'] }}</span>
                                                        @if($option['is_correct'])
                                                            <span class="badge bg-success">Correct Answer</span>
                                                        @endif
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Review Actions --}}
    <div class="mt-4 d-flex justify-content-end gap-2">
        <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#rejectModal">
            Reject Course
        </button>
        <a href="{{ route('revisor.approve', $courseData['course']->id) }}" class="btn btn-success">Approve Course</a>
    </div>
</div>

{{-- Reject Modal --}}
<div class="modal fade" id="rejectModal" tabindex="-1" aria-labelledby="rejectModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content shadow-lg border-0">
            <div class="modal-header text-white" style="background-color: #220f3f;">
                <h5 class="modal-title" id="rejectModalLabel">Rechazar Curso</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-4">
                    <h6 class="fw-bold border-bottom pb-2">Información del Curso</h6>
                    <p class="text-muted mb-0"><strong>Título:</strong> {{ $courseData['course']->title }}</p>
                </div>

                <div class="mb-4">
                    <h6 class="fw-bold border-bottom pb-2">Información del Creador</h6>
                    <p class="mb-1 text-muted"><strong>Nombre:</strong> {{ $courseData['course']->owner->name }}</p>
                    <p class="mb-0 text-muted"><strong>Email:</strong> {{ $courseData['course']->owner->email }}</p>
                </div>

                <form action="{{ route('revisor.reject', $courseData['course']->id) }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label for="message" class="form-label">Razón del rechazo</label>
                        <textarea class="form-control mt-2" id="message" name="message" rows="4" required></textarea>
                        <div class="form-text mt-1 text-muted">
                            <i class="bi bi-info-circle-fill me-1"></i>
                            Esta acción enviará un correo al creador del curso con esta razón.
                        </div>                    </div>
                        <div class="d-flex justify-content-between">
                            <button type="button" class="btn btn1" data-bs-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-danger">Confirmar Rechazo</button>
                        </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function showChapter(index) {
    // Hide all chapters
    document.querySelectorAll('.chapter').forEach(chapter => {
        chapter.style.display = 'none';
    });

    // Show selected chapter
    document.getElementById('chapter-' + index).style.display = 'block';

    // Update active button
    document.querySelectorAll('.chapter-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    document.querySelector(`[data-chapter="${index}"]`).classList.add('active');
}


</script>
@endpush

@endsection