@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">

    <style>
        .clickable {
            cursor: pointer
        }
    </style>
@stop

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

@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();
            });

            $('#agent_button').on('click', function() {
                $('#frmFilterByDateRange').submit();
            });

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

            $('.clickable').on('click', function() {
                let agent_field = $('#agent').val();
                let agent_id = $(this).data('agent-id');

                if (agent_field.includes(agent_id.toString())) {
                    let index = agent_field.indexOf(agent_id.toString());
                    agent_field.splice(index, 1);
                } else {
                    agent_field.push(agent_id);
                }
                $('#agent').selectpicker('val', agent_field);
            });

            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 $k => $val)
                        {
                            label: "{{ $val['label'] }}",
                            value: {{ $val['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 ($overview_data as $k => $val)
                        '{{ $loop->index }}'
                        @if (!$loop->last)
                            ,
                        @endif
                    @endforeach
                ],
                labels: [
                    @foreach ($overview_data as $k => $val)
                        "{{ $val['label'] }}"
                        @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