{% 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"
                                                    class="oh-input oh-input--file oh-input--file-sm mt-4 oh-upload-input"
                                                    accept=".jpg, .jpeg, .png" 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">
                                    <label class="oh-label {% if not recruitment.optional_profile_image %}required-star{% endif %}" for="photo">{% trans "Profile" %} </label>
                                    <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>
                                {{ form.profile.errors }}
                                {{ form.non_field_errors }}
                                <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" value="{{ form.name.value|default:'' }}"/>
                                        {{ 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" value="{{ form.email.value|default:'' }}" />
                                    </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" value="{{ form.mobile.value|default:'' }}" />
                                        {{ 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/"  value="{{ form.portfolio.value|default:'' }}"/>
                                        {{ 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 {% if not recruitment.optional_resume %}required-star{% endif %}" for="resume">{% trans "Resume" %}</label>
                                        {% if resume.file %}
                                            <p>Currently: <a href="{{ resume.file.url }}" target="_blank">{{ resume.file.name }}</a></p>
                                            <p>Change: </p>
                                            <input type="hidden" id="matching_resume" data-value="{{ resume.file.url }}"
                                                data-id="{{ resume.id }}" name="initial_resume" value="{{ resume.file.url }}">
                                        {% endif %}
                                            <input type="file" id="id_resume" name="resume" accept=".pdf"
                                                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">{{ form.address.value|default:'' }}</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" data-selected="{{ form.country.value|default:'' }}"></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" data-selected="{{ form.state.value|default:'' }}"></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" value="{{ form.city.value|default:'' }}"/>
                                        {{ 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" value="{{ form.zip.value|default:'' }}"/>
                                        {{ 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>
            {% if resume %}
                <div class="col-12 col-md-6 col-lg-6 sticky">
                    <iframe style="width: 100%;height:90vh" height="100" src="{{ resume.file.url }}"
                        frameborder="0"></iframe>
                </div>
            {% else %}
                <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>
            {% endif %}
        </div>
    </div>
</div>
<script src="{% static '/index/country.js' %}"></script>
<script>
    {% include 'select2.js' %}
    var resume = "{{resume.file.url}}"
    {% if resume %}
        $("#resume").val(resume)
    {% endif %}
    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 not perms.recruitment.add_candidate %}
        if (!fileInput.value) {
            errorList.scrollIntoView({ behavior: "smooth", block: "center" });
            errorList.style.display = "block"; // Show error message
        } else {
            errorList.style.display = "none"; // Hide error message
        }
        {% endif %}
    }
    $(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()
            }
        }


        $("#matching_resume").on("click", function () {
            var file = $(this).data("value");
            var resume_id = $(this).data("id");

            $.ajax({
                url: "{% url 'matching-resume-completion' %}",
                type: 'GET',
                data: {
                    "resume_id": resume_id,
                    "file": file
                },
                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);
                }
            });
        })

        $("#matching_resume").click()

        $("[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 %}