{% extends 'syndexAcademicBundle::main_layout.html.twig' %}

{% trans_default_domain "Academia" %}

{% block metaKeywords %}
    {{ 'universities.keywords'|trans }}
{% endblock %}
{% block metaDescription %}{{ 'universities.index.description'|trans({}, 'Academia') }}{% endblock %}
{% block og_title %}{{ 'universities.main-title'|trans({}, 'Academia') }}{% endblock %}
{% block og_description %}{{ 'universities.index.description'|trans({}, 'Academia') }}{% endblock %}
{% block og_image_width %}300{% endblock %}
{% block og_image_height %}300{% endblock %}
{% block og_url %}{{ app.request.scheme ~'://' ~ app.request.httpHost ~ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}{% endblock %}

{% block title %}
    {{ 'universities.main-title'|trans }}
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{{ asset('bundles/syndexacademic/css/checkout.css') }}" />
{% endblock %}

{% block body %}
    {{ parent() }}
    <div role="tabpanel" class="tab-pane active" id="academia-tab">
      <div class="row">
        <div class="col-xs-12 col-md-3">
        </div>
        <div class="col-xs-12 col-md-3">
        </div>
        <div class="col-xs-12 col-md-3">
          <section>
            {% if not app.user %}
              <div class="alert alert-info alert-dismissible" role="alert">
                <p>اشترك بالحزمة الذهبية واحصل على وصول غير محدود شمرا أكاديميا</p>
                <a href="/register">تسجيل مستخدم جديد</a>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            {% endif %}
            {% if subscribed %}
            <div id="product">
              <h1 id="product_name"></h1>
              <div id="product_price"></div>
              <div id="product_period"></div>
              <img alt="product image" id="product_image" />
            </div>
            <div class="alert alert-info alert-dismissible" role="alert">
              <p>اشتراكك بالحزمة الذهبية ينتهي بتاريخ {{ endSubscribeDate | NaasArDate }}</p>
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <button id="cancel">Cancel subscription</button>
            {% else %}
            {% if app.user %}
              <div class="alert alert-info alert-dismissible" role="alert">
                <p>لديك وصول محدود لشمرا أكاديميا، اشترك بالحزمة الذهبية واحصل على  وصول كامل.</p>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            {% endif %}
            <button id="subscribe">Subscribe</button>
            {% endif %}
          </section>
        </div>
      </div>
    </div>
{% endblock %}

{% block javascripts %}
  <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 }}");
    {% if subscribed %}
    var cancelButton = document.getElementById("cancel");
    fetch('{{ path("academia_get_subscriptions") }}').then(function(result) {
    return result.json();
    }).then(function(data) {
      if (data.success) {
        document.getElementById("product_name").innerHTML = data.data.name;
        document.getElementById("product_price").innerHTML = data.data.price;
        document.getElementById("product_period").innerHTML = data.data.period;
        document.getElementById("product_image").src = data.data.image;
      }
      else {
      alert(data.message);
      }
    });
    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) {
        alert("Canceled subscription");
      }
      })
    });
    {% else %}
    var subscribeButton = document.getElementById("subscribe");
    subscribeButton.addEventListener('click', function() {
      fetch('{{ path("academia_checkout_product_test_session") }}', {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          priceId: "{{ price_id }}"
        })
      }).then(function(result) {
        return result.json();
      }).then(function(data) {
      if (data.redirect) {
        window.location = data.redirect;
      }
        stripe.redirectToCheckout({
          sessionId: data.id
        }).then(handleResult);
      })
    });
    {% endif %}
  </script>
{% endblock %}