@extends('Common::admin.layout.page')
@section('page')
<!-- Small boxes (Stat box) -->
<div class="row">
    @foreach($counters as $count)
    <div class="col-lg-3 col-6">
        <!-- small box -->
        <div class="small-box bg-{{ $count['type'] }}">
            <div class="inner">
                <h3>{{ $count['count'] }}</h3>

                <p>{{ $count['title'] }}</p>
            </div>
            <div class="icon">
                <i class="ion fas {{ $count['icon'] }}"></i>
            </div>
            <a href="{{ $count['url'] }}" class="small-box-footer mlink">@lang('More') <i
                    class="fas fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
    @endforeach
</div>
<!-- /.row -->
<div class="row">
    <div class="col-sm-12 col-md-12">
        <!-- solid sales graph -->
        <!-- TABLE: LATEST ORDERS -->
        <div class="card">
            <div class="card-header border-transparent">
                <h3 class="card-title">@lang('Latest orders')</h3>

                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-tool" data-card-widget="remove">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table m-0">
                        <thead>
                            <tr>
                                <th>@lang('ID')</th>
                                <th>@lang('User')</th>
                                <th>@lang('Offers')</th>
                                <th>@lang('Created at')</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($latest_orders as $order)
                            <tr>
                                <td>{{ $order->id }}</td>
                                <td>{{ $order->user->name ?? '#' }}</td>
                                <td>
                                    <a class="mlink" href="{{ route('admin.offers.index' , ['order_id' => $order->id]) }}">
                                    {{ $order->offers()->count() ?? 0 }}
                                    </a>
                                </td>
                                <td>{{ $order->created_at }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <!-- /.table-responsive -->
            </div>
            <!-- /.card-body -->
            <div class="card-footer clearfix">
                <a href="{{ route('admin.offers.index') }}" class="mlink btn btn-sm btn-secondary float-right">@lang('Show all')</a>
            </div>
            <!-- /.card-footer -->
        </div>
        <!-- /.card -->
    </div>
    
</div>

<script>
    // The Calender
    $('#calendar').datetimepicker({
        format: 'L',
        inline: true
    });

    $('.knob').knob();

    // Sales graph chart
    var salesGraphChartCanvas = $('#line-chart').get(0).getContext('2d');
    //$('#revenue-chart').get(0).getContext('2d');
    var sales = JSON.parse("{{ json_encode($sales) }}");
    var salesGraphChartData = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [{
            label: 'إجمالى المبيعات',
            fill: false,
            borderWidth: 2,
            lineTension: 0,
            spanGaps: true,
            borderColor: '#efefef',
            pointRadius: 3,
            pointHoverRadius: 7,
            pointColor: '#efefef',
            pointBackgroundColor: '#efefef',
            data: sales
        }]
    }

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

    // This will get the first returned node in the jQuery collection.
    var salesGraphChart = new Chart(salesGraphChartCanvas, {
        type: 'line',
        data: salesGraphChartData,
        options: salesGraphChartOptions
    });
</script>

@if(isset($devices))
    <script>
        //-------------
        //- PIE CHART -
        //-------------
        // Get context with jQuery - using jQuery's .get() method.
        var devices = JSON.parse("{{ json_encode($devices) }}");
        var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
        var pieData = {
            labels: [
                'Android',
                "IOS"
            ],
            datasets: [{
                data: devices,
                backgroundColor: ['#f56954', '#00a65a'],
            }]
        }
        var pieOptions = {
            legend: {
                display: false
            }
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        var pieChart = new Chart(pieChartCanvas, {
            type: 'doughnut',
            data: pieData,
            options: pieOptions
        })

        //-----------------
        //- END PIE CHART -
        //-----------------
    </script>
@endif
@endsection