@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('dashboard._index')

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

})(jQuery);
</script>
<script type="text/javascript">
    $(document).ready(function() {
        var ctx = document.getElementById('lineChart_1').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [
                    @foreach($graph_one_data as $data)
                        '{{ $data['date'] }}',
                    @endforeach
                ],
                datasets: [{
                    label: 'Leads',
                    data: [
                        @foreach($graph_one_data as $data)
                            '{{ $data['count'] }}',
                        @endforeach
                    ],
                    backgroundColor: 'rgba(0, 123, 255, 0.5)',
                    borderColor: 'rgba(0, 123, 255, 1)',
                    borderWidth: 1,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            stepSize: 1
                        }
                    }]
                }
            }
        });
    });
</script>
@endsection