@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.leads._status')

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

    var status_color_codes = [@foreach($status_color_codes as $color)'{{ $color }}'@if(!$loop->last),@endif @endforeach];
    
    Morris.Donut({
        element: 'morris_donught',
        data: [@foreach(config('env.lead_submit_status') as $k => $val)
            {
                label: "{{ $val }}",
                value: {{ $overview_data[$k]['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(config('env.lead_submit_status') as $k => $val)'{{ $loop->index }}'@if(!$loop->last),@endif @endforeach],
        labels: [@foreach(config('env.lead_submit_status') as $k => $val)'{{ $val }}'@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