@extends('admin.layout.app')
@section('title', 'Lessons')
@section('content')
    <style>
        table tbody tr td {
            border-bottom: 1px solid #dee2e6;
        }
    </style>
    <div class="content container-fluid">

        <div class="page-header">
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-sub-header">
                        <h3 class="page-title">Lessons</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('lessons.index') }}">Lessons</a></li>
                            <li class="breadcrumb-item active">All Lessons</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <!-- Unit Filter -->

            <form method="GET" action="{{ route('lessons.index') }}" class="mb-4 row g-3">
                <div class="col-md-3 local-forms">
                    <label for="">Course</label>
                    <select name="course_id" id="course_id" class="form-control">
                        <option value="">--Select Course--</option>
                        @foreach ($courses as $course)
                            <option value="{{ $course->id }}" {{ request('course_id') == $course->id ? 'selected' : '' }}>
                                {{ $course->name }}
                            </option>
                        @endforeach
                    </select>
                </div>


                <div class="col-md-3 local-forms">
                    <label for="">Unit</label>
                    <select name="unit_id" id="unit_id" class="form-control" disabled>
                        <option value="">--Select Unit--</option>
                    </select>
                </div>

                <div class="col-md-3 local-forms">
                    <label for="">Lesson Type</label>
                    <select name="lesson_type_id" class="form-select form-control">
                        <option value="">-- Select Lesson Type --</option>
                        @foreach ($lessonTypes as $type)
                            <option value="{{ $type->id }}"
                                {{ request('lesson_type_id') == $type->id ? 'selected' : '' }}>
                                {{ $type->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3 local-forms">
                    <label for="">Type</label>
                    <select name="type" class="form-select form-control">
                        <option value="">-- Select Type --</option>
                        @foreach ($types as $type)
                            <option value="{{ $type }}" {{ request('type') == $type ? 'selected' : '' }}>
                                {{ ucfirst($type) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-12">
                    <button type="submit" class="btn btn-primary">Filter</button>
                    <a href="{{ route('lessons.index') }}" class="btn btn-secondary">Reset</a>
                </div>
            </form>

            @if (request()->filled(['course_id', 'unit_id', 'lesson_type_id', 'type']) && $lessons->isEmpty())
                <div class="alert alert-info d-flex justify-content-between align-items-center">
                    <span>No lessons found for the selected filters.</span>
                    <a href="{{ route('lessons.create') }}" class="btn btn-sm btn-success">Create Lesson</a>
                </div>
            @endif
            @if (!request()->filled(['course_id', 'unit_id']))
                <div class="alert alert-danger">Please select a course and it's unit to view its lessons.</div>
            @endif
            @if ($lessons->isNotEmpty())
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Course</th>
                                <th>Unit</th>
                                <th>Lesson Type</th>
                                <th>Type</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($lessons as $lesson)
                                <tr>
                                    <td>{{ $lesson->title }}</td>
                                    <td>{{ $lesson->course->name }}</td>
                                    <td>{{ $lesson->unit->name }}</td>
                                    <td>{{ ucfirst($lesson->type) }}</td>
                                    <td>{{ $lesson->lessonType->name }}</td>
                                    <td>
                                        @switch($lesson->type)
                                            @case('video')
                                                <a href="{{ route('lesson-videos.create') }}" class="btn btn-sm btn-primary">Add
                                                    Video</a>
                                            @break

                                            @case('quiz')
                                                <a href="{{ route('lesson-quizzes.create') }}" class="btn btn-sm btn-primary">Add
                                                    Quiz</a>
                                            @break

                                            @case('vocabulary')
                                                <a href="{{ route('lesson-vocabularies.create') }}"
                                                    class="btn btn-sm btn-primary">Add Vocabulary</a>
                                            @break

                                            @case('conversation')
                                                <a href="{{ route('lesson-conversations.create') }}"
                                                    class="btn btn-sm btn-primary">Add Conversation</a>
                                            @break

                                            @default
                                        @endswitch
                                        <a href="{{ route('lessons.edit', $lesson->id) }}"
                                            class="btn btn-sm btn-primary">Edit</a>
                                        <form action="{{ route('lessons.destroy', $lesson->id) }}" method="POST"
                                            class="d-inline" onsubmit="return confirm('Delete this lesson?');">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-sm btn-danger">Delete</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                </div>

                <div class="p-2 d-flex flex-column flex-md-row justify-content-between align-items-center">
                    <div class="mb-2 mb-md-0 text-muted">
                        Showing {{ $lessons->firstItem() }} to {{ $lessons->lastItem() }} of {{ $lessons->total() }}
                        entries
                    </div>

                    <div class="mt-3">
                        {{ $lessons->withQueryString()->links() }}
                    </div>
                </div>


            @endif
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            const courseId = $('#course_id').val();
            const unitSelect = $('#unit_id');

            // Load units if course is already selected (on page reload)
            if (courseId && unitSelect.children('option').length === 1) {
                $.ajax({
                    url: `/get-units-by-course/${courseId}`,
                    type: 'GET',
                    success: function(res) {
                        unitSelect.empty().append('<option value="">Select Unit</option>');
                        $.each(res.units, function(key, unit) {
                            const isSelected = unit.id == '{{ request('unit_id') }}' ?
                                'selected' : '';
                            unitSelect.append(
                                `<option value="${unit.id}" ${isSelected}>${unit.title_prefix}-${unit.title_number}: ${unit.name}</option>`
                            );
                        });
                        unitSelect.prop('disabled', false);
                    },
                    error: function() {
                        unitSelect.html('<option value="">Error loading</option>');
                    }
                });
            }

            // Normal on-change loading
            $('#course_id').on('change', function() {
                let courseId = $(this).val();
                unitSelect.prop('disabled', true).html('<option value="">Loading...</option>');

                if (courseId) {
                    $.ajax({
                        url: `/get-units-by-course/${courseId}`,
                        type: 'GET',
                        success: function(res) {
                            unitSelect.empty().append('<option value="">Select Unit</option>');
                            $.each(res.units, function(key, unit) {
                                unitSelect.append(
                                    `<option value="${unit.id}">${unit.title_prefix}-${unit.title_number}: ${unit.name}</option>`
                                );
                            });
                            unitSelect.prop('disabled', false);
                        },
                        error: function() {
                            unitSelect.html('<option value="">Error loading</option>');
                        }
                    });
                } else {
                    unitSelect.prop('disabled', true).html('<option value="">Select Unit</option>');
                }
            });
        });
    </script>
@endpush