@extends('layouts.admin')

@section('content')
    <div class="container-fluid">
        @include('elements.admin-breadcrumb')

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        @include('elements.alert-error')
                        <form method="POST" action="{{ route('admin.course-sub-category.update', ['course_sub_category' => $category['id']]) }}" id="edit_course_category_form" class="form-horizontal" enctype='multipart/form-data'>
                            @csrf
                            {{ method_field('PUT') }}

                            <ul class="nav nav-tabs mb-3" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a href="#master" data-bs-toggle="tab" aria-expanded="false" class="nav-link active"
                                        aria-selected="true" role="tab">
                                        General
                                    </a>
                                </li>
                                @foreach (config('translatable.locales') as $locale => $language)
                                    <li class="nav-item" data-target-form="#profileForm">

                                        <a href="#{{ $locale }}" data-bs-toggle="tab" aria-expanded="true"
                                            class="nav-link" aria-selected="false" role="tab" tabindex="-1">

                                            {{ucfirst($language) }}
                                        </a>
                                    </li>
                                @endforeach

                            </ul>

                            <div class="tab-content mb-0 b-0">
                                <div class="tab-pane active show" id="master">

                                    <div class="row mb-3">
                                        <label class="col-3 col-form-label" for="parent_category_id">Select Course Category:  <span
                                            class="text-danger">*</span> </label>
                                        <div class="col-9">
                                            <select id="parent_category_id" name="parent_category_id" class="form-control select2" data-toggle="select2">
                                                <option value="">- Select -</option>
                                                @foreach ($categoryList as $value => $label)
                                                    <option value="{{ $value }}" selected="selected">
                                                        {{ $label }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                     <!-- Image -->
                                     <div class="row mb-3">
                                        <label class="col-3 col-form-label" for="">Image (Max Size: 300Kb):  <span
                                            class="text-danger">*</span></label>
                                        <div class="col-9">
                                            <input type="file" class="form-control" name="image" id="image">
                                            @if ($category->image)
                                                <img src="{{ asset('storage/' . $category->image) }}" alt="Current Image"
                                                    width="96px">
                                            @endif
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label class="col-3 col-form-label" for="status">Status</label>
                                        <div class="col-9">
                                            <div class="col-3 col-form-label form-check form-switch">
                                                <input type="checkbox" class="form-check-input" id="customSwitch1" name="status" value="1" >
                                                <label class="form-check-label" for="customSwitch1"></label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label class="col-3 col-form-label" for="course_categories_flag">Allow Customize Course</label>
                                        <div class="col-9">
                                            <div class="col-3 col-form-label form-check form-switch">
                                                <input type="checkbox" class="form-check-input" id="courseCategoriesFlagSwitch"
                                                    name="course_categories_flag" value="1"
                                                    {{ old('course_categories_flag', $category ? $category->course_categories_flag : 0) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="courseCategoriesFlagSwitch"></label>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                @foreach (config('translatable.locales') as $locale => $language)
                                    <div class="tab-pane fade" id="{{ $locale }}">
                                        <div class="row mb-3">
                                            <label class="col-3 col-form-label" for="name">Name:  <span
                                                class="text-danger">*</span> </label>
                                            <div class="col-9">
                                                <input type="text" class="form-control" id="name_{{ $language }}" name="name[{{ $language }}]" placeholder="Name" value="{{ old('name.'.$language, $category ?  $category->getTranslation('name', $language) : '') }}" required="" aria-required="true" aria-invalid="true" aria-describedby="name-error', $category ?  $category->getTranslation('name', $language) : '') }}" required="">
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label class="col-3 col-form-label" for="name">Tag Line: </label>
                                            <div class="col-9">
                                                <input type="text" class="form-control" id="sub_title_{{ $language }}" name="sub_title[{{ $language }}]" placeholder="Tag Line" value="{{ old('sub_title.'.$language, $category ?  $category->getTranslation('sub_title', $language) : '') }}">
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label class="col-3 col-form-label" for="name">Course For:  </label>
                                            <div class="col-9">
                                                <input type="text" class="form-control" id="sub_title_meta_{{ $language }}" name="sub_title_meta[{{ $language }}]" placeholder="Course For" value="{{ old('sub_title_meta.'.$language, $category ?  $category->getTranslation('sub_title_meta', $language) : '') }}">
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label class="col-3 col-form-label" for="descriptions_{{ $language }}">Description</label>
                                            <div class="col-9">
                                                <!-- Quill editor container -->
                                                <div id="snow-editor-{{ $language }}" style="height: 300px;"></div>

                                                <!-- Hidden input field to store Quill editor content -->
                                                <input type="hidden" id="descriptions_hidden_{{ $language }}" name="description[{{ $language }}]"
    value="{{ old('description.' . $language, $category->getTranslation('description', $language) ?? '') }}">

                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="mb-3 text-end">
                                <button class="btn btn-primary mx-2" type="submit" name="submit" value="add">Update</button>
                                <a wire:navigate href="{{ route('admin.course-sub-category.index') }}" class="btn btn-outline-danger">Cancel</a>
                            </div>

                        </form>

                    </div> <!-- end card-body-->
                </div> <!-- end card-->
            </div> <!-- end col-->
        </div>
        <!-- end row -->
    </div>
@endsection

@section('scripts')
<!-- Quill Editor js -->
<script src="{{ asset('assets/vendor/quill/quill.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/validation/jquery-validation.js') }}"></script>
    <script src="{{ asset('assets/vendor/validation/additional-methods.min.js') }}"></script>
    <script>
          $(document).ready(function () {
    var quillEditors = {}; // Object to store Quill editor instances

    @foreach (config('translatable.locales') as $locale => $language)
    var editorId = '#snow-editor-{{ $language }}';
    var inputId = '#descriptions_hidden_{{ $language }}';

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

    // Set initial content
    var initialContent = `{!! old('description.{{ $language }}', $category->getTranslation('description', $language) ?? '') !!}`;
    quillEditors['{{ $language }}'].root.innerHTML = initialContent;

    // Sync content to hidden input before form submission
    $('#edit_course_category_form').on('submit', function () {
        var content = quillEditors['{{ $language }}'].root.innerHTML;
        $(inputId).val(content);
    });
@endforeach

});
    $(document).ready(function () {
        $.validator.addMethod("safeInput", function (value, element) {
            return /^[a-zA-Z0-9\s\-_,.;:'"()!?/&]+$/.test(value);
        }, "Invalid characters in input");

        $("#edit_course_category_form").validate({
            rules: {
                @foreach (config('translatable.locales') as $locale => $language)
                        "name[{{ $language }}]": {
                            required: true
                        },
                        "description[{{ $language }}]": {
                            required: true
                        },
                    @endforeach


            },
            messages: {
                @foreach (config('translatable.locales') as $locale => $language)
                    "name[{{$language }}]": {
                        required: "Name is required"
                    },
                    "description[{{ $language }}]": {
                        required: "Description is required"
                    },
                @endforeach
            },
            errorClass: "invalid-feedback",
            errorElement: 'span',
            errorPlacement: (error, element) => {
                var placement = element.closest(".mb-3").find('.form-control');
                if (placement) {
                    $(placement).addClass('is-invalid')
                    error.insertAfter(element);
                }
            },
            success: function(label,element) {
                $(element).removeClass('is-invalid')
                label.remove();
            },
            highlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },
            submitHandler: function (e) {
                e.submit();
            }
        });
    });
    </script>
@endsection