{% 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#ai_growth_autobot .iti__highlight {
            background: #555 !important;
        }
        form#ai_growth_autobot .iti__divider{
            display: none;
        }

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

        form#ai_growth_autobot .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="container d-flex flex-column justify-content-center align-items-center mt-3">
        <div class="text-center mb-4">
            <div class="logo mb-3">
                <i class="fa fa-bullhorn fa-5x" aria-hidden="true"></i>
            </div>
            <h2>AI-CHANNELS</h2>
            <p>Thank you for choosing Autobot from {{ app_name }}. We are approaching the launch, and to get the most out of your AI slot, we now need some information from you. Please fill out the 'Questions and Answers Form' so that we can create an optimal foundation for configuring your Autobot. Precise details are particularly helpful.</p>
            <h1>AUTOBOT BASIC - PRO</h1>
        </div>
        <div class="card w-100 w-lg-75">
            <form class="wizard-form steps-validation" action="{{ path('app_front_save_ai_channel_form_data') }}" method="POST" id="ai_growth_autobot">
                <h6>STEP-1</h6>
                <fieldset>
                    <h6>Welcome to {{ app_name }} - We are initiating your data collection so you can get started right away.</h6>
                    <h2>Q & A Form 1</h2>
                    <p>Please enter your data carefully. The team thanks you in advance for this.</p>
                    <p>Please use the same data as during registration.</p>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Name : <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control required" placeholder="e.g. Max">
                                <small class="text-muted">First name</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Surname : <span class="text-danger">*</span></label>
                                <input type="text" name="surname" class="form-control required" placeholder="e.g. Musterman">
                                <small class="text-muted">Surname</small>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">E-Mail Address : <span class="text-danger">*</span></label>
                                <input type="email" name="email" class="form-control required" placeholder="e.g. max@musterman.de">
                                <small class="text-muted">Please use the same email as the one you used for registration.</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Date: <span class="text-danger">*</span></label>
                                <input type="date" name="date" class="form-control required">
                                <small class="text-muted">Please select today's date.</small>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Your phone number (WhatsApp) <span class="text-danger">*</span></label>
                        <input type="text" name="tel" class="form-control intl-tel-input" placeholder="+99-99-9999-9999">
                         <div class="error-message" id="mobilenoError"></div>
                    </div>
                    <h4>To get backup codes on Instagram, you need to follow these steps:</h4>
                    <p>1. Click More at the bottom left, then click Settings.</p>
                    <p>2. Click Privacy & Security in the left menu.</p>
                    <p>3. Scroll down to Two-Step Authentication and click Edit Two-Step Authentication Settings.</p>
                    <p>4. Click Get Backup Codes. (If there are none, you can click on "Request new" there)</p>
                    <p>After that, it's best to leave the code you give us in the list and you will no longer be asked to confirm a login as long as it exists.</p>
                    <p>If you need further assistance, please click here.</p>
                    <p>Please disable your 2FA code on your account and do not change your password while automation is running. This could immediately disrupt access. If you still want to keep the 2FA code enabled, please add your backup code from your Instagram settings. This will ensure a smooth process for both of us. <span class="text-danger">*</span></p>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" id="2fa-deactive" name="two_fa" value="deactive" onclick="toggleInput(false)">
                            <label class="form-check-label" for="2fa-deactive">2FA is deactivated</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" id="2fa-active" name="two_fa" value="active" onclick="toggleInput(true)">
                            <label class="form-check-label" for="2fa-active">2FA is active</label>
                        </div>
                    </div>
                    <div id="backup-code-input" class="mt-3" style="display: none;">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="backup-code" class="form-label">Please enter Backup code:</label>
                                <input type="text" id="backup-code" name="backup-code" class="form-control">
                            </div>
                        </div>
                    </div>
                </fieldset>
                <h6>STEP-2</h6>
                <fieldset>
                    <h6>Please enter your account and necessary details here so that the AI can start its work.</h6>
                    <p>Remember to disable your 2FA, connect your Instagram account to a Facebook page, and upgrade your account to a Business or Creator account.</p>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Instagram Username : <span class="text-danger">*</span></label>
                                <input type="text" name="instagram_account_name" class="form-control required" placeholder="johndoe">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Instagram Password : <span class="text-danger">*</span></label>
                                <input type="text" name="instagram_account_password" class="form-control required" placeholder="*******">
                            </div>
                        </div>
                    </div>
                </fieldset>
                <h6>STEP-3</h6>
                <fieldset>
                    <h6>Present to us what it's all about.</h6>
                    <p>Show us your website or other shop pages that illustrate what you do and the goals you are pursuing. This will help us better understand your needs and customize the chatbot accordingly.</p>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label frm_primary_label">Your Website</label>
                                <input type="text" name="name" class="form-control required" placeholder="Your URL (Domain)">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Our shop site</label>
                                <input type="text" name="name" class="form-control required" placeholder="Your URL (Domain)">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Your product site</label>
                                <input type="text" name="name" class="form-control required" placeholder="Your URL (Domain)">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Our FAQ</label>
                                <input type="text" name="name" class="form-control required" placeholder="Your URL (Domain)">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Your block or landing page, etc.</label>
                                <input type="text" name="name" class="form-control required" placeholder="Your URL (Domain)">
                            </div>
                        </div>
                    </div>
                </fieldset>
                 <h6>STEP-4</h6>
                <fieldset>
                    <h6><strong>Call to Action</strong></h6>
                    <p>Redirection (conversation goal) can take various forms, such as product call-up on Shopify or general redirection.</p>
                    <p>This typically occurs towards the end of each conversation to achieve the desired goal. Please tell us more about the typical flow of your conversations when customers have questions or show interest. This will help us tailor your Autobot optimally.</p>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Call to Action  <span class="text-danger">*</span></label>
                                <input type="textarea" name="name" class="form-control required" placeholder=" " rows="5">
                            </div>
                        </div>
                    </div>
                    <h6><strong>2. CHAT/GPT Setup Guide</strong></h6>
                    <ol>
                        <li class="mt-3">Go to: <a href="https://chat.openai.com">https://chat.openai.com</a> and create an account.</li>
                        <li class="mt-3">Use the following prompt: <span style="color: #ff0000"><em>Create for me a system prompt from the following information and conversations that I can enter as a copy &amp; paste solution to personalize my AI chatbot:</em></span></li>
                        <li class="mt-3"><b>Name:</b> [Your Bot Name]</li>
                        <li class="mt-3"><b>Languages:</b> German & English</li>
                        <li class="mt-3"><b>Communication Platform:</b>Instagram Chats</li>
                        <li class="mt-3"><b>Goal: </b>Educate about [Your Industry] and [Product] on Instagram</li>
                        <li class="mt-3"<b>Function: </b>Provide information and direct prospects to [your.website]</li>
                        <li class="mt-3"><b>Contents:</b>Explanation of products and processes</li>
                        <li class="mt-3"><b>Communication Style:</b>Friendly and personal</li>
                        <li class="mt-3"><b>Response Behavior:</b> Friendly responses to inquiries and small talk</li>
                        <li class="mt-3"><b>Human Approach:</b> Human interaction, understanding the feelings of conversation partners</li>
                        <li class="mt-3"><b>Needs Assessment:</b>Understand the needs of potential prospects and partners</li>
                        <li class="mt-3"><b>Naming: </b>No arbitrary names, customers and partners are not referred to in that way.</li>
                        <li class="mt-3">Make your adjustments to the prompt above to fit your Autobot.</li>
                        <li class="mt-3">Copy the text and paste it into the field above.</li>
                        <li class="mt-3"><b>Done</b></li>
                    </ol>
                    <h6><strong>3. System Prompt for Your Autobot.</strong></h6>
                    <p>Use this example to set up your conversation optimally.</p>
                     <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">3. Your system prompt:<span class="text-danger">*</span></label>
                                <input type="textarea" name="name" class="form-control required" placeholder=" " rows="3">
                            </div>
                        </div>
                    </div>
                    <p><b>Ein wichtiger Schritt noch. </b></p>
                    <p>Discord Support Ticket System beitreten.</p>
                    <p>Link: <a href="https://discord.gg/EqnUr8CTKs" target="_blank" rel="noopener">Join {{ app_name }} Discord Server.</a></p>
                    <p><em>Wenn Du noch keine Discord Account hast, bitte folge den Anweisungen nach der Weiterleitung.</em></p>
                </fieldset>
            </form>
        </div>
    </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('ai_growth_autobot');

        // 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) {
                alert('Submitted!');
            }
        });

        // 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
                },
                tel: {
                    required: true
                },
                two_fa: {
                    required: true
                },
                instagram_account_name: {
                    required: true
                },
                instagram_account_password: {
                    required: true
                },
                chat_id: {
                    required: true
                }
            }
        });

        // 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"];

        // Set the initial country dial code in the input field if it's empty
        if (!mobileInput.value) {
            const initialCountryData = iti.getSelectedCountryData();
            mobileInput.value = `+${initialCountryData.dialCode}`;
        } else {
            iti.setNumber(mobileInput.value);
        }

        // Event listener for country change
        mobileInput.addEventListener('countrychange', function() {
            const countryData = iti.getSelectedCountryData();
            const dialCode = countryData.dialCode;
            if(dialCode != undefined){
                mobileInput.value = `+${dialCode}`;
            }
        });

        // 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);
            }
        });

    });

    function toggleInput(show) {
        var inputBox = document.getElementById('backup-code-input');
        inputBox.style.display = show ? 'block' : 'none';
    }
</script>
{% endblock %}