@php
    // Two charts per row. Without the revenue chart, specialties takes its place beside the type split.
    $canViewRevenue = auth('admin')->user()->can('clinic.reports.view');
    $charts = [
        ['id' => 'chart_daily', 'col' => 'col-xl-8', 'icon' => 'chart-line-up', 'color' => 'primary', 'title' => trans('clinic.home.chart_daily')],
        ['id' => 'chart_status', 'col' => 'col-xl-4', 'icon' => 'chart-pie-simple', 'color' => 'success', 'title' => trans('clinic.home.chart_status')],
    ];
    if ($canViewRevenue) {
        $charts[] = ['id' => 'chart_revenue', 'col' => 'col-xl-8', 'icon' => 'dollar', 'color' => 'success', 'title' => trans('clinic.home.chart_revenue')];
    }
    $charts[] = ['id' => 'chart_types', 'col' => 'col-xl-4', 'icon' => 'category', 'color' => 'info', 'title' => trans('clinic.home.chart_types')];
    $charts[] = ['id' => 'chart_specialties', 'col' => $canViewRevenue ? 'col-xl-6' : 'col-xl-8', 'icon' => 'chart-simple', 'color' => 'warning', 'title' => trans('clinic.home.chart_specialties')];
@endphp

<h3 class="fs-4 fw-bold text-gray-800 mb-5">{{ trans('clinic.home.statistics') }}</h3>
<div class="row g-5 g-xl-8 mb-8">
    @foreach ($charts as $chart)
        <div class="{{ $chart['col'] }}">
            <div class="card card-flush h-100">
                <div class="card-header pt-6">
                    <h3 class="card-title d-flex align-items-center gap-3">
                        <span class="symbol symbol-35px">
                            <span class="symbol-label bg-light-{{ $chart['color'] }}">
                                <i class="ki-duotone ki-{{ $chart['icon'] }} fs-3 text-{{ $chart['color'] }}"><span class="path1"></span><span class="path2"></span></i>
                            </span>
                        </span>
                        <span class="card-label fw-bold text-gray-900 fs-6">{{ $chart['title'] }}</span>
                    </h3>
                </div>
                <div class="card-body pt-2">
                    <div id="{{ $chart['id'] }}" style="min-height: 300px"></div>
                </div>
            </div>
        </div>
    @endforeach

    <div class="{{ $canViewRevenue ? 'col-xl-6' : 'col-xl-12' }}">
        <div class="card card-flush h-100">
            <div class="card-header pt-6">
                <h3 class="card-title d-flex align-items-center gap-3">
                    <span class="symbol symbol-35px">
                        <span class="symbol-label bg-light-primary">
                            <i class="ki-duotone ki-medal-star fs-3 text-primary"><span class="path1"></span><span class="path2"></span></i>
                        </span>
                    </span>
                    <span class="card-label fw-bold text-gray-900 fs-6">{{ trans('clinic.home.top_doctors') }}</span>
                </h3>
            </div>
            <div class="card-body pt-2">
                <div class="table-responsive">
                    <table class="table align-middle table-row-dashed fs-6 gy-4">
                        <thead>
                        <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                            <th>{{ trans('clinic.doctors.title') }}</th>
                            <th>{{ trans('clinic.reports.bookings_in_range') }}</th>
                            <th>{{ trans('clinic.reviews.rating') }}</th>
                        </tr>
                        </thead>
                        <tbody class="text-gray-700 fw-semibold">
                        @forelse ($topDoctors as $row)
                            <tr>
                                <td>
                                    <div class="d-flex flex-column">
                                        <span class="text-gray-900">{{ $row['doctor']->name }}</span>
                                        @if ($row['doctor']->specialty)
                                            <span class="fs-8 text-muted">{{ $row['doctor']->specialty->name }}</span>
                                        @endif
                                    </div>
                                </td>
                                <td><span class="badge badge-light-primary fs-7">{{ $row['bookings_count'] }}</span></td>
                                <td>
                                    @if ($row['avg_rating'] !== null)
                                        <i class="ki-duotone ki-star fs-6 text-warning"></i> {{ $row['avg_rating'] }} / 5
                                    @else
                                        <span class="text-muted">{{ trans('clinic.reports.no_ratings') }}</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="3" class="text-center py-10 text-muted">{{ trans('clinic.common.no_records') }}</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>