@extends('Admin.layouts.master')

@section('content')
    @php
        $currentPage = 'manage-rules';
    @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-12 left d-flex align-items-center justify-content-between" style="gap: 15px;">
                            <a class="d-flex align-items-center justify-content-center pl-2"
                                href="{{ route('manage_rules') }}">
                                <img class="back-btn" src="{{ asset('public/assets/img/left-arrow.svg') }}">
                                <h6 class="card-title p-0">Edit Redemptions Details</h6>
                            </a>

                        </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 p-0">
                        <div class="view-details">
                            <div class="simple-tab">
                                @csrf
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel"
                                        aria-labelledby="home-tab" tabindex="0">
                                        <div class="row">
                                            <form id="rules_form">
                                                <div class="col-md-12 mb-4">
                                                    <label for="rules-quill-edit-title" class="form-label">What's
                                                        Inside?</label>
                                                    <input type="hidden" name="rule_id" value="{{ $data->id }}">
                                                    <div id="rules-quill-edit-title" class="editor-quill"
                                                        style="height: 300px;"></div>
                                                    <textarea name="whats_inside" style="display:none;">{!! $data->whats_inside !!}</textarea>
                                                    <span class="error-message" id="error-message-title"></span>
                                                </div>

                                                <div class="col-md-12 mb-4">
                                                    <label for="rules-quill-edit-message" class="form-label">Rules</label>
                                                    <input type="hidden" name="rule_id" value="{{ $data->id }}">
                                                    <div id="rules-quill-edit-message" class="editor-quill"
                                                        style="height: 300px;"></div>
                                                    <textarea name="rules" style="display:none;">{!! $data->rules !!}</textarea>
                                                    <span class="error-message" id="error-message-message"></span>
                                                </div>
                                                <div class="col-md-12">
                                                    <button type="submit" id="update_rules"
                                                        class="download-btn-custom mt-3 custom-width-10">
                                                        <span>Update</span>
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>




            </div>
        </div>
    </div>
@endsection
@section('section_script')
    <!-- <script>
        var quill = new Quill('#terms-quill-edit', {
            theme: 'snow'
        });
    </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_terms_cond/manage_terms_condition.js')}}"></script> --}}
    <script>
        $(document).ready(function() {
            // Initialize Quill editors
            var quillTitle = new Quill('#rules-quill-edit-title', {
                theme: 'snow'
            });

            var quillMessage = new Quill('#rules-quill-edit-message', {
                theme: 'snow'
            });

            // Set initial content for Quill editors
            var storedTitle = $('textarea[name="whats_inside"]').val();
            quillTitle.clipboard.dangerouslyPasteHTML(storedTitle);

            var storedMessage = $('textarea[name="rules"]').val();
            quillMessage.clipboard.dangerouslyPasteHTML(storedMessage);

            // Form submission logic
            $('#update_rules').on("click", function(e) {
                e.preventDefault();

                $.validator.addMethod("quillNotEmpty", function(value, element) {
                    var editorData = quillTitle.root.innerHTML;
                    return editorData.trim().length > 0;
                }, "Please enter What's Inside");

                $.validator.addMethod("quillNotEmptyMessage", function(value, element) {
                    var editorData = quillMessage.root.innerHTML;
                    return editorData.trim().length > 0;
                }, "Please enter Rules");

                $('#rules_form').validate({
                    ignore: [],
                    debug: false,
                    rules: {
                        whats_inside: {
                            required: true,
                            quillNotEmpty: true
                        },
                        rules: {
                            required: true,
                            quillNotEmptyMessage: true
                        }
                    },
                    messages: {
                        whats_inside: {
                            required: "Please enter What's Inside"
                        },
                        rules: {
                            required: "Please enter Rules"
                        }
                    },
                    errorClass: 'error-message',
                    submitHandler: function(form) {
                        function base64Encode(str) {
                            return btoa(unescape(encodeURIComponent(str)));
                        }

                        var article_des_title = base64Encode(quillTitle.root.innerHTML);
                        var article_des_message = base64Encode(quillMessage.root.innerHTML);

                        // Update the hidden textareas with encoded content
                        $('textarea[name="whats_inside"]').val(article_des_title);
                        $('textarea[name="rules"]').val(article_des_message);

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

                        $.ajax({
                            url: '{{ url('/update_rules') }}',
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                if (response.status == 200) {
                                    toastr.success(
                                        'Rules Data Updated Successfully');
                                    setTimeout(function() {
                                        window.location.href =
                                            '{{ url('/manage_rules') }}';
                                    }, 1000);
                                } else {
                                    toastr.error("Something went wrong");
                                }
                            },
                            error: function(response) {
                                toastr.error(
                                    "An error occurred while updating the rules"
                                    );
                            }
                        });
                    }
                });

                // Trigger form validation
                $('#rules_form').submit();
            });
        });
    </script>
@endsection
