{% extends 'layouts/layout.html' %}

{% block page_head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='dist/css/core_contact.bundle.css') }}">
    {#
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@altcha/browser@latest/dist/index.js" defer></script>
    #}
    {# with CDN
        <script src="https://cdn.jsdelivr.net/npm/@altcha/browser@1.1.0/dist/altcha.min.js"></script>
        <style>
            .altcha-widget {
                margin: 15px 0;
            }
        </style>
    #}
    {# with locally stored vendor project - this is imported into contact.js
    <script type="module" src="{{ url_for('static', filename='js/vendor/altcha.js')}}"></script>
    #}
    <style>
        .altcha-widget {
            margin: 15px 0;
        }
    </style>
{% endblock %}

{% block page_nav_links %}
    {# 
    <a href="#contact-form">Contact Form</a>
    <a href="#contact-details">Contact Details</a>
    #}
{% endblock %}

{% block page_body %}
    {#
    <script>
        function loadRecaptcha() {
            var script = document.createElement('script');
            script.src = "https://www.google.com/recaptcha/enterprise.js?render=6Lf8Q8cpAAAAAFAawGu4-ma60bvbEixNVTVvRzKe";
            script.async = true;
            document.body.appendChild(script);
        }

        window.addEventListener('load', loadRecaptcha);
    </script>
    #}
    
    {% set form = model.form_contact %}
    <section class="contact-section">
        <div class="contact-form">
            <h1>Contact Us</h1>
            <p>Please fill in the form below and we'll get back to you as soon as possible.</p>

            {% with messages = get_flashed_messages() %}
                {% if messages %}
                    <ul class="flashes">
                        {% for message in messages %}
                            <li>{{ message }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
            {% endwith %}
            
            <form id="{{ model.ID_CONTACT_FORM }}" method="POST" action="{{ url_for('routes_core.contact') }}">
                {{ form.csrf_token }}

                <div class="form-grid">
                    <label class="form-label" for="{{ form.email.id }}">{{ form.email.label.text }} *</label>
                    <div>
                        {{ form.email(class="form-input", required=True) }}
                    </div>

                    <label class="form-label" for="{{ form.contact_name.id }}">{{ form.contact_name.label.text }} *</label>
                    <div>
                        {{ form.contact_name(class="form-input", required=True) }}
                    </div>

                    <label class="form-label" for="{{ form.company_name.id }}">{{ form.company_name.label.text }} *</label>
                    <div>
                        {{ form.company_name(class="form-input", required=True) }}
                    </div>

                    <label class="form-label" for="{{ form.message.id }}">{{ form.message.label.text }} *</label>
                    <div>
                        {{ form.message(class="form-input", required=True) }}
                    </div>
                </div>

                <div class="{{ model.FLAG_CONTAINER_CHECKBOX }} {{ model.FLAG_RECEIVE_MARKETING }} marketing-consent">
                    {{ model.form_contact.receive_marketing() }}
                    {{ model.form_contact.receive_marketing.label }}
                </div>
                <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_CAPTCHA }}">
                    {# {{ model.form_contact.recaptcha() }} #}
                    {#
                    <altcha-widget
                        challengeurl="https://eu.altcha.org/api/v1/challenge?apiKey={{ model.app.app_config.ALTCHA_API_KEY }}"
                        spamfilter
                    ></altcha-widget>
                    #}
                    <div>
                        {{ form.altcha.label }}
                        {#
                        {{ form.altcha }}
                        {{ form.altcha.hidden() }}
                        #}
                        <altcha-widget
                            class="altcha-widget"
                            challengeurl="{{ url_for('routes_core.create_altcha_challenge') }}"
                            auto="onload"
                            id="{{ form.altcha.id }}"
                            name="{{ form.altcha.name }}"
                        ></altcha-widget>
                    </div>
                </div>
                <div class="{{ model.FLAG_CONTAINER_INPUT }}">
                    {{ model.form_contact.submit() }}
                </div>
            </form>

            <div class="data-notice">
                <h3>How we use your information</h3>
                <p>We will use the information you provide in this form to:</p>
                <ul>
                    <li>Respond to your inquiry about our ERP implementation services</li>
                    <li>Create and send you a proposal if requested</li>
                    <li>Contact you regarding your interest in our services</li>
                </ul>
                
                <p>If you opt in to marketing communications, we will also use your email address to send you updates about our services, ERPNext features, and relevant industry news. You can unsubscribe from these communications at any time.</p>
                
                <p>We retain contact form submissions for customer service purposes and retain marketing consent records as required by law. For details about how long we keep your information, please see our <a href="{{ url_for('routes_legal.retention_schedule') }}">data retention schedule</a>.</p>
                
                <p>For full details about how we handle your personal data, please read our <a href="{{ url_for('routes_legal.privacy_policy') }}">Privacy Policy</a>.</p>
            </div>
        </div>
    </section>

    {# included in footer now
    <section class="contact-details">
        <div class="{{ model.FLAG_CONTAINER }}">
            <h2>Our contact details</h2>
            <div class="expertise-card">
                <ul>
                    <li>Email: {{ model.get_mail_contact_public() }}</li>
                    <li>LinkedIn: <a href="https://www.linkedin.com/in/teddyms/">linkedin.com/in/teddyms</a></li>
                    <li>GitHub: <a href="https://github.com/Teddy-1024/">github.com/Teddy-1024</a></li>
                </ul>
            </div>
        </div>
    </section>
    #}

    {# with CDN
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Initialize ALTCHA widget
                ALTCHA.init({
                    selector: '.altcha-widget',
                    challenge: {
                        url: '/get-challenge',
                        onSuccess: function(result, element) {
                            // Store the result in the hidden input field
                            const hiddenInput = element.parentNode.querySelector('input[type="hidden"]');
                            hiddenInput.value = JSON.stringify(result);
                        }
                    }
                });
            });
        </script>
    #}

    {# with locally stored vendor project - this is now in contact.js
    <script type="module">
        import { Altcha } from "{{ url_for('static', filename='js/vendor/altcha.js') }}";
        window.ALTCHA = { init: (config) => {
            document.querySelectorAll(config.selector).forEach(el => {
                new Altcha({
                    target: el,
                    props: {
                        challengeurl: config.challenge.url,
                        auto: 'onload'
                    }
                }).$on('verified', (e) => {
                    config.challenge.onSuccess(e.detail.payload, el);
                });
            });
        }};
    </script>
    #}
    <script>
        var flagALTCHAWidget = "{{ model.FLAG_ALTCHA_WIDGET }}";
        var idContactForm = "#{{ model.ID_CONTACT_FORM }}";
        var idEmail = "#{{ model.ID_EMAIL }}";
        var idMessage = "#{{ model.ID_MESSAGE }}";
        var idContactName = "#{{ model.ID_CONTACT_NAME }}";
        var idCompanyName = "#{{ model.ID_COMPANY_NAME }}";
        var idReceiveMarketing = "#{{ model.ID_RECEIVE_MARKETING }}";
    </script>
{% endblock %}