@extends('components.dashboard.layouts.master')

@section('title', __('Add Lesson'))

@section('content')
    <div class="app-content content">
        <div class="content-wrapper">
            <x-dashboard.layouts.breadcrumb now="{{ __('Add Lesson') }}">
                <x-slot:name>{{ __('Lessons List') }}</x-slot:name>
                <x-slot:route>{{ route('teacher.lessons.index') }}</x-slot:route>

            </x-dashboard.layouts.breadcrumb>

            <form id="lessonForm" action="{{ route('teacher.lessons.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="card">
                    <div class="card-body">

                        {{-- Lesson Title --}}
                        <div class="form-group">
                            <label for="title">{{ __('Lesson Title') }}</label>
                            <input type="text" class="form-control" name="title" value="{{ old('title') }}" required>
                            @error('title')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        {{-- Description --}}
                        <div class="form-group">
                            <label for="description">{{ __('Description') }}</label>
                            <textarea class="form-control" name="description" rows="3">{{ old('description') }}</textarea>
                            @error('description')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        {{-- Course Select --}}
                        <div class="form-group">
                            <label for="course_id">{{ __('Select Course') }}</label>
                            <select name="course_id" class="form-control">
                                <option value="">{{ __('Choose...') }}</option>
                                @foreach($courses as $course)
                                    <option value="{{ $course->id }}" {{ old('course_id') == $course->id ? 'selected' : '' }}>
                                        {{ $course->title }}
                                    </option>
                                @endforeach
                            </select>
                            @error('course_id')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        {{-- Status --}}
                        <div class="form-group">
                            <label for="status">{{ __('Status') }}</label>
                            <select name="status" class="form-control">
                                <option value="1" {{ old('status') == '1' ? 'selected' : '' }}>{{ __('Active') }}</option>
                                <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>{{ __('Hidden') }}</option>
                            </select>
                            @error('status')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        {{-- External Video Links (Repeater) --}}
                        <div class="form-group">
                            <label>{{ __('External Video Links') }}</label>
                            <div id="video-links-wrapper">
                                <div class="input-group mb-2">
                                    <input type="url" name="external_video_links[]" class="form-control" placeholder="https://vimeo.com/...">
                                    <div class="input-group-append">
                                        <button class="btn btn-danger remove-link" type="button">×</button>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-primary mt-1" id="add-video-link">{{ __('Add Video Link') }}</button>
                            <small class="form-text text-muted">
                                {{ __('Only Vimeo links are allowed (e.g. https://vimeo.com/123456789)') }}
                            </small>
                            @error('external_video_links.*')
                            <small class="text-danger d-block">{{ $message }}</small>
                            @enderror
                        </div>

                        {{-- Upload PDFs (Repeater) --}}
                        <div class="form-group">
                            <label>{{ __('Upload PDFs') }}</label>
                            <div id="pdf-links-wrapper">
                                <div class="input-group mb-2">
                                    <input type="file" name="pdfs[]" class="form-control" accept="application/pdf">
                                    <div class="input-group-append">
                                        <button class="btn btn-danger remove-pdf" type="button">×</button>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-primary mt-1" id="add-pdf-upload">{{ __('Add PDF Upload') }}</button>
                            @error('pdfs.*')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="image">{{ __('Lesson Image') }}</label>
                            <input type="file" name="image" class="form-control" accept="image/*">
                            @error('image')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <button id="submitLessonForm" type="submit" class="btn btn-success">{{ __('Create Lesson') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Video link logic
            const videoWrapper = document.getElementById('video-links-wrapper');
            const addVideoBtn = document.getElementById('add-video-link');

            addVideoBtn.addEventListener('click', function () {
                const div = document.createElement('div');
                div.className = 'input-group mb-2';
                div.innerHTML = `
                    <input type="url" name="external_video_links[]" class="form-control" placeholder="https://vimeo.com/...">
                    <div class="input-group-append">
                        <button class="btn btn-danger remove-link" type="button">×</button>
                    </div>`;
                videoWrapper.appendChild(div);
            });

            // PDF upload logic
            const pdfWrapper = document.getElementById('pdf-links-wrapper');
            const addPdfBtn = document.getElementById('add-pdf-upload');

            addPdfBtn.addEventListener('click', function () {
                const div = document.createElement('div');
                div.className = 'input-group mb-2';
                div.innerHTML = `
                    <input type="file" name="pdfs[]" class="form-control" accept="application/pdf">
                    <div class="input-group-append">
                        <button class="btn btn-danger remove-pdf" type="button">×</button>
                    </div>`;
                pdfWrapper.appendChild(div);
            });
            document.getElementById('lessonForm').addEventListener('submit', function (e) {
                let btn = document.getElementById('submitLessonForm');
                btn.disabled = true;
                btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
            });

            // Global remove handler
            document.addEventListener('click', function (e) {
                // Remove video link
                if (e.target && e.target.classList.contains('remove-link')) {
                    const links = document.querySelectorAll('input[name="external_video_links[]"]');
                    if (links.length <= 1) {
                        Swal.fire({
                            icon: 'warning',
                            title: '{{ __("Warning!") }}',
                            text: '{{ __("You must have at least one video link.") }}',
                            confirmButtonText: '{{ __("OK") }}'
                        });
                        return;
                    }
                    e.target.closest('.input-group').remove();
                }

                // Remove PDF input
                if (e.target && e.target.classList.contains('remove-pdf')) {
                    const pdfInputs = document.querySelectorAll('input[name="pdfs[]"]');
                    if (pdfInputs.length <= 1) {
                        Swal.fire({
                            icon: 'warning',
                            title: '{{ __("Warning!") }}',
                            text: '{{ __("You must have at least one PDF file.") }}',
                            confirmButtonText: '{{ __("OK") }}'
                        });
                        return;
                    }
                    e.target.closest('.input-group').remove();
                }
            });
        });
    </script>
@endsection