{% load static %}
{% block support_button %}

    <div id="divContactByEmailBtn" class="floating-btn-container" hidden>
        <div id="divContactUs" class="my-3 px-2 py-2 support-email-holder" hidden>

            <label id="lblDeliveryStatus" class="d-block px-1 py-2 bold-500 size-14 light-grey-text" hidden></label>

            <label class="px-1 size-12 bold-500 light-grey-text">
                We will get back to you within 4 hours.
            </label>


            <input type="text" class="form-control size-12 my-2" id="contactName" placeholder="Name" required/>
            <input type="email" class="form-control size-12 my-2" id="email" placeholder="Email" required/>
            <input type="text" class="form-control size-12 my-2" id="subject" placeholder="Subject" required/>
            <textarea class="form-control grey-text size-12 my-2" id="message" rows="5" placeholder="How can we help..." required></textarea>

            <div>
                <button id="btnSendEmailForm" class="plain-btn my-2"> Message </button>
            </div>

        </div>
        <button id="btnShowEmailForm" class="floating-btn no-focus-btn float-end">
            <span class="feather-16 me-3" data-feather="mail"></span> Contact Us
        </button>
    </div>

    <script type="text/javascript" src="{% static 'scripts/info/contact_mailer.js' %}"></script>
    <script nonce="{{ CSP_NONCE }}">
        $('#btnShowEmailForm').on('click', function() {
            showDivContactUs();
        });

        $('#btnSendEmailForm').on('click', function() {
            sendContactFormEmail();
        });

        var showDiv = false;
        function showDivContactUs(){
            document.getElementById('divContactUs').hidden = showDiv;
            if (showDiv){
                showDiv = false;
            } else {
                showDiv = true;
            }
        }

        // Between UTC 8am and UTC 10pm show the chat option. Otherwise, show the email option.
        // Have a feature to quickly disable chat option.
        var chatEnabled = true;
        var currUtcHour = (new Date()).getUTCHours();

        if (chatEnabled && currUtcHour >= 8 && currUtcHour <= 18){
            document.getElementById('divContactByEmailBtn').hidden = true;

            window.fcWidget.init({
                token: "2a92e505-e4cb-4e65-ac36-07cb8e2eb956",
                host: "https://wchat.eu.freshchat.com"
            });
        } else {
            document.getElementById('divContactByEmailBtn').hidden = false;
        }

        feather.replace()
    </script>

{% endblock %}