@extends('admin::index')

@section('content')

    <section class="content-header">
        <h1>
            {{ $header or trans('admin.title') }}
            <small>{{ $description or trans('admin.description') }}</small>
        </h1>
    </section>

    <section class="content">
        @include('partials.error')
        @include('admin::partials.exception')
        @include('admin::partials.toastr')

        <div class="row">
            <div class="col-sm-4 statistics">
                <div class="info-box">
                    <span class="info-box-icon bg-green"><i class="fa fa-product-hunt"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text bold">{{ __('Sản phẩm') }}</span>
                        <div class="h2 bold m-t-10">{{ number_format($total['products']) }}</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 statistics">
                <div class="info-box">
                    <span class="info-box-icon bg-blue"><i class="fa fa-user"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text bold">{{ __('Khách hàng') }}</span>
                        <div class="h2 bold m-t-10">{{ number_format($total['customers']) }}</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 statistics">
                <div class="info-box">
                    <span class="info-box-icon bg-orange"><i class="fa fa-file-text-o"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text bold">{{ __('Đơn hàng hôm nay') }}</span>
                        <div class="h2 bold m-t-10">{{ number_format($total['orders']) }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid">
            <div class="box p-25">
                <div class="flex space-between">
                    <div>
                        <h4 class="bold">{{ __('Đơn hàng') }}</h4>
                        @if($yearRange)
                            <div>
                                Năm: {{ $yearRange }}
                            </div>
                        @endif
                    </div>
                    {{ Form::open(array('route' => ['dashboard.index'], 'method' => 'GET', 'id' => 'rangeForm')) }}
                    <select id="range-btn" name="range" class="form-control" style="width: 80px" data-redirect="{{ route('dashboard.index') }}">
                        @foreach($chartRange as $key => $item)
                            <option value="{{ $key }}" {{ $key === $range ? 'selected' : '' }}>{{ __($item) }}</option>
                        @endforeach
                    </select>
                    {{ Form::close() }}
                </div>
                <canvas id="myChart"></canvas>
            </div>
            <div class="box p-25">
                <h4 class="bold">{{ __('Top sản phẩm') }}</h4>
                <table class="table table-bordered table-hover">
                    <thead>
                    <th class="vcenter" valign="middle">{{__('Sản phẩm')}}</th>
                    <th class="shirk vcenter" >{{__('Đã bán')}}</th>
                    </thead>
                    <tbody>
                    @foreach($products as $product)
                        <tr>
                            <td rowspan="1"><a target="_blank" href="{{ route('products.edit', $product->id) }}">{{ $product->name }}</a></td>
                            <td rowspan="1" class="text-center">{{ number_format($product->quantity) }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </section>
    <script type="text/javascript">
        $(function () {
            const ctx = document.getElementById('myChart').getContext('2d');
            var labels = JSON.parse('null');
            var values = JSON.parse('null');
            const myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '# of Orders',
                        data: values,
                        borderColor: [
                            '#e92a53'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                }
            });

            $('#range-btn').on('change', function (e) {
                $('#rangeForm').submit()
            })
        });
    </script>
@endsection

@push('styles')
    <style>
        .grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }
    </style>
@endpush