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

{% block content %}
    <section class="main my-2">
        <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>

                    <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>
                        </form>
                    </div>
                </div>
            </div>
             <div class="mx-auto mt-4 text-center">
               <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#contentModal" data-url="{% url 'refund_policy' %}">
                  Our Refund Policy
                </button>
             </div>
        </div>
    </section>

        <div class="modal fade" id="contentModal" tabindex="-1" aria-labelledby="contentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="contentModalLabel">Refund Policy</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Loading...</p>
            </div>
            </div>
        </div>
        </div>

    {% include 'footer.html' %}
    <script src="{% static 'js/phoenix.js' %}"></script>
{% endblock content %}
{% block customJS %}
    <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);
            }
        }


        //modal for policy

document.addEventListener('DOMContentLoaded', function() {
  const contentModal = document.getElementById('contentModal');
  if (contentModal) {
    contentModal.addEventListener('show.bs.modal', function(event) {
      // Get the button that triggered the modal
      const button = event.relatedTarget;
      // Extract the URL from the button's data-url attribute
      const url = button.getAttribute('data-url');

      // Select the modal body element
      const modalBody = contentModal.querySelector('.modal-body');

      // Use the Fetch API to load content
      fetch(url)
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.text();
        })
        .then(html => {
          // Insert the HTML content into the modal body
          modalBody.innerHTML = html;
        })
        .catch(error => {
          modalBody.innerHTML = `<p class="text-danger">Failed to load content: ${error.message}</p>`;
        });
    });
  }
});
    </script>
{% endblock customJS %}