haikal/templates/appointment/appointment_client_information.html

{% extends BASE_TEMPLATE %}
{% load i18n %}
{% load static %}
{% block customCSS %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/appointments-user-details.css' %}"/>
{% endblock %}
{% block title %}
    {% translate 'Client Information' %} - {{ ar.get_service_name }}
{% endblock %}
{% block description %}
    {% blocktranslate with service_name=ar.get_service_name %}
        Your appointment request for {{ service_name }} has been submitted.
        Please provide your information to create an account and complete the payment process.
    {% endblocktranslate %}
{% endblock %}
{% block body %}
    <div class="main-container">
        <div class="body-container">
            <form method="post"
                  action="{% url 'appointment:appointment_client_information' ar.id ar.get_id_request %}"
                  class="page-body">
                {% csrf_token %}
                <div class="appointment-user-info">
                    <div class="appointment-user-info-title">
                        <div class="title">
                            {% trans "Fill out your details" %}
                        </div>
                    </div>
                    <hr class="second-part">
                    <div class="user-info-input">
                        <div class="user-info" id="user-info">
                            <h1 class="description-title">{% trans "Tell us a bit about yourself" %}</h1>
                            <div class="already-have-account">
                                <div>
                                    {% trans 'Already have an account?' %}
                                    <a href="#">{% trans 'Log in' %}</a> {% trans 'for faster booking.' %}
                                </div>
                            </div>
                            <div class="name-email">
                                <label for="{{ form.name.id_for_label }}" class="name">{% trans "Full Name" %} *<br>
                                    {{ client_data_form.name }}
                                </label>
                                <label for="{{ form.email.id_for_label }}" class="email">{% trans "Email" %} *<br>
                                    {{ client_data_form.email }}
                                </label>
                            </div>
                            <div class="receive-email">
                                <label for="{{ form.want_reminder.id_for_label }}">
                                    {{ form.want_reminder }}
                                    {% trans "I want to receive an EMAIL reminder 24 hours before this session starts" %}
                                </label>
                            </div>
                            <div class="phone-number">
                                <label for="{{ form.phone.id_for_label }}">
                                    {% trans "Phone" %} *<br>
                                </label>
                                <div class="phone-input-container">
                                    {{ form.phone }}
                                </div>
                            </div>
                            <div class="address">
                                <label for="{{ form.address.id_for_label }}">{% trans "City and State" %} * :<br>
                                    {{ form.address }}
                                </label>
                            </div>
                            <div class="additional-information">
                                <label for="{{ form.additional_info.id_for_label }}">{% trans 'Additional Information' %}<br>
                                    {{ form.additional_info }}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="service-description-and-pay">
                    <div class="service-details-title">{% trans "Service Details" %}</div>

                    <hr class="second-part">

                    <div class="service-description-content">
                        <div class="item-name">{{ ar.get_service_name }}</div>
                        <div id="service-datetime-chosen"
                             class="service-datetime-chosen">
                            {{ ar.date }}&nbsp;{% trans "at" %}&nbsp;{{ ar.start_time }}
                        </div>
                        <div>{{ ar.service.get_duration }}</div>
                    </div>

                    <hr class="second-part">
                    {% if ar.is_a_paid_service %}
                        {% if APPOINTMENT_PAYMENT_URL %}
                            <div class="service-payment">
                                <div class="payment-details-title">{% trans "Payment Details" %}</div>
                                <div class="total">
                                    <div>{% trans "Total" %}</div>
                                    <div>${{ ar.get_service_price }}</div>
                                </div>
                                <div class="payment-options">
                                    <button type="submit" class="btn btn-phoenix-primary btn-pay-full" name="payment_type"
                                            value="full">
                                        {% trans "Pay" %}
                                    </button>
                                    {% if ar.accepts_down_payment %}
                                        <button type="submit" class="btn btn-phoenix-primary btn-pay-down-payment"
                                                name="payment_type"
                                                value="down">
                                            {% trans "Down Payment" %} (${{ ar.get_service_down_payment }})
                                        </button>
                                    {% endif %}
                                </div>
                            </div>
                        {% else %}
                            <button type="submit" class="btn btn-phoenix-primary btn-submit-appointment" name="payment_type"
                                    value="full">
                                {% trans "Finish" %}
                            </button>
                        {% endif %}
                    {% else %}
                        <button type="submit" class="btn btn-phoenix-primary btn-submit-appointment" name="payment_type"
                                value="full">
                            {% trans "Finish" %}
                        </button>
                    {% endif %}
                </div>
            </form>
        </div>
    </div>
{% endblock %}
{% block customJS %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const messageElements = document.querySelectorAll('.alert-dismissible');
            setTimeout(function () {
                messageElements.forEach(function (element) {
                    element.style.display = 'none';
                });
            }, 3000);

            // Get the form and the 'submit' button
            const form = document.querySelector('form');
            const submitButtons = Array.from(form.querySelectorAll('button[type="submit"]'));

            // Disable the 'submit' buttons initially
            submitButtons.forEach(button => button.disabled = true);

            // Listen for input events on the form
            form.addEventListener('input', function () {
                // Get all required fields
                const requiredFields = Array.from(form.querySelectorAll('[required]'));

                // Check if all required fields are filled
                const allFieldsFilled = requiredFields.every(field => field.value.trim() !== '');

                // Enable or disable the 'submit' buttons based on whether all fields are filled
                submitButtons.forEach(button => button.disabled = !allFieldsFilled);
            });
        });
    </script>
{% endblock %}