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

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

        form#ai_growth_saas .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="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>SOFTWARE AS A SERVICE</h1>
        </div>
        <div class="card">
            <form class="wizard-form steps-validation" action="{{ path('app_front_save_ai_channel_form_data') }}" method="POST" id="ai_growth_saas">
                <input type="hidden" name="user_id" value="{{ user_id }}" id="user_id">
                <input type="hidden" name="category" value="sass" id="category">
                <h6>STEP-1</h6>
                    <fieldset>
                        <h3>Welcome to onboarding in our system</h3>
                        <p>Please enter your details here to register them in our S.A.A.S.</p>
                        <p>We Will then redirect you to our system.</p>
                        <p>Please make sure to use the same details as in your order.</p>
                        <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="e.g. Max">
                                </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="e.g. Musterman">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <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">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <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">
                                     <div class="error-message" id="mobilenoError"></div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                <h6>STEP-2</h6>
                    <fieldset>
                        <h3>Your order number.</h3>
                        <p>You will find this in your inbox after placing the order.</p>
                        <p class="mt-3">if not, please refresh your inbox.</p>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label class="form-label">Please Provide the order number : <span class="text-danger">*</span></label>
                                    <input type="text" name="order_no" class="form-control required" placeholder="#14485">
                                </div>
                            </div>
                        </div>
                    </fieldset>
                <h6>STEP-3</h6>
                    <fieldset>
                        <h1>DISCORD SUPPORT CHANNEL</h1>
                        <h3>JOIN NOW.</h3>
                        <p style="line-height: 1.6">Support And Information</p>
                        <p>Link : <a href="https://discord.gg/EqnUr8CTKs">Join {{ app_name }} Discord Server.</a></p>
                        <p>if you don't have a Discord account yet,please follow the instrctions after redirection.</p>                
                    </fieldset>
                <h6>STEP-4</h6>
                     <fieldset>
                        <h3>All done.</h3>
                        <p>You will now beredirected to our system to set up your account.</p>
                        <p>Please use the same details.</p>
                        <ul>
                            <li>First Name</li>
                            <li>Last Name</li>
                            <li>Email Address</li>
                        </ul>
                        <p>And then choose the packages that you ordered.</p>
                        <p>Your {{ app_name }} Team</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 aiGrowthSass = document.getElementById('ai_growth_saas');

        // 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) {
                 form.submit();
            }
        });

        // 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
                },
                mobile_no: {
                    required: true
                },
                order_no: {
                    required: true
                },
            }
        });

        // Initialize intl-tel-input for phone number validation
        const mobileInput = aiGrowthSass.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);
            }
        });

    });
</script>
{% endblock %}