@extends('layouts.app')

<!-- Quill CSS -->
<link href="{{ asset('assets/vendor/quill/quill.core.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/vendor/quill/quill.snow.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/vendor/quill/quill.bubble.css') }}" rel="stylesheet" type="text/css" />

@section('content')
<div class="page-container">
    <div class="row">
        <div class="col-12">
            <div class="page-title-head d-flex align-items-sm-center flex-sm-row flex-column">
                <div class="flex-grow-1">
                    <h4 class="fs-18 text-uppercase fw-bold m-0">Edit Course</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header border-bottom border-dashed d-flex align-items-center">
                    <h4 class="header-title">Edit Course: {{ $course->title }}</h4>
                </div>
                <div class="card-body">

                    <!-- Form Start -->
                    <form action="{{ route('course.update', $course->id) }}" method="POST" enctype="multipart/form-data" id="editCourseForm">
                        @csrf
                        @method('PUT')

                        <!-- Hidden Inputs for Rich Text -->
                        <input type="hidden" name="aim" id="aimInput" value="{{ old('aim', $course->aim) }}">
                        <input type="hidden" name="content" id="contentInput" value="{{ old('content', $course->content) }}">

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

                        <div class="row">
                            <div class="col-lg-12">

                                <!-- Course Title -->
                                <div class="mb-3">
                                    <label for="title" class="form-label">Course Title <span class="text-danger">*</span></label>
                                    <input type="text" id="title" name="title"
                                           class="form-control @error('title') is-invalid @enderror"
                                           value="{{ old('title', $course->title) }}" required>
                                    @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Course Introduction -->
                                <div class="mb-3">
                                    <label for="introduction" class="form-label">Course Introduction</label>
                                    <input type="text" id="introduction" name="introduction"
                                           class="form-control @error('introduction') is-invalid @enderror"
                                           value="{{ old('introduction', $course->description) }}">
                                    @error('introduction')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Category -->
                                <div class="mb-3">
                                    <label for="course_category" class="form-label">Course Category <span class="text-danger">*</span></label>
                                    <select id="course_category" name="category" class="form-select @error('course_category') is-invalid @enderror" required>
                                        <option value="">Select Category</option>
                                        @foreach($categories as $category)
                                            <option value="{{ $category->id }}"
                                                {{ old('course_category', $course->category_id) == $category->id ? 'selected' : '' }}>
                                                {{ $category->category_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('course_category')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Image Upload -->
                                <div class="mb-3">
                                    <label for="image_url" class="form-label">Course Image</label>
                                    @if($course->image_url)
                                        <div class="mb-2 d-flex align-items-center">
                                            <img src="{{ asset('storage/' . $course->image_url) }}" alt="Current Image"
                                                 class="img-thumbnail me-3" style="max-width: 150px;">
                                            <div>
                                                <button type="button" class="btn btn-sm btn-outline-danger" id="removeImageBtn">
                                                    Remove Image
                                                </button>
                                                <input type="hidden" name="remove_image" id="removeImageFlag" value="0">
                                            </div>
                                        </div>
                                    @endif
                                    <input type="file" id="image_url" name="image_url"
                                           class="form-control @error('image_url') is-invalid @enderror"
                                           accept="image/*">
                                    <small class="text-muted">Recommended size: 800x450 pixels</small>
                                    @error('image_url')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Video Upload -->
                                <div class="mb-3">
                                    <label for="video_url" class="form-label">Course Video</label>
                                    @if($course->video_url)
                                        <div class="mb-2 d-flex align-items-center">
                                           <video src="{{ asset('storage/' . $course->video_url) }}" alt="Current Image"
                                                 class="img-thumbnail me-3" style="max-width: 150px;" controls></video>
                                            <div>
                                                <button type="button" class="btn btn-sm btn-outline-danger" id="removeVideoBtn">
                                                    Remove Video
                                                </button>
                                                <input type="hidden" name="remove_video" id="removeVideoFlag" value="0">
                                            </div>
                                        </div>
                                    @endif
                                    <input type="file" id="video_url" name="video_url"
                                           class="form-control @error('video_url') is-invalid @enderror"
                                           accept="video/*">
                                    @error('video_url')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Pricing -->
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="price" class="form-label">Price <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="number" id="price" name="amount"
                                                   class="form-control @error('price') is-invalid @enderror"
                                                   step="0.01" value="{{ old('price', $course->price) }}" required>
                                            <span class="input-group-text">{{ $course->currency }}</span>
                                        </div>
                                        @error('price')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="currency" class="form-label">Currency <span class="text-danger">*</span></label>
                                        <select id="currency" name="currency" class="form-select @error('currency') is-invalid @enderror" required>
                                            <option value="USD" {{ old('currency', $course->currency) == 'USD' ? 'selected' : '' }}>USD</option>
                                            <option value="EUR" {{ old('currency', $course->currency) == 'EUR' ? 'selected' : '' }}>EUR</option>
                                            <option value="GBP" {{ old('currency', $course->currency) == 'GBP' ? 'selected' : '' }}>GBP</option>
                                            <option value="AED" {{ old('currency', $course->currency) == 'AED' ? 'selected' : '' }}>AED</option>
                                        </select>
                                        @error('currency')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Duration -->
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="duration_days" class="form-label">Duration (days) <span class="text-danger">*</span></label>
                                        <input type="number" id="duration_days" name="duration"
                                               class="form-control @error('duration_days') is-invalid @enderror"
                                               value="{{ old('duration_days', $course->duration_days) }}" required>
                                        @error('duration_days')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="activation_period" class="form-label">Activation Period</label>
                                        <input type="text" id="activation_period" name="activation_period"
                                               class="form-control @error('activation_period') is-invalid @enderror"
                                               value="{{ old('activation_period', $course->activation_period) }}"
                                               placeholder="e.g., 30 days from purchase">
                                        @error('activation_period')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Difficulty & Inventory Type -->
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="difficulty_level" class="form-label">Difficulty Level</label>
                                        <select id="difficulty_level" name="difficulty_level"
                                                class="form-select @error('difficulty_level') is-invalid @enderror">
                                            <option value="" selected>Select Level</option>
                                            <option value="Beginner" {{ old('difficulty_level', $course->difficulty_level) == 'Beginner' ? 'selected' : '' }}>Beginner</option>
                                            <option value="Intermediate" {{ old('difficulty_level', $course->difficulty_level) == 'Intermediate' ? 'selected' : '' }}>Intermediate</option>
                                            <option value="Advanced" {{ old('difficulty_level', $course->difficulty_level) == 'Advanced' ? 'selected' : '' }}>Advanced</option>
                                        </select>
                                        @error('difficulty_level')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="inventory_type" class="form-label">Inventory Type</label>
                                        <input type="text" id="inventory_type" name="inventory_type"
                                               class="form-control @error('inventory_type') is-invalid @enderror"
                                               value="{{ old('inventory_type', $course->inventory_type) }}">
                                        @error('inventory_type')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Course Aim (Quill Editor) -->
                                <div class="mb-3">
                                    <label class="form-label">Course Aim</label>
                                    <div id="aim-editor" style="height: 200px; background-color: white;">
                                        {!! old('aim', $course->aim) !!}
                                    </div>
                                    @error('aim')
                                        <div class="text-danger small">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Course Content (Quill Editor) -->
                                <div class="mb-3">
                                    <label class="form-label">Course Content</label>
                                    <div id="content-editor" style="height: 300px; background-color: white;">
                                        {!! old('content', $course->content) !!}
                                    </div>
                                    @error('content')
                                        <div class="text-danger small">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Author -->
                                <div class="mb-3">
                                    <label for="author" class="form-label">Author</label>
                                    <input type="text" id="author" name="author"
                                           class="form-control @error('author') is-invalid @enderror"
                                           value="{{ old('author', $course->author) }}">
                                    @error('author')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Submit Buttons -->
                                <div class="mt-4 d-flex justify-content-between">
                                    <a href="{{ route('course.index') }}" class="btn btn-secondary">
                                        <i class="ri-arrow-left-line align-middle me-1"></i> Back to Courses
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="ri-save-line align-middle me-1"></i> Save Changes
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quill JS -->
<script src="{{ asset('assets/vendor/quill/quill.min.js') }}"></script>

<!-- Script Section -->
@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", function () {
    // Initialize Quill Editors
    const aimEditor = new Quill('#aim-editor', {
        theme: 'snow',
        modules: {
            toolbar: [
                [{ 'header': [1, 2, 3, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['link', 'image'],
                ['clean']
            ]
        }
    });

    const contentEditor = new Quill('#content-editor', {
        theme: 'snow',
        modules: {
            toolbar: [
                [{ 'header': [1, 2, 3, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['link', 'image'],
                ['clean']
            ]
        }
    });

    // Load initial HTML into editors if available
    @if(old('aim', $course->aim))
        aimEditor.clipboard.dangerouslyPasteHTML({!! json_encode(old('aim', $course->aim)) !!});
    @endif

    @if(old('content', $course->content))
        contentEditor.clipboard.dangerouslyPasteHTML({!! json_encode(old('content', $course->content)) !!});
    @endif

    // Before form submit, populate hidden input fields
    document.getElementById('editCourseForm').addEventListener('submit', function (e) {
        document.getElementById('aimInput').value = aimEditor.root.innerHTML;
        document.getElementById('contentInput').value = contentEditor.root.innerHTML;

        // Optional validation
        if (!aimEditor.getText().trim()) {
            e.preventDefault();
            alert('Please enter the course aim.');
        }

        if (!contentEditor.getText().trim()) {
            e.preventDefault();
            alert('Please enter the course content.');
        }
    });

    // Handle image removal
    const removeImageBtn = document.getElementById('removeImageBtn');
    if (removeImageBtn) {
        removeImageBtn.addEventListener('click', function () {
            document.getElementById('removeImageFlag').value = '1';
            this.closest('.d-flex').remove();
        });
    }
    // Handle video removal
    const removeVideoBtn = document.getElementById('removeVideoBtn');
    if (removeVideoBtn) {
        removeVideoBtn.addEventListener('click', function () {
            document.getElementById('removeVideoFlag').value = '1';
            this.closest('.d-flex').remove();
        });
    }
});
</script>
@endpush

@endsection