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

{% load static %}

{% block title %} Sign Up {% 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::Main-->
<!--begin::Root-->
<div class="d-flex flex-column flex-root">
    <!--begin::Authentication - Sign-up -->
    <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">UseVoice.</h1>
                <!--end::Title-->
                <h2> {{ plan_obj.plan_name }} </h2>
                <!--begin::Text-->
                <div class="text-gray-600 fs-base text-center fw-semibold">
                    {% if message %}
                    {{message}}<br>
                    {% endif %}
                    Vivamus sodales eros non arcu pellentesque convallis.<br>
                    Nunc dignissim lectus in malesuada porta.<br>
                    Proin ac erat sed urna congue suscipit.<br>
                    Morbi aliquet eget nisl id ornare.
                </div>
                <!--end::Text-->
            </div>
            <!--end::Content-->
        </div>
        <!--end::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_up_form" data-kt-redirect-url="{% url 'accounts:signin' %}" action="#">
                        {% csrf_token %}
                        <!--begin::Heading-->
                        <div class="text-center mb-11">
                            <!--begin::Title-->
                            <h1 class="text-dark fw-bolder mb-3">Sign Up</h1>
                            <!--end::Title-->
                            <!--begin::Subtitle-->
                            <div class="text-gray-500 fw-semibold fs-6">Your Social Campaigns</div>
                            <!--end::Subtitle=-->
                        </div>
                        <!--begin::Heading-->
                        <!--begin::Login options-->
                        <div class="row g-3 mb-9">
                            <!--begin::Col-->
                            <div class="col-md-6" >
                                <div id="gSignInWrapper">
                                    <div id="g_id_onload"
                                        data-client_id="1044717716638-lpsq4iuu6sc5k78gobff9dg544fb3tcp.apps.googleusercontent.com"
                                        data-context="signup"
                                        data-ux_mode="popup"
                                        data-callback="handleCredentialResponse"
                                        data-nonce=""
                                        data-itp_support="true">
                                    </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">
                                </div>
                                </div>
                                <!-- <a href="#" class="btn btn-flex btn-outline btn-text-gray-700 btn-active-color-primary bg-state-light flex-center text-nowrap w-100">
                                <img alt="Logo" src="{% static 'images/logos/google-icon.svg' %}" class="h-15px me-3" />Sign in with Google</a> -->
                                <!--end::Google link=-->
                            </div>
                            <!--end::Col-->
                            <!--begin::Col-->
                            <div class="col-md-6" >
                                <!--begin::Google link=-->
                                <a href="#" id="apple_signup" class="btn btn-flex btn-outline btn-text-gray-700 btn-active-color-primary bg-state-light flex-center text-nowrap w-100">
                                <img alt="Logo" src="{% static 'images/logos/apple-black.svg' %}" class="theme-light-show h-15px me-3" />
                                <img alt="Logo" src="{% static 'images/logos/apple-black-dark.svg' %}" class="theme-dark-show h-15px me-3" />Sign in with Apple</a>
                                <!--end::Google link=-->
                            </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">Or with email</span>
                        </div>
                        <!--end::Separator-->
                        <!--begin::Input group=-->
                        <div class="fv-row mb-8">
                            <div class="row gx-2 ">
                                <div class="col-md-6">
                                    <input type="text" name="first_name" placeholder="First Name"  autocomplete="off" class="form-control bg-transparent" id="first_name" maxlength="100">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" name="last_name" placeholder="Last Name"  autocomplete="off" class="form-control bg-transparent" id="last_name" maxlength="100">
                                </div>
                            </div>
                        </div>
                        <!--end::Input group=-->
                        <!--begin::Input group=-->
                        <div class="fv-row mb-8">
                            <!--begin::Email-->
                            <input type="email" name="email" placeholder="Email" autocomplete="off" class="form-control bg-transparent" id="email" maxlength="100" required="">
                            <!--end::Email-->
                        </div>
                        <!--end::Input group=-->
                        <!--begin::Input group-->
                        <div class="fv-row mb-8" data-kt-password-meter="true">
                            <!--begin::Wrapper-->
                            <div class="mb-1">
                                <!--begin::Input wrapper-->
                                <div class="position-relative mb-3">
                                    <input type="password" name="password" placeholder="Password" class="form-control bg-transparent" autocomplete="off" id="password" maxlength="100" required="">
                                    <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
                                        <i class="bi bi-eye-slash fs-2"></i>
                                        <i class="bi bi-eye fs-2 d-none"></i>
                                    </span>
                                </div>
                                <!--end::Input wrapper-->
                                <!--begin::Meter-->
                                <div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
                                    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
                                </div>
                                <!--end::Meter-->
                            </div>
                            <!--end::Wrapper-->
                            <!--begin::Hint-->
                            <div class="text-muted">Use 8 or more characters with a mix of letters, numbers &amp; symbols.</div>
                            <!--end::Hint-->
                        </div>
                        <!--end::Input group=-->
                        <!--begin::Input group=-->
                        <div class="fv-row mb-8">
                            <!--begin::Repeat Password-->
                            <input type="password" name="password_confirm" placeholder="Repeat Password" autocomplete="off" class="form-control bg-transparent" id="password_confirm" maxlength="100" required="">
                            <!--end::Repeat Password-->
                        </div>
                        <!--end::Input group=-->
                        <!--begin::Accept-->
                        <div class="fv-row mb-8">
                            <label class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="check_terms"/>
                                <span class="form-check-label fw-semibold text-gray-700 fs-base ms-1">
                                    I Accept the
                                    <a href="{% url 'landing:terms-and-conditions' %}" class="ms-1 link-primary" target="_blank"> Terms and conditions.</a>
                                </span>
                            </label>
                        </div>
                        <!--end::Accept-->
                        <!--begin::Submit button-->
                        <div class="d-grid mb-10">
                            <input type='text' id="plan_name" value='{{plan_obj.plan_type}}' hidden>
                            <input type='text' id="plan_id" value='{{plan_obj.plan_id}}' hidden>
                            <button type="submit" id="kt_sign_up_submit" class="btn btn-primary">
                                <!--begin::Indicator label-->
                                <span class="indicator-label">Sign up</span>
                                <!--end::Indicator label-->
                                <!--begin::Indicator progress-->
                                <span class="indicator-progress">Please wait...
                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                <!--end::Indicator progress-->
                            </button>
                        </div>
                        <!--end::Submit button-->
                        <div id="paypal-button-container"></div>
                        <!--begin::Sign up-->
                        <div class="text-gray-500 text-center fw-semibold fs-6">
                            Already have an Account?
                            <a href="{% url 'accounts:signin' %}" class="link-primary fw-semibold">Sign in</a>
                        </div>
                        <!--end::Sign up-->
                    </form>
                    <!--end::Form-->
                </div>
                <!--end::Content-->
            </div>
            <!--end::Wrapper-->
        </div>
        <!--end::Body-->
    </div>
    <!--end::Authentication - Sign-up-->
</div>
<!--end::Root-->
<!--end::Main-->
{% endblock %}

{% block javascripts %}
    <script src="{% static 'js/custom/sign_up.js' %}"></script>
    <script>
        // On document ready
        KTUtil.onDOMContentLoaded(function() {
            KTSignupGeneral.init();
        });
    </script>
    
  <script>
    googleButton = document.querySelector('#gSignInWrapper');
    
    // google handle
    googleButton.addEventListener('click',function(e){
        console.log("Clicked");
        // check if payment is free signup without pay 

    });

    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);
        create_new_user(responsePayload)
       // console.log("ID: " + responsePayload.sub);
       // console.log('Full Name: ' + responsePayload.name);
       // console.log('Given Name: ' + responsePayload.given_name);
       // console.log('Family Name: ' + responsePayload.family_name);
       // console.log("Image URL: " + responsePayload.picture);
       // console.log("Email: " + responsePayload.email);
        var plan_name = document.getElementById('plan_name').value;
        var planid = document.getElementById("plan_id").value;

        if (plan_name === 'Free'){
            // Show loading indication
            submitButton.setAttribute('data-kt-indicator', 'on'); 
            // Disable button to avoid multiple click
            submitButton.disabled = true;
            // create Now User
            create_new_user(form);
        } else {
            var paypal_bu = paypal.Buttons({
                style: {
                    color: 'blue',
                    layout: 'vertical',
                    
                },
                createSubscription: function(data, actions) { 
                    return actions.subscription.create({
                    /* Creates the subscription */
                        plan_id: `${planid}`,
                        quantity: 1 ,// The quantity of the product for a subscription
                    });
                },
                onApprove: function(data, actions) {
                    submitButton.style.display = 'block';
                    document.querySelector('#paypal-button-container').innerHTML = '';
                    // Show loading indication
                    submitButton.setAttribute('data-kt-indicator', 'on');
                    // Disable button to avoid multiple click
                    submitButton.disabled = true;
                    // Submit form
                    var formData = new FormData();
                    formData.append('first_name', form.querySelector('[name="first_name"]').value);
                    formData.append('last_name', form.querySelector('[name="last_name"]').value);
                    formData.append('email', form.querySelector('[name="email"]').value);
                    formData.append('password', form.querySelector('[name="password"]').value);
                    formData.append('password_confirm', form.querySelector('[name="password_confirm"]').value);
                    formData.append('check_terms', form.querySelector('[name="check_terms"]').checked);
                    formData.append('csrfmiddlewaretoken', form.querySelector('[name="csrfmiddlewaretoken"]').value);
                    formData.append("OrderID",data.orderID);
                    formData.append('ConversationID',data.facilitatorAccessToken)
                    formData.append("SubscriptionID",data.subscriptionID)
                    formData.append("PlanID",plan_id)
                    // append all payment info 
                    // Simulate ajax request
                    $.ajax({
                        type:"POST",
                        url: "signup",
                        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 = form.getAttribute('data-kt-redirect-url');
                                    if (redirectUrl) {
                                        location.href = redirectUrl;
                                    }
                                }
                            });
                            // make all fields empty
                            form.reset();
                        }
                    });
                },
                onCancel: function (data) {
                    console.log(data);
                    submitButton.style.display = 'block';
                    document.querySelector('#paypal-button-container').innerHTML = '';
                    payment_details.status = "Started";
                    
                    Swal.fire({
                        text: "You Canceled Payment Process",
                        icon: "info",
                        buttonsStyling: false,
                        confirmButtonText: "Understood !",
                        customClass: {
                            confirmButton: "btn btn-danger"
                        }
                    });
                    form.reset()
                },
                onError: (err) => {
                    console.log(data);
                    submitButton.style.display = 'block';
                    document.querySelector('#paypal-button-container').innerHTML = '';
                    payment_details.status = "Started";
                    
                    Swal.fire({
                        text: "Please Contact us to solve this Issue",
                        icon: "error",
                        buttonsStyling: false,
                        confirmButtonText: "Ok, I Will",
                        customClass: {
                            confirmButton: "btn btn-warning"
                        }
                    });
                },
            });
            
            if (payment_details.status == "Started"){
                submitButton.style.display = 'none';
                paypal_bu.render('#paypal-button-container');
            }
            else{
                console.log(payment_details);
            }
        }
    }
  </script>
{% endblock %}