@extends('layouts.main')
@section('main')
    <div class="page-container">
        <div class="main-content">
            <div class="container">
                <h2 class="header-title">About Us</h2>
                <div class="tab-content m-t-15">
                    <form id="formData" action="{{ route('aboutUs.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="tab-pane fade show active" id="tab-account">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Basic Infomation</h4>
                                </div>
                                <div class="card-body">
                                    <div class="form-row">
                                        <div class="col-md-12">
                                            <label class="font-weight-semibold">About Us<span
                                                    class="required">*</span></label>
                                            <textarea name="about_us" rows="10" id="about_us" class="form-control" placeholder="About Us">{{ isset($about_us->about_us) ? $about_us->about_us : '' }}</textarea>
                                            <label id="about_us-error" class="error" for="about_us"></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="center-button">
                            <button class="btn btn-primary">
                                <span>Submit</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endsection
    @section('js')
        <script>
            $(document).ready(function() {
                if ($("#formData").length > 0) {
                    $("#formData").validate({
                        ignore: [],
                        rules: {
                            about_us: {
                                required: function(mydata) {
                                    CKEDITOR.instances[mydata.id].updateElement();
                                    var memberdatacontent = mydata.value.replace(/<[^>]*>/gi, '');
                                    return memberdatacontent.length === 0;
                                },
                            },
                        },
                        messages: {
                            about_us: {
                                required: "Please enter about us",
                            },
                        },
                    });
                    var editor = CKEDITOR.replace('about_us');
                    editor.on('change', function() {
                        $('#formData').valid();
                    });
                };
            });
        </script>
    @endsection