{{--

    Name: Sendout.stat-display.blade
    Author: JH2
    Created: 2015-05-27
    Description: This blade is used to display Models\Stat data in a chart


    Updated by:
    Description:

    Params:
        content_id - String, Unique string used by blade to prevent duplication of content when multiple instances of the same element is used

--}}

@extends('partials.box')

@section('header-title', $sendout->name ?? '')

@section($content_id)
    <div class="row">
        <div class="col-md-6">
            @if(isset($subHeader) && is_array($subHeader) && !empty($subHeader))
                <table>
                    @foreach($subHeader as $key => $value)
                        <tr class="header-meta">
                            <td><strong><span class="header-label">{{ $value['label'] }}</span></strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                            @if(isset($value['link']))
                                <td>
                                    <span class="header-value">
                                        <a href="{{ route($value['link']['route'], $value['link']['param']) }}">{{ $value['value'] }}</a>
                                    </span>
                                </td>
                            @else
                                <td>
                                    <span class="header-value">{!! str_limit($value['value'], 300, ' ...<a class="blue-link" data-toggle="modal" data-target="#receiverListModal">' . Lang::get('sendout.expand') . '</a>') !!}</span>
                                </td>
                            @endif
                        </tr>
                    @endforeach
                </table>
            @endif
        </div>
        <div class="col-md-6">
            @if(is_null($sendout->stop_time) && is_null($sendout->abort_time))
                <a data="abort-confirm" style="margin-right:5px;" class="btn btn-danger pull-right white-text">{{ trans('sendout.abortSendout') }}</a>
                {!! Form::open(['method' => 'DELETE', 'route' => ['sendout.destroy', $sendout->id], 'class' => 'delete-form']) !!}
                {!! Form::close() !!}
            @elseif(!is_null($sendout->abort_time))
                <span class="note-box"><i class="fa fa-lightbulb-o"></i>
                    {{ trans('sendout.abortedSendoutInfo', ['date' => $sendout->abort_time]) }}
                </span>
            @elseif(!is_null($sendout->stop_time))
                <a class="btn label btn-xs pull-right" href="{{ route('sendout.pdf', $sendout->id) }}"><i class="fa fa-print"></i> @lang('sendout.pdfPrint')</a>
            @endif
        </div>
    </div>
    <div class="clearfix"></div>
    <br>
    <span class="pull-right">
        <a class="btn label btn-xs" href="?dates=1">1 {{ Lang::get('sendout.day') }}</a>
        @if ($sendout->start_time->isPast())
            @if ($sendout->start_time->diffInDays(Carbon\Carbon::now()) >= 1)
                <a class="btn label btn-xs" href="?dates=7">1 {{ Lang::get('sendout.week') }}</a>
            @endif
            @if ($sendout->start_time->diffInDays(Carbon\Carbon::now()) >= 7)
                <a class="btn label btn-xs" href="?dates=14">2 {{ Lang::get('sendout.weeks') }}</a>
            @endif
            @if ($sendout->start_time->diffInDays(Carbon\Carbon::now()) >= 14)
                <a class="btn label btn-xs" href="?dates=21">3 {{ Lang::get('sendout.weeks') }}</a>
            @endif
            @if ($sendout->start_time->diffInDays(Carbon\Carbon::now()) >= 21)
                <a class="btn label btn-xs" href="?dates=28">4 {{ Lang::get('sendout.weeks') }}</a>
            @endif
        @endif
    </span>
    <h1>{{ Lang::get('sendout.chart.header') }}</h1>
    <canvas id="chart" height="70"></canvas>

    <div class="modal inmodal fade" id="receiverListModal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">@lang('sendout.show.headerLabel.lists')</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        @foreach($sendout->receiverLists()->pluck('name')->toArray() as $list)
                            <div class="col-md-3">{{ $list }}</div>
                        @endforeach
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('footer-script')

    <script type="text/javascript">

        Chart.defaults.global = {
            // Boolean - Whether to animate the chart
            animation: true,
            // Number - Number of animation steps
            animationSteps: 60,
            // String - Animation easing effect
            // Possible effects are:
            // [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
            //  easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
            //  easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
            //  easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
            //  easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
            //  easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
            //  easeOutElastic, easeInCubic]
            animationEasing: "easeOutQuart",
            // Boolean - If we should show the scale at all
            showScale: true,
            // Boolean - If we want to override with a hard coded scale
            scaleOverride: false,
            // ** Required if scaleOverride is true **
            // Number - The number of steps in a hard coded scale
            // scaleSteps: {{ 10 }},
            // Number - The value jump in the hard coded scale

            // Number - The scale starting value
            scaleStartValue: 0,
            // String - Colour of the scale line
            scaleLineColor: "rgba(0,0,0,.1)",
            // Number - Pixel width of the scale line
            scaleLineWidth: 1,
            // Boolean - Whether to show labels on the scale
            scaleShowLabels: true,
            // Interpolated JS string - can access value
            scaleLabel: "<%=value%>",
            // Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
            scaleIntegersOnly: true,
            // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
            scaleBeginAtZero: true,
            // String - Scale label font declaration for the scale label
            scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
            // Number - Scale label font size in pixels
            scaleFontSize: 12,
            // String - Scale label font weight style
            scaleFontStyle: "normal",
            // String - Scale label font colour
            scaleFontColor: "#666",
            // Boolean - whether or not the chart should be responsive and resize when the browser does.
            responsive: true,
            // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
            maintainAspectRatio: true,
            // Boolean - Determines whether to draw tooltips on the canvas or not
            showTooltips: true,
            // Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
            customTooltips: false,
            // Array - Array of string names to attach tooltip events
            tooltipEvents: ["mousemove", "touchstart", "touchmove"],
            // String - Tooltip background colour
            tooltipFillColor: "rgba(0,0,0,0.8)",
            // String - Tooltip label font declaration for the scale label
            tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
            // Number - Tooltip label font size in pixels
            tooltipFontSize: 14,
            // String - Tooltip font weight style
            tooltipFontStyle: "normal",
            // String - Tooltip label font colour
            tooltipFontColor: "#fff",
            // String - Tooltip title font declaration for the scale label
            tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
            // Number - Tooltip title font size in pixels
            tooltipTitleFontSize: 14,
            // String - Tooltip title font weight style
            tooltipTitleFontStyle: "bold",
            // String - Tooltip title font colour
            tooltipTitleFontColor: "#fff",
            // Number - pixel width of padding around tooltip text
            tooltipYPadding: 6,
            // Number - pixel width of padding around tooltip text
            tooltipXPadding: 6,
            // Number - Size of the caret on the tooltip
            tooltipCaretSize: 8,
            // Number - Pixel radius of the tooltip border
            tooltipCornerRadius: 6,
            // Number - Pixel offset from point x to tooltip edge
            tooltipXOffset: 10,
            // String - Template string for single tooltips
            tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
            // String - Template string for multiple tooltips
            multiTooltipTemplate: "<%= value %>",
            // Function - Will fire on animation progression.
            onAnimationProgress: function(){},
            // Function - Will fire on animation completion.
            onAnimationComplete: function(){}
        }

        var ctx = $("#chart").get(0).getContext("2d");
        var data = {
            labels: {!! json_encode($dataLabels) !!},
            datasets: [
                {
                    label: "{!! Lang::get('sendout.chart.open') !!}",
                    fillColor: "rgba(138,177,65,1)",
                    strokeColor: "rgba(138,177,65,0.5)",
                    pointColor: "rgba(26,179,148,0.5)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(151,187,205,1)",
                    data: {!! json_encode($dataOpen) !!}
                },
            ]
        };

        var options = {
            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines : true,
            //String - Colour of the grid lines
            scaleGridLineColor : "rgba(0,0,0,.05)",
            //Number - Width of the grid lines
            scaleGridLineWidth : 1,
            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,
            //Boolean - Whether the line is curved between points
            bezierCurve : false,
            //Number - Tension of the bezier curve between points
            bezierCurveTension : 0.4,
            //Boolean - Whether to show a dot for each point
            pointDot : true,
            //Number - Radius of each point dot in pixels
            pointDotRadius : 4,
            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth : 1,
            //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
            pointHitDetectionRadius : 20,
            //Boolean - Whether to show a stroke for datasets
            datasetStroke : true,
            //Number - Pixel width of dataset stroke
            datasetStrokeWidth : 2,
            //Boolean - Whether to fill the dataset with a colour
            datasetFill : true,
            //String - A tooltip template
            multiTooltipTemplate : "<%= datasetLabel %> - <%= value %>",
        };

        var myLineChart = new Chart(ctx).Bar(data, options);

        // STATS PIE
        var canvas = $("#stats-pie").get(0).getContext("2d");
        var data = [
            {
                value : {{ $statsData['sent'] - $statsData['open'] - $statsData['bounce']}},
                color : "#ABABAB",
                label : '{{ round($statsData['sent_percentage'], 0) - round($statsData['open_percentage'], 0) - round($statsData['bounce_percentage'], 0)}}% {!! Lang::get('sendout.chart.unknown') !!}',
                labelColor : 'white',
                labelFontSize : '16',
            },
            {
                value : {{ $statsData['open'] }},
                color : "#8ab141",
                label : '{{ round($statsData['open_percentage'], 0) }}% {!! Lang::get('sendout.chart.open') !!}',
                labelColor : 'white',
                labelFontSize : '16',
            },
            {
                value : {{ $statsData['bounce'] }},
                color : "#ed5565",
                label : '{{ round($statsData['bounce_percentage'], 0) }}% {!! Lang::get('sendout.chart.bounce') !!}',
                labelColor : 'white',
                labelFontSize : '16',
            }
        ];

        var statsPie = new Chart(canvas).Pie(data, {
            animation: false,
            tooltipTemplate : "<%if (label){%><%=label%><%}%>",
            legendTemplate : ""
                +"<ul class=\"<%=name.toLowerCase()%>-legend\">"
                +"    <% for (var i=0; i<segments.length; i++){%>"
                +"        <li>"
                +"            <span style=\"background-color:<%=segments[i].fillColor%>\"></span>"
                +"            <p><%if(segments[i].label){%><%=segments[i].label%><br><%=segments[i].value%> {!! Lang::get('sendout.chart.count') !!}<%}%></p>"
                +"        </li>"
                +"    <%}%>"
                +"</ul>",
        });

        document.getElementById('js-legend').innerHTML = statsPie.generateLegend();
    </script>

    <style>
    .pie-legend {
        padding-left: 0px;
    }
    .pie-legend li {
        list-style-type: none;
    }

    .pie-legend li span {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-right: 5px;
    }

    .pie-legend li p {
        display: inline-table;
    }
    </style>
@stop