@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">Edit 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="update_news" enctype="multipart/form-data">

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group ">
                                        <label for="company-name" class="label">Article Name</label>
                                        <input type="hidden" name="article_id" value="{{ $news_article_data['id'] }}" class="form-control">
                                        <input type="text" class="form-control" value="{{ $news_article_data['name'] }}" name="article_name">

                                    </div>
                                </div>
                                <div class="col-md-6">
                                   

                                    <!-- <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" name="article_image" id="imageInputNormal" data-max-file-size="3MB">
                                                <div id="imageInputPreviewNormal" style="width: 30%;">
                                                    <img src="{{ asset('storage/app/public/' . $news_article_data['image']) }}" alt="Image Preview" style="width: 40%;">
                                                </div>
                                            </div>
                                        </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" name="article_image" id="imageInputNormal" data-max-file-size="3MB">
                                                @if( $news_article_data->image)
                                                <div id="imageInputPreviewNormal" style="width: 30%;">
                                                    <img src="{{ asset('storage/app/public' .  $news_article_data->image) }}" alt="Image Preview" style="width: 40%;">
                                                </div>
                                                @endif
                                            </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" id="imageInputNormal" class="form-control">
                                            <div id="imageInputPreviewNormal" style="width: 30%;">
                                                <img src="{{ asset('storage/app/public/' . $news_article_data['image']) }}" 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">Description</label>
                                        <div id="news-quill-edit" class="editor-quill" style="height: 100px;">{!! $news_article_data['description'] !!}</div>
                                        <input type="hidden" id="article_dis" name="article_dis" value="{{ $news_article_data['description'] }}">

                                    </div> -->
                                    <div class="form-group">
                                        <label for="company-name" class="label">Description</label>
                                        <div id="news-quill-edit" class="editor-quill" style="height: 100px;">{!! $news_article_data['description'] !!}</div>
                                        <input type="hidden" id="article_dis" name="article_dis" value="{{ $news_article_data['description'] }}">
                                    </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" id="imageInputThumb" class="form-control">
                                        <div id="imagePreviewThumb" style="width: 30%;">
                                            <img src="{{ asset('storage/app/public/' . $news_article_data['thumbnail_image']) }}" alt="Image Preview" style="width: 40%;">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <button class="download-btn-custom mt-3 custom-width-10" id="update_news_btn">
                                        <span>Save</span>
                                        </a>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


@endsection
@section('section_script')

<script src="../src/plugins/src/table/datatable/datatables.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-edit', {
    //     theme: 'snow'
    // });
</script>
<!-- <script>

    $('#update_news_btn').on("click", function(e) {
        // alert('kjh');
        $('#update_news').validate({
            // ignore: [],
            debug: false,
            rules: {
                article_name: {
                    required: true
                },
                article_dis: {
                    required: true
                },
                // category: {
                //     required: true
                // },
            },
            messages: {
                article_name: {
                    required: "Please Enter Article name"
                },
                article_dis: {
                    required: "Please Enter Description"
                },
                // category: {
                //     required: "Please Select Article Category"
                // },
            },
            errorClass: 'error-message',
            submitHandler: function(form) {
                let base_url = url_path;
                var formData = new FormData(form);
                $('#update_news_btn').text('Please wait...');
                $('#update_news_btn').attr('disabled', true);
                $.ajaxSetup({
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                });
                $.ajax({
                    url: base_url + '/manage_update_news',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.status == 200) {
                            toastr.success('News and Article Updated Successfully');
                            setTimeout(function() {
                                window.location.href = base_url + "/manage-new-articles";
                            }, 1000);
                        } else if (response.status == 204) {
                            toastr.error(response.error);
                        } else {
                            toastr.error("Something went wrong");
                        }
                        $('#update_news_btn').attr('disabled', false);
                        $('#update_news_btn').text('Submit');
                    },
                });
            }
        });
    });
</script> -->
<script>
    // Initialize Quill editor
    var quill = new Quill('#news-quill-edit', {
        theme: 'snow'
    });

    $('#update_news_btn').on("click", function(e) {
        $('#update_news').validate({
            debug: false,
            rules: {
                article_name: {
                    required: true
                },
                article_dis: {
                    required: true
                },
                // article_image: {
                //     required: true
                // },
                // article_thmb: {
                //     required: true
                // },
            },

            messages: {
                article_name: {
                    required: "Please Enter Article name"
                },
                article_dis: {
                    required: "Please Enter Description"
                },
                // article_image: {
                //     required: "Please select image"
                // },
                // article_thmb: {
                //     required: "Please select image"
                // },
            },
            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_dis').val(quillContent);

                let base_url = url_path;
                var formData = new FormData(form);
                $('#update_news_btn').text('Please wait...');
                $('#update_news_btn').attr('disabled', true);
                $.ajaxSetup({
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                });
                $.ajax({
                    url: base_url + '/manage_update_news',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.status == 200) {
                            toastr.success('News and Article Updated Successfully');
                            setTimeout(function() {
                                window.location.href = base_url + "/manage-new-articles";
                            }, 1000);
                        } else if (response.status == 204) {
                            toastr.error(response.error);
                        } else {
                            toastr.error("Something went wrong");
                        }
                        $('#update_news_btn').attr('disabled', false);
                        $('#update_news_btn').text('Submit');
                    },
                });
            }
        });
    });
</script>

<script>
    const imageInputEdit = document.getElementById('imageInputNormal');
    const imagePreviewEdit = document.getElementById('imageInputPreviewNormal');

    imageInputEdit.addEventListener('change', function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(event) {
                const img = document.createElement('img');
                img.src = event.target.result;
                img.style.maxWidth = '200px';
                img.style.maxHeight = '200px';
                imagePreviewEdit.innerHTML = '';
                imagePreviewEdit.appendChild(img);
            };
            reader.readAsDataURL(file);
        } else {
            imagePreviewEdit.innerHTML = '';
        }
    });


    const imageInput = document.getElementById('imageInputThumb');
    const imagePreview = document.getElementById('imagePreviewThumb');

    imageInput.addEventListener('change', function() {
        console.log("in change kjbck");
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(event) {
                const img = document.createElement('img');
                img.src = event.target.result;
                img.style.maxWidth = '200px';
                img.style.maxHeight = '200px';
                imagePreview.innerHTML = '';
                imagePreview.appendChild(img);
            };
            reader.readAsDataURL(file);
        } else {
            imagePreview.innerHTML = '';
        }
    });
</script>
<script>
    FilePond.registerPlugin(
        FilePondPluginImagePreview,
        FilePondPluginImageExifOrientation,
        FilePondPluginFileValidateSize,
    );
    FilePond.create(
        document.querySelector('.pan-frontside')
    );
</script>
@endsection