{% comment %} skip-auth {% endcomment %}
{% include "header" %}
<div class="page-container">
  {% if current_person.signed_in? %}
    <div class="np-hidden-mobile custom-sub-navigation">
      {% include "sub_navigation" %}
    </div>
  {% endif %}

  {%- comment -%} {% if current_person.email == 'alexa.taylor+1+preview-3hy5ulxxu@skuid.com' %}
    <div onclick="callNPWebhook()" style="height: 50px; width: 100px;">Call Webhook</div>
  {% endif %} {%- endcomment -%}


  <main class="np-main np-subpage-container np-max-width certification-page">
    {% comment %}================================================ REGISTRATION HEADER  ============================================={% endcomment %}

    {%- comment -%} <div class="register-button">Register Now</div> {%- endcomment -%}

    {% comment %}=================================================== TEXT HEADER ==================================================={% endcomment %}

    {%- comment -%} <div class="np-resource-title skuid-cert-reg-header">Skuid Certification Registration</div> {%- endcomment -%}

    {% comment %}================================================= HEADER BUBBLES ==================================================={% endcomment %}
    {% if current_person.properties.cert_status == 'Default' %}
        <div class="base-state">
            <div class="np-resource-title">Skuid Certification Registration</div>
        </div>
    {% else %}
        <div class="cert-step-bubbles col-xs-12">
            <div class="cert-bubble col-xs-3">GET STARTED</div>
            <div class="cert-bubble col-xs-3 {% if current_person.properties.cert_status == 'Registered' %}cert-bubble-active{% endif %}">EXAM PREP</div>
            <div class="cert-bubble col-xs-3 {% if current_person.properties.cert_status == 'Exists-qm' %}cert-bubble-active{% endif %}">EXAM PENDING</div>
            <div class="cert-bubble col-xs-3 {% if current_person.properties.cert_status == 'Pass' or current_person.properties.cert_status == 'Fail' %}cert-bubble-active{% endif %}">
                {% if current_person.properties.cert_status == 'Pass' or current_person.properties.cert_status == 'Fail' %}
                    {{current_person.properties.cert_status}}
                {% else %}
                    COMPLETION STATUS
                {% endif %}
            </div>
        </div>
    {% endif %}

    {% comment %}=========================================== CERTIFICATION REGISTRATION =============================================={% endcomment %}

    {% if current_person.properties.cert_status == 'Default' %}
        <div class="cert-content-container col-xs-12">
            <div class="np-resource-title cert-header">Ready to be Skuid Certified?</div>
            <div class="np-resource-subtitle cert-sub-header registration-sub-header">
                <div>The Skuid - Certified Builder Exam assumes knowledge in topics from  <a href="https://www.skuidskool.com/app/learning_paths/46ae5253-8c64-426b-a638-e80c08ce29da" class="registration-sub-header-link" target="_blank">Level 1</a>, <a href="https://www.skuidskool.com/app/learning_paths/e7d6e7ca-39ad-4a40-b75c-83d382715c4a" class="registration-sub-header-link" target="_blank">Level 2</a>, <a href="https://www.skuidskool.com/app/learning_paths/e15cd738-8681-4171-9d09-ba3d31c02005" class="registration-sub-header-link" target="_blank">Deploy and Manage Skuid Apps in Salesforce</a>, and the <a href="https://www.skuidskool.com/app/learning_paths/e76d07d4-984b-41a9-b53f-2c300f8eeba9" class="registration-sub-header-link" target="_blank">Explore More</a> learning paths within <a href="/app" class="registration-sub-header-link" target="_blank">Skuid Skool</a>.</div>
                <br>
                <div>Click below to register for your exam.</div>
                <span style="color: red;">
                    **Important: Please make sure you use the same email that you are using in Skuid Skool. If you don't, you may not be able to take the exam or get credit for the certification.
                </span>
            </div>

            <div style="align-items: center; display: flex; flex-direction: row;" >
                <input type="checkbox" id="skuid-cert-agreement-input" onclick="agreementValidator()" style="margin-right: 10px;"><span>I have read and understand the <a href="https://www.skuid.com/legal/skuid-certification-exam-agreement" target="_blank">Skuid Terms and Agreements*</a></span>
            </div>

            <form id="skuid-cert-registration-button" name="PrePage" method ="post" action = "https://scotest.authorize.net/payment/CatalogPayment.aspx" target="_blank" style="margin: 25px 0; pointer-events: none;">
                <input type = "hidden" name = "LinkId" value ="f0b2546a-f610-4015-80b3-19357fbb7b88" />
                <input type = "image" src ="//testcontent.authorize.net/images/buy-now-gold.gif" />
            </form>

            <img src="https://cdn.northpass.io/Skuid/images/cert_registration.svg" alt="exam-registration-image" class="exam-status-image exam-registration-image">
            </img>
        </div>
    {% endif %}


    {% comment %}================================================ EXAM PREP ==================================================={% endcomment %}
    
    {% if current_person.properties.cert_status == 'Registered' or current_person.properties.cert_status == 'Exists-qm' %}
    
        {%- comment -%} {% assign render_practice = true %}
        {% if courses.enrolled.any? and courses.in_catalog.any? %}
            {% for course in courses.enrolled %}
                {% if course.id == '3500821c-4b76-4155-a714-2947dc1b8d0c' or course.id == '10eeed9b-a5b8-446d-8023-2d109766fda6' %}
                    {% if course.completed? %}
                        {% assign render_practice = false %}
                    {% endif %}
                {% endif %}
            {% endfor %}

            {% for course in courses.in_catalog %}
                {% if course.id == '3500821c-4b76-4155-a714-2947dc1b8d0c' or course.id == '10eeed9b-a5b8-446d-8023-2d109766fda6' %}
                    {% if course.completed? %}
                        {% assign render_practice = false %}
                    {% endif %}
                {% endif %}
            {% endfor %}
        {% endif %} {%- endcomment -%}

        <div class="cert-content-container col-xs-12">
            <div class="np-resource-title cert-header">Skuid Certification Exam Prep</div>
            <div class="np-resource-subtitle cert-sub-header">Prep, practice, or schedule you exam.</div>

            <div class="cert-exam-prep-cards col-xs-9 col-sm-12">
                {%- comment -%} {% if render_practice == true %}{% endif %} {%- endcomment -%}
                    <div class="cert-card col-xs-12 col-md-3">
                        <a class="cert-button" href="https://www.skuidskool.com/c/7ed8d12a54a69be1339fcc12ce5fce92c2da8d19" target="_blank">Prep Guide</a>
                        <div class="cert-card-blurb">
                            View courses, documentation, and other resources to prep for the certification exam.
                        </div>
                    </div>
                    <div class="cert-card col-xs-12 col-md-3">
                        <a class="cert-button" href="https://www.skuidskool.com/c/7288cf328ff4fa291c430d179fa962dc20c069ae" target="_blank">Practice Exam</a>
                        <div class="cert-card-blurb">
                            Take a practice exam to test what you've learned. 
                        </div>
                    </div>
                {%- comment -%} {% endif %} {%- endcomment -%}
                {% if current_person.properties.cert_status == 'Registered' %}
                    <div class="cert-card col-xs-12 col-md-3">
                        <a class="cert-button cert-button-locked" href="#" target="_blank">Exam Not Ready</a>
                        <div class="cert-card-blurb">
                            This button will activate when you've received your exam confirmation email
                        </div>
                    </div>
                {% elsif current_person.properties.cert_status == 'Exists-qm' %}
                    <div class="cert-card col-xs-12 col-md-3">
                        <a class="cert-button" href="#" target="_blank">Take Exam</a>
                        <div class="cert-card-blurb">
                            Ready? Take your exam to become certified. 
                        </div>
                    </div>
                {% endif %}
            </div>
        </div> 
        <script>
            $( document ).ready(callNPWebhook());
        </script>
    {% endif %}

    {% comment %}============================================== PASSED ========================================================{% endcomment %}

    {% if current_person.properties.cert_status == 'Pass' %}
        <div class="cert-content-container col-xs-12 exam-status-container">
            <img src="https://cdn.northpass.io/Skuid/images/exam_passed_background.svg" alt="exam-passed-background" class="exam-status-image">
                <a class="cert-button-big share-cert-button" href="#">View Credential</a>
            </img>
        </div>
    {% endif %}

    {% comment %}=============================================== FAILED  ======================================================{% endcomment %}

    {% if current_person.properties.cert_status == 'Fail' %}
        <div class="cert-content-container col-xs-12">
            <div class="np-resource-title cert-header">Exam failed.</div>
            <div class="np-resource-subtitle cert-sub-header">
                If you'd like to try again, <a href="mailto:certification@skuid.com">certification@skuid.com</a>.
            </div>
            {%- comment -%} <a class="cert-button-big retake-cert-button" href="#">Register to retake the exam</a> {%- endcomment -%}
        </div> 
    {% endif %}

    {% comment %}============================================= CERTIFIED (UNUSED)======================================================{% endcomment %}

    {%- comment -%} <div class="cert-content-container col-xs-12 exam-status-container">
        <img src="https://cdn.northpass.io/Skuid/images/cert_recert.svg" alt="cert-recert-background" class="exam-status-image">
            <div class="cert-recert-content-container">
                <div class="np-resource-subtitle cert-sub-header">Recertification is due on 1/1/2024</div>
                <a class="cert-button-med download-cert-button" href="#">Download Certificate</a>
            </div>
        </img>
    </div> {%- endcomment -%}

    {%- comment -%} <div class="cert-content-container col-xs-12">
        <div class="np-resource-title cert-header">Congratulations you're certified!</div>
        <div class="np-resource-subtitle cert-sub-header">Recertification is due on 1/1/2024</div>

        <a class="cert-button-med download-cert-button" href="#">Download Certificate</a>
    </div>  {%- endcomment -%}

    {% comment %}============================================ RECERTIFIED (UNUSED)====================================================={% endcomment %}

    {%- comment -%} <div class="cert-content-container col-xs-12">
        <div class="np-resource-title cert-header">Time for your recertification!</div>
        <div class="np-resource-subtitle cert-sub-header">Recertification is due on 1/1/2024</div>

        <a class="cert-button-med re-cert-button" href="#">Get recertified</a> 
    </div>  {%- endcomment -%}
  </main>
</div>
{% include "footer" %}

<!-- Hotjar Tracking Code for Skool Staging/test site -->
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:3393511,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');

    let agreementValidator = () => {
        if(document.getElementById('skuid-cert-agreement-input').checked){
            document.getElementById('skuid-cert-registration-button').style.pointerEvents = 'auto'
        } else {
            document.getElementById('skuid-cert-registration-button').style.pointerEvents = 'none'
        }
    }

    let callNPWebhook = async () => {
        let webhookCaller = async () => {
            return new Promise(function(res, rej) {
                let xhr = new XMLHttpRequest();
                url = "https://webhooks.workato.com/webhooks/rest/e3211958-706d-4f5d-8148-fc904421241b/webhook-from-templates";

                //xhr.addEventListener("load", e => {
                //    window.location.replace('/app/waiting-room');
                //});
                xhr.open("POST", url, true);
                xhr.send(JSON.stringify({
                    email: '{{ current_person.email }}',
                    name: "{{ current_person.first_name }} {{ current_person.last_name }}",
                    user_id: '{{ current_person.id }}',
                    cert_status: '{{ current_person.properties.cert_status }}'
                }))
            })
        }

        try {
            await webhookCaller()
            .then((res) => {
                window.location.replace('/app/dashboard');
            })
        } catch(err) {
            console.log(err)
        }
    }
</script>

<style>
    .certification-page{
        height: 100%;
        padding: 40px 15px 20px;
        width: 100%;
    }

    .cert-header,
    .cert-sub-header{
        text-align: center;
    }

    .cert-sub-header{
        font-weight: 500;
    }

    .register-cert-button{
        margin-top: -4px !important;
    }

    .cert-recert-content-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        position: absolute;
        padding-top: 12%;
        left: -5px;
        font-size: 10px;
    }

    .cert-recert-content-container .cert-sub-header{
        font-size: 8px;
    }

    .registration-sub-header-link{
        text-decoration: none;
    }

    @media screen and (min-width: 450px){
        .cert-recert-content-container{
            padding-top: 13%;
        }
    }

     @media screen and (min-width: 550px){
        .cert-recert-content-container{
            padding-top: 14%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 14px;
        }

    }

    @media screen and (min-width: 768px){
        .certification-page{
            padding: 30px 3% 75px;
        }

        .cert-recert-content-container{
            left: unset; 
            margin-right: 10px;
            padding-top: 8%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 14px;
        }
    }

    @media screen and (min-width: 900px){
        .cert-recert-content-container{
            padding-top: 9%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 16px;
        }
    }

    @media screen and (min-width: 1150px){
        .cert-recert-content-container{
            padding-top: 10%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 18px;
        }
    }

    @media screen and (min-width: 1280px){
        .cert-recert-content-container .cert-sub-header{
            font-size: 20px;
        }
    }

    @media screen and (min-width: 1440px){
        .cert-recert-content-container{
            padding-top: 11%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 22px;
        }
    }

    @media screen and (min-width: 1950px){
        .cert-recert-content-container{
            padding-top: 10%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 24px;
        }
    }

    @media screen and (min-width: 2150px){
        .cert-recert-content-container{
            padding-top: 200px;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 26px;
        }
    }

    /* TOP ELEMENT STYLES */ 

    .base-state{
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    .base-state .np-resources-title{
        margin-bottom: 0;
    }
    
    .register-button{
        background: #603DD8;
        color: #FFFFFF;
        border-radius: 16px;
        font-size: 16px;
        font-weight: 500;
        height: 35px;
        padding: 5px;
        text-align: center;
        width: 150px;
    }

    .cert-step-bubbles{
        align-items: center;
        display: flex;
        flex-direction: row;
        height: 73px;
        justify-content: space-between;
        margin-bottom: 12px;
        padding: 0;
    }

    .cert-bubble{
        align-items: center;
        background: #B195F4;
        border-radius: 8px;
        color: #FFFFFF;
        display: flex;
        font-size: 9px;
        font-weight: 500;
        height: 100%;
        justify-content: center;
        max-width: 24%;
        text-align: center;
    }

    .cert-bubble-active{
        background: #603DD8;
    }

    @media screen and (min-width: 450px){
        .cert-bubble{
            font-size: 10px;
        }
    }

    @media screen and (min-width: 650px){
        .cert-bubble{
            font-size: 12px;
        }
    }

    @media screen and (min-width: 750px){
        .cert-bubble{
            font-size: 14px;
        }
    }

    @media screen and (min-width: 768px){
        .base-state{
            margin-bottom: 12px;
        }

        .cert-bubble{
            font-size: 10px;
        }
    }

    @media screen and (min-width: 850px){
        .cert-bubble{
            font-size: 12px;
        }
    }

    @media screen and (min-width: 1100px){
        .cert-bubble{
            font-size: 14px;
        }
    }

    @media screen and (min-width: 1200px){
        .cert-bubble{
            font-size: 12px;
        }
    }


    /* CONTENT STYLES ===================================================================================================================================================== */ 
    .certification-iframe,
    .cert-content-container{
        background: #F7F5FD;
        width: 100%;
    }

    .certification-iframe{
        min-height: 970px;
    }

    /* .certification-iframe::-webkit-scrollbar{
        display: none;
    } */

    .cert-content-container{
        align-items: center;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        padding-bottom: 127px;
        padding-top: 91px;
    }

    .exam-status-container{
        padding: 0;
    }

    .exam-status-image{
        width: 100%;
    }

    .exam-registration-image{
        margin-left: -15%;
    }

    .cert-exam-prep-cards{
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .cert-card{
        align-items: center;
        background: #E7E3F4;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 10px;
    }

    .cert-button{
        margin-bottom: 24px;
        margin-top: 40px;
        width: 55%;
    }

    .cert-button-locked{
        opacity: 0.65;
        pointer-events: none;
    }

    .cert-button-med{
        width: 45%;
    }

    .cert-button-big{
        font-size: 18px;
        height: 40px;
        padding: 5px;
        width: 70%;
    }

    .cert-button,
    .cert-button-med{
        font-size: 14px;
        height: 35px;
        padding: 7px
    }

    .cert-button-med,
    .cert-button-big{
        margin-top: 25px;
        margin-bottom: 20px;
    }

    .cert-button,
    .cert-button-med,
    .cert-button-big{
        background: #603DD8;
        border-radius: 16px;
        color: #FFFFFF;
        font-weight: 500;
        margin-bottom: 24px;
        text-align: center;
        text-decoration: none;
    }

    .retake-cert-button{
        font-size: 16px;
        padding: 7px;
    }

    .cert-button:hover,
    .cert-button-big:hover{
        color: #FFFFFF;
    }

    .cert-card-blurb{
        font-size: 18px;
        font-weight: 500;
        min-height: 100px;
        margin-bottom: 19px;
        padding: 0 25px;
        text-align: center;
    }

    .completion-status-card-blurb{
        min-height: 70px;
    }

    .share-cert-button{
        font-size: 12px !important;
        height: 40px;
        margin-top: -38%;
        margin-bottom: calc(38% + 24px);
        max-width: 275px;
        padding: 11px 0px;
        width: 38% !important;
    }

    .download-cert-button{
        font-size: 12px;
        height: 27px;
        margin-top: -25px;
        max-width: 210px;
        padding-top: 5px;
    }

    @media screen and (min-width: 450px){
        .cert-button{
            font-size: 16px;
            padding: 5px;
        }

        .cert-button-med{
            width: 40%;
        }

        .cert-button-big{
            width: 55%;
        } 

        .download-cert-button{
            font-size: 14px;
            height: unset;
            margin-top: -15px;
            width: 40%;
        }
    }

    @media screen and (min-width: 500px){
        .retake-cert-button{
            font-size: 18px;
            padding: 5px;
        }

        .share-cert-button{
            font-size: 14px;
            padding: 8px;
        }
    }

    @media screen and (min-width: 550px){
        .cert-button-med{
            width: 35%;
        }

        .cert-button-big{
            width: 50%;
        } 
    }

    @media screen and (min-width: 600px){
        .cert-button-med{
            width: 30%;
        }

        .cert-button-big{
            width: 45%;
        } 
    }

    @media screen and (min-width: 650px){
        .cert-button-big{
            width: 40%;
        } 
    }

    @media screen and (min-width: 700px){
        .cert-button-med{
            width: 27%;
        }

        .cert-button-big{
            width: 35%;
        } 
    }

    @media screen and (min-width: 768px){
        .cert-exam-prep-cards{
            width: 100%;
        }

        .cert-card-blurb{
            min-height: 130px;
        }

        .completion-status-card-button{
            width: 75%;
        }

        .cert-button-med{
            width: 35%;
        }

        .cert-button-big{
            width: 50%;
        } 

        .retake-cert-button{
            font-size: 16px;
            padding: 7px;
        }
    }

    @media screen and (min-width: 850px){
        .completion-status-card-button{
            width: 65%;
        }

        .cert-button-med{
            width: 30%;
        }

        .cert-button-big{
            width: 45%;
        } 
    }

    @media screen and (min-width: 900px){
        .completion-status-card-button{
            width: 60%;
        }

        .share-cert-button{
            font-size: 18px !important;
            padding: 5px !important;
        }

       .cert-button-big{
            width: 40%;
        }
    }

    @media screen and (min-width: 950px){
        .cert-button-med{
            width: 25%;
        }

        .completion-status-card-button{
            width: 55%;
        }
    }

    @media screen and (min-width: 1000px){
        .cert-button-big{
            width: 35%;
        } 
    }

    @media screen and (min-width: 1024px){
        .cert-exam-prep-cards{
            flex-direction: row;
        }

        .cert-button{
            font-size: 14px;
            padding: 0;
            padding-top: 7px;
            width: 80%;
        }
        
        .cert-card-blurb{
            min-height: 190px;
        }

        .completion-status-card-blurb{
            min-height: 80px;
        }
    }

    @media screen and (min-width: 1100px){
        .cert-button{
            font-size: 14px;
            padding: 7px;
            width: 75%;
        }

        .cert-button-med{
            width: 22%;
        }
    }

    @media screen and (min-width: 1150px){
        .cert-button-big{
            width: 30%;
        } 
    }

    @media screen and (min-width: 1200px){
        .cert-button{
            width: 70%;
        }
    }

     @media screen and (min-width: 1300px){
        .cert-button{
            width: 65%;
        }

        .cert-button-med{
            max-width: 170px;
        }

        .cert-button-big{
            max-width: 230px;
            width: 25%;
        } 

        .download-cert-button{
            margin-top: 25px;
        }
    }

    @media screen and (min-width: 1350px){
        .cert-button{
            font-size: 16px;
            padding: 6px;
        }
    }

    @media screen and (min-width: 1440px){
        .cert-button{
            width: 60%;
        }

        .cert-card-blurb{
            min-height: 140px;
        }

        .completion-status-card-blurb{
            min-height: 80px;
        }
    }
</style>


{%- comment -%} UNUSED ELEMENTS {%- endcomment -%}

{% comment %}=================================================== IFRAME (REMOVE) =========================================================={% endcomment %}

{%- comment -%} <iframe src="https://www.skuid.com/certification" title="skuid_certification_embed" class="certification-iframe"></iframe> {%- endcomment -%}

{% comment %}============================================ EXAM NOT STARTED (UNUSED)=================================================={% endcomment %}

{%- comment -%} <div class="cert-content-container col-xs-12">
    <div class="np-resource-title cert-header">Exam not started</div>
    <div class="np-resource-subtitle cert-sub-header">See email for instructions or schedule your exam below</div>

    <div class="cert-card col-xs-9 col-sm-5">
        <a class="cert-button completion-status-card-button" href="#">Schedule Exam</a>
        <div class="cert-card-blurb completion-status-card-blurb">
            Ready? Schedule your exam to become certified.
        </div>
    </div>
</div>  {%- endcomment -%}

{% comment %}============================================ EXAM COMPLETE ===================================================={% endcomment %}

{%- comment -%} <div class="np-resource-title cert-header">Exam complete</div>
<div class="np-resource-subtitle cert-sub-header">Results are still qm_created. Check back in 10 business days from your exam date.</div> {%- endcomment -%}

{%- comment -%} <div class="cert-content-container col-xs-12 exam-status-container">
    <img src="https://cdn.northpass.io/Skuid/images/exam_complete_background.svg" alt="exam-complete-background" class="exam-status-image">
</div> {%- endcomment -%}