@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.store') }}" id="add_course_category_form" class="form-horizontal" enctype='multipart/form-data'>
                            @csrf


                            <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-select"> --}}
                                            <select class="form-control select2" data-toggle="select2" id="parent_category_id" name="parent_category_id">
                                                <option value="">- Select Course Category -</option>
                                                @foreach ($categoryList as $value => $label)
                                                    <option value="{{ $value }}" {{ old('parent_category_id', $parentCategoryId ?? '') == $value ? 'selected' : '' }}>
                                                        {{ $label }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <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" accept="image/*" required>
                                        </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" checked>
                                                <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="customSwitch2" name="course_categories_flag" value="1">
                                                <label class="form-check-label" for="customSwitch2"></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) }}">
                                                </div>
                                            </div>
                                            <div class="row mb-3">
                                                <label class="col-3 col-form-label" for="name">Tag Line:</span> </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) }}">
                                                </div>
                                            </div>
                                            <div class="row mb-3">
                                                <label class="col-3 col-form-label" for="name">Course For: </span> </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) }}">
                                                </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) }}">
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach


                            </div>
                            <div class="mb-3 text-end">
                                <button class="btn btn-primary mx-2" type="submit" name="submit" value="add">Save</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 for each locale
        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 }}') !!}`;
        quillEditors['{{ $language }}'].root.innerHTML = initialContent;

        // Sync Quill content to hidden input on form submission
        $('#add_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");


    $("#add_course_category_form").validate({
        rules: {
            parent_category_id: {
                required: true,
            },
            image: {
                required: true,
                accept: "image/*",
                filesize: 307200 // Max size: 300KB
            },
            @foreach (config('translatable.locales') as $locale => $language)
                "name[{{ $language }}]": {
                    required: true
                },
                "description[{{ $language }}]": {
                    required: true
                },
            @endforeach
        },
        messages: {
            parent_category_id: {
                required: "Select Course Category",
            },
            image: {
                required: "Image is required",
                accept: "Please upload only image files",
                filesize: "File size should not exceed 300KB"
            },
            @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) => {
            if (element.is("select")) {
                // Add error after the select element
                error.insertAfter(element);
                element.addClass('is-invalid'); // Highlight the dropdown
            } else {
                error.insertAfter(element); // For other elements
                element.addClass('is-invalid'); // Highlight the element
            }
        },
        success: function (label, element) {
            $(element).removeClass('is-invalid'); // Remove highlight
            label.remove();
        },
        highlight: function (element, errorClass) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass) {
            $(element).removeClass('is-invalid');
        },
        submitHandler: function (form) {
            form.submit(); // Submit the form
        }
    });
});

    </script>
@endsection