{% 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::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 styreneALight">UseVoice.</h1>
            <!--end::Title-->
            <h2 class="text-gray-800 fs-2x fw-bold text-center mb-0 ampleSoftProMedium" > {{ plan_obj.plan_name }} plan</h2>
            <h2 class="text-gray-800 fs-x fw-bold text-center mb-2 ampleSoftProMedium" > ${{ plan_obj.price }}/{% if plan_obj.plan_duration == "Monthly" %}Month{% elif plan_obj.plan_duration == "Yearly" %}Year{% elif plan_obj.plan_duration == "Weekly" %}Week{% endif %}</h2>
<!-- 		<h2 class="text-gray-800 fs-x fw-bold text-center mb-2 ampleSoftProMedium" > $0.99 For the first month </h2> -->
	    <!-- <div class="text-gray-600 fs-base text-center fw-semibold styreneALight" > 
		Experience all the benefits of our service with no charge for the first 14 days. <br>
		<b> No commitment - cancel anytime before the trial ends and you won't be charged a penny.</b> <br>
		After 14 days, continue enjoying our service for just ${{ plan_obj.price }} per {% if plan_obj.plan_duration == "Monthly" %}month{% elif plan_obj.plan_duration == "Yearly" %}year{% elif plan_obj.plan_duration == "Weekly" %}week{% endif %}.
	    </div> -->


<!-- 	    <div class="text-gray-600 fs-base text-center fw-semibold styreneALight" > 
		Subscribe now with PayPal for <b>$0.99 for the first month</b>. <br>  
		After that, continue enjoying our service for only $3.99/month. <br> 
		<b>Cancel anytime within the trial period at no charge.</b>
		</div> -->


		
            <!--begin::Text-->
            <div class="text-gray-600 fs-base text-center fw-semibold styreneALight">
                {% if message %}
                    {{message}}<br>
                {% endif %} 
            </div>
<!--             <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>
    <!--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 ampleSoftProMedium">Sign Up</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="signup"
                                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">
                            </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">
                        <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 styreneALight" 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 styreneALight" 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 styreneALight" 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 styreneALight" 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 styreneALight">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 styreneALight" 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 styreneALight">
                                I Accept the
                                <a href="{% url 'landing:terms-and-conditions' %}" class="ms-1 link-primary styreneALight" target="_blank"> Terms and conditions.</a>
                            </span>
                        </label>
                    </div>
                    <!--end::Accept-->
                    <!--begin::Submit button-->
                    <div class="d-grid mb-10 styreneALight">
                        <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 styreneALight">Sign up</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-->
                    <div id="paypal-button-container"></div>
                    <!--begin::Sign up-->
                    <div class="text-gray-500 text-center fw-semibold fs-6 styreneALight">
                        Already have an Account?
                        <a href="{% url 'accounts:signin' %}" class="link-primary fw-semibold styreneALight">Sign in</a>
                    </div>
                    <!--end::Sign up-->
                </form>
                <!--end::Form-->
            </div>
            <!--end::Content-->
        </div>
        <!--end::Wrapper-->
    </div>
    <!--end::Body-->
</div>
<!--end::Authentication - Sign-up--> 
{% endblock %}

{% block javascripts %}
    <script src="{% static 'js/custom/sign_up.js' %}"></script>
    <script>
        // On document ready
        KTUtil.onDOMContentLoaded(function() {
            KTSignupGeneral.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 check_mail(email) {
            return new Promise(function(resolve, reject) {
                $.ajax({
                    type: "GET",
                    url: "check-mail/" + email,
                    cache: false,
                    processData: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    success: function(response) {
                        resolve(response['are_exists']);
                        console.log(response['are_exists'])
                    },
                    error: function(error) {
                        reject(error);
                    }
                });
            });
        }

      function handleCredentialResponse(response) {
        console.log("Handle credential Response")
         // decodeJwtResponse() is a custom function defined by you
         // to decode the credential response.

          const responsePayload = decodeJwtResponse(response.credential);
          // get payment info
          var plan_name = document.getElementById('plan_name').value;
          var planid = document.getElementById("plan_id").value;
          var form = document.querySelector('#kt_sign_up_form');
          var submitButton = document.querySelector('#kt_sign_up_submit');


    	  if (document.querySelector('#paypal-button-container').innerHTML !== ""){
    		document.querySelector('#paypal-button-container').innerHTML = ""
    	  };
          // check if user already extist
          console.log(responsePayload['email'])
          check_mail(responsePayload['email'])
              .then((result) => {
                console.log(result)
                if (result) {
                  // Email exists
                  Swal.fire({
                      text: "Email already in use",
                      icon: "info",
                      buttonsStyling: false,
                      confirmButtonText: "Ok!",
                      customClass: {
                          confirmButton: "btn btn-primary"
                      }
                    })
                } else {

                  submitButton.disabled = true;
                  // Email does not exist
                  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) {

                          document.querySelector('#paypal-button-container').innerHTML = '';
                          // // Show loading indication
                          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', 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);
                          formData.append("OrderID",data['orderID']);
                          formData.append('ConversationID',data['facilitatorAccessToken'])
                          formData.append("SubscriptionID",data['subscriptionID'])
                          formData.append('plan_id',planid)
                          // 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"
                                      }
                                  })

                                  }
                            });


                      },
                      onCancel: function (data) {
                        submitButton.disabled = false;
                        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"
                            }
                        });

                      },
                      onError: (err) => {
                          submitButton.disabled = false;
                          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"
                              }
                          });


                      },
                  });
                  // check if payment is free
                  if (plan_name=="Free"){
                      create_social_user(responsePayload)
                  }
                  else {

                      paypal_bu.render('#paypal-button-container');
                  }
                  // end of paypal button
                }
              })
              .catch((error) => {
                // Handle error
                Swal.fire({
                    text: "Sorry, looks like there are some errors detected, please try again.",
                    icon: "error",
                    buttonsStyling: false,
                    confirmButtonText: "Ok!",
                    customClass: {
                        confirmButton: "btn btn-primary"
                    }
                });
              });
          

      }


      var create_social_user = function(response){

          // Submit form
          var formData = new FormData();
          var form = document.querySelector('#kt_sign_up_form');
          var submitButton = document.querySelector('#kt_sign_up_submit');
          var plan_name = document.getElementById('plan_name').value;
          var planid = document.getElementById("plan_id").value;
          formData.append('first_name', response['given_name']);
          formData.append('last_name', response['family_name']);
          formData.append('provider',"GOOGLE");
          formData.append('email', response['email']);
          formData.append('picture',response['picture']);
          formData.append('csrfmiddlewaretoken', form.querySelector('[name="csrfmiddlewaretoken"]').value);
          formData.append('plan_id',planid);


          // Simulate ajax request
            $.ajax({
                type:"POST",
                url: "social-register",
                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:index' %}";
                            if (redirectUrl) {
                                location.href = redirectUrl;
                            }
                        }
                    });
                    // make all fields empty
                    form.reset();
                }
            });
      };




    </script>
{% endblock %}