@extends('layouts.appLayout')

@section('title', 'Edit Chapter: ' . $chapter->title)

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/teacherDashboard.css') }}">
@endpush

@section('content')
    <div class="container-fluid py-4">
        <div class="container my-4">

            <!-- Breadcrumbs -->
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('myProfilePage') }}">Profile</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('teacher.dashboard') }}">Teacher Workspace</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('course.edit.view', ['id' => $course->id]) }}">Course
                            {{ $course->title }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Edit Chapter {{ $chapter->title }}</li>
                </ol>
            </nav>

            {{-- Titulo --}}
            <div class="row">
                <div class="col-md-12">
                    <h1 class="text-center text-white fw-bold">Chapter Editor</h1>
                    <p class="text-center textOrange">Custom your chapters</p>
                </div>
            </div>

        </div>

        <!-- Main Chapter Edit Form -->
        <div class="row justify-content-center mb-4">
            <div class="col-12 col-lg-8">
                <div class="card shadow border-0 overflow-hidden">
                    <div class="card-header bg-gradient-purple text-white py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-edit me-2"></i>
                                Chapter Details
                            </h5>
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input " type="checkbox" role="switch" id="is_exam"
                                    name="is_exam" value="1" {{ $chapter->is_exam ? 'checked' : '' }}>
                                <label class="form-check-label fw-bold" for="is_exam">
                                    <i class="fas fa-question-circle me-1"></i> Exam Chapter
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form id="editChapterForm" method="POST" action="{{ route('chapter.update') }}"
                            class="needs-validation" novalidate>
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="course_id" value="{{ $course->id }}">
                            <input type="hidden" name="id" value="{{ $chapter->id }}">

                            <div class="row g-3 mb-4">
                                <div class="col-md-2">
                                    <label for="chapter_number" class="form-label fw-bold">
                                        <i class="fas fa-hashtag text-custom-purple me-1"></i> Number
                                    </label>
                                    <input type="number" class="form-control form-control-lg form-custom-input"
                                        id="chapter_number" name="chapter_number" value="{{ $chapter->chapter_number }}"
                                        min="1" required>
                                    <div class="invalid-feedback">Please enter a valid chapter number</div>
                                </div>

                                <div class="col-md-10">
                                    <label for="chapterTitle" class="form-label fw-bold">
                                        <i class="fas fa-heading text-custom-purple me-1"></i> Title
                                    </label>
                                    <input type="text" class="form-control form-control-lg form-custom-input"
                                        id="chapterTitle" name="title" value="{{ $chapter->title }}" required>
                                    <div class="invalid-feedback">Please provide a chapter title</div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="description" class="form-label fw-bold">
                                    <i class="fas fa-align-left text-custom-purple me-1"></i> Description
                                </label>
                                <textarea class="form-control form-custom-input" id="description" name="description" rows="3"
                                    placeholder="Briefly describe this chapter..." required>{{ $chapter->description }}</textarea>
                                <div class="invalid-feedback">Please provide a description</div>
                            </div>

                            <div class="mb-4">
                                <label for="content" class="form-label fw-bold">
                                    <i class="fas fa-file-alt text-custom-purple me-1"></i> Content
                                </label>
                                <textarea class="form-control" id="content" name="content" rows="8"
                                    placeholder="Enter your chapter content here (markdown supported)..." required>{{ $chapter->content }}</textarea>
                                <div class="invalid-feedback">Please provide chapter content</div>
                                <small class="text-muted mt-1">Write your knowledge in this editor!</small>
                            </div>


                            {{-- Sección de ejercicios --}}
                            <div class="row">
                                <div class="col-12">
                                    <div class="exercises-editor">
                                        <h5 class="fw-bold mb-3">
                                            <i class="fas fa-dumbbell me-2 text-custom-purple"></i>Exercises
                                        </h5>
                                        <div id="exercisesContainer">
                                            @if ($chapter->exercises && count($chapter->exercises))
                                                <div class="accordion" id="exercisesAccordion">
                                                    @foreach ($chapter->exercises as $exercise)
                                                        <div class="accordion-item mb-2">
                                                            <h2 class="accordion-header"
                                                                id="headingEx{{ $exercise['id'] }}">
                                                                <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#collapseEx{{ $exercise['id'] }}"
                                                                    aria-expanded="false"
                                                                    aria-controls="collapseEx{{ $exercise['id'] }}">
                                                                    <span
                                                                        class="fw-semibold">{{ $exercise['exercise_number'] }}.
                                                                        {{ $exercise['title'] }}</span>
                                                                    <span
                                                                        class="badge bg-secondary ms-2">{{ ucfirst($exercise['type']) }}</span>
                                                                </button>
                                                            </h2>
                                                            <div id="collapseEx{{ $exercise['id'] }}"
                                                                class="accordion-collapse collapse"
                                                                aria-labelledby="headingEx{{ $exercise['id'] }}"
                                                                data-bs-parent="#exercisesAccordion">
                                                                <div class="accordion-body">
                                                                    <form class="exercise-edit-form"
                                                                        data-exercise-id="{{ $exercise['id'] }}">
                                                                        <div class="row g-2 mb-2">
                                                                            <div class="col-md-3">
                                                                                <label class="form-label">Type</label>
                                                                                <select class="form-select"
                                                                                    name="type">
                                                                                    <option value="radio"
                                                                                        @if ($exercise['type'] === 'radio') selected @endif>
                                                                                        Multiple Choice</option>
                                                                                    <option value="input"
                                                                                        @if ($exercise['type'] === 'input') selected @endif>
                                                                                        Input</option>
                                                                                </select>
                                                                            </div>
                                                                            <div class="col-md-3">
                                                                                <label class="form-label">Number</label>
                                                                                <input type="number" class="form-control"
                                                                                    name="exercise_number"
                                                                                    value="{{ $exercise['exercise_number'] }}"
                                                                                    min="1">
                                                                            </div>
                                                                            <div class="col-md-6">
                                                                                <label class="form-label">Title</label>
                                                                                <input type="text" class="form-control"
                                                                                    name="title"
                                                                                    value="{{ $exercise['title'] }}">
                                                                            </div>
                                                                        </div>
                                                                        <div class="mb-2">
                                                                            <label class="form-label">Content</label>
                                                                            <textarea class="form-control" name="content" rows="2">{{ $exercise['content'] }}</textarea>
                                                                        </div>
                                                                        <div class="mb-2">
                                                                            <label class="form-label">Options</label>
                                                                            <div class="row g-2 align-items-center">
                                                                                @foreach ($exercise['options'] as $idx => $option)
                                                                                    <div
                                                                                        class="col-md-6 mb-1 d-flex align-items-center">
                                                                                        <input type="text"
                                                                                            class="form-control me-2"
                                                                                            name="options[{{ $idx }}][answer]"
                                                                                            value="{{ $option['answer'] }}"
                                                                                            placeholder="Option text">
                                                                                        <div class="form-check ms-2">
                                                                                            <input class="form-check-input"
                                                                                                type="radio"
                                                                                                name="correct_option_{{ $exercise['id'] }}"
                                                                                                value="{{ $idx }}"
                                                                                                @if ($option['is_correct']) checked @endif
                                                                                                @if ($exercise['type'] !== 'radio') disabled @endif>
                                                                                            <label
                                                                                                class="form-check-label">Correct</label>
                                                                                        </div>
                                                                                        <button type="button"
                                                                                            class="btn-sm btn-outline-danger ms-2 remove-option-btn"
                                                                                            title="Remove option"><i
                                                                                                class="fas fa-times"></i></button>
                                                                                    </div>
                                                                                @endforeach
                                                                            </div>
                                                                            <button type="button"
                                                                                class="btn-sm btn-outline-primary mt-2 add-option-btn"><i
                                                                                    class="fas fa-plus"></i> Add
                                                                                Option</button>
                                                                        </div>
                                                                        <div class="d-flex justify-content-end gap-2 mt-3">
                                                                            <button type="button"
                                                                                class="btn-success save-exercise-btn"><i
                                                                                    class="fas fa-save"></i> Save</button>
                                                                            <button type="button"
                                                                                class="btn-danger delete-exercise-btn"><i
                                                                                    class="fas fa-trash"></i>
                                                                                Delete</button>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @else
                                                <div class="alert alert-custom-purple">No exercises yet. Add your first
                                                    exercise!</div>
                                            @endif
                                        </div>
                                        <div class="mt-4">
                                            <button type="button" class="btn btn1" id="add-exercise-btn">
                                                <i class="fas fa-plus"></i> Add New Exercise
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end mt-4">
                                <a href="{{ route('course.edit.view', ['id' => $course->id]) }}" class="btn btn2 px-4">
                                    <i class="fas fa-times"></i> Cancel
                                </a>
                                <button type="submit" class="btn btn1 px-4" id="saveChapterButton">
                                    <i class="fas fa-save"></i> Save Changes
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {{-- Pasar variable laravel a JS --}}
    <script>
        window.chapter = @json($chapter->id);
    </script>

    <script src="{{ asset('js/utils/utils.js') }}"></script>
    <script src="{{ asset('js/teacher/editChapter.js') }}"></script>
@endpush
