@extends('admin.index2')
@section('icerik')

        <div class="row row-cols-1 row-cols-lg-3">
            <div class="col">
                <div class="card radius-10">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <p class="mb-0">Bugün Randevu</p>
                                <h4 class="font-weight-bold">{{ $bugun }} </h4>

                                <p class="text-success mb-0 font-13">{{ number_format($gecenhafta,2) }} Kişi / Gün (Geçen Hafta Ortalaması)</p>
                            </div>
                            <div class="widgets-icons bg-gradient-cosmic text-white"><i class="bx bx-refresh"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card radius-10">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <p class="mb-0">Bu Ay Randevu</p>
                                <h4 class="font-weight-bold">{{ number_format($buay,0) }}</h4>
                                <p class="text-secondary mb-0 font-13">Geçmiş altı ayın aylık ortalaması {{ number_format($altiay,2) }}</p>
                            </div>
                            <div class="widgets-icons bg-gradient-burning text-white"><i class="bx bx-group"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card radius-10">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <p class="mb-0">Son Randevu <small>{{ @\Illuminate\Support\Carbon::createFromDate($sonrandevu->rot)->format('d/m/Y H:i:s') }}</small></p>
                                <h4 class="font-weight-bold">{{ @$sonrandevu->musteriisim }}</h4>
                                <p class="text-secondary mb-0 font-13">{{ @\Illuminate\Support\Carbon::createFromDate($sonrandevu->tarih)->format('d/m/Y H:i') }} - <i class="bx bx-user-plus"></i> {{ @$sonrandevu->doktor }}</p>
                            </div>
                            <div class="widgets-icons bg-gradient-lush text-white"><i class="bx bx-time"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-12 col-lg-12">
<div class="card">
    <div class="card-body">


        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

        <canvas id="barChart" style="width: 100%; height: 500px"></canvas>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var ctx = document.getElementById('barChart').getContext('2d');

                var data = {!! json_encode($grafik) !!};

                var labels = data.map(function (item) {
                    // Format date as d/m/Y
                    var date = new Date(item.day);
                    var formattedDate = date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear();
                    return formattedDate;
                });

                var counts = data.map(function (item) {
                    return item.count;
                });

                var chart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Randevu Sayısı', // Change label to "Randevu Sayısı"
                            data: counts,
                            backgroundColor: 'rgba(75, 192, 192, 0.6)',
                            borderColor: 'rgba(75, 192, 192, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true,
                                stepSize: 1
                            }
                        }
                    }
                });
            });
        </script>

    </div>

</div></div>

        </div>
        <!--end row-->



@endsection