@extends('admin.index')
@section('title')
    {{ translate("sales_reports") }} -
@endsection
@section('header')
@endsection
@section('content')

    <div class="row">
        <div class="col-lg-4 col-sm-6 col-12">
            <div class="card card-body p-3 mb-4">
                <div class="row">
                    <div class="col-8">
                        <div class="numbers">
                            <p class="text-sm mb-0 text-capitalize font-weight-bold">{{ translate("total_number_of_orders") }}</p>
                            <h5 class="font-weight-bolder mb-0">
                                {{ $stats['total_sales'] }}
                            </h5>
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                            <i class="fa fa-chart-bar text-lg opacity-10" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-sm-6 col-12">
            <div class="card card-body p-3 mb-4">
                <div class="row">
                    <div class="col-8">
                        <div class="numbers">
                            <p class="text-sm mb-0 text-capitalize font-weight-bold">{{ translate("total_number_of_ordered_products") }}</p>
                            <h5 class="font-weight-bolder mb-0">
                                {{ $stats['total_sales_product'] }}
                            </h5>
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                            <i class="fa fa-chart-bar text-lg opacity-10" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-sm-6 col-12">
            <div class="card card-body p-3 mb-4">
                <div class="row">
                    <div class="col-8">
                        <div class="numbers">
                            <p class="text-sm mb-0 text-capitalize font-weight-bold">{{ translate("number_of_products_pending_approval") }}</p>
                            <h5 class="font-weight-bolder mb-0">
                                {{ $stats['total_pending_product'] }}
                            </h5>
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                            <i class="fa fa-chart-bar text-lg opacity-10" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-sm-6 col-12">
            <div class="card card-body p-3 mb-4">
                <div class="row">
                    <div class="col-8">
                        <div class="numbers">
                            <p class="text-sm mb-0 text-capitalize font-weight-bold">{{ translate("number_of_products_waiting_for_shipment") }}</p>
                            <h5 class="font-weight-bolder mb-0">
                                {{ $stats['total_approved_cargo_waiting_product'] }}
                            </h5>
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                            <i class="fa fa-chart-bar text-lg opacity-10" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-sm-6 col-12">
            <div class="card card-body p-3 mb-4">
                <div class="row">
                    <div class="col-8">
                        <div class="numbers">
                            <p class="text-sm mb-0 text-capitalize font-weight-bold">{{ translate("number_of_products_in_shipment") }}</p>
                            <h5 class="font-weight-bolder mb-0">
                                {{ $stats['total_in_cargo_product'] }}
                            </h5>
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                            <i class="fa fa-chart-bar text-lg opacity-10" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-sm-6 col-12">
            <div class="card card-body p-3 mb-4">
                <div class="row">
                    <div class="col-8">
                        <div class="numbers">
                            <p class="text-sm mb-0 text-capitalize font-weight-bold">{{ translate("number_of_completed_products") }}</p>
                            <h5 class="font-weight-bolder mb-0">
                                {{ $stats['total_completed_product'] }}
                            </h5>
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                            <i class="fa fa-chart-bar text-lg opacity-10" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 col-sm-12 col-12">
            <div class="card card-body p-3 mb-4">
                <canvas id="chartLastWeekSales" width="400" height="200"></canvas>
            </div>
        </div>
        <div class="col-lg-6 col-sm-6 col-12">
            <div class="card card-body p-3 mb-4">
                <p>{{ translate("estimated_total_earnings_of_weekly_orders") }}</p>
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <td class="p-1 fw-bold">{{ translate("currency") }}</td>
                            <td class="p-1 fw-bold">{{ translate("total_of_orders") }}</td>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (get_currencies() as $item)
                            <tr>
                                <td>{{ $item->name }}</td>
                                <td>{{ $item->symbol }} {{ money($stats['money_total_weekly_sales'][$item->id] ?? 0) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('footer')
<script>
    var labels = {!! json_encode(array_keys($stats['chart_orders'])) !!};
    var values = {!! json_encode(array_values($stats['chart_orders'])) !!};

    const ctx = document.getElementById('chartLastWeekSales');
    const myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: '{{ translate("sales_made_in_the_last_7_days") }}',
                data: values,
                borderWidth: 1,
                backgroundColor: "#cb0c9f4f",
                fill: true
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
@endsection