@extends('layout.layout')

@section('content')

    <div class="card shadow-sm p-4">
        <h2 class="card-title fs-5 fw-semibold mb-4 p-3">Sessions</h2>

        @if ($trackLevelSessions->isEmpty())
            <p class="text-muted">No track sessions found.</p>
        @else
            <div id="sortableLevels">
                @foreach ($trackLevelSessions as $trackLevel)
                    <div class="sortable-item bg-success text-white rounded m-2 ui-sortable-handle"
                        data-id="{{ $trackLevel->id }}">
                        <!-- Header Row -->
                        <div class="d-flex justify-content-between align-items-center p-3 cursor-pointer toggle-details">
                            <a href="{{ route('sessions.index', [$trackLevel->track, $trackLevel->level]) }}">
                                <span class="fw-medium">{{ $trackLevel->name_en }}</span>
                            </a>
                            <div class="d-flex gap-2 align-items-center">

                                <button class="text-decoration-none btn btn-link p-0 text-white open-modal-btn"
                                    data-bs-toggle="modal" data-bs-target="#updateTrackLevelModal{{ $trackLevel->id }}"
                                    aria-label="Edit level {{ $trackLevel->name_en }}">
                                    <iconify-icon icon="lucide:edit"></iconify-icon>
                                </button>

                            </div>
                        </div>
                        <!-- Hidden Details -->
                        <div class="details text-dark bg-success-subtle p-3 rounded-bottom" style="display: none;">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <div class="d-flex align-items-center gap-2">
                                    <button id="add_level_btn" class="btn btn-success btn-sm rounded-circle p-2"
                                        type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <iconify-icon icon="ic:baseline-plus" class="fs-5"></iconify-icon>
                                    </button>
                                    <div class="dropdown-menu shadow-sm p-3 bg-success" id="add_lesson">
                                        <div class="row">
                                            <div class="col">
                                                <button id="lesson_modal_btn"
                                                    class="dropdown-item text-gray-700 d-flex align-items-center gap-2"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#add_lesson_modal_{{ $trackLevel->id }}">
                                                    <iconify-icon icon="ic:baseline-plus" class="fs-5"></iconify-icon>
                                                    <span>lesson</span>
                                                </button>
                                            </div>
                                            <div class="col">
                                                <button id="quiz_modal_btn"
                                                    class="dropdown-item text-gray-700 d-flex align-items-center gap-2"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#add_quiz_modal_{{ $trackLevel->id }}">
                                                    <iconify-icon icon="ic:baseline-plus" class="fs-5"></iconify-icon>
                                                    <span>quiz</span>
                                                </button>
                                            </div>
                                            <div class="col">
                                                <button id="assignment_modal_btn"
                                                    class="dropdown-item text-gray-700 d-flex align-items-center gap-2"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#add_assignment_modal_{{ $trackLevel->id }}">
                                                    <iconify-icon icon="ic:baseline-plus" class="fs-5"></iconify-icon>
                                                    <span>assignment</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3 col-sm-6">

                                    <p><strong>Track:</strong> {{ $trackLevel->track->name_en }}</p>
                                </div>
                                <div class="col-md-3 col-sm-6">

                                    <p><strong>Level:</strong> {{ $trackLevel->level->name_en }}</p>
                                </div>
                                <div class="col-md-3 col-sm-6">

                                    <p><strong>Name (EN):</strong> {{ $trackLevel->name_en }}</p>
                                </div>
                                <div class="col-md-3 col-sm-6">

                                    <p><strong>Name (AR):</strong> {{ $trackLevel->name_ar }}</p>
                                </div>
                                @if ($trackLevel->file && is_array($trackLevel->file))
                                    @foreach ($trackLevel->file as $file)
                                        <div class="col-md-3 col-sm-6">
                                            <p>
                                                <strong>Material:</strong>
                                                <a href="{{ asset($file) }}" target="_blank" class="underline">View
                                                    Material</a>
                                            </p>
                                        </div>
                                    @endforeach
                                @endif

                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <!-- Lessons -->
                                    @if ($trackLevel->lessons->isNotEmpty())
                                        <p><strong>Lessons:</strong></p>
                                        @foreach ($trackLevel->lessons as $lesson)
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <p class="mb-0">{{ $lesson->name }} [{{ strtoupper($lesson->privacy) }}]
                                                    [LESSON]</p>
                                                <div class="d-flex gap-2">
                                                    <button class="btn btn-link p-0 text-primary" data-bs-toggle="modal"
                                                        data-bs-target="#editLessonModal{{ $lesson->id }}">
                                                        <iconify-icon icon="lucide:edit"></iconify-icon>
                                                    </button>
                                                    <button class="btn btn-link p-0 text-danger" data-bs-toggle="modal"
                                                        data-bs-target="#deleteLessonModal{{ $lesson->id }}">
                                                        <iconify-icon icon="fluent:delete-24-regular"></iconify-icon>
                                                    </button>
                                                </div>
                                            </div>
                                            <!-- Edit Lesson Modal -->
                                            @include(
                                            'dashboard.academics.track_level_sessions.modals.edit_lesson_modal',
                                            ['lesson' => $lesson]
                                        )
                                        <!-- Delete Lesson Modal -->
                                        @include(
                                            'dashboard.academics.track_level_sessions.modals.delete_lesson_modal',
                                            ['lesson' => $lesson]
                                        )
                                        @endforeach
                                    @endif

                                    <!-- Quizzes -->
                                    @if ($trackLevel->quizzes->isNotEmpty())
                                        <p><strong>Quizzes:</strong></p>
                                        @foreach ($trackLevel->quizzes as $quiz)
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <p class="mb-0">{{ $quiz->title }} [{{ strtoupper($quiz->privacy) }}]
                                                    [QUIZ]</p>
                                                <div class="d-flex gap-2">
                                                    <button class="btn btn-link p-0 text-primary" data-bs-toggle="modal"
                                                        data-bs-target="#editQuizModal{{ $quiz->id }}">
                                                        <iconify-icon icon="lucide:edit"></iconify-icon>
                                                    </button>
                                                    <button class="btn btn-link p-0 text-danger" data-bs-toggle="modal"
                                                        data-bs-target="#deleteQuizModal{{ $quiz->id }}">
                                                        <iconify-icon icon="fluent:delete-24-regular"></iconify-icon>
                                                    </button>
                                                </div>
                                            </div>
                                            <!-- Edit Quiz Modal -->
                                            @include(
                                            'dashboard.academics.track_level_sessions.modals.edit_quiz_modal',
                                            ['quiz' => $quiz]
                                        )
                                        <!-- Delete Quiz Modal -->
                                        @include(
                                            'dashboard.academics.track_level_sessions.modals.delete_quiz_modal',
                                            ['quiz' => $quiz]
                                        )
                                        @endforeach
                                    @endif

                                    <!-- Assignments -->
                                    @if ($trackLevel->assignments->isNotEmpty())
                                        <p><strong>Assignments:</strong></p>
                                        @foreach ($trackLevel->assignments as $assignment)
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <p class="mb-0">{{ $assignment->title }}
                                                    [{{ strtoupper($assignment->privacy) }}] [ASSIGNMENT]</p>
                                                <div class="d-flex gap-2">
                                                    <button class="btn btn-link p-0 text-primary" data-bs-toggle="modal"
                                                        data-bs-target="#editAssignmentModal{{ $assignment->id }}">
                                                        <iconify-icon icon="lucide:edit"></iconify-icon>
                                                    </button>
                                                    <button class="btn btn-link p-0 text-danger" data-bs-toggle="modal"
                                                        data-bs-target="#deleteAssignmentModal{{ $assignment->id }}">
                                                        <iconify-icon icon="fluent:delete-24-regular"></iconify-icon>
                                                    </button>
                                                </div>
                                            </div>
                                            <!-- Edit Assignment Modal -->
                                            @include(
                                            'dashboard.academics.track_level_sessions.modals.edit_assignment_modal',
                                            ['assignment' => $assignment]
                                        )
                                        <!-- Delete Assignment Modal -->
                                        @include(
                                            'dashboard.academics.track_level_sessions.modals.delete_assignment_modal',
                                            ['assignment' => $assignment]
                                        )
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                        @include('dashboard.academics.track_level_sessions.update-modal', [
                        'item' => $trackLevel,
                    ])
                    </div>

                    <!-- Add Lesson Modal -->
                    @include('dashboard.academics.track_level_sessions.modals.add_lesson_modal', ['trackLevel' => $trackLevel])

                    <!-- Add Quiz Modal -->
                    @include('dashboard.academics.track_level_sessions.modals.add_quiz_modal', ['trackLevel' => $trackLevel])

                    <!-- Add Assignment Modal -->
                    @include('dashboard.academics.track_level_sessions.modals.add_assignment_modal', ['trackLevel' => $trackLevel])
                @endforeach
            </div>
        @endif
    </div>
@endsection

<!-- jQuery + jQuery UI -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<script>
    $(document).ready(function() {
        // Sortable logic
        $("#sortableLevels").sortable({
            placeholder: "sortable-placeholder",
            update: function(event, ui) {
                let sortedIDs = [];
                $(".sortable-item").each(function() {
                    sortedIDs.push($(this).data("id"));
                });

                // Send sortedIDs to backend if needed using AJAX
                // console.log("New order: ", sortedIDs);
            }
        });

        // Toggle details logic
        $(".toggle-details").click(function() {
            const parent = $(this).closest(".sortable-item");
            const details = parent.find(".details");
            const icon = parent.find(".toggle-icon");

            details.slideToggle(200);
            icon.toggleClass("rotate-180");
        });

        // Open modal logic (if needed)
        $(".open-modal-btn").click(function() {
            const modalId = $(this).data("modal-id");
            $("#" + modalId).removeClass("hidden");
        });

        $(".close-modal-btn").click(function() {
            const modalId = $(this).data("modal-id");
            $("#" + modalId).addClass("hidden");
        });
    });
</script>