@extends('Admin.layouts.master')

@section('content')
    @php
        $currentPage = 'manage_cms';
    @endphp
    <style>
        .error-message {
            color: #FF0000;
        }

        form .error-message {
            color: red;
            /* Set your desired color here */
        }

        form .input_class.error-message {
            color: #0e1726;
        }
    </style>
    <div class="layout-px-spacing">
        <div class="middle-content container-xxl p-0">
            <div class="row layout-top-spacing ">
                <div class="top-tabel">
                    <div class="row">
                        <div class="col-md-12 left d-flex align-items-center justify-content-between" style="gap: 15px;">
                            <a class="d-flex align-items-center justify-content-center pl-2"
                                href="{{ route('manage.aboutUs') }}">
                                <img class="back-btn" src="{{ asset('public/assets/img/left-arrow.svg') }}">
                                <h6 class="card-title p-0">Edit Details of Resturant</h6>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                    <div class="widget-content widget-content-area br-8 position-btn p-0">
                        <div class="view-details">
                            <div class="simple-tab">
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel"
                                        aria-labelledby="home-tab" tabindex="0">
                                        <form id="aboutus_rest_form">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <input type="hidden" name="about_rest_id"
                                                        value="{{ $edit_about_rest['id'] }}">
                                                    <textarea id="terms-quill-edit" name="about_rest" class="editor-quill" style="height: 300px;">
                                                        {!! $edit_about_rest['description'] !!}
                                                    </textarea>
                                                    <input type="hidden" id="about_rest" name="about_rest"
                                                        value="{{ $edit_about_rest['description'] }}" />
                                                </div>
                                                <div class="col-md-12">
                                                    <button type="submit" id="update_aboutUS_rest"
                                                        class="download-btn-custom mt-3 custom-width-10">
                                                        <span>Update</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- END MAIN CONTAINER -->
    @endsection

    @section('section_script')
        <script>
            // Initialize CKEditor
            CKEDITOR.replace('terms-quill-edit', {
                toolbar: [
                    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike'] },
                    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Blockquote'] },
                    { name: 'styles', items: ['Format'] },
                    { name: 'links', items: ['Link', 'Unlink'] },
                    { name: 'tools', items: ['Maximize'] }
                ]
            });

            // Listen for changes and update the hidden input with the HTML content
            CKEDITOR.instances['terms-quill-edit'].on('change', function() {
                var htmlContent = CKEDITOR.instances['terms-quill-edit'].getData();
                document.getElementById('about_rest').value = htmlContent;
            });

            $('#update_aboutUS_rest').on("click", function(e) {

                $.validator.addMethod("quillNotEmpty", function(value, element) {
                    var editorData = CKEDITOR.instances['terms-quill-edit'].getData();
                    return editorData.trim().length > 0;
                }, "Please enter about us");

                $('#aboutus_rest_form').validate({
                    ignore: [],
                    debug: false,
                    rules: {
                        about_rest: {
                            required: true,
                            quillNotEmpty: true
                        }
                    },
                    messages: {
                        about_rest: {
                            required: "Please Enter about us for restaturant"
                        }
                    },
                    errorClass: 'error-message',
                    submitHandler: function(form) {
                        var editorData = CKEDITOR.instances['terms-quill-edit'].getData();
                        $('#about_rest').val(editorData);

                        var formData = new FormData(form);
                        $.ajaxSetup({
                            headers: {
                                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                            },
                        });

                        $.ajax({
                            url: '{{ url("/aboutus_rest_update") }}',
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                if (response.status == 200) {
                                    toastr.success('About Us Restaturant Data Updated Successfully');
                                    setTimeout(function() {
                                        window.location.href = '{{ url("/manage-about-us") }}';
                                    }, 1000);
                                } else {
                                    toastr.error("Something went wrong");
                                }
                            },
                        });
                    }
                });
            });
        </script>
    @endsection
