{{ include( 'NivaControlBundle:Shared:header.html.twig', { 'section': 'admin', 'mode': 'admin' } ) }}

{{ include( 'NivaControlBundle:Shared:sidebar.html.twig', { 'section': 'admin', 'mode': 'admin', 'active': 'report' } ) }}

<!-- main content -->
<div class="col-sm-10">
<div class="page-header">
    <h1>Report: Club Daily Stats Graph</h1>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <strong>Filters</strong>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" role="form" action="{{ path('admin_report_daily_stats_graph') }}"
                      method="post">
                    <div class="form-group">
                        <div class="col-lg-3">
                            <select class="form-control" name="clubId">
                                <option value="0" selected="selected"
                                        {% if params.clubId == 0 %}selected="selected"{% endif %}
                                        >-- By Club --
                                </option>
                                {% for club in clubs %}
                                    <option value="{{ club.clubId }}"
                                            {% if params.clubId == club.clubId %}selected="selected"{% endif %}
                                            >{{ club.clubName }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-lg-3">
                            <div class="input-group date" id="form_datetime_from" data-date-format="yyyy-mm-dd">
                                <input class="form-control" id="fromDate" name="fromDate" size="16" type="text"
                                        {% if params.fromDate %}
                                            value="{{ params.fromDate|date('Y-m-d') }}"
                                        {% else %}
                                            value=""
                                        {% endif %}
                                       placeholder="-- From --" readonly />
                                    <span class="input-group-addon"><span
                                                class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                            </div>
                            <script type="text/javascript">
                                $("#form_datetime_from").datetimepicker({
                                    format: "yyyy-mm-dd",
                                    autoclose: true,
                                    minView: 2,
                                    pickerPosition: "bottom-left"
                                });
                            </script>
                        </div>
                        <div class="col-lg-3">
                            <div class="input-group date" id="form_datetime_to" data-date-format="yyyy-mm-dd">
                                <input class="form-control" id="toDate" name="toDate" size="16" type="text"
                                        {% if params.toDate %}
                                            value="{{ params.toDate|date('Y-m-d') }}"
                                        {% else %}
                                            value=""
                                        {% endif %}
                                       placeholder="-- To --" readonly />
                                    <span class="input-group-addon"><span
                                                class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                            </div>
                            <script type="text/javascript">
                                $("#form_datetime_to").datetimepicker({
                                    format: "yyyy-mm-dd",
                                    autoclose: true,
                                    minView: 2,
                                    pickerPosition: "bottom-left"
                                });
                            </script>
                        </div>
                        <div class="col-lg-3">
                            <button type="submit" class="btn btn-default btn-block"><span class="glyphicon glyphicon-play"></span> Run</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

    {% if error is defined %}
        {% if error == 1 %}
            <div class="alert alert-info">Please select a club and a valid start and end date to run the report.</div>
        {% elseif error == 2 %}
            <div class="alert alert-warning"><strong>Woah!</strong> You must select a club and valid start and end dates.</div>
        {% endif %}
    {% endif %}

    {% if logs %}
        <!-- Graph 1: Revenue -->
        <h3>Revenue</h3>
        <div id="graph1" class="center" style="width:100%; height:500px;"></div>
        <!-- Graph 2: Clients -->
        <h3>Client Flow</h3>
        <div id="graph2" class="center" style="width:100%; height:500px;"></div>

        <!-- JS Libs for the graphs -->
        <script src="{{ asset('bundles/nivacontrol/js/jquery.flot.js') }}"></script>
        <script src="{{ asset('bundles/nivacontrol/js/jquery.flot.time.js') }}"></script>
        <script src="{{ asset('bundles/nivacontrol/js/jquery.flot.resize.js') }}"></script>
        <script src="{{ asset('bundles/nivacontrol/js/jquery.flot.axislabels.js') }}"></script>

        <!-- JS Code for the graphs -->
        <script type="text/javascript">
        Number.prototype.formatNumber = function(decPlaces, thouSeparator, decSeparator) {
            var n = this,
                    decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces,
                    decSeparator = decSeparator == undefined ? "." : decSeparator,
                    thouSeparator = thouSeparator == undefined ? "," : thouSeparator,
                    sign = n < 0 ? "-" : "",
                    i = parseInt(n = Math.abs(+n || 0).toFixed(decPlaces)) + "",
                    j = (j = i.length) > 3 ? j % 3 : 0;
            return sign + (j ? i.substr(0, j) + thouSeparator : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thouSeparator) + (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : "");
        };

        function moneyFormatter(v, axis) {
            return "$" + v.formatNumber();
        }

        function quantityFormatter(v, axis) {
            return v.formatNumber(0);
        }

        var revenues = [
            {% for log in logs %}
            [{{ log.timestamp|date('U') }}000, {{ log.revenue }}]{% if not loop.last %},{% endif %}
            {% endfor %}
        ];

        var activations = [
            {% for log in logs %}
            [{{ log.timestamp|date('U') }}000, {{ log.newUsers }}]{% if not loop.last %},{% endif %}
            {% endfor %}
        ];

        var cancellations = [
            {% for log in logs %}
            [{{ log.timestamp|date('U') }}000, {{ log.cancelledUsers }}]{% if not loop.last %},{% endif %}
            {% endfor %}
        ];

        // GRAPH Revenues
        var dataGraph1 = [
            { data: revenues, label: "Revenue", color: 'blue'}
        ];

        var optionsGraph1 = {

            axisLabels: { show: true },

            xaxis: {
                axisLabel: "Date",
                axisLabelFontSizePixels: 16,
                axisLabelPadding: 10,
                mode: "time",
                minTickSize: [1, "day"], // Sets time interval
                timeformat: "%y/%m/%d"

            },

            yaxis: {
                axisLabel: "Revenue",
                axisLabelFontSizePixels: 16,
                axisLabelPadding: 10,
                min: 0,
                tickFormatter: moneyFormatter
            },

            legend: {
                show: false
            }
        };


        // GRAPH Clients
        var dataGraph2 = [
            { data: activations, label: "Activations", color: 'green'},
            { data: cancellations, label: "Cancellations", color: 'red'}

        ];

        var optionsGraph2 = {

            axisLabels: { show: true },

            xaxis: { axisLabel: "Date",
                axisLabelFontSizePixels: 16,
                axisLabelPadding: 10,
                mode: "time",
                minTickSize: [1, "day"], // Sets time interval
                timeformat: "%y/%m/%d"

            },

            yaxis: { axisLabel: "Clients",
                axisLabelFontSizePixels: 16,
                axisLabelPadding: 10,
                min: 0,
                tickFormatter: quantityFormatter
            },

            legend: {
                show: true
            }
        };

        $.plot("#graph1", dataGraph1, optionsGraph1);
        $.plot("#graph2", dataGraph2, optionsGraph2);
    </script>

    {% elseif not logs and error is not defined %}
        <div class="alert alert-warning"><strong>Woah!</strong> Could not find any logs for those dates.</div>
    {% endif %}
</div>
<!-- /main content -->

{{ include( 'NivaControlBundle:Shared:footer.html.twig' ) }}