@extends('admin.layout.app')
@section('title', 'Create New Video')
@push('styles')
    <style>
        .video-preview-wrapper {
            width: 320px;
            height: 180px;
            margin: 0 auto;
            position: relative;
            background-color: #f8f9fa;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        #video-preview {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }
    </style>
@endpush
@section('content')
    <div class="content container-fluid">
        <div class="page-header">
            <div class="row align-items-center">
                <div class="col-sm-12">
                    <div class="page-sub-header">
                        <h3 class="page-title">Add Video</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="">Video</a></li>
                            <li class="breadcrumb-item"><a href="">Add Video</a>
                            </li>
                            <li class="breadcrumb-item active">Add Video</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-sm-12">
                <div class="card comman-shadow">
                    <div class="card-body">

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form method="POST" class="row" action="{{ route('lesson-videos.store') }}"
                            enctype="multipart/form-data">
                            @csrf
                            <!-- Lesson Type -->
                            <div class="mb-3 col-md-3 local-forms">
                                <label>Lesson Type <span class="text-danger">*</span></label>
                                <select name="lesson_type_id" class="form-control">
                                    @foreach ($lessonTypes as $type)
                                        <option @selected($type->id == old('lesson_type_id')) value="{{ $type->id }}">
                                            {{ $type->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Keep Course and Unit as-is -->
                            <div class="mb-3 col-md-3 local-forms">
                                <label for="">Course <span class="text-danger">*</span></label>
                                <select name="course_id" id="course_id" class="form-control">
                                    <option value="">Select Course</option>
                                    @foreach ($courses as $course)
                                        <option @selected($course->id == old('course_id')) value="{{ $course->id }}">
                                            {{ $course->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Unit Filter -->
                            <div class="mb-3 col-md-3 local-forms">
                                <label for="">Unit <span class="text-danger">*</span></label>
                                <select name="unit_id" id="unit_id" class="form-control" disabled>
                                    <option value="">Select Unit</option>
                                </select>
                            </div>

                            <!-- Unit Filter -->
                            <div class="mb-3 col-md-3 local-forms">
                                <label for="">Lesson <span class="text-danger">*</span></label>
                                <select name="lesson_id" id="lesson_id" class="form-control" disabled>
                                    <option value="">Select Lesson</option>
                                </select>
                            </div>

                            <div class="mb-3 local-forms">
                                <label for="">Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="title">
                            </div>

                            <div class="mb-3 local-forms">
                                <label for="">Description <span class="text-danger">*</span></label>
                                <textarea name="description" class="form-control" id="" cols="30" rows="10"></textarea>
                            </div>


                            <!-- Video Upload -->
                            <div class="mb-3 local-forms">
                                <label for="video" class="form-label fw-semibold">Upload Video <span
                                        class="text-danger">*</span></label>
                                <input type="file" name="video" id="video" accept="video/*" class="form-control"
                                    required>
                                <small class="text-muted">Supported formats: mp4, webm, ogg. Max size: 100MB.</small>
                            </div>

                            <!-- Video Preview -->
                            <div class="mb-3 col-md-12 local-forms">
                                <label class="form-label fw-semibold">Video Preview</label>
                                <div class="p-2 text-center border rounded shadow-sm video-preview-wrapper bg-light">
                                    <video id="video-preview" controls style="display: none;"></video>
                                    <p id="no-preview" class="my-2 text-muted">No video selected</p>
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">Create</button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            const courseId = $('#course_id').val();
            const unitSelect = $('#unit_id');
            const unitId = "{{ old('unit_id') }}";
            const lessonSelect = $('#lesson_id');

            //initial loaders
            if (courseId) {
                loadUnits(courseId);
            }

            if (unitId) {
                loadLessons(unitId)
            }

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

            $('#unit_id').on('change', function() {
                let unitId = $(this).val();
                lessonSelect.prop('disabled', true).html('<option value="">Loading...</option>');
                loadLessons(unitId);
            });

            $('#video').on('change', function(event) {
                const file = event.target.files[0];
                const videoPreview = $('#video-preview');
                const noPreview = $('#no-preview');

                if (file && file.type.startsWith('video/')) {
                    const videoURL = URL.createObjectURL(file);
                    videoPreview.attr('src', videoURL).show();
                    noPreview.hide(); // hides it, but let's make it stronger just in case
                    noPreview.css('display', 'none'); // force hide
                } else {
                    videoPreview.hide().removeAttr('src');
                    noPreview.show(); // show if invalid or no file
                }
            });
            //load functions
            function loadLessons(unitId) {
                if (unitId) {
                    $.ajax({
                        url: `/get-lessons-by-unit/${unitId}`,
                        type: 'GET',
                        success: function(res) {
                            lessonSelect.empty().append(
                                '<option value="">Select Lesson</option>');
                            $.each(res.lessons, function(key, lesson) {
                                selected = lesson.id == "{{ old('lesson_id') }}" ?
                                    'selected' : ''

                                lessonSelect.append(
                                    `<option value="${lesson.id}" ${selected}>${lesson.title}</option>`
                                );
                            });
                            lessonSelect.prop('disabled', false);
                        },
                        error: function() {
                            lessonSelect.html('<option value="">Error loading</option>');
                        }
                    });
                } else {
                    lessonSelect.prop('disabled', true).html('<option value="">Select Unit</option>');
                }
            }

            function loadUnits(courseId) {
                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) {
                                const isSelected = unit.id == '{{ old('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>');
                        }
                    });
                }

            }




        });
    </script>
@endpush