{% extends 'index.html' %} {% block content %} {% load static %} {% load i18n %}
{% comment %} {% include 'candidate/candidate_nav.html' %} {% endcomment %}
{{form.load}}
<div
  class="oh-wrapper mt-5"
  id="section"
  data-select2-id="select2-data-40-yu7x"
>
  <form
    data-select2-id="select2-data-47-5jxy"
    method="post"
    enctype="multipart/form-data"
  >
    <div
      class="oh-general__tab-target oh-profile-section mb-4"
      id="personal"
      data-select2-id="select2-data-personal"
    >
      <div
        class="oh-profile-section__card"
        data-select2-id="select2-data-48-0df8"
      >
        <div id="personalMessage">
          {% 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 %}
        </div>
        {% csrf_token %}
        <div class="row">
          <div
            class="col-12 col-sm-12 col-md-12 col-lg-6 d-flex align-items-center"
          >
            <div
              class="oh-profile-section__edit-photo me-4 mb-3"
              data-toggle="oh-modal-toggle"
              data-target="#uploadPhotoModal"
            >
              <img
              src="{{form.instance.get_avatar}}"
              class="oh-profile-section__modal-image preview"
                alt="Username"
              />
            </div>
          </div>
        </div>
        <input type="file" hidden name="profile" id="hidden_profile" />
        {{form.profile.errors}}
        <div class="row">
          <div class="col-12 col-sm-12 col-md-12 col-lg-12">
            <label class="oh-label" for="firstname"
              >{% trans "Candidate Name" %} *</label
            >
            {{form.name}} {{form.name.errors}}
          </div>
        </div>

        <div class="row">
          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label" for="email">{% trans "Email" %} *</label>
            {{form.email}} {{form.email.errors}}
          </div>
          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label" for="phone">{% trans "Phone" %}</label>
            {{form.mobile}} {{form.mobile.errors}}
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label" for="recruitment"
              >{% trans "Recruitment" %} *</label
            >
            <div id="select2-container">{{form.recruitment_id}}</div>
            {{form.recruitment_id.errors}}
          </div>
          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label" for="recruitment"
              >{% trans "Job Position" %}</label
            >
            <div id="select2-container">{{form.job_position_id}}</div>
            {{form.job_position_id.errors}}
          </div>
          {% comment %}
          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label" for="stage">{% trans "Stage" %}</label>
            {{form.stage_id}} {{form.stage_id.errors}}
          </div>
          {% endcomment %}
        </div>
        <div class="row" data-select2-id="select2-data-46-nz80">
          <div
            class="col-12 col-sm-12 col-md-12 col-lg-6"
            style="position: relative"
          >
            <label class="oh-label" for="dob"
              >{% trans "Date of Birth" %}</label
            >
            {{form.dob}} {{form.dob.errors}}
          </div>

          <div
            class="col-12 col-sm-12 col-md-12 col-lg-6"
            data-select2-id="select2-data-45-37n6"
          >
            <label class="oh-label" for="gender">{% trans "Gender" %} *</label>
            {{form.gender}} {{form.gender.errors}}
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label" for="address">{% trans "Address" %}</label>
            {{form.address}} {{form.address.errors}}
          </div>
          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label" for="address">{% trans "Source" %}</label>
            {{form.source}} {{form.source.errors}}
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label" for="country">{% trans "Country" %}</label>
            <select
              name="country"
              id="id_country"
              class="oh-select oh-select-2"
            >
              <option value="{{form.instance.country}}" selected>
                {{form.instance.country}}
              </option>
            </select>
            {{form.country.errors}}
            <span class="dropdown-wrapper" aria-hidden="true"></span>
          </div>
          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label d-block" for="state"
              >{% trans "State" %}</label
            >
            {{form.state.errors}}
            <select name="state" id="id_state" class="oh-select oh-select-2">
              <option value="{{form.instance.state}}" selected>
                {{form.instance.state}}
              </option>
            </select>
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label d-block" for="state"
              >{% trans "Zip Code" %}</label
            >
            {{form.zip}} {{form.zip.errors}}
          </div>

          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label d-block" for="state"
              >{% trans "Resume" %} *</label
            >
            {{form.resume}} {{form.resume.errors}}
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label d-block" for="state"
              >{% trans "Referral" %}</label
            >
            {{form.referral}} {{form.referral.errors}}
          </div>
        </div>
        <div class="row">
          <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-6">
              <label class="oh-label d-block" for="experience"
                >{% trans "Canceled" %}?</label
              >
              <div class="oh-switch">
                {{form.canceled}} {{form.canceled.errors}}
              </div>
            </div>

            <div class="col-12 col-sm-12 col-md-12 col-lg-6">
              <label class="oh-label me-2" for="isActive"
                >{% trans "Is Active" %}?</label
              >
              <div class="oh-switch">
                {{form.is_active}} {{form.is_active.errors}}
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-6">
              <input type="file" name="profile" hidden id="hidden_profile" />
            </div>
            <hr class="mt-5 mb-3 d-flex flex-row-reverse" />
          </div>

          <div class="w-100 d-flex align-items-center justify-content-end">
            <button
              type="submit"
              class="oh-btn oh-btn--secondary oh-btn--w-100-resp"
            >
              {% trans "Save" %}
            </button>
          </div>
        </div>
      </div>

      <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"
              >{% trans "Upload Photo" %}</span
            >
            <a href="#" class="oh-modal__close" aria-label="Close">
              <ion-icon name="close-outline"></ion-icon>
            </a>
          </div>
          <div class="oh-modal__dialog-body">
            <div class="oh-profile-section__image-container">
              {% csrf_token %}
              <div class="oh-profile-section__modal-avatar">
                <img
                  src="{{form.instance.get_avatar}}"
                  class="oh-profile-section__modal-image preview"
                  alt="Username"
                />
              </div>
              <input
                type="file"
                accept="image/*"
                class="oh-input oh-input--file oh-input--file-sm mt-4"
                placeholder="Profile"
                id="choose_profile"
              />
              {% if form.instance.id %}
              <div class="d-flex justify-content-center">
                <a
                  class="oh-btn oh-btn--light-danger mr-1"
                  href="{% url 'delete-profile-image' form.instance.id %}"
                >
                  <ion-icon class="me-1" name="trash-outline"></ion-icon>{% trans "Delete Image" %}
                </a>
              </div>
              {% endif %}
            </div>
          </div>
        </div>

        <script>
          {% include 'country.js' %}
        </script>
        <script>
          $(document).ready(function () {
            $("#choose_profile").change(function (e) {
              var modal_profile = $(this)[0];
              var hidden_profile = $("#hidden_profile")[0];
              hidden_profile.files = modal_profile.files;

              const file = this.files[0];
              const reader = new FileReader();

              reader.addEventListener("load", function () {
                const imageUrl = reader.result;
                $(".preview").attr("src", imageUrl);
                setTimeout(function () {
                  $("#uploadPhotoModal").removeClass("oh-modal--show");
                }, 2000);
              });

              reader.readAsDataURL(file);
            });
            {% if not form.instance.pk %}
              function setIfEmpty(selector, value) {
                if ($(selector).val() === "" ){
                  $(selector).val(value);
                }
                if ($(selector).val() == "None") {
                  $(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);
                  }
                });
              })
            {% endif %}
          });
        </script>
      </div>
      <script src="{% static '/recruitment/stageScript.js' %}"></script>
      {% endblock content %}
    </div>
  </form>
</div>