@extends('Admin.layouts.master')

@section('content')
    @php
        $currentPage = 'manage-referral-rule';
    @endphp
    <style>
        .error-message {
            color: #FF0000;
        }

        form .error-message {
            color: red;
        }

        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_referral') }}">
                                <img class="back-btn" src="{{ asset('public/assets/img/left-arrow.svg') }}">
                                <h6 class="card-title p-0">Edit Referral 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">
                                <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="referral_rules_form" method="POST"
                                                action="{{ route('update_referral_rules') }}">
                                                @csrf
                                                <meta name="csrf-token" content="{{ csrf_token() }}">

                                                <div class="col-md-12 mb-4">
                                                    <label for="referral-rules-quill-edit-title" class="form-label">How it
                                                        works</label>
                                                    <input type="hidden" name="rule_id" value="{{ $referral_rule->id }}">
                                                    <input type="hidden" name="how_it_works" id="stored-title-message"
                                                        value="{{ $referral_rule->how_it_works }}">
                                                    <div id="referral-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 mb-4">
                                                    <label for="referral-rules-quill-edit-message"
                                                        class="form-label">Rules</label>
                                                    <input type="hidden" name="rule_id" value="{{ $referral_rule->id }}">
                                                    <input type="hidden" name="rules" id="stored-message-message"
                                                        value="{{ $referral_rule->rules }}">
                                                    <div id="referral-rules-quill-edit-message" class="editor-quill"
                                                        style="height: 300px;" minlength="10"></div>
                                                    <span class="error-message" id="error-message-message"></span>
                                                </div>

                                                <div class="col-md-12 mb-4">
                                                    <label for="referral-rules-quill-edit-what_is_referral"
                                                        class="form-label">What is referral</label>
                                                    <input type="hidden" name="rule_id" value="{{ $referral_rule->id }}">
                                                    <input type="hidden" name="what_is_referral"
                                                        id="stored-referral-message"
                                                        value="{{ $referral_rule->what_is_referral }}">
                                                    <div id="referral-rules-quill-edit-what_is_referral"
                                                        class="editor-quill" style="height: 300px;" minlength="10"></div>
                                                    <span class="error-message" id="error-message-referral"></span>
                                                </div>

                                                <div class="col-md-12">
                                                    <button type="submit" id="referral_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>
        $(document).ready(function() {
            // Initialize Quill editors
            var quillTitle = new Quill('#referral-rules-quill-edit-title', {
                theme: 'snow'
            });
            var quillMessage = new Quill('#referral-rules-quill-edit-message', {
                theme: 'snow'
            });
            var quillReferral = new Quill('#referral-rules-quill-edit-what_is_referral', {
                theme: 'snow'
            });

            // Set initial content for Quill editors
            quillTitle.clipboard.dangerouslyPasteHTML($('#stored-title-message').val());
            quillMessage.clipboard.dangerouslyPasteHTML($('#stored-message-message').val());
            quillReferral.clipboard.dangerouslyPasteHTML($('#stored-referral-message').val());

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

                $('#referral_rules_form').validate({
                    ignore: [],
                    debug: false,
                    rules: {
                        how_it_works: {
                            required: true,
                            minlength: 10,
                        },
                        rules: {
                            required: true,
                            minlength: 10,
                        },
                        what_is_referral: {
                            required: true,
                            minlength: 10,
                        }
                    },
                    messages: {
                        how_it_works: {
                            required: "Please enter How it works",
                            minlength: "Please enter at least 10 characters"
                        },
                        rules: {
                            required: "Please enter the Rules",
                            minlength: "Please enter at least 10 characters"
                        },
                        what_is_referral: {
                            required: "Please enter What is referral",
                            minlength: "Please enter at least 10 characters"
                        }
                    },
                    errorClass: 'error-message',
                    submitHandler: function(form) {
                               function base64Encode(str) {
                            return btoa(unescape(encodeURIComponent(str)));
                        }
                        // Encode the content from Quill editors
                        var encodedTitle = base64Encode(quillTitle.root.innerHTML);
                        var encodedMessage = base64Encode(quillMessage.root.innerHTML);
                        var encodedReferral = base64Encode(quillReferral.root.innerHTML);

                        // Update hidden inputs with the encoded content
                        $('input[name="how_it_works"]').val(encodedTitle);
                        $('input[name="rules"]').val(encodedMessage);
                        $('input[name="what_is_referral"]').val(encodedReferral);

                        var formData = new FormData(form);

                        $.ajax({
                            url: form.action,
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                    'content')
                            },
                            success: function(response) {
                                if (response.status == 200) {
                                    toastr.success(
                                        'Rules Data Updated Successfully');
                                    setTimeout(function() {
                                        window.location.href =
                                            "{{ route('manage_referral') }}";
                                    }, 1000);
                                } else {
                                    toastr.error("Something went wrong");
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error('AJAX Error: ', status, error);
                                toastr.error(
                                    "An error occurred while updating the rules"
                                );
                            }
                        });
                    }
                });

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