@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.Newarticles') }}">
                            <img class="back-btn" src="{{ asset('public/assets/img/left-arrow.svg') }}">
                            <h6 class="card-title p-0">Add News & Articles </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_blog_form" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group ">
                                        <label for="company-name" class="label">Article Name</label>
                                        <input type="text" name="article_name" class="form-control input_class">
                                    </div>
                                </div>
                               

                                <!-- <div class="col-md-12">
                                    <div class="form-group mt-3">
                                        <label class="mr-2 mb-3" style="font-weight: 600;">Image Upload :</label>
                                        <div class="multiple-file-upload">
                                            <input type="file" class="filepond pan-frontside" accept="image/*"  name="article_image" id="imageInputNormal" data-max-file-size="3MB">
                                            <div id="imageInputPreviewNormal" style="width: 30%;">
                                                <img src="" alt="Image Preview" style="width: 40%;">
                                            </div>
                                        </div>
                                    </div>
                                </div> -->
                                <div class="col-md-6">
                                        <div class="form-group ">
                                            <label for="company-name" class="label">Image Upload</label>
                                            <input type="file" name="article_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="news-quill-add" class="editor-quill" style="height: 100px;"></div>
                                        <input type="hidden" id="article_des" name="article_des">
                                    </div>
                                </div>
                             
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="company-name" class="label">Thumbnail Image:</label>
                                        <input type="file" name="article_thmb" class="form-control input_class" id="selectThumbnailImage">
                                        <div id="imagePreviewThumb" style="width: 30%;">
                                            <img id="previewthumbnailimage" src="#" alt="Preview Image" class="mt-3 w-20" style="display:none; width:50%;" />
                                        </div>
                                    </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 ($news_categories as $news_category)
                                            <option value="{{ $news_category['id'] }}">{{ $news_category['name'] }}
                                            </option>
                                            @endforeach
                                            <!-- Add more options as needed -->
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <button type="submit" id="add_newsletter" 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="{{ asset('public/assets/js/admin/manage_cms/manage_news/add_news.js') }}"></script>
<script>
    $('#zero-config').DataTable({
        "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
            "<'table-responsive'tr>" +
            "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
        "oLanguage": {
            "oPaginate": {
                "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
            },
            "sInfo": "Showing page _PAGE_ of _PAGES_",
            "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
            "sSearchPlaceholder": "Search...",
            "sLengthMenu": "Results :  _MENU_",
        },
        "stripeClasses": [],
        "lengthMenu": [7, 10, 20, 50],
        "pageLength": 10
    });
</script>
<script>
    $(document).ready(function() {
        $('<button><a class="extra-btn width-max-content" href="archive-manage-customers.php">View Archive List</a></button><button><ul class="navbar-item flex-row ms-lg-auto ms-0"><li class="nav-item dropdown action-dropdown  order-lg-0 order-1"><a href="javascript:void(0);"class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="avatar-container"><div class="avatar avatar-sm avatar-indicators avatar-online"><h3>Export</h3></div></div></a><div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown"><div class="dropdown-item"><a href="#"><span>Download Overview</span></a></div><div class="dropdown-item"><a href="#"><span>Download Patient Data</span></a></div><div class="dropdown-item"><a href="#"> <span>Download Selected</span></a></div></div></li></ul></button>').insertBefore("#zero-config_filter label");
    });

    var quill = new Quill('#news-quill-add', {
        theme: 'snow'
    });
</script>
<!-- <script>
    var quill = new Quill('#news-quill-add', {
        theme: 'snow'
    });
    $('#add_newsletter').on("click", function(e) {
        // alert('sdkjfb');


        $('#add_blog_form').validate({
            debug: false,
            rules: {
                article_name: {
                    required: true
                },
                article_des: {
                    required: true,
                },
                article_image: {
                    required: true
                },
                article_thmb: {
                    required: true
                },
                category: {
                    required: true
                },

            },
            messages: {
                article_name: {
                    required: "Please Enter Article name"
                },
                article_des: {
                    required: "Please Enter Description"
                },
                article_thmb: {
                    required: "Please Select Image"
                },
                article_image: {
                    required: "Please Select Image"
                },
                category: {
                    required: "Please Select Article Category"
                },


            },
            errorClass: 'error-message',
            submitHandler: function(form) {
                // Set the hidden input value to the HTML content of the Quill editor
                var quillContent = quill.root.innerHTML;
                $('#article_des').val(quillContent);
                let base_url = url_path;
                var formData = new FormData(form);
                $('#add_newsletter').text('Please wait...').attr('disabled', true);

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

                $.ajax({
                    url: base_url + '/manage_insert_news',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.status == 200) {
                            toastr.success('News and Article Added Successfully');
                            setTimeout(function() {
                                window.location.href = base_url + "/manage-new-articles";
                            }, 3000);
                        } else {
                            toastr.error("Something went wrong");
                        }
                        $('#add_newsletter').attr('disabled', false).text('Submit');
                    },
                });
            }
        });
    });
</script> -->

<script>
    FilePond.registerPlugin(
        FilePondPluginImagePreview,
        FilePondPluginImageExifOrientation,
        FilePondPluginFileValidateSize,
    );
    FilePond.create(
        document.querySelector('.pan-frontside')
    );
</script>

<script>
    const imageInput = document.getElementById('selectThumbnailImage');
    const imagePreview = document.getElementById('previewthumbnailimage');

    imageInput.addEventListener('change', function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(event) {
                imagePreview.style.display = 'block'; // Show the image preview container
                imagePreview.src = event.target.result; // Set the source of the image preview to the selected image
            };
            reader.readAsDataURL(file);
        } else {
            imagePreview.style.display = 'none'; // Hide the image preview container if no file is selected
        }
    });
</script>
<script>
    selectImage.onchange = evt => {
    preview = document.getElementById('preview');
    preview.style.display = 'block';
    const [file] = selectImage.files
    if (file) {
        preview.src = URL.createObjectURL(file)
    }
}
    </script>
@endsection