{% extends 'candidate/application_form_component.html' %} {% block content %}
{% load static %} {% load i18n %} {{form.load}}
<div id="main">
  <div class="oh-wrapper mt-5">
    <div class="row">
      <div class="col-12 col-md-6 col-lg-6">
        <div class="oh-onboarding-card oh-onboarding-card--top-bar w-100">
          <div
            class="oh-onboarding-card__container oh-onboarding-card__container--wide"
          >
            <form action="" method="post" enctype="multipart/form-data">
              {% if messages %}
              <div class="oh-alert-container">
                {% for message in messages %}
                <div class="oh-alert oh-alert--animated {{message.tags}}">
                  {{ message }}
                </div>
                {% endfor %}
              </div>
              {% endif %} {% csrf_token %}
              <div class="row">
                <div
                  class="oh-modal"
                  id="uploadPhotoModal"
                  role="dialog"
                  aria-labelledby="uploadPhotoModal"
                  aria-hidden="true"
                >
                  <div class="oh-modal__dialog">
                    <div class="oh-modal__dialog-header">
                      <span
                        class="oh-modal__dialog-title"
                        id="uploadPhotoModalLabel"
                        >Upload Photo</span
                      >
                      <button
                        type="button"
                        onclick="event.stopPropagation()"
                        class="oh-modal__close"
                        aria-label="Close"
                      >
                        <ion-icon name="close-outline"></ion-icon>
                      </button>
                    </div>
                    <div class="oh-modal__dialog-body">
                      <div class="oh-profile-section__image-container">
                        <div class="oh-profile-section__modal-avatar">
                          <img
                            src="/static/images/ui/user.jpg"
                            class="oh-profile-section__modal-image oh-upload-photo"
                            alt="User Photo"
                          />
                        </div>
                        <input
                          type="file"
                          id="photo"
                          name="profile"
                          required
                          class="oh-input oh-input--file oh-input--file-sm mt-4 oh-upload-input"
                          data-target=".oh-upload-photo"
                        />
                        <div
                          class="d-flex justify-content-between w-100 align-items-center mt-4"
                        >
                          <button
                            class="oh-btn oh-btn--light-danger mr-1 oh-remove-image"
                            data-target=".oh-upload-photo"
                          >
                            <ion-icon
                              class="me-1"
                              name="trash-outline"
                            ></ion-icon
                            >{% trans "Delete image" %}
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-12 col-md-2 col-lg-2">
                  <div
                    class="oh-profile-section__edit-photo me-4 mb-3"
                    data-toggle="oh-modal-toggle"
                    data-target="#uploadPhotoModal"
                  >
                    <img
                      src="/static/images/ui/user.jpg"
                      class="oh-profile-section__avatar oh-upload-photo"
                      alt=""
                    />
                  </div>
                </div>
                <ul id="error-list" class="errorlist" style="display: none">
                  <li>{% trans "Please select profile image" %}.</li>
                </ul>
                <div class="col-sm-12 col-md-12 col-lg-12">
                  <div class="oh-input-group">
                    <label class="oh-label required-star" for="name"
                      >{% trans "Name" %}</label
                    >
                    <input
                      type="text"
                      id="name"
                      name="name"
                      required
                      class="oh-input w-100"
                      placeholder="e.g. Jane Doe"
                    />
                    {{form.name.errrors}}
                  </div>
                </div>

                {% if not request.GET.recruitmentId %}
                <div class="col-sm-12 col-md-6 col-lg-6">
                  <div class="oh-input-group">
                    <label class="oh-label required-star" for="recuitment"
                      > {% trans "Open Recruitment" %}
                    </label>
                    {{form.recruitment_id}} {{form.recruitment_id.errors}}
                  </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-6">
                  <div class="oh-input-group">
                    <label class="oh-label required-star" for="recuitment"
                      >{% trans "Choose Open Position" %}
                    </label>
                    {{form.job_position_id}} {{form.job_position_id.errors}}
                  </div>
                </div>
                {% else %}
                <input
                  type="text"
                  name="recruitment_id"
                  hidden
                  value="{{recruitment.id}}"
                />
                <div class="oh-input-group">
                  <label class="oh-label" for="recuitment"
                    >{% trans "Choose Job Position" %}
                  </label>

                  <select
                    name="job_position_id"
                    class="oh-select oh-select2 w-100"
                    style="height: 50px"
                  >
                    {% for job in recruitment.open_positions.all %}
                    <option value="{{job.id}}">{{job.job_position}}</option>
                    {% endfor %}
                  </select>
                </div>
                {% endif %}

                <div class="col-sm-12 col-md-6 col-lg-6">
                  <div class="oh-input-group">
                    <label class="oh-label required-star" for="email"
                      >{% trans "Email" %}</label
                    >
                    <input
                      type="email"
                      id="email"
                      name="email"
                      class="oh-input w-100"
                      required
                      placeholder="e.g. janedoe@example.com"
                    />
                  </div>
                  {{form.email.errors}}
                </div>

                <div class="col-sm-12 col-md-6 col-lg-6">
                  <div class="oh-input-group">
                    <label class="oh-label required-star" for="phone"
                      >{% trans "Phone" %}</label
                    >
                    <input
                      type="text"
                      id="phone"
                      class="oh-input w-100"
                      name="mobile"
                      placeholder="e.g. +1 245 999 999"
                    />
                    {{form.mobile.errors}}
                  </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-6">
                  <div class="oh-input-group">
                    <label class="oh-label" for="portfolio"
                      >{% trans "Portfolio" %}</label
                    >
                    <input
                      type="text"
                      id="portfolio"
                      name="portfolio"
                      class="oh-input w-100"
                      placeholder="e.g. https://www.linktoportfolio.com/"
                    />
                    {{form.portfolio.errors}}
                  </div>
                </div>

                <div class="col-sm-12 col-md-12 col-lg-6">
                  <div class="oh-input-group">
                    <label class="oh-label required-star" for="resume"
                      >{% trans "Resume" %}</label
                    >
                    <input
                      type="file"
                      id="resume"
                      name="resume"
                      required
                      class="oh-input w-100 px-0"
                    />
                    {{form.resume.errors}}
                  </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-6">
                  <div class="oh-input-group">
                    <label class="oh-label required-star" for="gender"
                      >{% trans "Gender" %}</label
                    >
                    {{form.gender}} {{form.gender.errros}}
                  </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-12">
                  <div class="oh-input-group">
                    <label class="oh-label required-star" for="address"
                      >{% trans "Address" %}</label
                    >
                    <textarea
                      id="address"
                      name="address"
                      required
                      class="oh-input oh-input--textarea w-100"
                    ></textarea>
                    {{form.address.errors}}
                  </div>
                </div>

                <div class="col-sm-12 col-md-6 col-lg-6">
                  <div class="oh-input-group">
                    <label class="oh-label required-star" for="id_country"
                      >{% trans "Country" %}</label
                    >
                    <select
                      name="country"
                      id="id_country"
                      required
                      class="oh-select oh-select-2"
                    ></select>
                    {{form.country.errors}}
                  </div>
                </div>

                <div class="col-sm-12 col-md-6 col-lg-6">
                  <div class="oh-input-group">
                    <label class="oh-label required-star" for="id_state"
                      >{% trans "State" %}</label
                    >
                    <select
                      name="state"
                      required
                      id="id_state"
                      class="oh-select oh-select-2"
                    ></select>
                    {{form.state.errors}}
                  </div>
                </div>

                <div class="col-sm-12 col-md-6 col-lg-6">
                  <div class="oh-input-group">
                    <label class="oh-label required-star" for="city"
                      >{% trans "City" %}</label
                    >
                    <input
                      type="text"
                      id="city"
                      required
                      name="city"
                      class="oh-input w-100"
                      placeholder="e.g. Kerala"
                    />
                    {{form.city.errors}}
                  </div>
                </div>

                <div class="col-sm-12 col-md-6 col-lg-6">
                  <div class="oh-input-group">
                    <label class="oh-label required-star" for="zip"
                      >{% trans "Zip Code" %}</label
                    >
                    <input
                      type="text"
                      id="zip"
                      required
                      name="zip"
                      class="oh-input w-100"
                      placeholder="e.g. 611 293"
                    />
                    {{form.zip.errors}}
                  </div>
                </div>

                <div class="col-sm-12 col-md-12 col-lg-12">
                  <button
                    type="submit"
                    class="oh-btn mt-4 oh-btn--secondary w-100 mb-4"
                    onclick="validateForm(event)"
                  >
                    <ion-icon name="checkmark-outline" class="me-2"></ion-icon>
                    {% trans "Apply" %}
                  </button>
                </div>

                <div class="col-sm-12 col-md-12 col-lg-12">
                  <p class="small text-muted text-center">
                    &copy; {% now 'Y' %} {{white_label_company_name}}. All rights resevered.
                  </p>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-6">
        <div class="oh-onboarding-preview oh-onboarding-card--top-bar w-100">
          {{recruitment.description|safe}}
          <div
            class="oh-onboarding-preview__content"
            id="recruitmentInfoBody"
            style="border-bottom: solid rgba(128, 128, 128, 0.281) 1px"
          ></div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  {% include 'country.js' %}
  {% include 'select2.js' %}
  var description = `{{form.instance.recruitment_id.description|safe}}`
  var formattedDescription = description.replace(/\n/g, "<br>");
  $("#recruitmentInfoBody").html(formattedDescription);

  $('form label').each(function() {
    var text = $(this).text();
    if (text.startsWith('*')) {
        $(this).html('<strong>' + text + '</strong>');
      }
  });
  function validateForm(event) {
    var fileInput = document.getElementById("photo");
    var errorList = document.getElementById("error-list");

    if (!fileInput.value) {
      errorList.scrollIntoView({ behavior: "smooth", block: "center" });
      errorList.style.display = "block"; // Show error message
    } else {
      errorList.style.display = "none"; // Hide error message
    }
  }
  $(document).ready(function(){
    function getCookie(name) {
      let cookieValue = null;
      if (document.cookie && document.cookie !== "") {
        const cookies = document.cookie.split(";");
        for (let i = 0; i < cookies.length; i++) {
          const cookie = cookies[i].trim();
          // Does this cookie string begin with the name we want?
          if (cookie.substring(0, name.length + 1) === name + "=") {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
          }
        }
      }
      return cookieValue;
    }

    function setIfEmpty(selector, value) {
      if ($(selector).val() === "" ){
        $(selector).val(value);
        $(selector).change();

        $("[name=country]").parent().find("span").remove()
        $("[name=country]").select2()
      }
    }

    $("[name='resume']").on("change", function(){
      var formData = new FormData();
      var file = this.files[0];
      formData.append('resume', file);

      $.ajax({
        url: "{% url 'resume-completion' %}",
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            'X-CSRFToken': getCookie("csrftoken")
        },
        success: function(response) {

          var full_name = response.full_name;
          var address = response.address;
          var country = response.country;
          var state = response.state;
          var phone = response.phone_number;
          var dob = response.dob;
          var email = response.email_id;
          var zip = response.zip;

          setIfEmpty("[name='name']", full_name);
          setIfEmpty("[name='email']", email);
          setIfEmpty("[name='mobile']", phone);
          setIfEmpty("[name='address']", address);
          setIfEmpty("[name='country']", country);
          setIfEmpty("[name='state']", state);
          setIfEmpty("[name='zip']", zip);
          $("[name='dob']").val(dob);

        },
        error: function(xhr, status, error) {
            console.error('File upload failed: ', status, error);
        }
      });
    })
  })
</script>

{% endblock content %}