@extends('layouts/layoutMaster')

@section('title', 'Add a new Course')

@section('vendor-style')
    @vite(['resources/assets/vendor/libs/bs-stepper/bs-stepper.scss', 'resources/assets/vendor/libs/bootstrap-select/bootstrap-select.scss', 'resources/assets/vendor/libs/select2/select2.scss', 'resources/assets/vendor/libs/@form-validation/form-validation.scss'])
    @vite(['resources/assets/vendor/libs/dropzone/dropzone.scss'])
    @vite(['resources/assets/vendor/libs/quill/typography.scss', 'resources/assets/vendor/libs/highlight/highlight.scss', 'resources/assets/vendor/libs/quill/katex.scss', 'resources/assets/vendor/libs/quill/editor.scss'])

@endsection

@section('vendor-script')
    @vite(['resources/assets/vendor/libs/bs-stepper/bs-stepper.js', 'resources/assets/vendor/libs/bootstrap-select/bootstrap-select.js', 'resources/assets/vendor/libs/select2/select2.js', 'resources/assets/vendor/libs/@form-validation/popular.js', 'resources/assets/vendor/libs/@form-validation/bootstrap5.js', 'resources/assets/vendor/libs/@form-validation/auto-focus.js', 'resources/assets/vendor/libs/jquery-repeater/jquery-repeater.js'])

    @vite(['resources/assets/vendor/libs/quill/katex.js', 'resources/assets/vendor/libs/highlight/highlight.js', 'resources/assets/vendor/libs/quill/quill.js'])
@endsection

@section('page-script')
    @vite(['resources/assets/js/course-create.js'])
    <script>
        window.id = "{{ $course->id ?? '' }}";
        window.csrfToken = "{{ csrf_token() }}";
        window.createParentUrl = "{{ route('courses.store') }}";
        window.uploadUrl = "{{ route('upload-file') }}";
        window.courseListUrl = "{{ route('courses.index') }}";
        window.categoryCreateUrl = "{{ route('master-settings-categories.store') }}";
        window.courseCreateUrl = "{{ route('courses.create') }}";
        window.productImage = "{{ $course->document->url ?? '' }}"; // Replace with actual image path or URL
        // window.existingLessons = "{{ $course->lessons ?? '' }}";
        window.existingLessons = @json($course->lessons ?? []);
    </script>
@endsection

@section('content')
    <form id="createCourseForm" method="POST" action="{{ route('courses.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h4 class="mb-0">Add a new Course</h4>
            <div>
                <a href="{{ route('courses.index') }}" class="btn btn-label-secondary">Discard</a>
                <button type="submit" data-type="draft" class="btn btn-warning submit">Save Draft</button>
                <button type="submit" data-type="active" class="btn btn-primary submit">Publish Course</button>
            </div>
        </div>
        <ul class="nav nav-tabs mb-4" id="courseTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="course-details-tab" data-bs-toggle="tab"
                    data-bs-target="#course-details" type="button" role="tab" aria-controls="course-details"
                    aria-selected="true">Course Details</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="lesson-details-tab" data-bs-toggle="tab" data-bs-target="#lesson-details"
                    type="button" role="tab" aria-controls="lesson-details" aria-selected="false">Lesson Details
                </button>
            </li>
        </ul>
        <div class="tab-content" id="courseTabsContent">
            <div class="tab-pane fade show active" id="course-details" role="tabpanel" aria-labelledby="course-details-tab">
                <div class="row">
                    <!-- Left Column -->
                    <div class="col-md-8">
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">Course Information</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <input type="hidden" name="id" id="course_id" value="{{ $course->id ?? '' }}">
                                    <label class="form-label" for="course_name">Name</label>
                                    <input type="text" class="form-control" id="course_name" name="name"
                                        placeholder="Course Title" value="{{ $course->name ?? '' }}">
                                    <small class="text-danger error_name"></small>
                                </div>

                                {{-- <div class="mb-3">
                                    <label class="form-label" for="course_duration">Course Duration</label>
                                    <input type="text" class="form-control" id="course_duration" name="duration"
                                        step="5" placeholder="HH:MM" maxlength="5"
                                        value="{{ isset($course) ? date('H:i', strtotime($course->duration)) : '' }}">
                                    <small class="text-danger error_duration"></small>
                                </div> --}}

                                <div class="mb-3">
                                    <label class="form-label" for="related_product">Related Product</label>
                                    <select class="form-select select2" id="related_product" name="product_id">
                                        <option value="">Select Product</option>
                                        @foreach ($products as $product)
                                            <option value="{{ $product->id }}"
                                                {{ isset($course) && $course->product_id == $product->id ? 'selected' : '' }}>
                                                {{ $product->name }}</option>
                                        @endforeach
                                    </select>
                                    <small class="text-danger error_product_id"></small>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label" for="course_description">Description <span
                                            class="text-muted">(Optional)</span></label>
                                    <div class="snow-editor"></div>
                                    <textarea class="d-none" name="description" id="description" type="hidden">{!! $course->description ?? '' !!}</textarea>
                                    <small class="text-danger error_description"></small>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">Product Banner</h5>
                            </div>
                            <div class="card-body text-center">
                                <div class="mb-3">
                                    <div class="col-md-12">
                                        <input type="hidden" name="document_id" id="document_id" class="document_id"
                                            value="{{ $course->banner ?? '' }}">
                                        <input type="hidden" name="document_url" id="document_url" class="document_url"
                                            value="{{ $course->document->url ?? '' }}">
                                        <div action="{{ route('upload-file') }}" class="dropzone needsclick"
                                            id="dropzone">
                                            @csrf
                                            <div class="dz-message needsclick">
                                                Drop files here or click to upload
                                            </div>
                                        </div>
                                        <label class="text-danger error_document_id"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">Organize</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3 col-md-12">
                                    <label class="form-label" for="course_level">Level</label>
                                    <select class="form-select select2" id="course_level" name="level_id">
                                        <option value="">Select Level</option>
                                        @foreach ($levels as $level)
                                            <option value="{{ $level->id }}"
                                                {{ isset($course) && $course->level_id == $level->id ? 'selected' : '' }}>
                                                {{ $level->title }}</option>
                                        @endforeach
                                    </select>
                                    <label class="text-danger error_level_id"></label>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label" for="course_category">Type/Category</label>
                                    <div class="d-flex">
                                        <div class="mb-3 col-md-10">
                                            <select class="form-select select2" id="course_category" name="category_id">
                                                <option value="">Select Type/Category</option>
                                                @foreach ($categories as $category)
                                                    <option value="{{ $category->id }}"
                                                        {{ isset($course) && $course->category_id == $category->id ? 'selected' : '' }}>
                                                        {{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                            <label class="text-danger error_category_id"></label>
                                        </div>
                                        <button type="button" class="btn btn-icon btn-label-primary waves-effect ms-2"
                                            data-bs-toggle="offcanvas" data-bs-target="#offcanvasAddCategory">
                                            <span class="icon-base ti tabler-plus icon-22px"></span>
                                        </button>
                                    </div>
                                </div>

                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="premiumSwitch" name="is_premium"
                                        {{ isset($course) && $course->is_premium ? 'checked' : '' }}>
                                    <label class="form-check-label" for="premiumSwitch">Set to only Premium</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="lesson-details" role="tabpanel" aria-labelledby="lesson-details-tab">
                <div class="row">
                    <div class="col-md">
                        <div class="form-repeater">
                            <div data-repeater-list="lessons">
                                <div data-repeater-item>
                                    <div class="accordion mt-4 accordion-header-primary active" id="accordionStyle1">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button type="button" class="accordion-button collapsed"
                                                    data-bs-toggle="collapse" data-bs-target="#accordionStyle1-1"
                                                    aria-expanded="false">Lesson Information</button>
                                            </h2>

                                            <div id="accordionStyle1-1" class="accordion-collapse collapse"
                                                data-bs-parent="#accordionStyle1">
                                                <div class="accordion-body">
                                                    <!-- Left Column -->
                                                    <div class="col-md-12">
                                                        <div class="card mb-4">
                                                            <div class="card-body">
                                                                <div class="d-flex mb-3">
                                                                    <input type="hidden" name="lesson_id"
                                                                        class="lesson_id">
                                                                    <div class="col-md-10">
                                                                        <label class="form-label"
                                                                            for="lesson_title">Name</label>
                                                                        <input type="text" class="form-control"
                                                                            id="lesson_title" name="name"
                                                                            placeholder="Lesson Title">
                                                                    </div>
                                                                    <div class="col-md-2 ms-2 mt-6">
                                                                        <button type="button"
                                                                            class="btn btn-outline-secondary waves-effect"
                                                                            data-repeater-delete><i
                                                                                class="icon-base ti tabler-trash me-1"></i>Delete
                                                                        </button>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-12 mb-3">
                                                                    <label class="form-label"
                                                                        for="lesson_description">Description <span
                                                                            class="text-muted">(Optional)</span></label>
                                                                    <div class="snow-editor"></div>
                                                                    <textarea class="d-none" name="description" id="description" type="hidden"></textarea>
                                                                </div>

                                                                <div class="col-md-12">
                                                                    <label class="form-label" for="product_id">Product
                                                                    </label>
                                                                    <select class="form-select select2"
                                                                        id="course_product_id" name="product_id">
                                                                        <option value="">Select Product</option>
                                                                        @foreach ($products as $product)
                                                                            <option value="{{ $product->id }}">
                                                                                {{ $product->name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                    <small class="text-danger error_product_id"></small>
                                                                </div>
                                                            </div>
                                                            <div class="card-header">
                                                                <h5 class="mb-0">Media</h5>
                                                            </div>
                                                            <div class="card-body text-center">
                                                                <div class="mb-3">
                                                                    <div class="col-md-12">
                                                                        <input type="hidden" name="document_id"
                                                                            id="document_id" class="document_id">
                                                                        <div action="{{ route('upload-file') }}"
                                                                            class="dropzone needsclick  lesson-dropzone"
                                                                            id="dropzone">
                                                                            @csrf
                                                                            <div class="dz-message needsclick">
                                                                                Drop files here or click to upload
                                                                                <span class="note needsclick">(This is just
                                                                                    a demo dropzone. Selected files
                                                                                    are
                                                                                    <span class="fw-medium">not</span>
                                                                                    actually uploaded.)</span>
                                                                            </div>
                                                                        </div>
                                                                        <label
                                                                            class="text-danger error_document_id"></label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-2 d-flex justify-content-center align-items-center">
                                <button type="button" class="btn btn-primary" data-repeater-create>
                                    <i class="icon-base ti tabler-plus me-1"></i>
                                    <span class="align-middle">Add Another
                                        Lesson</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddCategory"
        aria-labelledby="offcanvasAddCategoryLabel">
        <div class="offcanvas-header border-bottom">
            <h5 id="offcanvasAddCategoryLabel" class="offcanvas-title">Add Category</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
            <form class="add-new-category pt-0" id="addNewCategoryForm">
                @csrf
                <input type="hidden" name="id" id="category_id">
                <div class="mb-6 form-control-validation">
                    <label class="form-label" for="add-category-name">Title</label>
                    <input type="text" class="form-control" id="add-category-name" placeholder="Enter Category Name"
                        name="category_name" aria-label="Enter Category Name" />
                    <span class="text-danger error_category_name"></span>
                </div>
                <div class="mb-6 form-control-validation">
                    <label class="form-label" for="add-category-description">Description</label>
                    <textarea class="form-control snow-editor-lesson" id="add-category-description" name="category_description"
                        placeholder="Description" rows="3"></textarea>
                    <span class="text-danger error_category_description"></span>
                </div>
                <button type="submit" class="btn btn-primary me-3 data-submit">Submit</button>
                <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancel</button>
            </form>
        </div>
    </div>
@endsection