{{-- @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 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">
                                <meta name="csrf-token" content="{{ csrf_token() }}">
                                <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 }}">
                                                    <input type="hidden" id="stored-title-message"
                                                        value="{{ $data->title }}">
                                                    <div id="rules-quill-edit-title" class="editor-quill"
                                                        style="height: 300px;" minlength="10"></div>
                                                    <span class="error-message" id="error-message-title"></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 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_rule/edit_rule.js') }}"></script> --}}
    <script>
        $(document).ready(function() {
            var quillTitle = new Quill('#rules-quill-edit-title', {
                theme: 'snow'
            });

            var storedTitle = $('#stored-title-message').val();
            if (storedTitle) {
                quillTitle.clipboard.dangerouslyPasteHTML(storedTitle);
            }
            let base_url = url_path;


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

            $('#update_redemption_rules').on("click", function(e) {
                e.preventDefault();
                $('#rules_form').validate({
                    ignore: [],
                    debug: false,
                    rules: {
                        article_des_title: {
                            required: true,
                        }
                    },
                    messages: {
                        article_des_title: {
                            required: "Please Enter Rules Title",
                        }
                    },
                    errorClass: 'error-message',

                    submitHandler: function(form) {
                        var article_des_title = quillTitle.root.innerHTML;

                        if (article_des_title.trim() === '<p><br></p>') {
                            toastr.error("Please Enter Rules Title");
                            return false;
                        }

                        var formData = new FormData(form);
                        formData.append('article_des_title', article_des_title);

                        $.ajax({
                            url: base_url + '/update_rules',
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                if (response.status === 200) {
                                    toastr.success(
                                        'Rules Title Updated Successfully');
                                    setTimeout(function() {
                                        window.location.href = base_url +
                                            "/manage_rules";

                                    }, 1000);
                                } else {
                                    toastr.error('Something went wrong');
                                }
                            },
                            error: function(xhr, textStatus, errorThrown) {
                                console.error(xhr.responseText);
                                toastr.error(
                                    'An error occurred while updating the rules title'
                                );
                            }
                        });
                    }
                });

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