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


{% block content %}
    <div class="row form-container" id="form-container">
    <div class="row d-flex-center min-vh-50">
      <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="text-start">
<div class="card theme-wizard" data-theme-wizard="data-theme-wizard">
    <div class="card-header pt-3 pb-2 border-bottom-0">
      <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}}
          </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>
    <script src="{% static 'js/phoenix.js' %}"></script>
    </div>
  {% 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
            });
        }    
        </script>    
  {% endblock customJS %}