@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-4">
                            <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">Add About Us</h6>
                            </a>
                        </div>
                        <div class="col-md-8">
                        </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 h-10">
                        <div class="view-details Article">
                            <form id="add_about_form" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group ">
                                            <label for="company-name" class="label">Title</label>
                                            <input type="text" name="about_title" class="form-control input_class">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group ">
                                            <label for="company-name" class="label">Image Upload</label>
                                            <input type="file" name="about_image" class="form-control input_class" id="selectImage">
                                            <img id="preview" src="#" alt="your image" class="mt-3 " style="display:none;width:20%;"/>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group ">
                                            <label for="company-name" class="label">Description</label>
                                            <div id="about-quill-add" name="about_des" class="editor-quill"
                                                style="height: 100px;"></div>
                                            <input type="hidden" id="about_des" name="about_des">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="company-name" class="label">Select Category</label>
                                            <select class="form-control input_class" id="company-name" name="category">
                                                <option value="">Select Category</option>
                                                @foreach ($about_us_cat as $about_us_category)
                                                    <option value="{{ $about_us_category['id'] }}">{{ $about_us_category['name'] }}
                                                    </option>
                                                @endforeach
                                                <!-- Add more options as needed -->
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <button type="submit" id="add_about_btn"
                                            class="download-btn-custom mt-3 custom-width-10">
                                            <span>Save</span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection
@section('section_script')
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    <script src="{{ asset('public/assets/js/admin/manage_cms/manage_aboutus/add_about_us.js') }}"></script>

    <script>
        var quill = new Quill('#about-quill-add', {
         theme: 'snow'
        });

        // Listen for changes and update the hidden input with the HTML content
        quill.on('text-change', function() {
            var htmlContent = quill.root.innerHTML;
            document.getElementById('about_des').value = htmlContent;
        });
    </script>
@endsection
