@extends('admin.layout.app')
@section('title', 'Edit 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">Edit Video</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="">Video</a></li>
                            <li class="breadcrumb-item"><a href="">Edit Video</a>
                            </li>
                            <li class="breadcrumb-item active">Edit 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.update', $lessonVideo->id) }}"
                            enctype="multipart/form-data">
                            @method('PUT')
                            @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 == $lessonVideo->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 == $lessonVideo->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" value="{{ old('title', $lessonVideo->title) }}" 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">{{ old('description', $lessonVideo->description) }}</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">
                                <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
                                        src="{{ $lessonVideo->video ? Storage::disk('s3')->url($lessonVideo->video->path) : '' }}"
                                        id="video-preview" controls style="max-width: 100%; height: auto;">
                                    </video>
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">Update</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 lessonSelect = $('#lesson_id')
            const unitId = "{{ $lessonVideo->unit_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);
            });

            $('#audio').on('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const url = URL.createObjectURL(file);
                    $('#audio-preview').attr('src', url);
                    $('#audio-preview-container').show();
                } else {
                    $('#audio-preview').removeAttr('src');
                    $('#audio-preview-container').hide();
                }
            });
            //load functions
            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 == '{{ $lessonVideo->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>');
                        }
                    });
                }

            }

            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 == "{{ $lessonVideo->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>');
                }
            }


        });
    </script>
@endpush