@extends('layouts.admin')

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

        <style>
                        /* Remove the spinner from number input */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}
        </style>
        <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-category.update', ['course_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="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"
                                                    {{ old('status', $category ? $category->status : 0) ? '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="show_in_menu">Show In Menu</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="show_in_menu" value="1"
                                                    {{ old('show_in_menu', $category ? $category->show_in_menu : 0) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="courseCategoriesFlagSwitch"></label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label class="col-3 col-form-label" for="sequence_number">Menu Sequence Number: <span
                                            class="text-danger">*</span></label>
                                        <div class="col-9">
                                            <input type="number" class="form-control" id="sequence_number" name="sequence_number" placeholder="Sequence Number" value="{{ old('sequence_number', $category->sequence_number ?? '') }}" required>

                                        </div>
                                    </div>

                                    <!-- Image -->
                                    <div class="row mb-3">
                                        <label class="col-3 col-form-label" for="image">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>

                                    <!-- Icon -->
                                    <div class="row mb-3">
                                        <label class="col-3 col-form-label" for="icon">Icon:  <span
                                            class="text-danger">*</span></label>
                                        <div class="col-9">
                                            <input type="file" class="form-control" name="icon" id="icon">
                                            @if ($category->icon)
                                                <img src="{{ asset('storage/' . $category->icon) }}" alt="Current Icon"
                                                    width="96px">
                                            @endif
                                        </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_{{ $language }}">Name: <span
                                                class="text-danger">*</span></label>
                                            <div class="col-9">
                                                <input type="text" class="form-control" id="name_{{ $language }}" name="name[{{ $language }}]"
                                                placeholder="Category Name" value="{{ old('name.' . $language, !empty($category) ? $category->getTranslation('name', $language) : '') }}" required>


                                                {{-- <input type="text" class="form-control" name="name[{{ $language }}]"
                                                    id="name_{{ $language }}"
                                                    value="{{ old('name', $category ? $category->getTranslation('name.'. $language) : '') }}"
                                                    placeholder="Name"> --}}
                                            </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-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() {
            // Add custom filesize validation method
            $.validator.addMethod("filesize", function(value, element, param) {
                return this.optional(element) || (element.files[0].size <= param);
            }, "File size must be less than {0} bytes");

            $.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
                    "sequence_number": {
                        required: true,
                        maxlength: 5,
                    },
                    "image": {

                        accept: "image/*",
                        filesize: 307200
                    },
                    "icon": {

                        accept: "image/*",  // Allow only image files
                        filesize: 307200 // Max size: 300KB
                    }
                },
                messages: {
                    @foreach (config('translatable.locales') as $locale => $language)
                        "name[{{ $language }}]": {
                            required: "Name is required"
                        },
                        "description[{{ $language }}]": {
                            required: "Description is required"
                        },
                    @endforeach
                    "sequence_number": {
                        required: "Sequence Number is required",
                        maxlength: "Sequence Number Must Be 5 "
                    },
                    "image": {

                        accept: "Only image files are allowed",
                        filesize: "Image size must be less than 300KB"
                    },
                    "icon": {

                        accept: "Only image files are allowed",
                        filesize: "Icon size must be less than 300KB"
                    }
                },
                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