{% extends "Profile/show/layout.html.twig" %}

{% block page %}
    <div class="form-group">
        <form id="monthForm" action="{{path('user_profile_statistics_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()}}
                        <br>  الحالة: {% if payment.status %} تم استلامها {% else %} <a href="{{path('user_profile_statistics_payment_approve',{'username':user.username,'payment':payment.id})}}" class="btn btn-success"> تم الاستلام </a> {% endif %}
                     </li>
                {% endfor %}
            </ol>
        {% endif %}
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <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()
      })
    </script>
{% endblock %}