{% load i18n %}
<div>
  <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"
    >
      <form action="" method="post" enctype="multipart/form-data">
        {% 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__avatar preview"
                alt="Username"
              />
            </div>
          </div>
        </div>
        {{form.employee_profile.errors}}
        <div class="row">
          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label" for="firstname"
              >{% trans "First Name" %}</label
            >
            {{form.employee_first_name}} {{form.employee_first_name.errors}}
          </div>
          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label" for="lastname"
              >{% trans "Last Name" %}</label
            >
            {{form.employee_last_name}} {{form.employee_last_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.phone}} {{form.phone.errors}}
          </div>
        </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 d-block" for="{{form.qualification.id_for_label}}"
              >{% trans "Qualification" %}</label
            >
            {{form.qualification}}
            {{form.qualification.errors}}
          </div>
          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label d-block" for="{{form.experience.id_for_label}}"
              >{% trans "Experience" %}</label
            >
            {{form.experience}} {{form.experience.errors}}
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-sm-12 col-md-12 col-lg-12">
            <label class="oh-label" for="address">{% trans "Address" %}</label>
            {{form.address}} {{form.address.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
              class="oh-select-2 oh-select w-100"
              name="country"
              id="id_country"
            >
              <option value="{{form.instance.country}}" selected>
                {{form.instance.country}}
              </option>
            </select>
            <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
            >
            <select name="state" class="oh-select oh-select-2" id="id_state">
              <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 "City" %}</label
            >
            {{form.city}} {{form.city.errors}}
          </div>
          <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>
        <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 "Emergency Contact" %}</label
            >
            {{form.emergency_contact}} {{form.emergency_contact.errors}}
          </div>
          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label d-block" for="emergencyContactName"
              >{% trans "Contact Name" %}</label
            >
            {{form.emergency_contact_name}}
            {{form.emergency_contact_name.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="emergencyContactRelation"
              >{% trans "Emergency Contact Relation" %}</label
            >
            {{form.emergency_contact_relation}}
            {{form.emergency_contact_relation.errors}}
          </div>
          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
            <label class="oh-label d-block" for="marital_status"
              >{% trans "Maritial Status" %}</label
            >
            {{form.marital_status}} {{form.marital_status.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="children"
              >{% trans "Children" %}</label
            >
            {{form.children}} {{form.children.errors}}
          </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>
        <hr class="mt-5 mb-3">
          <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>
      </form>
    </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
        >
        <button class="oh-modal__close" aria-label="Close" id="closeModalBtn">
          <ion-icon name="close-outline"></ion-icon>
        </button>
      </div>
      <div class="oh-modal__dialog-body">
        <div class="oh-profile-section__image-container">
          <form
            hx-post="{% url 'update-own-profile-image' %}"
            hx-target="#uploadPhotoModal"
            hx-encoding="multipart/form-data"
            method="post"
            id="file-form"
            onsubmit="return submitForm(event)"
          >
            {% 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"
              name="employee_profile"
              id="id_employee_profile"
              class="oh-input oh-input--file oh-input--file-sm mt-4"
            />
            <div
              class="d-flex justify-content-between w-100 align-items-center mt-4"
            >
              <button
                class="oh-btn oh-btn--light-danger mr-1"
                hx-target="#personalMessage"
                hx-delete="{% url 'remove-own-profile-image' %}"
              >
                <ion-icon class="me-1" name="trash-outline"></ion-icon>
                {% trans "Delete Image" %}
              </button>
              <button
                type="submit"
                class="oh-btn oh-btn--secondary oh-btn--shadow"
              >
                {% trans "Update Image" %}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div id="personalMessage"></div>
    <script>
      function submitForm(event) {
        event.preventDefault();
        $("#closeModalBtn").click();
      }
    </script>
    <script>
      $(document).ready(function () {
        $("#id_employee_profile").change(function (e) {
          const file = this.files[0];
          const reader = new FileReader();

          reader.addEventListener("load", function () {
            const imageUrl = reader.result;
            $(".preview").attr("src", imageUrl);
          });

          reader.readAsDataURL(file);
        });
        $("#file-form").submit(function (e) {
          e.preventDefault();

          var formData = new FormData($(this)[0]);

          $.ajax({
            url: '{% url "update-own-profile-image" %}',
            type: "POST",
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (response) {
              $("#personalMessage").html(response);
            },
            error: function (xhr, status, error) {
              // console.log(xhr.responseText);
            },
          });

          return false;
        });
      });
    </script>
  </div>
</div>
