@extends('reachassuree_admin/layouts.main')
@section('title', $data['title'])
@section('content')
<style>
     a#cke_25,
    a#cke_53,
    a#cke_54,
    a#cke_55,
    a#cke_56,
    a#cke_61,
    a#cke_63,
    a#cke_64,
    a#cke_69,
    a#cke_70,
    span#cke_72,
    span#cke_76,
    a#cke_24,
    a#cke_23,
    a#cke_22,
    a#cke_21,
    a#cke_20,
    span#cke_26,
    span#cke_34,
    span#cke_39,
    .cke_toolbar_break,
    span#cke_88,
    a#cke_86,
    a#cke_87,
    a#cke_75,
    a#cke_71,
    span.cke_button_icon.cke_button__bidirtl_icon,
    span.cke_button_icon.cke_button__bidiltr_icon,
    span.cke_button_icon.cke_button__creatediv_icon,
    span.cke_button_icon.cke_button__blockquote_icon,
    a#cke_62,
    span.cke_button_icon.cke_button__indent_icon,
    span.cke_button_icon.cke_button__outdent_icon,
    a#cke_57,
    span.cke_button_icon.cke_button__copyformatting_icon,
    span.cke_button_icon.cke_button__superscript_icon,
    a#cke_54,
    span.cke_button_icon.cke_button__language_icon,
    span.cke_button_icon.cke_button__unlink_icon,
    /* span.cke_button_icon.cke_button__link_icon, */
    span.cke_button_icon.cke_button__save_icon,
    span.cke_button_icon.cke_button__newpage_icon,
    span.cke_button_icon.cke_button__exportpdf_icon,
    span.cke_button_icon.cke_button__preview_icon,
    span.cke_button_icon.cke_button__print_icon,
    span.cke_toolbar_separator,
    span.cke_button_icon.cke_button__templates_icon,
    span.cke_button_icon.cke_button__cut_icon,
    span.cke_button_icon.cke_button__copy_icon,
    span.cke_button_icon.cke_button__paste_icon,
    span.cke_button_icon.cke_button__pastetext_icon,
    span.cke_button_icon.cke_button__pastefromword_icon,
    span.cke_button_icon.cke_button__undo_icon,
    span.cke_button_icon.cke_button__redo_icon,
    span.cke_button_icon.cke_button__find_icon,
    span.cke_button_icon.cke_button__replace_icon,
    span.cke_button_icon.cke_button__selectall_icon,
    a#cke_38,
    span.cke_button_icon.cke_button__form_icon,
    span.cke_button_icon.cke_button__checkbox_icon,
    span.cke_button_icon.cke_button__radio_icon,
    span.cke_button_icon.cke_button__textfield_icon,
    span.cke_button_icon.cke_button__select_icon,
    a#cke_44,
    span.cke_button_icon.cke_button__button_icon,
    span.cke_button_icon.cke_button__imagebutton_icon,
    span.cke_button_icon.cke_button__imagebutton_icon,
    span.cke_button_icon.cke_button__hiddenfield_icon,
    span.cke_button_icon.cke_button__iframe_icon,
    span.cke_button_icon.cke_button__pagebreak_icon,
    span.cke_button_icon.cke_button__strike_icon,
    span.cke_button_icon.cke_button__table_icon,
    span.cke_button_icon.cke_button__maximize_icon,
    span.cke_button_icon.cke_button__showblocks_icon,
    span.cke_button_icon.cke_button__about_icon,
    span.cke_button_icon.cke_button__image_icon,
    span.cke_button_icon.cke_button__horizontalrule_icon,
    span.cke_button_icon.cke_button__smiley_icon,
    span.cke_button_icon.cke_button__specialchar_icon {
        display: none;
    }
    /* Ensure bullets display correctly even if encoding fails */
    .ck-content ul li::before,
    .blog-content ul li::before {
        content: "•" !important;
        margin-right: 5px;
    }
</style>
<div class="page-content client-tr">
    <div class="container-fluid">
        @include('../reachassuree_admin/comman/header')
        <!-- end page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">

                </div>
            </div>
        </div>
        <!-- start row -->
        <div class="row ">
            <div class="card p-3">
                <form action="{{route('reachassuree.admin.blog.save')}}" method="POST" id="formblog" class="needs-validation" novalidate enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="blog_id" id="blog_id" value="0" />
                    <input type="hidden" name="description" id="description" value="" />
                    <div class="row">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="title" class="form-label">title*</label>
                                    <input type="text" class="form-control" id="title" maxlength="250" name="title" placeholder="Title" value="" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="slug" class="form-label">Slug*</label>
                                    <input type="text" class="form-control" id="slug" maxlength="250" name="slug" placeholder="Slug" value="" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="blog_img" class="form-label">Blog Images*(Image Size 860 X 575) </label>
                                    <input type="hidden" id="id" name="id" class="form-control">
                                    <input type="file" class="form-control" id="blog_img" name="blog_img" placeholder="Blog Images" {{ $data['type'] == 'edit' ? '' : 'required' }}>
                                    
                                    @if(isset($data['type']) && $data['type'] == 'edit' && !empty($data['blog']->img))
                                    <div class="mt-2">
                                        <p>Current Image:</p>
                                        <img src="{{ asset('rassets/images/blog/' . $data['blog']->img) }}" alt="Current Blog Image" style="max-width: 50%; height: auto; border: 1px solid #ccc;">
                                    </div>
                                    @endif  
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="date" class="form-label">Blog Date*</label>
                                    <input type="text" class="form-control" id="blog_date" name="blog_date" placeholder="Blog Date" value="" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="category" class="category">Category*</label>
                                    <input type="text" class="form-control" id="category" name="category" placeholder="Category" value="" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="description" class="form-label">Description*</label>
                                    <textarea name="test_description" class="ckeditor form-control" id="test_description" cols="30" rows="6" value="" required placeholder="Description"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label class="form-label">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                    <button type="submit" class="form-control btn btn-primary" id="btnblogSave">Save</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


@endsection('content')
@section('custom-scripts')

<script src="{{ asset('ra-assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/form-validation.init.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/jquery.form.js') }}"></script>
<script src="{{ asset('ra-assets/libs/ckeditor/ckeditor.js') }}"></script>

{{-- gautam start old code commit --}}
{{-- <script type="text/javascript">
    var redirectToBlog = '{{route("reachassuree.admin.blog")}}';
    $("#blog_date").datepicker({
        format: "dd-mm-yyyy",
        orientation: "bottom auto"
    }).on('changeDate', function() {
        $('.datepicker').hide();
    });

    $('#title').on('input', function() {
        var inputValue = $(this).val();
        var capitalizedValue = capitalizeString(inputValue);
        $(this).val(capitalizedValue);

        var slug = generateSlug(capitalizedValue);
        $('#slug').val(slug);
    });

    $('#slug').on('input', function() {
        let inputValue = $(this).val();
        let convertedValue = inputValue.toLowerCase().replace(/\s+/g, '-').replace(/-+/g, '-');
        convertedValue = convertedValue.replace(/^-/, '');
        $(this).val(convertedValue);
    });

    function capitalizeString(input) {
        const cleanedInput = input.replace(/^\s+/, '').replace(/\s+/g, ' ');
        const convertedValue = cleanedInput.toLowerCase().replace(/\b\w/g, function(word) {
            return word.toUpperCase();
        });

        return convertedValue;
    }

    function generateSlug(input) {
        return input.trim().toLowerCase().replace(/\s+/g, '-').replace(/-$/, '');
    }

    resetInputForm();

    function resetInputForm() {
        $('#formblog').trigger("reset");
        $("#formblog").removeClass('was-validated');
    }

    $(document).ready(function() {
        setTimeout(function() {
            var ckEditor = CKEDITOR.instances.test_description;
        }, 100)
        
        var options = {
            beforeSubmit: showRequest, // pre-submit callback
            success: showResponse, // post-submit callback
            beforeSerialize: function($form, options) {
                // return false to cancel submit
                var CKEDITORDATA = CKEDITOR.instances["test_description"].getData();
                $("#description").val(CKEDITORDATA);
            }
        };

         $('#formblog').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });
    });

    function showRequest(formData, jqForm, options) {

        var queryString = $.param(formData);
        return true;
    }

    // post-submit callback
    function showResponse(responseText, statusText, xhr, $form) {
        if (responseText['status'] == 1) {
            toastr["success"](responseText['msg']);
            resetInputForm();
            $("#btnblogSave").html('Save');
            window.location.href = redirectToBlog;


        } else if (responseText['status'] == 0) {
            if (typeof responseText['data'] !== "undefined") {
                var size = Object.keys(responseText['data']).length;
                if (size > 0) {
                    for (var [key, value] of Object.entries(responseText['data'])) {
                        toastr["error"](value);
                    }
                }
            } else {
                toastr["error"](responseText['msg']);
            }
        }
    }

    @if($data['type'] == "edit")
    
    $("#blog_id").val("{{ $data['blog']->id }}");
    $("#title").val("{{ $data['blog']->title }}");
    $("#slug").val("{{ $data['blog']->slug }}");
    $("#blog_date").val("{{ $data['blog']->date }}");
    $("#category").val("{{ $data['blog']->category }}");

    $(document).ready(function() {
        setTimeout(function() {
            var ckEditor = CKEDITOR.instances.test_description;
            var htmlContent = atob("{!! base64_encode($data['blog']['description']) !!}");
            ckEditor.setData(htmlContent);
        }, 500);
    });
    @endif
</script> --}}
{{-- gautam end old code commit --}}

{{-- gautam start new code --}}
<script type="text/javascript">
    var redirectToBlog = '{{ route("reachassuree.admin.blog") }}';

    // Datepicker initialization
    $("#blog_date").datepicker({
        format: "dd-mm-yyyy",
        autoclose: true,
        todayHighlight: true
    }).on('changeDate', function(e) {
        $(this).val(e.format('dd-mm-yyyy'));
    });

    // Title and slug handling
    $('#title').on('input', function() {
        var inputValue = $(this).val();
        var capitalizedValue = capitalizeString(inputValue);
        $(this).val(capitalizedValue);
        $('#slug').val(generateSlug(capitalizedValue));
    });

    $('#slug').on('input', function() {
        let inputValue = $(this).val();
        let convertedValue = inputValue.toLowerCase()
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-')
            .replace(/^-/, '');
        $(this).val(convertedValue);
    });

    // CKEditor Initialization with consistent filters
    CKEDITOR.replace('test_description', {
        enterMode: CKEDITOR.ENTER_BR,
        shiftEnterMode: CKEDITOR.ENTER_P,
        autoParagraph: false,
        on: {
            instanceReady: function() {
                @if($data['type'] == "edit")
                    var rawContent = `{!! addslashes($data['blog']->description) !!}`;
                    var displayContent = rawContent.replace(/â[^\s]+/g, '•');
                    this.setData(displayContent);
                @endif
            },
            change: function() {
                var content = this.getData();
                content = content.replace(/â[^\s]+/g, '•');
                $('#description').val(content);
            }
        }
    });

    // Form submission handling
    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest,
            success: showResponse,
            beforeSerialize: function($form, options) {
                var editorContent = CKEDITOR.instances["test_description"].getData();
                var cleanContent = editorContent.replace(/â[^\s]+/g, '•');
                $("#description").val(cleanContent);
            }
        };

        $('#formblog').submit(function(e) {
            e.preventDefault();
            
            if (CKEDITOR.instances.test_description) {
                var editorContent = CKEDITOR.instances.test_description.getData();
                if (!editorContent.trim()) {
                    toastr.error('Description cannot be empty');
                    return false;
                }
            }
            
            $(this).ajaxSubmit(options);
            return false;
        });
    });

    // Edit mode handling
    @if($data['type'] == "edit")
        $("#blog_id").val("{{ $data['blog']->id }}");
        $("#title").val("{{ $data['blog']->title }}");
        $("#slug").val("{{ $data['blog']->slug }}");
        $("#blog_date").val("{{ $data['blog']->date }}");
        $("#category").val("{{ $data['blog']->category }}");
    @endif

    // Helper functions
    function capitalizeString(input) {
        const cleanedInput = input.replace(/^\s+/, '').replace(/\s+/g, ' ');
        const convertedValue = cleanedInput.toLowerCase().replace(/\b\w/g, function(word) {
            return word.toUpperCase();
        });
        return convertedValue;
    }

    function generateSlug(input) {
        return input.trim().toLowerCase().replace(/\s+/g, '-').replace(/-$/, '');
    }

    function resetInputForm() {
        $('#formblog').trigger("reset");
        $("#formblog").removeClass('was-validated');
        if (CKEDITOR.instances.test_description) {
            CKEDITOR.instances.test_description.setData('');
        }
    }

    function showRequest(formData, jqForm, options) {
        $("#btnblogSave").html('Processing...');
        return true;
    }

    function showResponse(responseText, statusText, xhr, $form) {
        if (responseText['status'] == 1) {
            toastr["success"](responseText['msg']);
            resetInputForm();
            $("#btnblogSave").html('Save');
            window.location.href = redirectToBlog;
        } else if (responseText['status'] == 0) {
            if (typeof responseText['data'] !== "undefined") {
                var size = Object.keys(responseText['data']).length;
                if (size > 0) {
                    for (var [key, value] of Object.entries(responseText['data'])) {
                        toastr["error"](value);
                    }
                }
            } else {
                toastr["error"](responseText['msg']);
            }
        }
    }
</script>
{{-- gautam end new code --}}

@endsection