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

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

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

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

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

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

                        {{-- Course --}}
                        <div class="form-group">
                            <label>{{ __('Select Course') }}</label>
                            <select name="course_id" class="form-control">
                                <option value="">{{ __('Choose...') }}</option>
                                @foreach($courses as $course)
                                    <option value="{{ $course->id }}" {{ $lesson->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>{{ __('Status') }}</label>
                            <select name="status" class="form-control">
                                <option value="1" {{ $lesson->status == 1 ? 'selected' : '' }}>{{ __('Active') }}</option>
                                <option value="0" {{ $lesson->status == 0 ? 'selected' : '' }}>{{ __('Hidden') }}</option>
                            </select>
                            @error('status') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>

                        {{-- Video Links --}}
                        <div class="form-group">
                            <label>{{ __('External Video Links') }}</label>
                            <div id="video-links-wrapper">
                                @forelse($lesson->videos as $video)
                                    <div class="input-group mb-2">
                                        <input type="url" name="external_video_links[]" class="form-control" value="{{ $video->link }}" placeholder="https://vimeo.com/...">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-danger remove-link">×</button>
                                        </div>
                                    </div>
                                @empty
                                    <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 type="button" class="btn btn-danger remove-link">×</button>
                                        </div>
                                    </div>
                                @endforelse
                            </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>

                        {{-- Existing PDFs --}}
                        @if ($lesson->getMedia('pdfs')->count())
                            <div class="form-group">
                                <label>{{ __('Uploaded PDFs') }}</label>
                                <ul id="uploaded-pdfs" class="list-group mb-2">
                                    @foreach ($lesson->getMedia('pdfs') as $media)
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <a href="{{ $media->getFullUrl() }}" target="_blank">{{ $media->file_name }}</a>
                                            <button type="button" class="btn btn-sm btn-danger delete-pdf" data-url="{{ route('teacher.lessons.pdf.delete', [$lesson->id, $media->id]) }}">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        {{-- Add New PDFs --}}
                        <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>

                        {{-- Show Existing Image --}}
                        @if ($lesson->image)
                            <div class="form-group mt-2">
                                <label>{{ __('Current Image') }}</label><br>
                                <img src="{{ $lesson->image }}" alt="Lesson Image" style="max-width: 200px;" class="img-thumbnail mt-2">
                            </div>
                        @endif

                        <button type="submit" class="btn btn-success">{{ __('Update 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 () {
            const videoWrapper = document.getElementById('video-links-wrapper');
            const addVideoBtn = document.getElementById('add-video-link');
            const pdfWrapper = document.getElementById('pdf-links-wrapper');
            const addPdfBtn = document.getElementById('add-pdf-upload');

            // Add video
            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://youtube.com/...">
            <div class="input-group-append">
                <button class="btn btn-danger remove-link" type="button">×</button>
            </div>`;
                videoWrapper.appendChild(div);
            });

            // Add PDF
            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);
            });

            // Remove elements
            document.addEventListener('click', function (e) {
                if (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.") }}'
                        });
                        return;
                    }
                    e.target.closest('.input-group').remove();
                }

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

                if (e.target.closest('.delete-pdf')) {
                    const btn = e.target.closest('.delete-pdf');
                    const url = btn.getAttribute('data-url');
                    Swal.fire({
                        title: '{{ __("Are you sure?") }}',
                        text: '{{ __("This PDF will be deleted.") }}',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '{{ __("Yes, delete it!") }}',
                        cancelButtonText: '{{ __("Cancel") }}'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            fetch(url, {
                                method: 'DELETE',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json',
                                },
                            })
                                .then(res => res.json() )
                                .then(data => {
                                    location.reload();
                                    if (data.success) {
                                        btn.closest('li').remove();
                                        Swal.fire('{{ __("Deleted!") }}', data.message, 'success');
                                    } else {
                                        Swal.fire('{{ __("Error!") }}', data.message, 'error');
                                    }
                                });
                        }
                    });
                }
            });
        });
    </script>
@endsection