{% extends "layouts/base_full_screen.html" %}

{% load static %}

{% block title %} Sign In {% endblock %}

{% block body_attributes %} {% endblock body_attributes %}

{% block stylesheet %}
	<!--begin::Page bg image-->
    <style>
        body { background-image: url("{% static 'images/patterns/background.jpeg' %}"); }
        [data-theme="dark"] body { background-image: url("{% static 'images/patterns/background-dark.jpeg' %}"); }
    </style>
	<!--end::Page bg image-->
{% endblock stylesheet %}

{% block content %} 
    <!--begin::Authentication - Sign-in -->
    <div class="d-flex flex-column flex-lg-row flex-column-fluid">
        <!--begin::Aside-->
        <div class="d-flex flex-lg-row-fluid">
            <!--begin::Content-->
            <div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100">
                <!--begin::Image-->
                <a href="{% url 'landing:index' %}" class="mb-5 mb-lg-0">
                    <img class="theme-light-show mx-auto mw-100 w-150px w-lg-200px mb-10 mb-lg-20" src="{% static 'images/logos/logo.png' %}" alt="" />
                    <img class="theme-dark-show mx-auto mw-100 w-150px w-lg-200px mb-10 mb-lg-20" src="{% static 'images/logos/logo.png' %}" alt="" />
                </a>
                <!--end::Image-->
                <!--begin::Title-->
                <h1 class="text-gray-800 fs-2qx fw-bold text-center mb-7 styreneALight">UseVoice.</h1>
                <!--end::Title-->
                <!--begin::Text-->
                <div class="text-gray-600 fs-base text-center fw-semibold styreneALight">
                    {% if message %}
                        {{message}}<br>
                    {% endif %}
                    The only tool that you need to create high-quality
                    <br/>
                    audio content!
                </div>
                <!--end::Text-->
            </div>
            <!--end::Content-->
        </div>
        <!--begin::Aside-->
        <!--begin::Body-->
        <div class="d-flex flex-column-fluid flex-lg-row-auto justify-content-center justify-content-lg-end p-12">
            <!--begin::Wrapper-->
            <div class="bg-body d-flex flex-center rounded-4 w-md-600px p-10">
                <!--begin::Content-->
                <div class="w-md-400px">
                <!--begin::Form-->
                <form class="form w-100" novalidate="novalidate" id="kt_sign_in_form" data-kt-redirect-url="{% url 'landing:dashboard' %}" action="#">
                    {% csrf_token %}
                    <!--begin::Heading-->
                    <div class="text-center mb-11">
                        <!--begin::Title-->
                        <h1 class="text-dark fw-bolder mb-3 ampleSoftProMedium"> Sign In </h1>
                        <!--end::Title-->
                        <!--begin::Subtitle-->
                        <div class="text-gray-500 fw-semibold fs-6 styreneALight">to get started</div>
                        <!--end::Subtitle=-->
                    </div>
                    <!--begin::Heading-->
                    <!--begin::Login options-->
                    <div class="row flex  g-3 mb-9 justify-content-center align-items-center">
                        <!--begin::Col-->
                        <div class="col-md-6">
                            <div id="gSignInWrapper">

                                <div id="g_id_onload"
                                    data-client_id="587705757620-c523205roe94n0hsk5p8t9n5ln78srqi.apps.googleusercontent.com"
                                    data-context="signin"
                                    data-ux_mode="popup"
                                    data-callback="handleCredentialResponse"
                                    data-auto_prompt="false">
                                </div>

                                <div class="g_id_signin"
                                    data-type="standard"
                                    data-shape="rectangular"
                                    data-theme="outline"
                                    data-text="signin_with"
                                    data-size="large"
                                    data-logo_alignment="left"
                                    data-show_dialog="false">
                                </div>
                            </div>
                        </div>
                        <!--end::Col--> 
                    </div>
                    <!--end::Login options-->
                    <!--begin::Separator-->
                    <div class="separator separator-content my-14">
                        <span class="w-125px text-gray-500 fw-semibold fs-7 styreneALight">Or with email</span>
                    </div>
                    <!--end::Separator-->
                    <!--begin::Input group=-->
                    <div class="fv-row mb-8">
                        <!--begin::Email-->
                        <input type="email" placeholder="Email" name="email" id="email" autocomplete="off" class="form-control bg-transparent styreneALight" maxlength="100" required="" />
                        <!--end::Email-->
                    </div>
                    <!--end::Input group=-->
                    <div class="fv-row mb-8">
                        <!--begin::Password-->
                        <input type="password" name="password" placeholder="Password" autocomplete="off" class="form-control bg-transparent styreneALight" id="password" maxlength="100" required="">
                        <!--end::Password-->
                    </div>
                    <!--end::Input group=-->
                    <!--begin::Accept-->
                    <div class="fv-row mb-8">
                        <!--begin::Wrapper-->
                        <div class="d-flex flex-stack flex-wrap gap-3 fs-base fw-semibold mb-8 ">
                            <!--begin::Remembre Me-->
                            <label class="form-check form-check-inline align-items-center">
                                <input class="form-check-input styreneALight" type="checkbox" name="remember_me" id="remember_me"/>
                                <span class="form-check-label fw-semibold text-gray-700 fs-base ms-1 styreneALight">Remember Me</span>
                            </label>
                            <!--end::Remembre Me-->
                            <!--begin::Link-->
                            <a href="{% url 'accounts:password_reset' %}" class="link-primary styreneALight">Forgot Password ?</a>
                            <!--end::Link-->
                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Accept-->

                    <!--begin::Submit button-->
                    <div class="d-grid mb-10">
                        <button type="submit" id="kt_sign_in_submit" class="btn btn-primary">
                            <!--begin::Indicator label-->
                            <span class="indicator-label styreneALight">Sign In</span>
                            <!--end::Indicator label-->
                            <!--begin::Indicator progress-->
                            <span class="indicator-progress styreneALight">
                                Please wait...
                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                            </span>
                            <!--end::Indicator progress-->
                        </button>
                    </div>
                    <!--end::Submit button-->
                    <!--begin::Sign up-->
                    <div class="text-gray-500 text-center fw-semibold fs-6 styreneALight">
                        Not a Member yet?
                        <a href="{% url 'accounts:signup' %}" class="link-primary styreneALight">Sign up</a>
                    </div>
                    <!--end::Sign up-->
                </form>
                <!--end::Form-->
                </div>
                <!--end::Content-->
            </div>
            <!--end::Wrapper-->
        </div>
        <!--end::Body-->
    </div>
    <!--end::Authentication - Sign-in-->
{% endblock content %}

{% block javascripts %}
    <script src="{% static 'js/custom/sign_in.js' %}"></script>

    <script>
        // On document ready
        KTUtil.onDOMContentLoaded(function() {
            KTSigninGeneral.init();
        });
    </script>
    <script>
        function decodeJwtResponse(token) {
            // function that decode the credential response.
            var base64Url = token.split(".")[1];
            var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
            var jsonPayload = decodeURIComponent(
            atob(base64)
                .split("")
                .map(function (c) {
                return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
                })
                .join("")
            );

            return JSON.parse(jsonPayload);
        }

        function handleCredentialResponse(response) {
            // decodeJwtResponse() is a custom function defined by you
            // to decode the credential response.
            const responsePayload = decodeJwtResponse(response.credential);
            var form = document.querySelector('#kt_sign_in_form');
            var formData = new FormData();
            formData.append('first_name', responsePayload['given_name']);
            formData.append('last_name', responsePayload['family_name']);
            formData.append('email', responsePayload['email']);
            formData.append("picture", responsePayload['picture']);
            formData.append("provider","GOOGLE");
            formData.append('csrfmiddlewaretoken', form.querySelector('[name="csrfmiddlewaretoken"]').value);
            // Simulate ajax request
            $.ajax({
                type:"POST",
                url: "social-login",
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                enctype: 'multipart/form-data',
                success: function(response){
                    // // Hide loading indication
                    // submitButton.removeAttribute('data-kt-indicator');
                    // // Enable button
                    // submitButton.disabled = false;
                    // // do something with response
                    Swal.fire({
                        text: response['message'],
                        icon: response['result'],
                        buttonsStyling: false,
                        confirmButtonText: "Ok!",
                        customClass: {
                            confirmButton: "btn btn-primary"
                        }
                    }).then(
                        function (result) {
                            // result.isConfirmed  :: Check Button Confirm
                            // Redirect to home page
                            if (response['result'] == 'success' && result.isConfirmed) {
                                var redirectUrl = "{% url 'landing:dashboard' %}";
                                if (redirectUrl) {
                                    location.href = redirectUrl;
                                }
                            }
                            else if (response['result'] == 'error') {

                                Swal.fire({
                                    text: response['message'],
                                    icon: response['result'],
                                    buttonsStyling: false,
                                    confirmButtonText: "Ok!",
                                    customClass: {
                                        confirmButton: "btn btn-primary"
                                    }
                                })
                            }

                        }
                    );
                }
            });
        }
    </script>

    {% if messages %}
        {% for message in messages %}
            <script>
                KTUtil.onDOMContentLoaded(function() {
                    Swal.fire({
                        text: " {{ message }} ",
                        icon: "{{ message.tags }}",
                        buttonsStyling: false,
                        confirmButtonText: "Close",
                        customClass: {
                            confirmButton: "btn btn-primary"
                        }
                    });
                });
            </script>
        {% endfor %}
    {% endif %}

{% endblock javascripts %}