{% extends 'base.html.twig' %}

{% trans_default_domain 'Subscribe' %}

{% block title %}
    {{ 'subscribe.title'|trans }}
{% endblock title %}

{% block superBody %}
    {% if mobile is not defined %}
        {{ parent() }}
    {% endif %}
{% endblock %}

{% block body %}
{{ parent() }}
<div role="tabpanel" class="tab-pane active" id="academia-tab">

  {%  if next and not subscribed %}
    <div class="alert alert-info alert-dismissible" role="alert" style="background-color: red; color:white;">
        {{ 'subscribe.doSubscribe'|trans }}
    </div>
  {% endif %}
	    
  <div class="container">
  
    <div style="display:flex;flex-wrap: wrap;">
      <h1 style="flex-grow:1">{{ 'subscribe.shamra.name'|trans }}</h1>
      
      <div class="col-xs-12 col-md-2 col-md-offset-1">
        <a id="add-btn" class="new-button  btn" href="{{ path('promo_index') }}">
            {{'question'| trans({},'Promo')}}
        </a>
      </div> 
    </div> 
    
    <div class="well">
     {{ 'subscribe.shamra.explain'|trans }}
    </div>
		
    {% if endSubscribeDate %}
      <div class="alert alert-info alert-dismissible" role="alert">
        <p>{{ 'subscribe.finishedAt'|trans }} {{ endSubscribeDate | NaasArDate }}</p>
      </div>
      {% if subscribed and not canceled %}
        <button id="cancel" style="margin:3px"  class="btn btn-default">{{ 'subscribe.cancel'|trans }}</button>
      {% endif %}
    {% else %}
      <div class="alert alert-info alert-dismissible" role="alert">
        <p>{{ 'subscribe.limit'|trans }}</p>
      </div>
      {% if cancel is defined %}
        <div class="alert alert-info alert-dismissible" role="alert">
          <p>{{ 'subscribe.canceled'|trans }}</p>
        </div>
      {% endif %}
      {% if subscribed  and not canceled %}
        <button id="cancel" style="margin:3px" class="btn btn-default">{{ 'subscribe.cancel'|trans }}</button>
      {% endif %}
    {% endif %}

    <div id="cancel_alert_success" class="alert alert-info alert-dismissible hidden" role="alert">
      <p>{{ 'subscribe.canceledsuccessed'|trans }}</p>
    </div>

     <div id="cancel_alert_error" class="alert alert-danger alert-dismissible hidden" role="alert">
      <p>{{ 'subscribe.cancelederror'|trans }}</p>
    </div>

      {% include "@syndexAcademic/Default/subscription_cards.html.twig" with {'activeID': activeID} %}      

    <div>
        <h1>{{ 'subscribe.saidabout'|trans }}</h1>

        <div class="item active">
            <blockquote>
                <div class="row">
                    <div class="col-sm-3 text-center">
                        <img class="img-circle" src="https://shamra-academia.com/uploads/media/cache/profile_pic_public/uploads/profile/img/default_profile_pic_f.png" style="width: 100px;height:100px;">
                        <!--<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" style="width: 100px;height:100px;">-->
                    </div>
                    <div class="col-sm-9">
                        <p>{{ 'subscribe.kahina.said'|trans }}</p>
                        <small><a href="https://www.facebook.com/profile.php?id=100000600728453" target="_blank">Kahina Ait Hamouda</a></small>
                        <small>{{ 'subscribe.kahina.spec'|trans }}</small>
                    </div>
                </div>
            </blockquote>
        </div>
    </div>
	</div>

  <!-- Messenger Chat Plugin Code -->

    <!-- Your Chat Plugin code -->
    <div id="fb-customer-chat" class="fb-customerchat"></div>
    
</div>

{% endblock %}


{% block superJS %}

    <script>
      var chatbox = document.getElementById('fb-customer-chat');
      chatbox.setAttribute("page_id", "101401022197726");
      chatbox.setAttribute("attribution", "biz_inbox");

      window.fbAsyncInit = function() {
        FB.init({
          xfbml            : true,
          version          : 'v12.0'
        });
      };

      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/ar_AR/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>

    {% if mobile is not defined %}
        {{ parent() }}
    {% endif %}
    <script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript">
      // Create an instance of the Stripe object with your publishable API key
      var stripe = Stripe("{{ pk_key }}");
      var cancelButton = document.getElementById("cancel");
      if (cancelButton) {
        cancelButton.addEventListener('click', function() {
          fetch('{{ path("academia_cancel_subscription") }}', {
            method: "POST"
          }).then(function(result) {
            return result.json();
          }).then(function(data) {
          if (data.redirect) {
            window.location = data.redirect;
          }
          if (data.success) {
            document.getElementById("cancel_alert_success").classList.remove("hidden");
          }
          if (data.error) {
            document.getElementById("cancel_alert_error").classList.remove("hidden");
          }
          })
        });
      }
      var subscribeButton = document.getElementById("subscribe");
      if (subscribeButton) {
        subscribeButton.addEventListener('click', function() {
          document.getElementById("cancel_alert_success").classList.add("hidden");
          document.getElementById("cancel_alert_error").classList.add("hidden");
          fetch('{{ path("academia_checkout_product_test_session") }}', {
            method: "POST",
            headers: {
              "Content-Type": "application/json"
            },
            body: JSON.stringify({
              priceId: "{{ price_id }}",
              next: "{{ next }}"
            })
          }).then(function(result) {
            return result.json();
          }).then(function(data) {
          if (data.redirect) {
            window.location = data.redirect;
          }
            stripe.redirectToCheckout({
              sessionId: data.id
            }).then(handleResult);
          })
        });
      }

      {# var subscribeButtonDaily = document.getElementById("subscribe-daily"); #}
      var subscribeButtonPro = document.getElementById("subscribe-pro");
      var subscribeButtonChatBot = document.getElementById("subscribe-monthly-chatbot");
      var subscribeButtonAnnual = document.getElementById("subscribe-annual");
      var subscribeButtonMonthly = document.getElementById("subscribe-monthly");
      
      if(subscribeButtonChatBot){
          subscribeButtonChatBot.addEventListener('click', function() {
            {% if subscribed %}
              var confirmed=confirm("{{ 'subscribe.confirm'|trans }}")
            {% else %}
              var confirmed=true
            {% endif %}

            if(confirmed != null && confirmed == true){
              $.ajax({
                  url: "{{ path('academia_checkout_product_test_session') }}",
                  method: "POST",
                  data:{
                      'priceId' : "{{ price_id_for_chatbot }}",
                      'next': "{{ next }}"
                  },
                  success:(result)=>{
                    console.log(result)
                    data = result;

                    if (data.redirect) {
                      window.location = data.redirect;
                    }
                    stripe.redirectToCheckout({
                      sessionId: data.id
                    }).then(handleResult);
                  }
              })
            }
          });
      }

      if (subscribeButtonMonthly) {
          subscribeButtonMonthly.addEventListener('click', function() {
            document.getElementById("cancel_alert_success").classList.add("hidden");
            document.getElementById("cancel_alert_error").classList.add("hidden");

            {% if subscribed %}
              var confirmed=confirm("{{ 'subscribe.confirm'|trans }}")
            {% else %}
              var confirmed=true
            {% endif %}
            
            if(confirmed != null && confirmed == true){
              fetch('{{ path("academia_checkout_product_test_session") }}', {
                method: "POST",
                headers: {
                  "Content-Type": "application/json"
                },
                body: JSON.stringify({
                  priceId: "{{ price_id }}",
                  next: "{{ next }}"
                })
              })
              .then(function(result) {
                return result.json();
              })
              .then(function(data) {
                if (data.redirect) {
                  window.location = data.redirect;
                }
                stripe.redirectToCheckout({
                  sessionId: data.id
                }).then(handleResult);
              })
            }
          });
      }

      {# if (subscribeButtonDaily) {
        subscribeButtonDaily.addEventListener('click',function(){
          fetch("{{ path( "academia_subscripe_type",{'type':'daily'}) }}", {
                  method: 'POST',
                    headers: {
                      "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                      next: "{{ next }}"
                    })
                })
                .then(function(response ) {
                    if(response.status != 404 ){
                        return response.json();
                    }
                    throw new Error();
                })
                .then(function(session) {
                    return stripe.redirectToCheckout({ sessionId: session.id });
                })
                .catch((error)=>{
                    $(document).on('click','#checkout-button',function () {
                        $('#checkout-button').text("{{ 'subscribe.error'|trans }}");
                    })
          })
        })
      } #}
      
      if (subscribeButtonPro) {
        subscribeButtonPro.addEventListener('click',function(){
            {% if subscribed %}
              var confirmed=confirm("{{ 'subscribe.confirm'|trans }}")
            {% else %}
              var confirmed=true
            {% endif %}
            
            if(confirmed != null && confirmed == true){
              fetch("{{ path( "academia_subscripe_type",{'type':'pro'}) }}", {
                      method: 'POST',
                        headers: {
                          "Content-Type": "application/json"
                        },
                        body: JSON.stringify({
                          next: "{{ next }}"
                        })
                    })
                    .then(function(response ) {
                        if(response.status != 404 ){
                            return response.json();
                        }
                        throw new Error();
                    })
                    .then(function(session) {
                        return stripe.redirectToCheckout({ sessionId: session.id });
                    })
                    .catch((error)=>{
                        $(document).on('click','#checkout-button',function () {
                            $('#checkout-button').text("{{ 'subscribe.error'|trans }}");
                        })
              })
            }
        })
      }
      
      if (subscribeButtonAnnual) {
        subscribeButtonAnnual.addEventListener('click',function(){
          {% if subscribed %}
              var confirmed=confirm("{{ 'subscribe.confirm'|trans }}")
            {% else %}
              var confirmed=true
            {% endif %}
            
            if(confirmed != null && confirmed == true){
              fetch("{{ path( "academia_subscripe_type",{'type':'annual'}) }}", {
                      method: 'POST',
                        headers: {
                          "Content-Type": "application/json"
                        },
                        body: JSON.stringify({
                          next: "{{ next }}"
                        })
                    })
                    .then(function(response ) {
                        if(response.status != 404 ){
                            return response.json();
                        }
                        throw new Error();
                    })
                    .then(function(session) {
                        return stripe.redirectToCheckout({ sessionId: session.id });
                    })
                    .catch((error)=>{
                        $(document).on('click','#checkout-button',function () {
                            $('#checkout-button').text("{{ 'subscribe.error'|trans }}");
                        })
              })
            }
        })
      }

    </script>


{% endblock %}