@extends('admin.layout.app')
@section('title', 'Videos')
@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">Videos</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('lesson-videos.index') }}">videos</a></li>
                            <li class="breadcrumb-item active">All videos</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <form method="GET" action="{{ route('lesson-videos.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="">Search</label>
                    <input type="text" name="search" value="{{ request('search') }}" class="form-control"
                        placeholder="Search by title...">
                </div>

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

            @if (request()->filled(['course_id', 'unit_id']) && $lessonVideos->isEmpty())
                <div class="alert alert-info d-flex justify-content-between align-items-center">
                    <span>No videos found for the selected filters.</span>
                    <a href="{{ route('lesson-videos.create') }}" class="btn btn-sm btn-success">Create Video</a>
                </div>
            @endif

            <div class="container" style="max-width: 1500px !important">
                <div class="p-3 card">
                    <div class="card-title">
                        <div class="mb-4 page-header">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h3 class="page-title">Videos</h3>
                                </div>
                                <div class="col-auto ms-auto">
                                    <a href="{{ route('lesson-videos.create') }}" class="btn btn-primary">
                                        <i class="fas fa-plus"></i> Add New Video
                                    </a>
                                </div>
                            </div>
                        </div>


                    </div>

                    <div class="card-body">
                        @if ($lessonVideos->isNotEmpty())
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Title</th>
                                            <th>Description</th>
                                            <th>Course</th>
                                            <th>Unit</th>
                                            <th>Lesson Type</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($lessonVideos as $video)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $video->title }}</td>
                                                <td>{{ Str::limit($video->description, 50, '...') }}</td>
                                                <td>{{ $video->course->name ?? '-' }}</td>
                                                <td>{{ $video->unit->name ?? '-' }}</td>
                                                <td>{{ $video->lessonType->name ?? '-' }}</td>
                                                <td>
                                                    <a href="{{ route('lesson-videos.edit', $video->id) }}"
                                                        class="btn btn-sm btn-primary">Edit</a>
                                                    <form action="{{ route('lesson-videos.destroy', $video->id) }}"
                                                        method="POST" class="d-inline"
                                                        onsubmit="return confirm('Delete this video?');">
                                                        @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 {{ $lessonVideos->firstItem() }} to {{ $lessonVideos->lastItem() }} of
                                    {{ $lessonVideos->total() }}
                                    entries
                                </div>

                                <div class="mt-3">
                                    {{ $lessonVideos->withQueryString()->links() }}
                                </div>
                            </div>
                        @else
                            <div class="alert alert-info d-flex justify-content-between align-items-center">
                                <span>No videos found.</span>
                                <a href="{{ route('lesson-videos.create') }}" class="btn btn-sm btn-success">Create
                                    Video</a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

            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>');
                    }
                });
            }

            $('#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