{% extends 'baseone.html.twig' %}
{% block title %}{% endblock %}
    {% block stylesheets %}
        {{ encore_entry_link_tags('install') }}
    {% endblock %}
{% block body %}
<div id="myd_top"></div>
<div class="container-fluid">
    <div class="row main-requirements-box">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="text-center main-card">
                        <h2 class="install-step-title">Install Step 2 : setting up your Myddleware database</h2>
                        <div class="card-body d-flex justify-content-center">
                            <div class="card col-6">
                                <div id="install-database-information-title"class="card-header bg-success text-white">
                                    Database information
                                </div>
                                <div class="card-body text-left">
                                    {{ form_start(form) }}
                                    {{ form_row(form.host) }}
                                    {{ form_row(form.port) }}
                                    {{ form_row(form.name) }}
                                    {{ form_row(form.user) }}
                                    {{ form_row(form.password)}}
                                    <div class="d-grid mt-4">
                                        {{ form_row(form.Save, {'attr': {'class': 'btn btn-primary btn-lg', 'onclick': 'validateAndSubmitForm(event)'}}) }}
                                    </div>
                                    {{ form_end(form) }}
                                    <script>
                                        function validateAndSubmitForm(event) {
                                            // Prevent the default form submission
                                            event.preventDefault();

                                            // Perform basic validation
                                            const form = event.target.form;
                                            const requiredFields = ['host', 'port', 'name', 'user', 'password'];
                                            let isValid = true;

                                            requiredFields.forEach(field => {
                                                const input = form.querySelector(`[name$="[${field}]"]`);
                                                if (input && !input.value.trim()) {
                                                    isValid = false;
                                                    input.classList.add('is-invalid');
                                                } else if (input) {
                                                    input.classList.remove('is-invalid');
                                                }
                                            });

                                            // If the form is valid, submit it
                                            if (isValid) {
                                                form.submit();
                                            }
                                        }
                                    </script>
                                    {% if submitted %}
                                        <script>
                                            window.location.href = "{{ path('database_connect') }}";
                                        </script>
                                    {% endif %}
                                    <div>
                                        <a class="card-link" href="{{path('install_requirements')}}">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
                                                    <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                                                    </svg>
                                                    Go back to requirements check
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer>
    {% include 'footer.html.twig' %}
</footer>
    {% block javascripts %}
        {{ encore_entry_script_tags('install') }}
    {% endblock %}
{% endblock %}