{% extends 'AdminBundle:Admin:adminLayout.html.twig' %}

{% block head %}
    {{ parent() }}
    <style>
    .report-content {
        width:100%;
        position: relative;
    }
    </style>
    <script src="{{ asset('bundles/admin/js/quickFormValidation.js') }}"></script>
    <script src="{{ asset('bundles/reportviewer/js/Highcharts-3.0.0/js/highcharts.js') }}"></script>
    <script src="{{ asset('bundles/reportviewer/js/Highcharts-3.0.0/js/modules/exporting.js') }}"></script>
    <script>
        function getUploadedFileContents(contents) {
            $('#formConfig').find('[name=google_analytics_private_key]').val(contents);
            $("#dialogUpload").dialog("close");
        }
        function loadConfigForm() {
            $.ajax({
                url:"{{path('reportviewer_visits_configform')}}",
                type:"POST",
                async: true,
                data: {
                },
                beforeSend: function(XMLHttpRequest) {
                    $("#dialogConfigurations").html('');
                },
                success: function(html){
                    $("#dialogConfigurations").html(html);
                    $('#upload_p12_file').click(function(){
                        $('#dialogUpload').dialog("open");
                    });
                },
                complete:function(responseText, textStatus, XMLHttpRequest){
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                }
            });    
        }
        
        function saveConfig() {
            $.ajax({
                url:"{{path('reportviewer_visits_updateconfig')}}",
                type:"POST",
                dataType:'json',
                async: true,
                data: {
                    'google_analytics_service_email': $('#formConfig').find('[name=google_analytics_service_email]').val(),
                    'google_analytics_client_id':$('#formConfig').find('[name=google_analytics_client_id]').val(),
                    'google_analytics_profile_id':$('#formConfig').find('[name=google_analytics_profile_id]').val(),
                    'google_analytics_private_key':$('#formConfig').find('[name=google_analytics_private_key]').val()
                },
                beforeSend: function(XMLHttpRequest) {
                    $("#formConfigError").html('');
                },
                success: function(json){
                    if(json.success) {
                        $("#dialogConfigurations").dialog("close");
                    }else{
                        $("#formConfigError").html(json.message);
                    }   
                },
                complete:function(responseText, textStatus, XMLHttpRequest){
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert('ajax error');
                }
            });
        }
        
        $().ready(function(){
            $("#tabs").tabs();
            
            $("#formFilter1, #formFilter2").datepicker({
                dateFormat: 'yy-mm-dd'
            });
            
            $('#formFilter').quickFormValidation([{
                selector: '#formFilter1',
                rules: [{
                    rule:'regex',
                    regex: /[0-9]{4}-[0-9]{2}-[0-9]{2}|today|yesterday|[0-9]+(daysAgo)/,
                    message: 'From Date: Invalid Date format'
                }]
            },{
                selector: '#formFilter2',
                rules: [{
                    rule:'regex',
                    regex: /[0-9]{4}-[0-9]{2}-[0-9]{2}|today|yesterday|[0-9]+(daysAgo)/,
                    message: 'To Date: Invalid Date format'
                }]
            }]);
        
            $("#dialogUpload").dialog({
                modal:true,
                autoOpen:false,
                width:500
            });
        
            $("#dialogConfigurations").dialog({
                modal:true,
                autoOpen:false,
                width:500,
                height: 350,
                open: function( event, ui ) {
                    loadConfigForm();
                },
                buttons: {
                    "Save": function() {
                        saveConfig();
                    },
                    "Close": function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
            
            $('#btnConfigurations').click(function(){
                $("#dialogConfigurations").dialog("open");
                
                return false;
            });
        });
    </script>
{% endblock %}
    
{% block breadcrumb %}
<ul class="breadcrumb">
    <li><a href="{{ path('admin_dashboard') }}">{{"admin.titles.home"|trans}}</a></li>
    <li><a href="{{ path('reportviewer_visits_index') }}">Reports</a></li>
    <li class="active">Visits report</li>
</ul>
{% endblock %}

{% block actions %}
<div class="action-buttons btn-group">
    <a id="btnConfigurations" class="btn btn-default" href="#"><span class="glyphicon glyphicon-wrench"></span> Configurations</a>
</div>
{% endblock %}

{% block content %}
    
    <div id="dialogConfigurations" title="Configurations"></div> 
    <div id="dialogUpload" title="Upload Key File">
        <iframe frameborder="0" style="width:100%; height: 100%;" src="{{ path('reportviewer_visits_upload') }}"></iframe>
    </div> 
    
    <div class="displayGridFilter">
        <h4>{{'admin.titles.filter'|trans}}</h4>
        <div class="filter">
            <form id="formFilter" name="formFilter" role="form" method="post" action="{{ path('reportviewer_visits_filter') }}">
                <table>
                <tr>
                    <td><label for="formFilter1">From Date</label></td>
                    <td><input id="formFilter1" class="form-control" size="10" type="text" name="date_from" value="{{filter.date_from|default('')}}" /></td>
                </tr>
                <tr>
                    <td><label for="formFilter2">To Date</label></td>
                    <td><input id="formFilter2" class="form-control" size="10" type="text" name="date_to" value="{{filter.date_to|default('')}}" /></td>
                </tr>
                <tr> 
                    <td colspan="2">
                        <p>
                            <input class="btn btn-primary" type="submit" value="{{'admin.titles.filter'|trans}}" />
                            <input class="btn" type="button" value="{{'admin.titles.reset'|trans}}" onclick="window.location.href='{{ path('reportviewer_visits_index') }}'"/>
                        </p>
                    </td>
                </tr>
                </table>
            </form>
        </div>
    </div>

    <div class="displayGrid">
    {% if(errorMessage) %}
        <div class="alert alert-error">
            {{errorMessage}}
        </div>
    {% else %}
        <div class="report-content pull-left">

            <a href="{{path('reportviewer_visits_excel')}}">Excel</a>

            <div id="tabs">
              <ul>
                <li><a href="#tabs-1">Tabular</a></li>
                <li><a href="#tabs-2">BarChart</a></li>
                <li><a href="#tabs-3">PieChart</a></li>
              </ul>
              <div id="tabs-1">
                  <a href="{{path('reportviewer_visits_pdf', { 'pdf':'true', 'filter': filterParam, 'mode':'Tabular' } )}}">PDF</a>
                  {{report.Tabular|raw}}
              </div>
              <div id="tabs-2">
                  <a href="{{path('reportviewer_visits_pdf', { 'pdf':'true', 'filter': filterParam, 'mode':'BarChart' } )}}">PDF</a>
                  {{report.BarChart|raw}}
              </div>
              <div id="tabs-3">
                  <a href="{{path('reportviewer_visits_pdf', { 'pdf':'true', 'filter': filterParam, 'mode':'PieChart' } )}}">PDF</a>
                  {{report.PieChart|raw}}
              </div>
            </div>

        </div>
    {% endif %}
    </div>
{% endblock %}