{% extends "layout.html.twig" %}

{% set menu_selected = 'info' %}

{% block title %}
    {{ 'profile.profile3'|trans({}, 'FOSUserBundle') }} {{ user.firstName ~ ' ' ~ user.lastName }}
{% endblock title%}

{% block stylesheets %}

    {{ parent() }}
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/user/css/show.css?v.6') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/academia.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndexacademic/css/style.css?v.3.2 ') }}"/>
    <style>
      .shadow{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
    </style>
{% endblock %}

{% block body %}

{% if app.user is not null and app.user == user %}
  <div class="container-fluid">
    <div class="row">
        {% if not user.isVerified %}
            <div class="col-xs-12">
                {% include "Profile/confim_email_notification.html.twig" %}
            </div>
        {% endif %}
        <div class="col-xs-12">
            {% include "Profile/flash_message.html.twig" %}
        </div>
    </div>
    
      {% if endSubscribeDate and not canceled %}
        <div class="alert alert-info alert-dismissible" role="alert">
            <p>اشتراكك بالحزمة الذهبية ينتهي بتاريخ {{ endSubscribeDate | NaasArDate }}</p>
            <button id="cancel" class="btn btn-default">إلغاء الإشتراك</button>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
      {% elseif not subscribed %}
          <div class="alert alert-info alert-dismissible" role="alert">
              <p> لديك وصول محدود لشمرا أكاديميا، اشترك بالحزمة الذهبية واحصل على وصول كامل - 4.99$ بالشهر.</p>
              <a class="btn btn-default" href="{{ path('shamra_academia_subscription') }}">اشترك</a>
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
              </button>
          </div>
      {% endif %}
</div>
{% endif %}
 
<div class="container">
    <div id="tabs" class="row" >
        <ul class="nav nav-tabs shamra-tabs" role="tablist">
            <li class="tab {% if app.request.query.get('month') is null %}active{%endif%}" role="tab" tabindex="0" tab-content="info_tab"><a role="presentation" >{{ 'profile.private_info' | trans({}, 'FOSUserBundle')}}</a></li>
            <li class="tab added_places_tab" role="tab" tab-content="picture_tab" ><a disabled="disabled" role="presentation" >{{ 'profile.picture' | trans({}, 'FOSUserBundle')}}</a></li>
            <li class="tab added_places_tab" role="tab" tab-content="research_tab" ><a disabled="disabled" role="presentation" >{{ 'profile.myResearch' | trans({}, 'FOSUserBundle')}}</a></li>
            {% if  user == app.user and  user.partner is not null and user.partner.status == "approve" %}
              <li class="tab added_places_tab {% if app.request.query.get('month') is not null %}active{%endif%}" role="tab" tab-content="statistics_tab" ><a disabled="disabled" role="presentation" >{{ 'profile.statistics' | trans({}, 'FOSUserBundle')}}</a></li>
            {% endif %}
        </ul>
    </div>

    <div class="row"  style="margin-top:20px;">
      <div class="col-xs-12">

        <div class="tab-content">
          <!-- Tab panes -->
            <div role="tabpanel" class="tab-pane" id="info_tab">
              <div class="col-sm-4"> 
                <div class="shadow" style="padding:10px;">
                  <h4 >
                      <i class="fa  fa-university" data-placement="top" data-toggle="tooltip" data-original-title="{{ 'form.study_field'|trans({}, 'FOSUserBundle') }}"></i>
                      {% if app.request.get('_locale') == 'ar' %}{{ user.studyField.arabicFullName }}{% else %}{{ user.studyField.englishFullName }}{% endif %}
                  </h4 >
                  <h4 >
                      <i class="fa fa-eye" data-placement="top" data-toggle="tooltip" data-original-title="{{ 'profile.visitors'|trans({}, 'FOSUserBundle') }}"></i>
                      {{ user.visitors}}
                  </h4 >
                  <h5 >
                    {{ 'profile.lastlogin'|trans({}, 'FOSUserBundle') }} 
                    {{ user.lastLogin|date("Y M D")}}
                  </h4 >
                </div>
                {% if app.user is not null and app.user == user and  user.partner is not null and user.partner.frontPrivateCardImage is not null and user.partner.backPrivateCardImage is not null %}
                  <div class="col-md-12 shadow" style="padding:10px; margin-top:10px;">
                    <div style="color:gray">ملاحظة: (لاتظهر  هذه الصور للعامة)</div>
                    <div class="form-group col-md-12">
                        <label>الجهة الامامية للهوية الشخصية:</label>
                        <img class="img-responsive" src="{{asset('uploads/privateCard/') ~ user.partner.frontPrivateCardImage }}"/>
                    </div>
                    <div class="form-group col-md-12">
                        <label>الجهة الخلفية للهوية الشخصية:</label>
                        <img class="img-responsive" src="{{asset('uploads/privateCard/') ~ user.partner.backPrivateCardImage}}"/>
                    </div>
                  </div>
                {% endif %}
              </div>

              <div class="col-sm-7 shadow" style="padding:20px;margin-right:10px;">
                {% if app.user is not null and  app.user == user %} <button onclick="window.location = '{{path('user_profile_edit',{'username':user.username})}}'" style="float:{% if app.request.get('_locale') == 'ar' %}left{% else %}right{%endif%}" class="btn"><i class="fa fa-gear" data-placement="top" data-toggle="tooltip" data-original-title="{{ 'profile.change'|trans({}, 'FOSUserBundle') }}"></i> </button> {% endif %}
                <p>
                    <b>{{ 'profile.bio'|trans({}, 'FOSUserBundle') }}</b> <br><br>
                    {% if user.gender == 'm'%} 
                        {{ 'profile.born.male'|trans({}, 'FOSUserBundle') }} 
                    {% else %} 
                        {{ 'profile.born.female'|trans({}, 'FOSUserBundle') }}
                    {% endif %} 
                    {{ user.birthdate|date('Y M D') }}, 
                    {{ 'profile.from'|trans({}, 'FOSUserBundle') }}
                    {{ user.country }}
                    {% if user.address is not null %}
                      {{ 'profile.address'|trans({}, 'FOSUserBundle') }}
                      {{ user.address }}
                    {% endif %}
                </p>

                <hr>
                <b>{{ 'profile.account'|trans({}, 'FOSUserBundle') }}</b><br><br>
                <div style="display:flex;flex-wrap: wrap;">
                  
                  <a  href="mailto:{{ user.email}}" style="flex-grow:1"> {{ user.email}} </a> 
                  
                  {% if user.facebookUrl is not null %}
                    <a href="{{user.facebookUrl}}" style="flex-grow:1"> {{ (user.facebookUrl ~ ' <i class="fa  fa-facebook"></i>')|raw }} </a> 
                  {% endif %}   

                  {% if user.linkedinUrl is not null %}
                    <a  href="{{user.linkedinUrl}}" style="flex-grow:1"> {{ (user.linkedinUrl ~ ' <i class="fa  fa-linkedin"></i>')|raw }} </a> 
                  {% endif %}  

                </div>

                <hr>
                <b>{{ 'profile.interests'|trans({}, 'FOSUserBundle') }}</b>
                  
                  {% if user.interests|length > 0 %}
                    {% for interest in user.interests %}
                      {{ interest}}, 
                    {% endfor %}
                  {% else %}
                    {{ 'profile.notFound'|trans({}, 'FOSUserBundle') }}
                  {% endif %} 

                <hr>
                <b>{{ 'profile.languages'|trans({}, 'FOSUserBundle') }}</b>
                  
                {% if user.languages|length > 0 %}
                  {% for language in user.languages %}
                    {{ language }}, 
                  {% endfor %}
                {% else %}
                  {{ 'profile.notFound'|trans({}, 'FOSUserBundle') }}
                {% endif %} 
                <hr>
                <b>{{ 'profile.studyAndWork'|trans({}, 'FOSUserBundle') }}</b><br><br>
                <div style="display:flex;">
                  {% if user.work is not null %}
                    <div style="flex-grow:1"> <i class="fa fa-briefcase"></i>{{ user.work }} </div>
                  {% endif %}

                  {% if user.studyDegree is not null %}
                    <div style="flex-grow:1"> <i class="fa fa-book"></i> {{ user.studyDegree|trans({}, 'FOSUserBundle') }} </div>
                  {% endif %}
                  
                  {% if user.work is null and user.studyDegree is  null %}
                    {{ 'profile.notFound'|trans({}, 'FOSUserBundle') }}
                  {% endif %} 
                  
                </div>
              </div>
            </div>
          </div>
        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane" id="picture_tab">
            <div class="shadow col-sm-6 " style="padding:10px;"> 
                <img id="profile_pictuer" src='{{ asset(user.uploadPath ~ '/' ~ user.image) }}' alt='Profile Picture' style="width: -webkit-fill-available;height:300px;" class='img-rounded img-responsive'>  
            </div>
          </div>
        </div>
        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane" id="research_tab">
            {% if matchedResearches is defined and matchedResearches is not empty %}
              <div class="col-sm-7 shadow" style="padding:20px;">
                    {{ include('@syndexAcademic/Default/research_brief.html.twig') }}
                    <center><a href="{{ path('shamra_academia_filter',{'createdBy':user.username}) }}"> {{'research.all'|trans({},'Academia') }}</a></center>
              </div>
            {% else %}
              <h3> عذرا, لايوجد لديك ابحاث لعرضها</h3>
            {% endif %}
          </div>
        </div>
        <!-- Tab panes -->
        {% if user == app.user and user.partner is not null and user.partner.status == "approve" %}
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane" id="statistics_tab">
              <div class="row">
                <div class="form-group col-md-6">
                    <form id="monthForm" action="{{path('user_profile_show',{'username':user.username}) }}">
                        <select class="form-control" id="month" name="month">
                            <option>الشهر</option>
                            <option value="0">يناير</option>
                            <option value="1">فبراير</option>
                            <option value="2">مارس</option>
                            <option value="3">أبريل</option>
                            <option value="4">مايو</option>
                            <option value="5">يونيو</option>
                            <option value="6">يوليو</option>
                            <option value="7">اغسطس</option>
                            <option value="8">سبتمبر</option>
                            <option value="9">اكتوبر</option>
                            <option value="10">نوفمبر</option>
                            <option value="11">ديسمبر</option>
                        </select>
                    </form>
                    <h4 style="color:grey"><i class="fa fa-bar-chart fa-lg"></i> عدد المستخدمين الذين قامو بالتحميل لشهر {{ data.month }}: {{ data.totalPerMonth}}</h4>
                </div>     
              </div>

              <div id="chart-container">
              </div>

              <div class="row">
                <div class="container col-md-9">
                    <div class="table-responsive">          
                        <table class="table">
                            <thead>
                                <tr>
                                <th>#</th>
                                <th>اسم البحث</th>
                                <th>عدد التحميلات</th>
                            </tr>
                            </thead>
                                <tbody>
                                {% for key,research in data.researchs %}
                                        <tr>
                                            <td>{{ loop.index }}</td>
                                            <td>
                                                <a href="{{path('shamra_academia_research_show' ,{'slug':research[1]})}}">{{key}}</a>
                                            </td>
                                            <td>{{research[0]}}</td>
                                        </tr>
                                {% endfor %}
                                </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-md-2 shadow" style="text-align: center;padding: 10px 0px;">
                    <h4>المجموع الحالي: {{data.total}} </h4>
                    <h4>المبلغ الحالي: {{ data.total * money_per_download}} </h4>
                    <hr>
                    {% if data.payments is empty %}
                        لايوجد دفعات سابقة.
                    {% else %}
                        <ol>
                            {% for payment in data.payments|slice(0 , 10) %}
                                <li style="padding:5px;"> تم دفع {{payment.totalMoney }} ليرة سورية مقابل {{payment.numberOfDownloads }} تحميل بتاريخ {{payment.createdAt|date()}}</li>
                            {% endfor %}
                        </ol>
                    {% endif %}
                </div>
              </div>
            </div>
          {% endif %}
      
      </div>
    </div>

</div> 


{% endblock %}

{% block javascripts %}

    <script src="{{ asset('bundles/user/js/show.js?v=4') }}"></script>
    <script src="{{ asset('bundles/user/js/vendor/jquery.noty.min.js') }}" type="text/javascript"></script>

    <script type="text/javascript">
        // Create an instance of the Stripe object with your publishable API key
        var cancelButton = document.getElementById("cancel");
        if (cancelButton) {
          cancelButton.addEventListener('click', function() {
            var proceed = confirm("هل أنت متأكد من أنك تريد إلغاء الاشتراك؟");
            if(proceed) {
              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").classList.remove("hidden");
                }
              })
            }
          });
        }

    </script>
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

   <script type="text/javascript">

      FusionCharts.ready(function(){
          var chartObj = new FusionCharts({
              type: 'column2d',
              renderAt: 'chart-container',
              width: window.outerWidth * 0.9,
              height: '450',
              dataFormat: 'json',
              dataSource: {
                  "chart": {
                      "caption": "عدد الابحاث المحملة خلال {{data.month}} ",
                      "xAxisName": "الايام",
                      "yAxisName": "عدد عمليات التحميل",
                      "theme": "fusion"
                  },
                  "data": [
                      {% for column in 1..31 %}  
                          {
                              "label": "{{ column }}",
                              "value": "{{ data.downloads[column] }}"
                          },
                      {% endfor %}
                  ]
              }
          });
          chartObj.render();
      });

      $('#month').change(()=>{
          $('#monthForm').submit()
      })

       $( ".tab" ).on("click",function () {
            var elm = this;
            $(this).tab("show");
            $(".tab-pane").fadeOut(300);
            setTimeout(function () {
                $("#"+$(elm).attr("tab-content")).fadeIn(300);
            },300)

        });

        $(document).ready(function(){
            {% if app.request.query.get('month') is null %}
              $("#info_tab").fadeIn("slow");
            {% else %}
              $("#statistics_tab").fadeIn("slow");
            {% endif %}
        })
    </script>
{% endblock %}