@extends('admin.index')
@section('header')
@endsection
@section('content')
    <div class="p-3 mb-3 ">
        <h1 class="text-dark">{{ translate('welcome_message') }} <span class="fw-lighter">{{ Auth::user()->fullname() }}</span></h1>
    </div>

    <div class="alert alert-primary text-white">
        {{ translate('admin_panel_welcome') }}
    </div>

    <div class="row">
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-body p-3">
                    <div class="row">
                        <div class="col-8">
                            <div class="numbers">
                                <p class="text-sm mb-0 text-capitalize font-weight-bold">Toplam Ürün</p>
                                <h5 class="font-weight-bolder mb-0">
                                    {{ $product_count ?? 0 }} {{ translate("count") }}
                                </h5>
                            </div>
                        </div>
                        <div class="col-4 text-end">
                            <div class="bg-gradient-primary shadow text-center border-radius-md p-2 ps-0 pe-0">
                                <i class="fa fa-square text-white" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-body p-3">
                    <div class="row">
                        <div class="col-8">
                            <div class="numbers">
                                <p class="text-sm mb-0 text-capitalize font-weight-bold">{{ translate('total_categories') }}</p>
                                <h5 class="font-weight-bolder mb-0">
                                    {{ $category_count ?? 0 }} {{ translate("count") }}
                                </h5>
                            </div>
                        </div>
                        <div class="col-4 text-end">
                            <div class="bg-gradient-warning shadow text-center border-radius-md p-2 ps-0 pe-0">
                                <i class="fa fa-square text-white" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
            <div class="card">
                <div class="card-body p-3">
                    <div class="row">
                        <div class="col-8">
                            <div class="numbers">
                                <p class="text-sm mb-0 text-capitalize font-weight-bold">{{ translate('total_posts') }}</p>
                                <h5 class="font-weight-bolder mb-0">
                                    {{ $post_count ?? 0 }} {{ translate("count") }}
                                </h5>
                            </div>
                        </div>
                        <div class="col-4 text-end">
                            <div class="bg-gradient-info shadow text-center border-radius-md p-2 ps-0 pe-0">
                                <i class="fa fa-square text-white" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6">
            <div class="card">
                <div class="card-body p-3">
                    <div class="row">
                        <div class="col-8">
                            <div class="numbers">
                                <p class="text-sm mb-0 text-capitalize font-weight-bold">{{ translate('total_messages') }}</p>
                                <h5 class="font-weight-bolder mb-0">
                                    {{ $message_count ?? 0 }} {{ translate("count") }}
                                </h5>
                            </div>
                        </div>
                        <div class="col-4 text-end">
                            <div class="bg-gradient-dark shadow text-center border-radius-md p-2 ps-0 pe-0">
                                <i class="fa fa-square text-white" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div class="row">
        <div class="col-sm-6 col-12">
            <div class="card card-body p-3 my-4">
                <canvas id="chart1" width="400" height="200"></canvas>
            </div>
        </div>
    </div>
@endsection
@section('footer')
    <script>
        const ctx = document.getElementById('chart1');

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [@foreach($chart1 as $item) '{{ $item->category->content->name ?? "-" }}', @endforeach],
                datasets: [{
                    label: '{{ translate("product_count_by_category") }}',
                    data: [@foreach($chart1 as $item) {{ $item->total }}, @endforeach],
                    borderWidth: 1,
                    backgroundColor: "{!! get_colors(rand(0,7)) !!}"
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
@endsection