{% assign isFormCompleted = current_person.properties.is_feedback_form_completed %}


<div id="form-overlay" class="overlay">
    <div class="overlay-content">
        <div class="form-header">
            <span class="close-button" onclick="closeForm()">&times;</span>
            <div class="pop-up-image-container">
                <img
                  alt="{{ current_school.name }}"
                  class="pop-up-logo-image"
                  src="{{ current_school.logo_url }}" />
            </div>
            <h2>Tell us more!</h2>
            <p>Providing more information about your experience can unlock more possibilities with Nintex University.</p>
        </div>
        <form id="feedback-form">
            <div class="form-input-wrapper">
                <label for="email">Email*</label>
                <input type="email" id="email" name="email" value="{{current_person.email}}" required>
            </div>
            <div class="form-input-wrapper">
                <label for="role">What best describes your role?*</label>
                <input type="role" id="role" name="role" required>
            </div>

            <div class="form-input-wrapper">
                <label for="product">Which Nintex product(s) do you work with?*</label>
                <select id="product" name="product[]" multiple required size="3" required>
                    <option value="">Please Select</option>
                    <option value="nintex_apps">Nintex Apps</option>
                    <option value="nintex_apps_for_salesforce">Nintex Apps for Salesforce</option>
                    <option value="nintex_automation_k2">Nintex Automation K2</option>
                    <option value="nintex_docgen">Nintex DocGen</option>
                    <option value="nintex_docgen_for_salesforce">Nintex DocGen for Salesforce</option>
                    <option value="nintex_docgen_for_salesforce_ge">Nintex DocGen for Salesforce GE</option>
                    <option value="nintex_esign">Nintex eSign</option>
                    <option value="nintex_for_office_365">Nintex for Office 365</option>
                    <option value="nintex_for_sharepoint">Nintex for SharePoint</option>
                    <option value="nintex_k2_cloud">Nintex K2 Cloud</option>
                    <option value="nintex_partner_sales">Nintex Partner Sales</option>
                    <option value="nintex_process_manager">Nintex Process Manager</option>
                    <option value="nintex_rpa">Nintex RPA</option>
                    <option value="nintex_rpa_le">Nintex RPA LE</option>
                    <option value="nintex_solutions">Nintex Solutions</option>
                    <option value="nintex_workflow">Nintex Workflow</option>
                    <option value="nintex_workflow_ge">Nintex Workflow GE</option>
                </select>
            </div>

            <div class="form-input-wrapper">
                <label>Rate your overall experience:*</label>
                <div class="star-rating">
                    <input type="radio" id="star5" name="rating" value="5" required><label for="star5">&#9733;</label>
                    <input type="radio" id="star4" name="rating" value="4"><label for="star4">&#9733;</label>
                    <input type="radio" id="star3" name="rating" value="3"><label for="star3">&#9733;</label>
                    <input type="radio" id="star2" name="rating" value="2"><label for="star2">&#9733;</label>
                    <input type="radio" id="star1" name="rating" value="1"><label for="star1">&#9733;</label>
                </div>
                <p class="rating-text">Your rating: <span id="rating-value">0</span></p>
            </div>

            <div class="form-input-wrapper">
                <label>Would you recommend Nintex University to help others learn and adopt Nintex products?*</label>
                <div class="radio-group">
                    <div class="radio-container">
                        <input type="radio" id="recommend-yes" name="recommend" value="yes" required>
                        <label for="recommend-yes">Yes</label>
                    </div>
                    
                    <div class="radio-container">
                        <input type="radio" id="recommend-no" name="recommend" value="no">
                        <label for="recommend-no">No</label>
                    </div>
                </div>
            </div>

            <div class="form-input-wrapper">
                <label for="comments">Additional comments:</label>
                <textarea id="comments" name="comments" rows="3" placeholder="Share any thoughts..."></textarea>
            </div>
            <button type="submit">Submit</button>
        </form>
    </div>
</div>

<button class="open-form" onclick="openForm()"><i class="fas fa-comments-alt"></i></button>

<style>
body.form-open .open-form {
    display: none;
}
.pop-up-logo-image {
    height: 30px;
}
.open-form {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1111;
  margin: 30px;
  background: #2A348A; 
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 100px;
  font-weight: 600;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.overlay-content {
    background: #fff;
    color: #000;
    border-radius: 13px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;       
    overflow-y: auto;
    position: relative;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.form-header {
    background: #3D0456;
    color: #fff;
    padding: 25px 30px;
    border-radius: 10px 10px 0 0;
}
.pop-up-image-container {

}
.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}


.overlay form {
    display: flex;
    flex-direction: column;
    padding: 25px 30px;
}
.choices__item, .choices__list--dropdown .choices__list {
    color: #000;  
}
.choices__list--multiple .choices__item {
    height: fit-content;
    background-color: #3D0456 !important;
    border: 1px solid #3D0456 !important;
}
.choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button {
    border-left: none !important;
    color: white !important;
    opacity: 1 !important;
}

.overlay label {
    font-weight: 500;
}
.overlay input[type="email"],.overlay input[type="role"],.overlay select,.overlay textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
}
.overlay
input[type="email"]:focus,.overlay select:focus,
.overlay textarea:focus {
    outline: none;
    border-color: #3D0456;
    box-shadow: 0 0 5px rgba(255,165,0,0.5);
}

button[type="submit"] {
    margin-top: 25px;
    padding: 12px;
    background-color:#3D0456;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    font-size: 16px;
    transition: background-color 0.2s;
}

button[type="submit"]:hover {
    background-color: var(--nintex--color--pink-300);
}

.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-top: 5px;
}

.star-rating input {
    display: none;
}

.star-rating label {
    font-size: 50px;
    color: lightgray;
    cursor: pointer;
    transition: color 0.2s;
    width: fit-content;
    text-align: center;
    height: fit-content;
    display: flex;
    margin: 0;
}

.rating-text {
    margin: 0;
    color: gray;
    font-size: 0.85rem;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: gold;
}

.radio-group {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.radio-container {
    display: flex;
    align-items: center;
    gap: 5px;
}
.form-input-wrapper {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.choices__inner, .choices__input {
    background-color: #fff !important;
}
input[type='radio'] {
    accent-color: #000;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

<script>
  const multiSelect = new Choices('#product', {
    removeItemButton: true, 
    searchEnabled: false,   
  });
</script>

<script>
function openForm() {
    document.getElementById("form-overlay").style.display = "flex";
    document.body.classList.add("form-open");
}

function closeForm() {
    document.getElementById("form-overlay").style.display = "none";
    document.body.classList.remove("form-open");
}

function triggerForm() {
    const isFormCompleted = '{{current_person.properties.is_feedback_form_completed}}';

    console.log(isFormCompleted);

    if (isFormCompleted === 'false' || isFormCompleted === '' || isFormCompleted === 'missing property: is_feedback_form_completed') {
        openForm();
    }
}

addEventListener("DOMContentLoaded", (event) => { 
    triggerForm();
})


const stars = document.querySelectorAll('.star-rating input');
const ratingValue = document.getElementById('rating-value');

stars.forEach(star => {
    star.addEventListener('change', () => {
        ratingValue.textContent = star.value;
    });
});
</script>

<script>
document.getElementById("feedback-form").addEventListener("submit", async function(e) {
    e.preventDefault(); 

    const form = e.target;
    const formData = new FormData(form);


    const rating = formData.get("rating") ? parseInt(formData.get("rating")) : 0;
    const product = formData.getAll("product[]").join(", "); 

    const payload1 = {
        startData: {
            se_email: formData.get("email") || "",
            se_role: formData.get("role") || "",
            se_nintexproduct: product,
            se_overallexperience: rating,
            se_recommendnintex: formData.get("recommend") || "",
            se_additionalcomments: formData.get("comments") || "",
            se_id: "{{current_person.id}}"
        }
    };


    const payload2 = {
        learner_id: "{{current_person.id}}",
        learner_name: "{{current_person.name}}",
        learner_email: "{{current_person.email}}",
        form_completed: true
    };

    try {

        const response1 = await fetch("https://ninfotech.workflowcloud.com/api/v1/workflow/published/0bb4e2fd-5d7d-40d0-9ab2-385ee8b4fa5a/instances?token=722JxH1yegfjbfEYMstWX2JWUKdK7ueYZB93gPYM6OApZ3Pb2ri94r58xyyO4BPZc3vY3B", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload1)
        });



        const response2 = await fetch("https://webhooks.workato.com/webhooks/rest/b60a3546-ce72-457f-bfbb-197803be77b8/mark-form-as-completed", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload2)
        });


        form.reset();
        closeForm();

    } catch (error) {
        console.error(error);
    }
});
</script>