{% extends "welcome_base.html" %}
{% load crispy_forms_filters %}
{% load i18n static %}

{% block content %}
    <section class="main my-4">
        <div class="container" style="max-width:60rem;">
            <div class="row form-container" id="form-container">
                <div class="col-12 ">
                    <a class="d-flex flex-center text-decoration-none mb-4"
                       href="{% url 'home' %}">
                        <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
                            <img class="d-dark-none"
                                 src="{% static 'images/logos/logo-d.png' %}"
                                 alt="{% trans 'home' %}"
                                 width="58" />
                            <img class="d-light-none"
                                 src="{% static 'images/logos/logo.png' %}"
                                 alt="{% trans 'home' %}"
                                 width="58" />
                        </div>
                    </a>
                    <div class="text-center">
                        <h3 class="text-body-highlight">{% trans 'Car Dealership Registration' %}</h3>
                        <p class="text-body-tertiary fs-9">{% trans 'Create your dealership account today' %}</p>
                    </div>
                    <div class="mx-auto mt-4 text-center">
                    </div>
                    <form method="post" action="{% url 'account_signup' %}" class="needs-validation">
                        {% csrf_token %}
                        <div class="card theme-wizard">
                            <div class="card-body pt-4 pb-0">
                                {{ form|crispy }}
                            </div>
                            <button class="btn btn-primary" type="submit">{% trans 'Sign Up' %}</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="mx-auto mt-4 text-center">
                <button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    {% trans "Our Refund Policy" %}
                </button>
            </div>
        </div>
    </section>

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{% trans "Our Refund Policy" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {% include 'haikal_policy/refund_policy.html' %}
                </div>

            </div>
        </div>
    </div>


{% endblock content %}

{% block customJS %}
    <script src="{% static 'js/phoenix.js' %}"></script>
    <script src="{% static 'js/main.js' %}"></script>
    <script src="{% static 'js/sweetalert2.all.min.js' %}"></script>
    <script type="module"
            src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.11/bundles/datastar.js"></script>
    <script>

        function validatePassword(password, confirmPassword) {
            return password === confirmPassword && password.length > 7 && password !== '';
        }
        function validateEmail(email) {
            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            return emailRegex.test(email) && email !== '';
        }
        function validateform2(name,arabic_name,phone_number) {
            if (name === '' || arabic_name === '' || phone_number === '' || phone_number.length < 10 || !phone_number.startsWith('05')) {
                return false;
            }
            return true
        }
        function validate_sa_phone_number(phone_number) {
            const phone_numberRegex = /^05[0-9]{8}$/;
            return phone_numberRegex.test(phone_number) && phone_numberRegex !== '';
        }
        function getAllFormData() {
            const forms = document.querySelectorAll('.needs-validation');
            const formData = {};
            forms.forEach(form => {
                const fields = form.querySelectorAll('input,textarea,select');
                fields.forEach(field => {
                    formData[field.name] = field.value;
                });
            });
            return formData;
        }

        function showLoading() {
            Swal.fire({
                title: "{% trans 'Please Wait' %}",
                text: "{% trans 'Loading' %}...",
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
        }

        function hideLoading() {
            Swal.close();
        }

        function notify(tag,msg){
            Swal.fire({
                icon: tag,
                titleText: msg
            });
        }
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== "") {
                const cookies = document.cookie.split(";");
                for (let cookie of cookies) {
                    cookie = cookie.trim();
                    if (cookie.substring(0, name.length + 1) === name + "=") {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        async function sendFormData() {
            const formData = getAllFormData();
            const url = "{% url 'account_signup' %}";
            const csrftoken = getCookie('csrftoken');
            try {
                showLoading();
                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': '{{csrf_token}}',
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(formData),
                });
                hideLoading();
                const data = await response.json();
                if (response.ok) {
                    notify("success","Account created successfully");
                    setTimeout(() => {
                        window.location.href = "{% url 'account_login' %}";
                    }, 1000);
                } else {
                    notify("error",data.error);
                }
            } catch (error) {
                notify("error",error);
            }
        }


    </script>
{% endblock customJS %}