@extends('ATCore::atcore_layout')

@section('content')
@if (isset($account))
<div class="card">
    <div class="card-header">
        <h5 class="card-title">Resumen de Ventas Últimos 6 Meses</h5>
    </div>
    <!-- /.card-header -->

    <div class="card-body">
        <div class="row">
            <div class="col-md-12">
                <p class="text-center">
                    <strong>Ventas: {{ATFormatDate($from)}} - {{ATFormatDate($to)}}</strong>
                </p>

                <div class="chart">
                    <!-- Sales Chart Canvas -->
                    <canvas id="salesChart"></canvas>
                </div>
                <!-- /.chart-responsive -->
            </div>

            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- ./card-body -->
    <div class="card-footer">
        <div class="row">
            <div class="col-sm-4 col-6">
                <div class="description-block border-right">
                    <span class="description-percentage text-success">&nbsp;</span>
                    <h5 class="description-header">{{$totalReceipts}}</h5>
                    <span class="description-text">CANTIDAD DE BOLETAS EMITIDAS</span>
                </div>
                <!-- /.description-block -->
            </div>
            <!-- /.col -->
            <div class="col-sm-4 col-6">
                <div class="description-block border-right">
                    <span class="description-percentage {{$desc_per_color}}"><i class="fas {{$fa_caret}}"></i> {{$percentQuantityMonth}}%</span>
                    <h5 class="description-header">{{$quantityOfTheMonth}}</h5>
                    <span class="description-text">BOLETAS EMITIDAS ESTE MES</span>
                </div>
                <!-- /.description-block -->
            </div>
            <!-- /.col -->
            <div class="col-sm-4 col-6">
                <div class="description-block border-right">
                    <span class="description-percentage {{$desc_per_color_sale}}"><i class="fas {{$fa_caret_sale}}"></i> {{$percentSalesMonth}}%</span>
                    <h5 class="description-header">{{ATFormatMoney($salesOfTheMonth)}}</h5>
                    <span class="description-text">VENTAS DEL MES</span>
                </div>
                <!-- /.description-block -->
            </div>
            <!-- /.col -->

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

@if (isset($branchSales))
<div class="card">
    <div class="card-header">
        <h5 class="card-title">Resumen Total de Ventas por Sucursal</h5>
    </div>
    <!-- /.card-header -->
    <div class="card-body">
        <div class="row">
            <div class="col-md-8">
                <div class="chart">
                    <!-- Sales Chart Canvas -->
                    <canvas id="branchSales"></canvas>
                </div>
                <!-- /.chart-responsive -->
            </div>
            <!-- /.col -->
            <div class="col-md-4">
                <p class="text-center">
                    <strong>Ventas Por Sucursal</strong>
                </p>
                @foreach (explode(',',$branchSales) as $key=>$bs)
                <div class="progress-group">
                    {{$branchSalesLabel[$key]}}
                    <div>
                        <ul>
                            <li>Boletas: <strong>{{$branchQuantity[$key]}}</strong> | Ventas: <strong>{{ATFormatMoney($bs)}}</strong></li>
                        </ul>
                    </div>
                </div>
                <!-- /.progress-group -->
                @endforeach


            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>

</div>
@endif

@if (isset($branchSalesToday))
<div class="card">
    <div class="card-header">
        <h5 class="card-title">Resumen de Ventas de Hoy por Sucursal</h5>
    </div>
    <!-- /.card-header -->
    <div class="card-body">
        <div class="row">
            <div class="col-md-8">
                <div class="chart">
                    <!-- Sales Chart Canvas -->
                    <canvas id="branchSalesToday"></canvas>
                </div>
                <!-- /.chart-responsive -->
            </div>
            <!-- /.col -->
            <div class="col-md-4">
                <p class="text-center">
                    <strong>Ventas Por Sucursal</strong>
                </p>
                @foreach (explode(',',$branchSalesToday) as $key=>$bs)
                <div class="progress-group">
                    {{$branchSalesLabelToday[$key]}}
                    <div>
                        <ul>
                            <li>Boletas: <strong>{{$branchQuantityToday[$key]}}</strong> | Ventas: <strong>{{ATFormatMoney($bs)}}</strong></li>
                        </ul>
                    </div>
                </div>
                <!-- /.progress-group -->
                @endforeach


            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>

</div>
@endif

@if (isset($receiptsLastSevenDisplay))
<div class="card">
    <div class="card-header">
        <h5 class="card-title">Resumen Última Semana por Sucursal</h5>
    </div>
    <!-- /.card-header -->
    <div class="card-body">
        @foreach ($receiptsLastSevenDisplay as $user_email=>$rl7d)
        <div class="row">
            <div class="col-12">
                <div class="card" >
                    <div class="card-header bg-primary">
                        {{$user_email}}
                    </div>
                    <div class="card-body table-responsive p-0" style="width:100%">
                        <table class="table table-hover text-nowrap" style="width:100%">
                            <thead class="thead-dark">
                            <tr>
                                <th style="width: 34%">Fecha</th>
                                <th style="width: 33%">Boletas</th>
                                <th style="width: 33%">Monto</th>
                            </tr>
                            </thead>
                            @foreach ($rl7d as $keyDate=>$rl7dDetail)
                            <tr>
                                <td>{{ATFormatDate($keyDate)}}</td>
                                <td>{{$rl7dDetail['quantity']}}</td>
                                <td>{{ATFormatMoney($rl7dDetail['amount'])}}</td>
                            </tr>
                            @endforeach
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->
        @endforeach
    </div>

</div>
@endif
@endif
@endsection


@section('atplus_main_js')
@if (isset($account))
<script>
    @if (isset($montlyLabels))
    window.chartColors = {
        red: 'rgb(255, 99, 132)',
        orange: 'rgb(255, 159, 64)',
        yellow: 'rgb(255, 205, 86)',
        green: 'rgb(75, 192, 192)',
        blue: 'rgb(54, 162, 235)',
        purple: 'rgb(153, 102, 255)',
        grey: 'rgb(201, 203, 207)'
    };
    var ctx = document.getElementById('salesChart');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [{{$montlyLabels}}],
            datasets: [
            {
                label: 'Ventas (en miles de pesos)',
                data: [{{$montlyValues}}],
                borderColor: window.chartColors.blue,
                borderWidth: 1
            }
            ]
        },
        options: {
            aspectRatio: 5,

            scales: {
                xAxes: [{
                    ticks: {
                        // Include a dollar sign in the ticks
                        callback: function(value, index, values) {
                            return convert(value);
                        }
                    }
                }],
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
    @endif

    @if (isset($branchSalesLabel))
    var ctx2 = document.getElementById('branchSales');
    var myChart2 = new Chart(ctx2, {
        type: 'pie',
        data: {
            labels: [<br />
<b>Warning</b>:  implode(): Invalid arguments passed in <b>/home/chuquicamata/public_html/bridge2/resources/views/home.blade.php</b> on line <b>249</b><br />
""],
            datasets: [
            {
                label: 'Ventas',
                data: [{{$branchSales}}],
                backgroundColor: [window.chartColors.blue, window.chartColors.red, window.chartColors.green, window.chartColors.yellow, window.chartColors.orange, window.chartColors.purple, window.chartColors.gray],
                borderWidth: 1
            }
            ]
        },
        options: {
            aspectRatio: 3,
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                    //var dataValue = data.datasets[tooltipItem.datasetIndex].data || '';
                    return '$ '+(formatNumber(data.datasets[0].data[[tooltipItem.index]]));


                    }
                }
            }

        }
    });
    @endif

    @if (isset($branchSalesLabelToday))
    var ctx3 = document.getElementById('branchSalesToday');
    var myChart3 = new Chart(ctx3, {
        type: 'pie',
        data: {
            labels: [<br />
<b>Warning</b>:  implode(): Invalid arguments passed in <b>/home/chuquicamata/public_html/bridge2/resources/views/home.blade.php</b> on line <b>281</b><br />
""],
            datasets: [
            {
                label: 'Ventas',
                data: [{{$branchSalesToday}}],
                backgroundColor: [window.chartColors.blue, window.chartColors.red, window.chartColors.green, window.chartColors.yellow, window.chartColors.orange, window.chartColors.purple, window.chartColors.gray],
                borderWidth: 1
            }
            ]
        },
        options: {
            aspectRatio: 3,
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                    //var dataValue = data.datasets[tooltipItem.datasetIndex].data || '';
                    return '$ '+(formatNumber(data.datasets[0].data[[tooltipItem.index]]));
                    }
                }
            }
        }
    });
    @endif

    function convert(value){

        // Months array
        var months_arr = ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'];

        // Convert timestamp to milliseconds


        return months_arr[value-1];

    }


    function formatNumber(num) {
        return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')
    }
</script>
@stop
@endif