@extends('layouts.main')

@section('title')
    Dashboard
@endsection

@section('style')
@endsection
@section('content')
    @if($errors->any())
        @foreach ($errors->all() as $error)
            <div class="alert alert-danger mb-2" role="alert">
                <strong>{{$error}}</strong>
            </div>
        @endforeach
    @endif
    @if ($message = Session::get('success'))
        <div class="alert alert-success mb-2" role="alert">
            <strong>{{$message}}</strong>
        </div>
    @endif

        <div class="content-wrapper"><!--Statistics cards Starts-->
            <div class="row">
                <div class="col-12 mt-3 mb-1">
                    <div class="content-header">Welcome, {{Auth::user()->first_name}} {{Auth::user()->last_name}}</div>
                    <p class="content-sub-header">Statistics on minimal cards.</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 text-left">
                    <span class="text-white" style="font-size: 22px"><i class="fa ft-clock mr-2"></i>2 Days Remaining send Facility agreement</span>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-4 col-lg-6 col-md-6 col-12">
                    <div class="card gradient-blackberry">
                        <div class="card-content">
                            <div class="card-body pt-2 py-2 pb-0">
                                <div class="row mt-3">
                                    <div class="col-md-4 text-center">
                                        <img class="media-object d-flex mt-2 round-media" src="{{asset('uploads/avatars')}}/{{Auth::user()->avatar}}" alt="Generic placeholder image" style="width: 100px;height: 100px;border-radius: 50%;border: 5px solid #3eaef3;">
                                    </div>
                                    <div class="col-md-8 text-left">
                                        <hr style="border: 2px solid #ffff;">
                                        <span class="text-white">Profile Visits New Connections</span>
                                        <hr style="border: 2px solid #ffff;">
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-6 col-md-6 col-12">
                    <div class="card gradient-blackberry">
                        <div class="card-content">
                            <div class="card-body pt-2 py-3 pb-0">
                                <div class="row mt-1 mb-1">
                                    <div class="col-md-12" style="border: 3px solid #ffffff;">
                                        <div class="row mt-2">
                                            <div class="col-md-6 text-center text-white">
                                                Invested
                                                <div class="mt-1" style="margin-left: 30%;border: 3px solid #ffffff;padding: 5px;width: 40%;">
                                                    <div style="border: 3px solid #ffffff;">$12.02</div>
                                                </div>
                                                Grow Rate
                                            </div>
                                            <div class="col-md-6 text-center text-white">
                                                Capitial Gains
                                                <div class="mt-1" style="margin-left: 30%;border: 3px solid #ffffff;padding: 5px;width: 40%;">
                                                    <div style="border: 3px solid #ffffff;">$15.43</div>
                                                </div>
                                                Grow Rate
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-6 col-md-6 col-12">
                    <div class="card gradient-blackberry">
                        <div class="card-content">
                            <div class="card-body pt-2 py-3 pb-0">
                                <div class="row" style="border: 3px solid #ffffff;padding: 5px">
                                    <span class="badge badge-warning" style="position: absolute;margin-top: -4%;background-color: #489ef3;color: white;margin-left: 38%;font-size: 20px;">Alerts</span>
                                    <div class="col-md-12 mt-2">
                                        <span class="badge badge-danger mr-2" style="border-radius: 30px">&nbsp;</span>
                                        <span class="text-white">New email from MMCC</span>
                                    </div>
                                    <div class="col-md-12 mt-2">
                                        <span class="badge badge-warning mr-2" style="border-radius: 30px">&nbsp;</span>
                                        <span class="text-white">New investor added</span>
                                    </div>
                                    <div class="col-md-12 mt-2">
                                        <span class="badge badge-primary mr-2" style="border-radius: 30px">&nbsp;</span>
                                        <span class="text-white">Article: "Maryland Cannabis Diversity"</span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="row">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body"></div>
                    </div>
                </div>
            </div>


        </div>
@endsection

@section('script')
    <script src="{{asset('app-assets/vendors/js/chartist.min.js')}}" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            var widgetlineChart = new Chartist.Line('#Widget-line-chart', {
                labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"],
                series: [
                    [50, 45, 60, 55, 70, 55, 60, 55, 65, 57, 60, 53, 53]
                ]
            }, {
                axisX: {
                    showGrid: true,
                    showLabel: false,
                    offset: 0,
                },
                axisY: {
                    showGrid: false,
                    low: 40,
                    showLabel: false,
                    offset: 0,
                },
                lineSmooth: Chartist.Interpolation.cardinal({
                    tension: 0
                }),
                fullWidth: true,
            });

            // line chart widget 1 configuration Ends

            // line chart widget 2 configuration Starts
            var widgetlineChart1 = new Chartist.Line('#Widget-line-chart1', {
                labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"],
                series: [
                    [50, 45, 60, 55, 70, 55, 60, 55, 65, 57, 60, 53, 53]
                ]
            }, {
                axisX: {
                    showGrid: true,
                    showLabel: false,
                    offset: 0,
                },
                axisY: {
                    showGrid: false,
                    low: 40,
                    showLabel: false,
                    offset: 0,
                },
                lineSmooth: Chartist.Interpolation.cardinal({
                    tension: 0
                }),
                fullWidth: true,
            });

            // line chart widget 2 configuration Ends

            // line chart widget 3 configuration Starts
            var widgetlineChart2 = new Chartist.Line('#Widget-line-chart2', {
                labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"],
                series: [
                    [50, 45, 60, 55, 70, 55, 60, 55, 65, 57, 60, 53, 53]
                ]
            }, {
                axisX: {
                    showGrid: true,
                    showLabel: false,
                    offset: 0,
                },
                axisY: {
                    showGrid: false,
                    low: 40,
                    showLabel: false,
                    offset: 0,
                },
                lineSmooth: Chartist.Interpolation.cardinal({
                    tension: 0
                }),
                fullWidth: true,
            });

            // line chart widget 3 configuration Ends

            // line chart widget 4 configuration Starts
            var widgetlineChart3 = new Chartist.Line('#Widget-line-chart3', {
                labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"],
                series: [
                    [50, 45, 60, 55, 70, 55, 60, 55, 65, 57, 60, 53, 53]
                ]
            }, {
                axisX: {
                    showGrid: true,
                    showLabel: false,
                    offset: 0,
                },
                axisY: {
                    showGrid: false,
                    low: 40,
                    showLabel: false,
                    offset: 0,
                },
                lineSmooth: Chartist.Interpolation.cardinal({
                    tension: 0
                }),
                fullWidth: true,
            });


            var lineArea2 = new Chartist.Line('#line-area2', {
                    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    series: [
                        [5, 30, 25, 55, 45, 65, 60, 105, 80, 110, 120, 150],
                        [80, 95, 87, 155, 140, 147, 130, 180, 160, 175, 165, 200]
                    ]
                }, {
                    showArea: true,
                    fullWidth: true,
                    lineSmooth: Chartist.Interpolation.none(),
                    axisX: {
                        showGrid: false,
                    },
                    axisY: {
                        low: 0,
                        scaleMinSpace: 50,
                    }
                },
                [
                    ['screen and (max-width: 640px) and (min-width: 381px)', {
                        axisX: {
                            labelInterpolationFnc: function (value, index) {
                                return index % 2 === 0 ? value : null;
                            }
                        }
                    }],
                    ['screen and (max-width: 380px)', {
                        axisX: {
                            labelInterpolationFnc: function (value, index) {
                                return index % 3 === 0 ? value : null;
                            }
                        }
                    }]
                ]);



            var lineChart = new Chartist.Line('#lineChart', {
                labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                series: [
                    [80, 85, 75, 65, 63, 70, 82]
                ]
            }, {
                axisX: {
                    showGrid: false
                },
                axisY: {
                    showGrid: false,
                    showLabel: false,
                    low: 0,
                    high: 100,
                    offset: 0,
                },
                fullWidth: true,
                offset: 0,
            });

            lineChart.on('created', function (data) {
                var circleRadius = 4;
                if (data.type === 'point') {
                    var circle = new Chartist.Svg('circle', {
                        cx: data.x,
                        cy: data.y,
                        r: circleRadius,
                        class: 'ct-point-circle'
                    });

                    data.element.replace(circle);
                }
                else if (data.type === 'label') {
                    // adjust label position for rotation
                    const dX = data.width / 2 + (30 - data.width)
                    data.element.attr({ x: data.element.attr('x') - dX })
                }
            });




            // line chart widget 1 configuration Starts
            var viewerlineChart1 = new Chartist.Line('#viewer-line-chart', {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug"],
                series: [
                    [55, 60, 50, 55, 50, 60, 55, 57]
                ]
            }, {
                axisX: {
                    showGrid: false,
                    showLabel: false,
                    offset: 0,
                },
                axisY: {
                    showGrid: false,
                    low: 50,
                    showLabel: false,
                    offset: 0,
                },
                fullWidth: true
            });

            // line chart widget 1 configuration Ends

            // line chart widget 2 configuration Starts
            var viewerlineChart2 = new Chartist.Line('#viewer-line-chart2', {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug"],
                series: [
                    [55, 60, 50, 55, 50, 60, 55, 57]
                ]
            }, {
                axisX: {
                    showGrid: false,
                    showLabel: false,
                    offset: 0,
                },
                axisY: {
                    showGrid: false,
                    low: 50,
                    showLabel: false,
                    offset: 0,
                },
                fullWidth: true
            });

            // line chart widget 2 configuration Ends

            // line chart widget 3 configuration Starts
            var viewerlineChart3 = new Chartist.Line('#viewer-line-chart3', {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug"],
                series: [
                    [55, 60, 50, 55, 50, 60, 55, 57]
                ]
            }, {
                axisX: {
                    showGrid: false,
                    showLabel: false,
                    offset: 0,
                },
                axisY: {
                    showGrid: false,
                    low: 50,
                    showLabel: false,
                    offset: 0,
                },
                fullWidth: true
            });

            // line chart widget 3 configuration Ends

            // line chart widget 4 configuration Starts
            var viewerlineChart4 = new Chartist.Line('#viewer-line-chart4', {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug"],
                series: [
                    [55, 60, 50, 55, 50, 60, 55, 57]
                ]
            }, {
                axisX: {
                    showGrid: false,
                    showLabel: false,
                    offset: 0,
                },
                axisY: {
                    showGrid: false,
                    low: 50,
                    showLabel: false,
                    offset: 0,
                },
                fullWidth: true
            });

        });
    </script>
@endsection