@extends('admin.layouts.container')

@section('content')
<!-- ------------ line chart ------------- -->
<div class="row">
    <div class="col-lg-12">
        <h5>Business Stats</h5>
        <canvas class="border-item" id="lineChart" width="400" height="150"></canvas>
    </div>

    <div class="col-lg-6">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6>Users per Period</h6>
                <p></p>
                <!-- <p>2019-06-13 ~ 2019-06-19 | Last 7 days</p> -->
            </div>
            <div class="chartjs-wrapper">
                <iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
                <canvas id="chartjs-4" class="chartjs" width="962" height="550" style="display: block; height: 500px; width: 770px;"></canvas>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6>Users per Collection Month</h6>
                <p>The perefered Collecting role month for users </p>
                <!-- <p>2019-06-13 ~ 2019-06-19 | Last 7 days</p> -->
            </div>
            <div class="chartjs-wrapper">
                <iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: block; overflow: hidden; border: 0px; margin: 0px; top: 0px; left: 0px; bottom: 0px; right: 0px; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
                <canvas id="chartjs-5" class="chartjs" width="962" height="550" style="display: block; height: 500px; width: 770px;"></canvas>
            </div>
        </div>
    </div>

    <!-- <div class="col-lg-6">
        <div class="new-users border-item">
            <div class="datatitle">
                <h6>New Reports</h6>
                <p>2019-06-13 ~ 2019-06-19 | Last 7 days</p>
            </div>

            <div class="items">
                <span class="number text-primary">
                    840
                </span>
                <div class="progress-item">
                    <p class="info"> New commers </p>
                    <div class="progress"><span class="bg-primary" data-value="60%"></span></div>
                </div>
            </div>

            <div class="items">
                <span class="number text-danger">
                    630
                </span>
                <div class="progress-item">
                    <p class="info"> uncompleted process </p>
                    <div class="progress"><span class="bg-danger" data-value="80%"></span></div>
                </div>
            </div>

        </div>
    </div> -->

    <div class="col-lg-12">
        <h5>Visits Stats</h5>
        <canvas class="border-item" id="visitsChart" width="400" height="150"></canvas>
    </div>

</div>
@endsection

@section('inner_js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script>
    let labels= ['0',... "{{ implode(',', array_keys($loopsStats)) }}".split(',')]
    let data= ['0',... "{{ implode(',', $loopsStats ) }}".split(',')]
    console.clear()


    var ctx = document.getElementById('lineChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            // labels: ['0', '15 / 6', '16 / 6', '17 / 6', '18 / 6', '19 / 6', '20 / 6', '21 / 6'],
            labels: labels,
            datasets: [{
                label: ' Subscribers In loops per month',
                data: data,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    labels= ['0',... "{{ implode(',', array_keys($visitsStats)) }}".split(',')]
    data= ['0',... "{{ implode(',', $visitsStats ) }}".split(',')]
    console.clear()


    var ctx = document.getElementById('visitsChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            // labels: ['0', '15 / 6', '16 / 6', '17 / 6', '18 / 6', '19 / 6', '20 / 6', '21 / 6'],
            labels: labels,
            datasets: [{
                label: ' Website Visits',
                data: data,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>

<script>
    labels= "{{ implode(',', array_keys($usersStats)) }}".split(',')
    data= "{{ implode(',', $usersStats ) }}".split(',')
    console.clear()
    console.log({labels});

    new Chart(document.getElementById("chartjs-4"), {
        "type": "doughnut",
        "data": {
            // "labels": ["completed Profiles", "uncompleted Profiles", "waiting Approval"],
            "labels": labels,
            "datasets": [{
                "label": "Users period",
                "data": data,
                "backgroundColor": ["rgb(33, 255, 13)", "rgb(220, 53, 69)", "rgb(21, 97, 203)"]
            }]
        }
    });

    labels= "{{ implode(',', array_keys($monthsStats)) }}".split(',')
    data= "{{ implode(',', $monthsStats ) }}".split(',')
    console.clear()
    console.log({labels});

    new Chart(document.getElementById("chartjs-5"), {
        "type": "doughnut",
        "data": {
            // "labels": ["completed Profiles", "uncompleted Profiles", "waiting Approval"],
            "labels": labels,
            "datasets": [{
                "label": "Users collection month",
                "data": data,
                "backgroundColor": ["rgb(33, 255, 13)", "rgb(220, 53, 69)", "rgb(21, 97, 203)"]
            }]
        }
    });
</script>

@endsection