@extends('layouts.tenant.layout_1.app')

@section('page_css')
    <link href="/metro/vendor/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
    <!-- Pick date -->
    <link rel="stylesheet" href="/metro/vendor/pickadate/themes/default.css">
    <link rel="stylesheet" href="/metro/vendor/pickadate/themes/default.date.css">
@stop

@include('lms.statistics.deals._stage')

@section('page_js')
    <!-- Chart.Js -->
    <script src="/metro/vendor/chart.js/Chart.bundle.min.js"></script>
    <script src="/metro/vendor/moment/moment.min.js"></script>
    <script src="/metro/vendor/bootstrap-daterangepicker/daterangepicker.js"></script>
    <script src="/metro/vendor/pickadate/picker.js"></script>
    <script src="/metro/vendor/pickadate/picker.date.js"></script>
    <script src="/metro/vendor/raphael/raphael.min.js"></script>
    <script src="/metro/vendor/morris/morris.min.js"></script>
    <!-- Svganimation scripts -->
    <script src="/metro/vendor/svganimation/vivus.min.js"></script>
    <script src="/metro/vendor/svganimation/svg.animation.js"></script>
    <script type="text/javascript">
        (function($) {
            "use strict"

            //date picker classic default
            // $('.input-daterange-datepicker').pickadate({});
            $('.input-daterange-datepicker').daterangepicker({
                formatSubmit: 'yyyy-mm-dd',
                buttonClasses: ['btn', 'btn-sm'],
                applyClass: 'btn-danger',
                cancelClass: 'btn-inverse'
            });

            $('.input-daterange-datepicker').on('apply.daterangepicker', function(ev, picker) {
                $('#frmFilterByDateRange').submit();
            });

            $('#pipeline').change(function() {
                $('#frmFilterByDateRange').submit();
            });

            $('#clear').on('click', function(e) {
                e.preventDefault();
                @if ($pipelines->count() > 0)
                    $('#pipeline').val("{{ $pipelines[0]->id }}").change()
                @endif
                $('#frmFilterByDateRange').submit()
            });

            var status_color_codes = [
                @foreach ($status_color_codes as $color)
                    '{{ $color }}'
                    @if (!$loop->last)
                        ,
                    @endif
                @endforeach
            ];

            Morris.Donut({
                element: 'morris_donught',
                data: [
                    @foreach ($overview_data as $data)
                        {
                            label: "{{ $data['label'] }}",
                            value: {{ $data['count'] }},
                        },
                    @endforeach
                ],
                resize: true,
                colors: status_color_codes
            });

            Morris.Area({
                element: 'morris_line',
                data: [
                    @foreach ($graph_one_data as $data_key => $data_value)
                        {
                            period: '{{ $data_key }}',
                            @foreach ($data_value as $data)
                                {{ $loop->index }}: {{ $data['count'] }},
                            @endforeach
                        },
                    @endforeach
                ],
                xkey: 'period',
                ykeys: [
                    @foreach ($stages as $stage)
                        '{{ $loop->index }}'
                        @if (!$loop->last)
                            ,
                        @endif
                    @endforeach
                ],
                labels: [
                    @foreach ($stages as $stage)
                        '{{ $stage->name }}'
                        @if (!$loop->last)
                            ,
                        @endif
                    @endforeach
                ],
                pointSize: 3,
                fillOpacity: 0,
                pointStrokeColors: status_color_codes,
                behaveLikeLine: true,
                gridLineColor: 'transparent',
                lineWidth: 3,
                hideHover: 'auto',
                lineColors: status_color_codes,
                resize: true

            });

        })(jQuery);
    </script>
@endsection