@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">{{ __('messages.workout_table_of_content') }}</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">{{ __('messages.workout_table_of_content') }}</h4>
                </div>

                <div class="card-body">
                    <form id="courseForm" enctype="multipart/form-data" method="POST" action="{{ route('course.store') }}">
                        @csrf <!-- CSRF Token is required for Laravel forms -->

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

                        <!-- Hidden fields for Quill content -->
                        <input type="hidden" name="aim" id="aim">
                        <input type="hidden" name="content" id="content">

                        <div class="row">
                            <div class="col-lg-12">
                                <h5 class="mb-3">{{ __('messages.workout_table_of_content') }}</h5>
                                <div class="row">
                                    <!-- Course Title -->
                                    <div class="col-lg-12">
                                        <div class="mb-3">
                                            <label for="title" class="form-label">{{ __('messages.course_title') }}</label>
                                            <input type="text" id="title" name="title" class="form-control" required value="{{ old('title') }}">
                                        </div>
                                    </div>

                                    <!-- Course Introduction -->
                                    <div class="col-lg-12">
                                        <div class="mb-3">
                                            <label for="introduction" class="form-label">{{ __('messages.course_introduction') }}</label>
                                            <input type="text" id="introduction" name="introduction" class="form-control" required value="{{ old('introduction') }}">
                                        </div>
                                    </div>

                                    <!-- Course Category -->
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <label for="course_category" class="form-label">{{ __('messages.course_category') }}</label>
                                            <select id="course_category" name="course_category" class="form-select" required>
                                                <option value="" disabled selected>{{ __('messages.select_category') }}</option>
                                                @foreach($categories as $category)
                                                    <option value="{{ $category->id }}" {{ old('course_category') == $category->id ? 'selected' : '' }}>{{ $category->category_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Course Image -->
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <label for="image_url" class="form-label">{{ __('messages.course_image') }}</label>
                                            <input type="file" id="image_url" name="image_url" class="form-control" accept="image/*">
                                        </div>
                                    </div>

                                    <!-- Course Intro Video -->
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <label for="video_url" class="form-label">{{ __('messages.course_intro_video') }}</label>
                                            <input type="file" id="video_url" name="video_url" class="form-control" accept="video/*">
                                        </div>
                                    </div>

                                    <!-- Course Price -->
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <label for="price" class="form-label">{{ __('messages.course_price') }}</label>
                                            <input type="number" id="price" name="price" class="form-control" step="0.01" required value="{{ old('price') }}">
                                        </div>
                                    </div>

                                    <!-- Currency -->
                                    <div class="col-lg-2">
                                        <div class="mb-3">
                                            <label for="currency" class="form-label">{{ __('messages.currency') }}</label>
                                            <input type="text" readonly id="currency" name="currency" class="form-control" value="AED" required>
                                        </div>
                                    </div>

                                    <!-- Course Duration -->
                                    <div class="col-lg-2">
                                        <div class="mb-3">
                                            <label for="duration_days" class="form-label">{{ __('messages.course_duration') }}</label>
                                            <input type="number" id="duration_days" name="duration_days" class="form-control" required value="{{ old('duration_days') }}">
                                        </div>
                                    </div>

                                    <!-- Activation Period -->
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <label for="activation_period" class="form-label">{{ __('messages.activation_period') }}</label>
                                            <input type="text" id="activation_period" name="activation_period" class="form-control" value="{{ old('activation_period') }}">
                                        </div>
                                    </div>

                                    <!-- Difficulty Level -->
                                    <div class="col-lg-3">
                                        <div class="mb-3">
                                            <label for="difficulty_level" class="form-label">{{ __('messages.difficulty_level') }}</label>
                                            <select id="difficulty_level" name="difficulty_level" class="form-select">
                                                <option value="Beginner" {{ old('difficulty_level') == 'Beginner' ? 'selected' : '' }}>Beginner</option>
                                                <option value="Intermediate" {{ old('difficulty_level') == 'Intermediate' ? 'selected' : '' }}>Intermediate</option>
                                                <option value="Advanced" {{ old('difficulty_level') == 'Advanced' ? 'selected' : '' }}>Advanced</option>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Inventory Type -->
                                    <div class="col-lg-2">
                                        <div class="mb-3">
                                            <label for="inventory_type" class="form-label">{{ __('messages.inventory_type') }}</label>
                                            <input type="text" id="inventory_type" name="inventory_type" class="form-control" value="{{ old('inventory_type') }}">
                                        </div>
                                    </div>

                                    <!-- Course Aim -->
                                    <div class="mb-3">
                                        <label for="aim-editor" class="form-label">{{ __('messages.course_aim') }}</label>
                                        <div id="aim-editor" style="height: 200px;">{!! old('aim') !!}</div>
                                    </div>

                                    <!-- Course Content -->
                                    <div class="mb-3">
                                        <label for="content-editor" class="form-label">{{ __('messages.course_content') }}</label>
                                        <div id="content-editor" style="height: 200px;">{!! old('content') !!}</div>
                                    </div>

                                    <!-- Author -->
                                    <div class="mb-3">
                                        <label for="author" class="form-label">{{ __('messages.author') }}</label>
                                        <input type="text" id="author" name="author" class="form-control" value="{{ old('author') }}">
                                    </div>
                                </div>
                            </div>

                            <!-- Submit Button -->
                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary">{{ __('messages.save') }}</button>
                                <a href="{{ route('course.index') }}" class="btn btn-secondary">{{ __('messages.back') }}</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quill Editor JS -->
<script src="{{ asset('assets/vendor/quill/quill.min.js') }}"></script>
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Initialize Quill editors
        const aimEditor = new Quill("#aim-editor", {
            theme: "snow",
            modules: {
                toolbar: [
                    [{ font: [] }, { size: [] }],
                    ["bold", "italic", "underline", "strike"],
                    [{ color: [] }, { background: [] }],
                    [{ script: "super" }, { script: "sub" }],
                    [{ header: [1, 2, 3, 4, 5, 6, false] }, "blockquote", "code-block"],
                    [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }],
                    ["direction", { align: [] }],
                    ["link", "image", "video"],
                    ["clean"],
                ]
            }
        });

        const contentEditor = new Quill("#content-editor", {
            theme: "snow",
            modules: {
                toolbar: [
                    [{ font: [] }, { size: [] }],
                    ["bold", "italic", "underline", "strike"],
                    [{ color: [] }, { background: [] }],
                    [{ script: "super" }, { script: "sub" }],
                    [{ header: [1, 2, 3, 4, 5, 6, false] }, "blockquote", "code-block"],
                    [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }],
                    ["direction", { align: [] }],
                    ["link", "image", "video"],
                    ["clean"],
                ]
            }
        });

        // Set initial content if there's old input
        @if(old('aim'))
            aimEditor.clipboard.dangerouslyPasteHTML({!! json_encode(old('aim')) !!});
        @endif
        
        @if(old('content'))
            contentEditor.clipboard.dangerouslyPasteHTML({!! json_encode(old('content')) !!});
        @endif

        // Handle form submission
        document.getElementById('courseForm').addEventListener('submit', function (e) {
            // Update hidden fields with Quill content
            document.getElementById('aim').value = aimEditor.root.innerHTML;
            document.getElementById('content').value = contentEditor.root.innerHTML;
            
            // The form will now submit normally with all data
        });
    });
</script>
@endpush

@endsection