@extends('layouts.dashboard.template')

@section('content')
    <div class="container">
        <div class="row">
            <x-small-box :color="'bg-info'" :number="3" :text="'Ventas totales'" :icon="'fas fa-shopping-cart'" :url="''"
                :footerText="'Ver más'" />
            <x-small-box :color="'bg-success'" :number="5" :text="'Citas'" :icon="'fas fa-calendar-alt'" :url="''"
                :footerText="'Ver más'" />
            <x-small-box :color="'bg-warning'" :number="2" :text="'Agentes'" :icon="'fas fa-users'" :url="''"
                :footerText="'Ver más'" />
            <x-small-box :color="'bg-danger'" :number="100" :text="'Terrenos disponibles'" :icon="'fas fa-map-marker-alt'" :url="''"
                :footerText="'Ver más'" />

        </div>
        <div class="row">
            <div class="col-md-8">
                <x-card :title="'Propiedades disponibles'">
                    <x-slot:body>
                        <x-table :headers="$response['propertyAviable']['headers']" :dataCell="$response['propertyAviable']['data']" />
                    </x-slot>
                </x-card>
                <x-card :title="'Citas'">
                    <x-slot:body>
                        <x-table :headers="$response['appointments']['headers']" :dataCell="$response['appointments']['data']" />
                    </x-slot>
                </x-card>
            </div>
            <div class="col-md-4">
                <x-card :title="'Ventas del mes'">
                    <x-slot:body>
                        {{-- Grafico de ventas del mes --}}
                        {{-- <canvas id="salesChart" style="height: 180px; min-height: 180px; display: block; width: 100%;"></canvas> --}}
                        <canvas class="chart" id="line-chart"
                            style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                    </x-slot>
                    <x-slot:footer class="bg-transparent">
                        <div class="row">
                            <div class="col-4 text-center">
                                <input type="text" class="knob" data-readonly="true" value="20" data-width="60"
                                    data-height="60" data-fgColor="#39CCCC">

                                <div >Mail-Orders</div>
                            </div>
                            <!-- ./col -->
                            <div class="col-4 text-center">
                                <input type="text" class="knob" data-readonly="true" value="50" data-width="60"
                                    data-height="60" data-fgColor="#39CCCC">

                                <div >Online</div>
                            </div>
                            <!-- ./col -->
                            <div class="col-4 text-center">
                                <input type="text" class="knob" data-readonly="true" value="30" data-width="60"
                                    data-height="60" data-fgColor="#39CCCC">

                                <div >In-Store</div>
                            </div>
                            <!-- ./col -->
                        </div>

                    </x-slot>
                </x-card>
                <x-card :title="'Top Agentes'">
                    <x-slot:body>
                        <x-table :headers="$response['topAgents']['headers']" :dataCell="$response['topAgents']['data']" />
                    </x-slot>
                </x-card>
                <x-card :title="'Top Propiedades'">
                    <x-slot:body>
                        <x-table :headers="$response['topProperties']['headers']" :dataCell="$response['topProperties']['data']" />
                    </x-slot>
                </x-card>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $('.knob').knob()

        var salesGraphChartCanvas = $('#line-chart').get(0).getContext('2d')
        // $('#revenue-chart').get(0).getContext('2d');

        var salesGraphChartData = {
            labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18',
                '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'
            ],
            datasets: [{
                label: 'Digital Goods',
                fill: false,
                borderWidth: 2,
                lineTension: 0,
                spanGaps: true,
                borderColor: '#4d4d4d',
                pointRadius: 3,
                pointHoverRadius: 7,
                pointColor: '#4d4d4d',
                pointBackgroundColor: '#4d4d4d',
                // randmo data
                data: [10, 7, 20, 4, 5, 2, 3, 5, 7, 4, 30, 20, 10, 7, 20, 4, 5, 2, 3, 5, 7, 4, 30, 20, 10, 7,
                    20, 4,
                    5, 2
                ]
            }]
        }

        var salesGraphChartOptions = {
            maintainAspectRatio: false,
            responsive: true,
            legend: {
                display: false
            },
            scales: {
                xAxes: [{
                    ticks: {
                        fontColor: '#4d4d4d'
                    },
                    gridLines: {
                        display: false,
                        color: '#4d4d4d',
                        drawBorder: false
                    }
                }],
                yAxes: [{
                    ticks: {
                        fontColor: '#4d4d4d'
                    },
                    gridLines: {
                        display: true,
                        color: '#4d4d4d',
                        drawBorder: false
                    }
                }]
            }
        }

        // This will get the first returned node in the jQuery collection.
        // eslint-disable-next-line no-unused-vars
        var salesGraphChart = new Chart(salesGraphChartCanvas, { // lgtm[js/unused-local-variable]
            type: 'line',
            data: salesGraphChartData,
            options: salesGraphChartOptions
        })
    </script>
@endsection