@extends('layouts.painel')


@section('title')
    {{ $title }}
@endsection

@section('content')
    <!-- Chart weekly -->
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header border-0">
                <div class="d-flex justify-content-between">
                    <h3 class="card-title">Vendas da Semana <span class="text-success"> (Finalizados)</span></h3>
                    <a href="{{ route('sales') }}">Visualizar</a>
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex">
                    <p class="d-flex flex-column">
                        <span class="text-bold text-lg" id="total_sale_weekly">R$ 0,00</span>
                        <span>Total da semana atual</span>
                    </p>
                    <p class="ml-auto d-flex flex-column text-right">

                        <span id="total_sale_weekly_comparative" class="text-info">
                            <i class="fas fa-arrow-up"></i> 0.00%
                        </span>

                        <span class="text-muted">Desde a ultima semana</span>
                    </p>
                </div>
                <!-- /.d-flex -->

                <div class="position-relative mb-4">
                    <canvas id="sales_chart_weekly" height="200"></canvas>
                </div>

            </div>
        </div>
        <!-- /.card -->
    </div>

    <!-- Chart Weekly general-->
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header border-0">
                <div class="d-flex justify-content-between">
                    <h3 class="card-title">Vendas da Semana <span class="text-warning"> (Gerais)</span></h3>
                    <a href="{{ route('sales') }}">Visualizar</a>
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex">
                    <p class="d-flex flex-column">
                        <span class="text-bold text-lg" id="total_sale_weekly_full_total">R$ 0,00</span>
                        <span>Total da semana atual</span>
                    </p>
                    <p class="ml-auto d-flex flex-column text-right">

                        <span id="total_sale_weekly_full_comparative" class="text-info">
                            <i class="fas fa-arrow-up"></i> 0.00%
                        </span>

                        <span class="text-muted">Desde a ultima semana</span>
                    </p>
                </div>
                <!-- /.d-flex -->

                <div class="position-relative mb-4">
                    <canvas id="sales_chart_weekly_full" height="200"
                        style="    display: block;
                            width: 484px;
                            height: 200px;"></canvas>
                </div>

            </div>
        </div>
        <!-- /.card -->
    </div>

    <!-- Chart Monthly -->
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header border-0">
                <div class="d-flex justify-content-between">
                    <h3 class="card-title">Vendas do Ano <span class="text-success">(Finalizados)</span> </h3>
                    <a href="{{ route('sales') }}">Visualizar</a>
                </div>
            </div>
            <div class="card-body">
                <div class="d-flex">
                    <p class="d-flex flex-column">
                        <span class="text-bold text-lg" id="total_sale_monthly">R$ 0,00</span>
                        <span>Total dos últimos 12 meses</span>
                    </p>
                    <p class="ml-auto d-flex flex-column text-right">

                        <span id="total_sale_monthly_comparative" class="text-info">
                            <i class="fas fa-arrow-up"></i> 0.00%
                        </span>

                        <span class="text-muted">Desde o último ano</span>
                    </p>
                </div>
                <!-- /.d-flex -->

                <div class="position-relative mb-4">
                    <canvas id="sales_chart_monthly" height="200"></canvas>
                </div>

            </div>
        </div>
        <!-- /.card -->
    </div>
@endsection

@section('scripts')
    <!-- OPTIONAL SCRIPTS -->
    <script src="{{ asset('plugins/chart.js/Chart.min.js') }}"></script>
    <script src="{{ asset('dist/js/pages/dashboard3.js') }}"></script>
    <script>
        $.post("/dashboard/sales/weekly", {
            _token: '{{ csrf_token() }}'
        }, function(response) {
            var icon;
            var wclass;
            if (response.percentage > 0) {
                icon = "fa-arrow-up";
                wclass = "text-success";
            } else if (response.percentage < 0) {
                icon = "fa-arrow-down";
                wclass = "text-danger";
            } else {
                icon = "fa-arrow-right";
                wclass = "text-info";
            }
            $("#total_sale_weekly_comparative").html('<i class="fas ' + icon + '"></i> ' + response.percentage +
                '%').removeClass($('#total_sale_weekly_comparative').attr('class')).addClass(wclass);
            $("#total_sale_weekly").html(formatCurrency(response.current_total));
            renderChartWeekly(response.labels, response.current_data, response.last_data);
        });

        $.post("/dashboard/sales/weeklyFull", {
            _token: '{{ csrf_token() }}'
        }, function(response) {

            var icon;
            var wclass;
            if (response.percentage > 0) {
                icon = "fa-arrow-up";
                wclass = "text-success";
            } else if (response.percentage < 0) {
                icon = "fa-arrow-down";
                wclass = "text-danger";
            } else {
                icon = "fa-arrow-right";
                wclass = "text-info";
            }
            $("#total_sale_weekly_full_comparative").html('<i class="fas ' + icon + '"></i> ' + response
                .percentage + '%').removeClass($('#total_sale_weekly_comparative').attr('class')).addClass(
                wclass);
            $("#total_sale_weekly_full_total").html(formatCurrency(response.current_total));
            renderChartWeeklyFull(response.labels, response.current_data, response.last_data);
        });

        $.post("/dashboard/sales/monthly", {
            _token: '{{ csrf_token() }}'
        }, function(response) {
            var icon;
            var wclass;
            if (response.percentage > 0) {
                icon = "fa-arrow-up";
                wclass = "text-success";
            } else if (response.percentage < 0) {
                icon = "fa-arrow-down";
                wclass = "text-danger";
            } else {
                icon = "fa-arrow-right";
                wclass = "text-info";
            }
            $("#total_sale_monthly_comparative").html('<i class="fas ' + icon + '"></i> ' + response.percentage +
                '%').removeClass($('#total_sale_monthly_comparative').attr('class')).addClass(wclass);
            $("#total_sale_monthly").html(formatCurrency(response.current_total));
            renderChartMonthly(response.labels, response.current_data, response.last_data);
        });

        function renderChartWeekly(chart_labels, chart_current_data, chart_last_data) {

            var ticksStyle = {
                fontColor: '#495057',
                fontStyle: 'bold'
            }
            var mode = 'index'
            var intersect = true
            var salesChartWeekly = $('#sales_chart_weekly')

            // eslint-disable-next-line no-unused-vars
            var visitorsChart = new Chart(salesChartWeekly, {
                data: {
                    labels: chart_labels,
                    datasets: [{
                            type: 'line',
                            data: chart_current_data,
                            backgroundColor: 'transparent',
                            borderColor: '#007bff',
                            pointBorderColor: '#007bff',
                            pointBackgroundColor: '#007bff',
                            fill: false
                            // pointHoverBackgroundColor: '#007bff',
                            // pointHoverBorderColor    : '#007bff'
                        },
                        {
                            type: 'line',
                            data: chart_last_data,
                            backgroundColor: 'tansparent',
                            borderColor: '#ced4da',
                            pointBorderColor: '#ced4da',
                            pointBackgroundColor: '#ced4da',
                            fill: false
                            // pointHoverBackgroundColor: '#ced4da',
                            // pointHoverBorderColor    : '#ced4da'
                        }
                    ]
                },
                options: {
                    maintainAspectRatio: false,
                    tooltips: {
                        mode: mode,
                        intersect: intersect
                    },
                    hover: {
                        mode: mode,
                        intersect: intersect
                    },
                    legend: {
                        display: false
                    },
                    scales: {
                        yAxes: [{
                            // display: false,
                            gridLines: {
                                display: true,
                                lineWidth: '4px',
                                color: 'rgba(0, 0, 0, .2)',
                                zeroLineColor: 'transparent'
                            },
                            ticks: $.extend({
                                beginAtZero: true,
                                suggestedMax: 200
                            }, ticksStyle)
                        }],
                        xAxes: [{
                            display: true,
                            gridLines: {
                                display: false
                            },
                            ticks: ticksStyle
                        }]
                    }
                }
            })

        }

        function renderChartWeeklyFull(chart_labels, chart_current_data, chart_last_data) {
            var ticksStyle = {
                fontColor: '#495057',
                fontStyle: 'bold'
            }
            var mode = 'index'
            var intersect = true
            var salesChartWeekly = $('#sales_chart_weekly_full')

            // eslint-disable-next-line no-unused-vars
            var visitorsChart = new Chart(salesChartWeekly, {
                data: {
                    labels: chart_labels,
                    datasets: [{
                            type: 'line',
                            data: chart_current_data,
                            backgroundColor: 'transparent',
                            borderColor: '#007bff',
                            pointBorderColor: '#007bff',
                            pointBackgroundColor: '#007bff',
                            fill: false
                            // pointHoverBackgroundColor: '#007bff',
                            // pointHoverBorderColor    : '#007bff'
                        },
                        {
                            type: 'line',
                            data: chart_last_data,
                            backgroundColor: 'tansparent',
                            borderColor: '#ced4da',
                            pointBorderColor: '#ced4da',
                            pointBackgroundColor: '#ced4da',
                            fill: false
                            // pointHoverBackgroundColor: '#ced4da',
                            // pointHoverBorderColor    : '#ced4da'
                        }
                    ]
                },
                options: {
                    maintainAspectRatio: false,
                    tooltips: {
                        mode: mode,
                        intersect: intersect
                    },
                    hover: {
                        mode: mode,
                        intersect: intersect
                    },
                    legend: {
                        display: false
                    },
                    scales: {
                        yAxes: [{
                            // display: false,
                            gridLines: {
                                display: true,
                                lineWidth: '4px',
                                color: 'rgba(0, 0, 0, .2)',
                                zeroLineColor: 'transparent'
                            },
                            ticks: $.extend({
                                beginAtZero: true,
                                suggestedMax: 200
                            }, ticksStyle)
                        }],
                        xAxes: [{
                            display: true,
                            gridLines: {
                                display: false
                            },
                            ticks: ticksStyle
                        }]
                    }
                }
            })

        }

        function renderChartMonthly(chart_labels, chart_current_data, chart_last_data) {

            var ticksStyle = {
                fontColor: '#495057',
                fontStyle: 'bold'
            }
            var mode = 'index'
            var intersect = true
            var salesChartMonthly = $('#sales_chart_monthly')

            var chart_current_data_formated = [];
            Object.keys(chart_current_data).forEach(key => {
                chart_current_data_formated = chart_current_data_formated.concat(chart_current_data[key]);
            });

            var chart_last_data_formated = [];
            Object.keys(chart_last_data).forEach(key => {
                chart_last_data_formated = chart_last_data_formated.concat(chart_last_data[key]);
            });
            // eslint-disable-next-line no-unused-vars
            var visitorsChart = new Chart(salesChartMonthly, {
                data: {
                    labels: chart_labels,
                    datasets: [{
                            type: 'line',
                            data: chart_current_data_formated,
                            backgroundColor: 'transparent',
                            borderColor: '#007bff',
                            pointBorderColor: '#007bff',
                            pointBackgroundColor: '#007bff',
                            fill: false
                            // pointHoverBackgroundColor: '#007bff',
                            // pointHoverBorderColor    : '#007bff'
                        },
                        {
                            type: 'line',
                            data: chart_last_data_formated,
                            backgroundColor: 'tansparent',
                            borderColor: '#ced4da',
                            pointBorderColor: '#ced4da',
                            pointBackgroundColor: '#ced4da',
                            fill: false
                            // pointHoverBackgroundColor: '#ced4da',
                            // pointHoverBorderColor    : '#ced4da'
                        }
                    ]
                },
                options: {
                    maintainAspectRatio: false,
                    tooltips: {
                        mode: mode,
                        intersect: intersect
                    },
                    hover: {
                        mode: mode,
                        intersect: intersect
                    },
                    legend: {
                        display: false
                    },
                    scales: {
                        yAxes: [{
                            // display: false,
                            gridLines: {
                                display: true,
                                lineWidth: '4px',
                                color: 'rgba(0, 0, 0, .2)',
                                zeroLineColor: 'transparent'
                            },
                            ticks: $.extend({
                                beginAtZero: true,
                                suggestedMax: 200
                            }, ticksStyle)
                        }],
                        xAxes: [{
                            display: true,
                            gridLines: {
                                display: false
                            },
                            ticks: ticksStyle
                        }]
                    }
                }
            })

        }
    </script>
@endsection