{% extends "welcome_base.html" %}
{% load crispy_forms_filters %}
{% load i18n static %}
{% block content %}
    <section class="main my-2">
        <div class="container-fluid">
            <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 'Sign Up' %}</h3>
                        <p class="text-body-tertiary fs-9">{% trans 'Create your account today' %}</p>
                    </div>
                    <div class="card theme-wizard" data-theme-wizard="data-theme-wizard">
                        <div class="card-header pt-3 pb-2 ">
                            <ul class="nav justify-content-between nav-wizard nav-wizard-success"
                                role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link active fw-semibold"
                                       href="#bootstrap-wizard-validation-tab1"
                                       data-bs-toggle="tab"
                                       data-wizard-step="1"
                                       aria-selected="true"
                                       role="tab">
                                        <div class="text-center d-inline-block">
                                            <span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-lock"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Access' %}</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link fw-semibold"
                                       href="#bootstrap-wizard-validation-tab2"
                                       data-bs-toggle="tab"
                                       data-wizard-step="2"
                                       aria-selected="false"
                                       tabindex="-1"
                                       role="tab">
                                        <div class="text-center d-inline-block">
                                            <span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-user"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Account' %}</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link fw-semibold"
                                       href="#bootstrap-wizard-validation-tab3"
                                       data-bs-toggle="tab"
                                       data-wizard-step="3"
                                       aria-selected="false"
                                       tabindex="-1"
                                       role="tab">
                                        <div class="text-center d-inline-block">
                                            <span class="nav-item-circle-parent"><span class="nav-item-circle">
                                                <svg class="fa fa-file-lines">
                                                </svg>
                                            </span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Extra' %}</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link fw-semibold"
                                       href="#bootstrap-wizard-validation-tab4"
                                       data-bs-toggle="tab"
                                       data-wizard-step="4"
                                       aria-selected="false"
                                       tabindex="-1"
                                       role="tab">
                                        <div class="text-center d-inline-block">
                                            <span class="nav-item-circle-parent"><span class="nav-item-circle"><span class="fa fa-check"></span></span></span><span class="d-none d-md-block mt-1 fs-9">{% trans 'Done' %}</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-body pt-4 pb-0">
                            <div class="tab-content">
                                <div class="tab-pane active"
                                     role="tabpanel"
                                     aria-labelledby="bootstrap-wizard-validation-tab1"
                                     id="bootstrap-wizard-validation-tab1">
                                    <form class="needs-validation"
                                          id="wizardValidationForm1"
                                          novalidate="novalidate"
                                          data-wizard-form="1">
                                        {{ form1|crispy }}
                                        <a class="fs-10 text-decoration-none"
                                           href="{% url 'terms_and_privacy' %}"
                                           target="_blank">{{ _("Read Terms of Service and Privacy Policy") }}</a>
                                    </form>
                                </div>
                                <div class="tab-pane"
                                     role="tabpanel"
                                     aria-labelledby="bootstrap-wizard-validation-tab2"
                                     id="bootstrap-wizard-validation-tab2">
                                    <form class="needs-validation"
                                          id="wizardValidationForm2"
                                          novalidate="novalidate"
                                          data-wizard-form="2">
                                        {{ form2|crispy }}
                                    </form>
                                </div>
                                <div class="tab-pane"
                                     role="tabpanel"
                                     aria-labelledby="bootstrap-wizard-validation-tab3"
                                     id="bootstrap-wizard-validation-tab3">
                                    <form class="needs-validation"
                                          id="wizardValidationForm3"
                                          novalidate="novalidate"
                                          data-wizard-form="3">
                                        {{ form3|crispy }}
                                    </form>
                                </div>
                                <div class="tab-pane"
                                     role="tabpanel"
                                     aria-labelledby="bootstrap-wizard-validation-tab4"
                                     id="bootstrap-wizard-validation-tab4">
                                    <div class="row flex-center pb-8 pt-4 gx-3 gy-4">
                                        <div class="col-12 col-sm-auto">
                                            <div class="text-center text-sm-start">
                                                <img class="d-dark-none"
                                                     src="{% static 'images/spot-illustrations/38.webp' %}"
                                                     alt=""
                                                     width="220">
                                                <img class="d-light-none"
                                                     src="{% static 'images/spot-illustrations/dark_38.webp' %}"
                                                     alt=""
                                                     width="220">
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-auto">
                                            <div class="text-center text-sm-start">
                                                <h5 class="mb-3">{% trans 'You are all set!' %}</h5>
                                                <p class="text-body-emphasis fs-9">
                                                    {% trans 'Now you can access your account' %}
                                                    <br>
                                                    {% trans 'anytime' %} {% trans 'anywhere' %}
                                                </p>
                                                <button class="btn btn-primary px-6" id='submit_btn'>{% trans 'Submit' %}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer border-top-0"
                             data-wizard-footer="data-wizard-footer">
                            <div class="d-flex pager wizard list-inline mb-0">
                                <button class="d-none btn btn-link ps-0"
                                        type="button"
                                        data-wizard-prev-btn="data-wizard-prev-btn">{% trans 'Previous' %}</button>
                                <div class="flex-1 text-end">
                                    <button class="btn btn-phoenix-primary px-6 px-sm-6 next"
                                            type="submit"
                                            data-wizard-next-btn="data-wizard-next-btn">{% trans 'Next' %}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="pt-lg-0 pt-xl-8">
        {% include 'footer.html' %}
    </section>
    <script src="{% static 'js/phoenix.js' %}"></script>
{% endblock content %}
{% block customJS %}
    <script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
    <script>
    const validator = new JustValidate('#wizardValidationForm1', {
      validateBeforeSubmitting: true,
    });
    const validator1 = new JustValidate('#wizardValidationForm2', {
      validateBeforeSubmitting: true,
    });

    validator1.addField('#wizardValidationForm2 [name="phone_number"]', [
      {
        rule: 'required',
      },
      {
        rule: 'customRegexp',
        value: /^05\d{8}$/,
        errorMessage: '{% trans 'Please enter a valid phone number' %}',
      },
      {
        rule: 'maxLength',
        value: 10,
        errorMessage: '{% trans 'Please enter a valid phone number' %}',
      },

    ]);

    validator.addField('#wizardValidationForm1 [name="email"]', [
      {
        rule: 'required',
      },
      {
        rule: 'email',
      },
    ]);

    validator.addField('#wizardValidationForm1 [name="password"]', [
      {
        rule: 'required',
      },
      {
        rule: 'minLength',
        value: 6,
      },

    ]);
    validator.addField('#wizardValidationForm1 [name="confirm_password"]', [
      {
        rule: 'required',
      },
      {
        rule: 'minLength',
        value: 6,
        errorMessage: '{% trans 'Password does not match' %}',
      },
      {
        validator: (value, context) => {
          if (value !== document.querySelector('#id_password').value) {
            return false;
          }
          return true;
        },
      },
    ])
    validator.addField('#wizardValidationForm1 [name="terms"]', [
      {
        rule: 'required',
      },
    ])


    /*
    validator = new JustValidate('#wizardValidationForm1', {
      rules: {
        email: {
          required: true,
          email: true,
        },
        password: {
          required: true,
          min: 6,
        },
        confirm_password: {
          required: true,
          min: 6,
          equalTo: '#password',
        },
      },
      messages: {
        name: {
          required: 'Please enter your name',
        },
        email: {
          required: 'Please enter your email',
          email: 'Please enter a valid email address',
        },
        password: {
          required: 'Please enter your password',
          min: 'Password must be at least 6 characters',
        },
        confirm_password: {
          required: 'Please confirm your password',
          min: 'Password must be at least 6 characters',
          equalTo: 'Passwords do not match',
        },
        }
    })
        */
    const url = "{% url 'account_signup' %}";
    let submit_btn = document.getElementById('submit_btn');
    const csrftoken = getCookie('csrftoken');

    submit_btn.addEventListener('click', async () => {
      const allFormData = getAllFormData();

      try {
        showLoading();
        const response = await fetch(url, {
          method: 'POST',
          headers: {
            'X-CSRFToken': csrftoken,
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(allFormData),
        });
        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);
      }

    });

    function getAllFormData() {
      const forms = document.querySelectorAll('form');
      const formData = {};

      forms.forEach((form, index) => {
        const formId = form.id || `form${index + 1}`;
        formData[formId] = {};

        const formElements = form.elements;
        for (let element of formElements) {
          if (element.name) {
            formData[formId][element.name] = element.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;
    }
    </script>
{% endblock customJS %}