@php
    $tiles = [
        ['icon' => 'calendar-8', 'color' => 'primary', 'value' => $today['total'], 'label' => trans('clinic.home.today_total'),
            'sub' => trans('clinic.home.cancelled_count', ['count' => $today['cancelled']])],
        ['icon' => 'check-circle', 'color' => 'success', 'value' => $today['paid'], 'label' => trans('clinic.home.today_paid'),
            'sub' => number_format($today['paid_amount'], 2)],
        ['icon' => 'time', 'color' => 'warning', 'value' => $today['unpaid'], 'label' => trans('clinic.home.today_unpaid'),
            'sub' => number_format($today['unpaid_amount'], 2)],
        ['icon' => 'arrows-circle', 'color' => 'info', 'value' => $today['followups'], 'label' => trans('clinic.home.today_followups'),
            'sub' => null],
    ];
@endphp

<div class="card card-flush mb-8">
    <div class="card-header pt-6">
        <h3 class="card-title align-items-start flex-column">
            <span class="card-label fw-bold text-gray-900">{{ trans('clinic.home.today_section') }}</span>
            <span class="text-muted mt-1 fw-semibold fs-7">{{ now()->translatedFormat('l j F Y') }}</span>
        </h3>
    </div>
    <div class="card-body pt-4">
        <div class="row g-5 mb-6">
            @foreach ($tiles as $tile)
                <div class="col-6 col-lg-3">
                    <div class="bg-light-{{ $tile['color'] }} rounded-3 p-5 h-100 d-flex align-items-center gap-4">
                        <i class="ki-duotone ki-{{ $tile['icon'] }} fs-3x text-{{ $tile['color'] }}"><span class="path1"></span><span class="path2"></span></i>
                        <div class="d-flex flex-column min-w-0">
                            <span class="fs-2x fw-bold text-gray-900 lh-1 mb-1">{{ number_format($tile['value']) }}</span>
                            <span class="fs-7 fw-semibold text-gray-700">{{ $tile['label'] }}</span>
                            @if ($tile['sub'] !== null)
                                <span class="fs-8 text-muted">{{ $tile['sub'] }}</span>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Status strip: count + amount per status. Each chip also filters today's table below. --}}
        <div class="fs-6 fw-bold text-gray-700 mb-3">{{ trans('clinic.home.by_status') }}</div>
        <div class="d-flex flex-wrap gap-3" id="today_status_filter">
            @foreach ($today['by_status'] as $status => $row)
                <button type="button" class="btn btn-sm btn-light-{{ $statusColors[$status] }} d-flex align-items-center gap-2" data-status="{{ $status }}">
                    <span class="bullet bullet-dot bg-{{ $statusColors[$status] }} h-8px w-8px"></span>
                    <span class="fw-semibold">{{ trans('clinic.bookings.statuses.'.$status) }}</span>
                    <span class="badge badge-{{ $statusColors[$status] }}">{{ $row['count'] }}</span>
                    <span class="fs-8 opacity-75">{{ number_format($row['amount'], 2) }}</span>
                </button>
            @endforeach
            <button type="button" class="btn btn-sm btn-dark d-flex align-items-center gap-2 active" data-status="">
                <span class="fw-semibold">{{ trans('clinic.home.grand_total') }}</span>
                <span class="badge badge-light">{{ $today['grand_total']['count'] }}</span>
                <span class="fs-8 opacity-75">{{ number_format($today['grand_total']['amount'], 2) }}</span>
            </button>
        </div>
    </div>
</div>