{% extends 'frontend/layouts/index.html.twig' %}

{% block stylesheets %}
    <style>
        body, html {
            overflow-y: auto; /* Ensure that the body can scroll */
        }

        h4, h1 {
            color: #FFFFFF; /* White color for headings */
        }

        p {
            color: #ECECEC; /* Light gray text color */
            margin-bottom: 20px; /* Increase space between paragraphs */
            font-size: 1.1rem; /* Slightly larger font size for better readability */
            line-height: 1.8; /* Increased line height for better readability */
        }

        .card {
            border: none; /* Remove default border */
            border-radius: 10px; /* Rounded corners */
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Deeper shadow for better elevation effect */
            padding: 30px; /* Increase padding for better spacing */
            width: 70%; /* Increase width for a broader card */
            background-color: #2C2D33; /* Dark background for the card */
            margin-top: 20px; /* Top margin for spacing */
        }

        .form-label {
            font-weight: bold;
            color: #ECECEC; /* Light gray for labels */
        }

        .form-control {
            border-radius: 6px; /* Rounded input corners */
            background-color: #3A3B40; /* Darker input background */
            color: #FFFFFF; /* White text inside inputs */
            border: 1px solid #4A4B52; /* Border color for inputs */
        }

        .form-control::placeholder {
            color: #A9A9A9; /* Lighter gray for placeholders */
        }

        .form-select {
            background-color: #3A3B40; /* Match select background with inputs */
            color: #FFFFFF; /* White text inside selects */
            border: 1px solid #4A4B52; /* Border color for selects */
        }

        .text-danger {
            color: #FF6B6B; /* Bright red for required fields */
        }

        .step-title {
            font-size: 1.5rem; /* Larger font size for step titles */
            color: #FFD700; /* Gold color for step titles */
            margin-bottom: 10px; /* Margin below the step titles */
        }

        ul {
            padding-left: 20px; /* Indentation for list items */
        }

        ul li {
            margin-bottom: 10px; /* Space between list items */
            line-height: 1.6; /* Increased line height for list items */
        }

        .iti__country-list .iti__country {
            background-color: #444; /* Dark background for each country item */
        }
        .iti__country-list .iti__country:hover,
        .iti__country-list .iti__country:focus {
            background-color: #555; /* Slightly lighter dark background on hover/focus */
        }

        form#mother_child_form .iti__highlight {
            background: #555 !important;
        }
        form#mother_child_form .iti__divider{
            display: none;
        }

        form#mother_child_form .iti__flag-container{
            height: 42px;
        }

        form#mother_child_form .iti {
            display: block;
        }

        .iti__country-list .iti__dial-code {
            color: #aaa; /* Light color for dial code */
        }

        .iti__country-list .iti__country-name {
            color: #fff; /* Light color for country name */
        }

        .iti__country-list .iti__preferred {
            background-color: #444; /* Dark background for preferred countries */
        }
        #mobilenoError{
            color:red
        }
    </style>
{% endblock %}

{% block publiccontent %}
    <div class="d-flex flex-column justify-content-center align-items-center mt-4">
        <div class="page_wrapper text-center">
            <div class="logo mb-3">
                <i class="fa fa-bullhorn fa-5x" aria-hidden="true"></i>
            </div>
            <h2>AI-CHANNELS</h2>
            <h4>Now Fill Up Your Information.</h4>
            <h1>MOTHER AND CHILD</h1>
        </div>
        <!-- Wizard with validation -->
        <div class="card">
            <form class="wizard-form steps-validation" action="{{ path('app_front_save_ai_channel_form_data') }}" method="POST" id="mother_child_form">
                <input type="hidden" name="user_id" value="{{ user_id }}" id="user_id">
                <input type="hidden" name="category" value="mother_child" id="category">
                <h6 class="step-title">Step 1</h6>
                <fieldset>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="mb-3">
                                <label class="form-label">Name <span class="text-danger">*</span></label>
                                <input type="text" name="first_name" class="form-control required" placeholder="John Doe" value="{{ mother_child_data.firstname ?? '' }}">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="mb-3">
                                <label class="form-label">Surname <span class="text-danger">*</span></label>
                                <input type="text" name="last_name" class="form-control required" placeholder="Doe" value="{{ mother_child_data.lastname ?? '' }}" >
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="mb-3">
                                <label class="form-label">Email address: <span class="text-danger">*</span></label>
                                <input type="email" name="email" class="form-control required" placeholder="your@email.com" value="{{ mother_child_data.email ?? '' }}">
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="mb-3">
                                <label class="form-label">Mobile :<span class="text-danger">*</span></label>
                                <input type="text" name="mobile_no" class="form-control intl-tel-input" placeholder="+99-99-9999-9999" value="{{ mother_child_data.mobileno ?? '' }}">
                                <div class="error-message" id="mobilenoError"></div>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <h6 class="step-title">Step 2</h6>
                <fieldset>
                    <h4>Backup Codes</h4>
                    <p>Backup codes are a useful security feature if you lose access to your Instagram account, especially when two-factor authentication is enabled. Here’s a step-by-step guide on how to retrieve your backup codes on Instagram:</p>
                    <ol>
                        <li><strong>Open the Instagram App</strong><br>Open the Instagram app on your smartphone. Log in to your account if you haven't already.</li>
                        <li class="mt-3"><strong>Navigate to Settings</strong><br>Tap your profile picture at the bottom right to go to your profile. Tap the hamburger menu (three horizontal lines) at the top right to open the menu. Select "Settings and Privacy" from the menu.</li>
                        <li class="mt-3"><strong>Open Security Settings</strong><br>Scroll down and tap on "Account Security". Tap on "Two-Factor Authentication".</li>
                        <li class="mt-3"><strong>View Backup Codes</strong><br>In the Two-Factor Authentication section, you’ll see the option for "Backup Codes". Tap on it to view your backup codes. A list of 8 backup codes will appear. Each code can be used only once.</li>
                        <li class="mt-3"><strong>Save Your Backup Codes</strong><br>Write down the backup codes or take a screenshot. Store the codes in a safe place so you can access them in case of an emergency.</li>
                        <li class="mt-3"><strong>Using Backup Codes</strong><br>If you ever can’t log into your Instagram account, such as when you don’t have access to your phone, you can use one of these backup codes instead of the verification code to log in.</li>
                    </ol>
                    <p><strong>Important Notes</strong></p>
                    <ul>
                        <li>Backup codes are one-time use: Once you use a code, it becomes invalid. You can generate new codes at any time.</li>
                        <li>Generate new backup codes: If you run out of backup codes or need new ones, you can generate them in the same settings.</li>
                    </ul>
                    <div class="col-lg-12 mt-3">
                        <div class="mb-3">
                            <label class="form-label">Backup Code :<span class="text-danger">*</span></label>
                            <input type="text" name="backup_code" class="form-control" placeholder="123456" value="{{ mother_child_data.backupcode ?? '' }}">
                        </div>
                    </div>
                </fieldset>

                <h6 class="step-title">Step 3</h6>
               <fieldset>
                    <h4>2FA</h4>
                    <div class="mb-3 mt-3">
                        <p>Please deactivated.</p>
                    </div>
                    <div class="mb-3 mt-3">
                        <p>Please choose one of the following:</p>
                        <div>
                            <input class="form-check-input" type="radio" value="is_deactivated" name="two_fa" id="is_deactivated"  {% if mother_child_data.twofa is defined and mother_child_data.twofa == 'is_deactivated' %} checked {% endif %}>
                            <label class="form-check-label" for="is_deactivated">Is Deactivated</label>
                        </div>
                        <div class="mt-3">
                            <input class="form-check-input" type="radio" value="not_deactivated" name="two_fa" id="not_deactivated" {% if mother_child_data.twofa is defined and mother_child_data.twofa == 'not_deactivated' %} checked {% endif %}>
                            <label class="form-check-label" for="not_deactivated">Not Deactivated</label>
                        </div>
                    </div>
                </fieldset>

                <h6 class="step-title">Step 4</h6>
                <fieldset>
                    <h4>Status Reports</h4>
                    <p>Your performance</p>
                    <div class="col-lg-12 mt-3">
                        <div class="mb-3">
                            <label class="form-label">Instagram Account Name :<span class="text-danger">*</span></label>
                            <input type="text" name="instagram_account_name" class="form-control" placeholder="Enter Your Instagram Account Name" value="{{ mother_child_data.instagramaccountname ?? '' }}">
                        </div>
                    </div>
                    <div class="col-lg-12 mt-3">
                        <div class="mb-3">
                            <label class="form-label">Instagram Account Password :<span class="text-danger">*</span></label>
                            <input type="text" name="instagram_account_password" class="form-control" placeholder="Enter Your Instagram Account Password" value="{{ mother_child_data.instagramaccountpassword ?? '' }}">
                        </div>
                    </div>

                    <p class="mt-3">Remember to disable your 2FA, link your Instagram account to a Facebook page, and upgrade your account to a <strong>Business or Creator account.</strong></p>

                </fieldset>


                <h6 class="step-title">Step 5</h6>
                <fieldset>
                    <h4>Instagram Account</h4>
                    <p>Your data:</p>
                    <ol>
                        <li>Go to "Telegram" and find our bot named <a rel="noreferrer" target="_new" href="https://t.me/AIGrowthBot">@AIGrowthBot</a></li>
                        <li class="mt-3">Start a chat with our bot and type /start. (It's best to pin this so it doesn't get lost - this is where the reports come in.)</li>
                        <li class="mt-3">Find a bot in Telegram named @userinfobot. Start a chat with this bot and type /start.</li>
                        <li class="mt-3">You will receive your Chat ID as a response.</li>
                        <li class="mt-3">Enter the Chat ID into the form. Done.</li>
                    </ol>
                    <div class="col-lg-12 mt-3">
                        <div class="mb-3">
                            <label class="form-label">Add Telegram :<span class="text-danger">*</span></label>
                            <input type="text" name="chat_id" class="form-control" placeholder="Enter Your ID here" value="{{ mother_child_data.chatid ?? '' }}">
                        </div>
                    </div>
                </fieldset>

                <h6 class="step-title">Step 6</h6>
                <fieldset>
                    <h4>Keywords</h4>
                    <p>Please generate keywords.</p>
                    <ol>
                        <li>Please generate a minimum of 50 keywords.<br>Use this prompt for <a rel="noreferrer" target="_new" href="https://chat.openai.com/">https://chat.openai.com/</a></li>
                        <li>Copy this prompt and paste it into ChatGPT.</li>
                        <li class="mt-3">Please replace the <strong>bolded texts</strong> with your own.</li>
                        <li class="mt-3">Please generate in the language <strong>[selected language]</strong> 50 keywords that are relevant to <strong>[topic/specific area]</strong> and suitable for use on Instagram. Consider <strong>[specific requirements/target audience]</strong>. The keywords should be concise and reflect key aspects of the topic. Omit #.</li>
                    </ol>
                    <div class="col-lg-12 mt-3">
                        <div class="mb-3">
                            <label class="form-label">Keywords einfügen:<span class="text-danger">*</span></label>
                            <textarea rows="10" cols="50" name="keywords" class="form-control" placeholder="AI Leads
Customer Retention
Marketing Strategies
Influencer Marketing
Business Success
Customer Acquisition
Digital Marketing
AI Innovation
Social Media Marketing
Brand Building
Lead Generation
Customer Acquisition
Marketing Tips
AI Trends
Influencer Tips">{{ mother_child_data.keywords ?? '' }}</textarea>
                        </div>
                    </div>
                </fieldset>
                <h6 class="step-title">Step 7</h6>
                <fieldset>
                    <h4>Direct Messages</h4>
                    <ol>
                        <li>Please generate at least 6 direct messages. <br> Please use this prompt for <a rel="noreferrer" target="_new" href="https://chat.openai.com/">https://chat.openai.com/</a></li>
                        <li class="mt-3">Copy this prompt and paste it into ChatGPT.</li>
                        <li class="mt-3">Please replace the <strong>bolded texts</strong> with your own.</li>
                        <li class="mt-3">Please generate in the language <strong>[selected language]</strong> 6 direct messages that are relevant to <strong>[topic/specific area]</strong> and suitable for use on Instagram. Consider <strong>[specific requirements/target audience]</strong>. The messages should be concise and reflect key aspects of the topic. Omit #.</li>
                    </ol>
                    <div id="direct-messages-container" class="col-lg-12 mt-3">
                        <!-- First DM field -->
                        {% if mother_child_data.directmessages is defined and mother_child_data.directmessages is not empty %}
                            {% for directMessage in mother_child_data.directmessages %}
                            <div class="direct-message mb-3">
                                <label class="form-label">Direct Message</label>
                                <textarea rows="4" cols="50" name="direct_messages[]" class="form-control" placeholder="Write your direct message here...">{{ directMessage ?? '' }}</textarea>
                                <button type="button" class="btn btn-primary add-dm mt-2">Add DM</button>
                                <button type="button" class="btn btn-danger delete-dm mt-2">Delete DM</button>
                            </div>
                            {% endfor %}
                        {% else %}
                            <div class="direct-message mb-3">
                                <label class="form-label">Direct Message</label>
                                <textarea rows="4" cols="50" name="direct_messages[]" class="form-control" placeholder="Write your direct message here..."></textarea>
                                <button type="button" class="btn btn-primary add-dm mt-2">Add DM</button>
                            </div>
                        {% endif %}
                    </div>
                </fieldset>

                <h6 class="step-title">Step 8</h6>
                <fieldset>
                    <h4>Responses to question stickers.</h4>
                    <p>Your responses.</p>
                    <ol>
                        <li>Please generate at least 3 question sticker responses.</li>
                        <li>Please use this prompt for <a rel="noreferrer" target="_new" href="https://chat.openai.com/">https://chat.openai.com/</a></li>
                        <li class="mt-3">Copy this prompt and paste it into ChatGPT.</li>
                        <li class="mt-3">Please replace the <strong>bolded texts</strong> with your own.</li>
                        <li class="mt-3">Please generate in the language <strong>[selected language]</strong> 3 responses to question stickers that are relevant to <strong>[topic/specific area]</strong> and suitable for use on Instagram. Consider <strong>[specific requirements/target audience]</strong>. The responses should be concise and reflect key aspects of the topic. Omit #.</li>
                    </ol>

                    <div id="question-responses-container" class="col-lg-12 mt-3">
                        <!-- First Response Field -->
                        {% if mother_child_data.questionresponce is defined and mother_child_data.questionresponce is not empty %}
                            {% for questionResponce in mother_child_data.questionresponce %}
                            <div class="response-item mb-3">
                                <label class="form-label">Responses to question stickers.</label>
                                <textarea rows="4" cols="50" name="question_responses[]" class="form-control" placeholder="AI is revolutionizing marketing! Which tools do you prefer to use?">{{ questionResponce ?? "" }}</textarea>
                                <button type="button" class="btn btn-primary add-response mt-2">Add response.</button>
                                <button type="button" class="btn btn-danger delete-response mt-2">Delete response</button>
                            </div>
                            {% endfor %}
                        {% else %}
                            <div class="response-item mb-3">
                                <label class="form-label">Responses to question stickers.</label>
                                <textarea rows="4" cols="50" name="question_responses[]" class="form-control" placeholder="AI is revolutionizing marketing! Which tools do you prefer to use?"></textarea>
                                <button type="button" class="btn btn-primary add-response mt-2">Add response.</button>
                            </div>
                        {% endif %}
                    </div>

                </fieldset>

                <h6 class="step-title">Step 9</h6>
                <fieldset>
                    <h4>Autobot</h4>
                    <p>Train your bot.</p>
                    <ol>
                        <li class="mt-3">Generate your Autobot.<br>Use this prompt for.<a rel="noreferrer" target="_new" href="https://chat.openai.com/">https://chat.openai.com.</a></li>
                        <li class="mt-3">JCopy this prompt and paste it into ChatGPT.</li>
                        <li class="mt-3">Please replace the bolded texts with your own.</a></li>
                        <hr>
                        <li class="mt-3">Create a system prompt for me based on the following information and conversations, which I can use as a copy-and-paste solution to personalize my AI chatbot:</li>
                        <li class="mt-3">Name: [Your bot name]</li>
                        <li class="mt-3">Languages: German & English</li>
                        <li class="mt-3">Communication Platform: Instagram chats</li>
                        <li class="mt-3">Objective: Educate about [Your industry] and [Product] on Instagram</li>
                        <li class="mt-3">Function: Provide information and direct prospects to [your.website]</li>
                        <li class="mt-3">Content: Explanation of products and processes</li>
                        <li class="mt-3">Communication Style: Friendly and personal</li>
                        <li class="mt-3">Response Behavior: Friendly responses to inquiries and small talk</li>
                        <li class="mt-3">Human Approach: Human interaction, understanding the feelings of conversational partners</li>
                        <li class="mt-3">Needs Assessment: Understanding the needs of potential prospects and partners</li>
                        <li class="mt-3">Naming: No arbitrary names, customers and partners are not referred to as such.</li>
                        <hr>
                        <li class="mt-3">Make your adjustments to the prompt so that they align closely with your objectives.</li>
                    </ol>
                     <div class="col-lg-12 mt-3">
                        <!-- First Response Field -->
                        <div class="mb-3">
                            <label class="form-label">Enter your result here.</label>
                            <textarea rows="10" cols="70" name="autoboat_result" class="form-control" placeholder="Name: AI-Growth

Sprachen: Deutsch & Englisch

Kommunikationsplattform: Instagram-Chats

Ziel: Aufklärung über Artificial Intelligence und Marketing sowie AI-Growth, Basic, Pro, Expert, Software as a Service, und Mother and Child Method auf Instagram.

Funktion: Informationen bereitstellen und Interessenten zu www.ai-growth.de leiten.

Inhalte: Erklärung von Produkten und Abläufen.

Kommunikationsstil: Freundlich und persönlich.

Antwortverhalten: Freundliche Antworten auf Anfragen und Smalltalk.

Menschlicher Ansatz: Menschliche Interaktion, Verständnis für die Gefühle der Gesprächspartner.

Bedarfsermittlung: Verstehen der Bedürfnisse potenzieller Interessenten und Partner.

Bezeichnung: Keine willkürlichen Namen verwenden; Kunden und Partner werden nicht so genannt.">{{ mother_child_data.autoboatrequest ?? ""}}</textarea>
                        </div>
                </fieldset>

                <h6 class="step-title">Step 10</h6>
                <fieldset>
                    <h4>Content, Reels, Captions</h4>
                    <p>Provide a source where we can find your content.</p>

                    <div id="question-responses-container" class="col-lg-12 mt-3">
                        <!-- First Response Field -->
                        <div class="response-item mb-3">
                            <label class="form-label">Google Drive, Dropbox, or other.</label>
                            <input type="text" name="connect_link" class="form-control" placeholder="Link ??" value="{{ mother_child_data.connectlink ?? ""}}">
                            <!-- No Delete button on the first response field -->
                        </div>
                    </div>
                </fieldset>

                <h6 class="step-title">Step 11</h6>
                <fieldset>
                    <h4>DISCORD SUPPORT CHANNEL</h4>
                    <p>JOIN NOW.</p>
                    <ol>
                        <li>Support and information <br>One important step remaining.</li>
                        <li>Join our Discord support ticket system.</li>
                        <li class="mt-3">Copy this prompt and paste it into ChatGPT.</li>
                        <li class="mt-3">Link: <a rel="noreferrer" target="_new" href="https://discord.gg/EqnUr8CTKs">Join AI-Growth Discord Server.</a></li>
                        <li class="mt-3">Please generate in the language <strong>[selected language]</strong> 3 responses to question stickers that are relevant to <strong>[topic/specific area]</strong> and suitable for use on Instagram. Consider <strong>[specific requirements/target audience]</strong>. The responses should be concise and reflect key aspects of the topic. Omit #.</li>
                        <li class="mt-3">If you don't have a Discord account yet, please follow the instructions after redirection.<strong>[topic/specific area]</strong> and suitable for use on Instagram. Consider <strong>[specific requirements/target audience]</strong>. The responses should be concise and reflect key aspects of the topic. Omit #.</li>
                    </ol>
                </fieldset>
            </form>
        </div>
        <!-- /wizard with validation -->
    </div>
{% endblock %}

{% block javascripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {             
        // Ensure jQuery validate is loaded
        if (!$().validate) {
            console.warn('Warning - validate.min.js is not loaded.');
            return;
        }

        // Show form
        const validationExampleElement = $('.steps-validation');
        const form = validationExampleElement.show();
        let motherChildForm = document.getElementById('mother_child_form');

        // Initialize wizard with validation
        validationExampleElement.steps({
            headerTag: 'h6',
            bodyTag: 'fieldset',
            titleTemplate: '<span class="number">#index#</span> #title#',
            labels: {
                previous: '<i class="ph-arrow-circle-left me-2"></i> Previous',
                next: 'Next <i class="ph-arrow-circle-right ms-2"></i>',
                finish: 'Submit form <i class="ph-paper-plane-tilt ms-2"></i>'
            },
            transitionEffect: 'fade',
            autoFocus: true,
            onStepChanging: function (event, currentIndex, newIndex) {
                // Always allow previous action even if the current form is not valid
                if (currentIndex > newIndex) {
                    return true;
                }

                // Clean up if user goes back
                if (currentIndex < newIndex) {
                    form.find('.body:eq(' + newIndex + ') label.error').remove();
                    form.find('.body:eq(' + newIndex + ') .error').removeClass('error');
                }

                form.validate().settings.ignore = ':disabled,:hidden';

                // Validate the phone number on each step change
                return form.valid() && validatePhoneNumber();
            },
            onFinishing: function (event, currentIndex) {
                form.validate().settings.ignore = ':disabled';
                
                // Validate the phone number before finishing the form
                return form.valid() && validatePhoneNumber();
            },
            onFinished: function (event, currentIndex) {
                Swal.fire({
                    title: 'Processing...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
               form.submit();
            }
        });

        // Define custom pattern method
        $.validator.addMethod("pattern", function(value, element, regex) {
            return this.optional(element) || regex.test(value);
        }, "Invalid format");

        // Define custom phone number validation method
        $.validator.addMethod("phoneNumber", function(value, element) {
            return this.optional(element) || /^[\+0-9\s\-()]+$/.test(value);
        }, "Please enter a valid phone number.");

        // Initialize validation
        validationExampleElement.validate({
            ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
            errorClass: 'validation-invalid-label',
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            errorPlacement: function(error, element) {
                // Custom error placement for different elements
                if (element.hasClass('select2-hidden-accessible')) {
                    error.appendTo(element.parent());
                } else if (element.parents().hasClass('form-control-feedback') || element.parents().hasClass('form-check') || element.parents().hasClass('input-group')) {
                    error.appendTo(element.parent().parent());
                } else {
                    error.insertAfter(element);
                }
            },
            rules: {
                email: {
                    email: true
                },
                first_name: {
                    required: true,
                    pattern: /^[a-zA-Z]+$/
                },
                last_name: {
                    required: true,
                    pattern: /^[a-zA-Z]+$/
                },
                mobile_no:{
                    required:true,
                    phoneNumber: true
                },
                tel: {
                    required: true
                },
                backup_code: {
                    required: true,
                    digits:true
                },
                two_fa: {
                    required: true
                },
                instagram_account_name: {
                    required: true
                },
                instagram_account_password: {
                    required: true
                },
                chat_id: {
                    required: true
                }
            },
            messages: {
                first_name: {
                    pattern: "Please enter only letters."
                },
                last_name: {
                    pattern: "Please enter only letters."
                },
                mobile_no: {
                    phoneNumber: "Please enter only numbers."
                },
                backup_code: {
                    digits: "Please enter only numbers."
                }
            }
        });

        // Initialize intl-tel-input for phone number validation
        const mobileInput = motherChildForm.querySelector('.intl-tel-input');
        const mobileErrorMessageDiv = document.getElementById('mobilenoError');
        const iti = window.intlTelInput(mobileInput, {
            initialCountry: "DE",
            geoIpLookup: function(callback) {
                fetch('https://ipinfo.io/json', { headers: { 'Accept': 'application/json' } })
                    .then(resp => resp.json())
                    .then(resp => {
                        const countryCode = (resp && resp.country) ? resp.country : 'us';
                        callback(countryCode);
                    })
                    .catch(() => {
                        callback('us');
                    });
            },
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js" // load utils.js
        });

        const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

       // Function to clean up the mobile number and format it correctly
        function formatMobileNumber() {
            let mobileNumber = mobileInput.value.trim();

            // Remove any leading zero
            if (mobileNumber.startsWith('0')) {
                mobileNumber = mobileNumber.substring(1);
            }

            // Get selected country code
            const countryData = iti.getSelectedCountryData();
            const dialCode = countryData.dialCode;

            // Add the country code if it's not already present
            if (!mobileNumber.startsWith(`+${dialCode}`)) {
                mobileNumber = `+${dialCode} ${mobileNumber}`;
            }

            // Update the input field with the formatted number
            if(!mobileNumber){
                mobileInput.value = mobileNumber;
            }
        }


        // When the form is loaded, format the mobile number if it's already populated
        console.log(mobileInput.value);
        if (!mobileInput.value) {
            formatMobileNumber();
        }

        // Set default country code for Germany (+49) if the field is empty or no country is selected
        if (!mobileInput.value) {
            mobileInput.value = "+49 "; // Default Germany dialing code
        }

        // Listen for country change events to update the dial code accordingly
        mobileInput.addEventListener('countrychange', function() {
            formatMobileNumber();
        });

        // Validate phone number
        function validatePhoneNumber() {
            resetPhoneError(); // Clear any previous errors

            if (mobileInput.value.trim()) {
                if (iti.isValidNumber()) {
                    // Phone number is valid
                    return true;
                } else {
                    const errorCode = iti.getValidationError();
                    mobileErrorMessageDiv.innerHTML = errorMap[errorCode];
                    mobileInput.classList.add("is-invalid");
                    return false;
                }
            } else {
                mobileErrorMessageDiv.innerHTML = "Phone number is required";
                mobileInput.classList.add("is-invalid");
                return false;
            }
        }

        // Clear phone number error
        function resetPhoneError() {
            mobileErrorMessageDiv.innerHTML = "";
            mobileInput.classList.remove("is-invalid");
        }

        // Real-time validation events
        mobileInput.addEventListener('blur', validatePhoneNumber);
        mobileInput.addEventListener('change', resetPhoneError);
        mobileInput.addEventListener('keyup', resetPhoneError);

        // Function to add a new Direct Message field
        function addDirectMessage() {
            const container = document.getElementById('direct-messages-container');
            const newDM = document.createElement('div');
            newDM.className = 'direct-message mb-3';
            newDM.innerHTML = `
                <label class="form-label">Direct Message </label>
                <textarea rows="4" cols="50" name="direct_messages[]" class="form-control" placeholder="Write your direct message here..."></textarea>
                <button type="button" class="btn btn-primary add-dm mt-2">Add DM</button>
                <button type="button" class="btn btn-danger delete-dm mt-2">Delete DM</button>
            `;
            container.appendChild(newDM);
        }

        // Function to delete a Direct Message field
        function deleteDirectMessage(button) {
            const dmToRemove = button.closest('.direct-message');
            dmToRemove.remove();
        }

        // Event listener for adding/deleting a DM
        document.getElementById('direct-messages-container').addEventListener('click', function(event) {
            if (event.target.classList.contains('add-dm')) {
                addDirectMessage();
            } else if (event.target.classList.contains('delete-dm')) {
                deleteDirectMessage(event.target);
            }
        });

        // Function to add a new Response field
        function addResponseField() {
            const container = document.getElementById('question-responses-container');
            const newResponse = document.createElement('div');
            newResponse.className = 'response-item mb-3';
            newResponse.innerHTML = `
                <label class="form-label">Response</label>
                <textarea rows="4" cols="50" name="question_responses[]" class="form-control" placeholder="Write your response here..."></textarea>
                <button type="button" class="btn btn-primary add-response mt-2">Add response</button>
                <button type="button" class="btn btn-danger delete-response mt-2">Delete response</button>
            `;
            container.appendChild(newResponse);
        }

        // Function to delete a Response field
        function deleteResponseField(button) {
            const responseToRemove = button.closest('.response-item');
            responseToRemove.remove();
        }

        // Event listener for adding/deleting a response
        document.getElementById('question-responses-container').addEventListener('click', function(event) {
            if (event.target.classList.contains('add-response')) {
                addResponseField();
            } else if (event.target.classList.contains('delete-response')) {
                deleteResponseField(event.target);
            }
        });
    });
</script>
{% endblock %}