@php($range = ['type' => $report['type'], 'from' => $report['from']->toDateString(), 'to' => $report['to']->toDateString()])
<x-admin.layout :title="__('Reports')">
    <x-admin.page-header :title="__('Reports')" :subtitle="__(':from to :to', ['from' => $report['from']->toFormattedDateString(), 'to' => $report['to']->toFormattedDateString()])">
        @can('reports.export')
            @foreach ($formats as $exportFormat => $formatLabel)
                <x-admin.button variant="secondary" icon="arrow-down-tray" :href="route('admin.reports.export', $range + ['format' => $exportFormat])">{{ $formatLabel }}</x-admin.button>
            @endforeach
            <x-admin.button variant="secondary" icon="printer" :href="route('admin.reports.print', $range)" target="_blank">{{ __('Print') }}</x-admin.button>
        @endcan
    </x-admin.page-header>

    @can('reports.export')
        @unless ($pdfCanShow)
            <div class="mb-6 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300">
                {{ __('This report has text the PDF download can\'t draw, such as Arabic or Bengali names. Use Print and choose "Save as PDF" instead.') }}
            </div>
        @endunless
    @endcan

    <x-admin.tabs :tabs="$types" :current="$report['type']" param="type" />

    <x-admin.card class="mb-6">
        <form method="GET" class="flex flex-wrap items-end gap-3">
            <input type="hidden" name="type" value="{{ $report['type'] }}">
            <div class="w-44"><x-admin.input name="from" type="date" :label="__('From')" :value="$range['from']" /></div>
            <div class="w-44"><x-admin.input name="to" type="date" :label="__('To')" :value="$range['to']" /></div>
            <x-admin.button type="submit" variant="secondary" icon="funnel">{{ __('Apply') }}</x-admin.button>
            <div class="flex flex-wrap gap-1">
                @foreach ($presets as $presetLabel => [$start, $end])
                    <x-admin.button size="sm" variant="ghost" :href="route('admin.reports.index', ['type' => $report['type'], 'from' => $start->toDateString(), 'to' => $end->toDateString()])">{{ $presetLabel }}</x-admin.button>
                @endforeach
            </div>
        </form>
    </x-admin.card>

    <div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        @foreach ($report['summary'] as [$label, $value, $valueFormat, $icon, $tone])
            <x-admin.stat :label="$label" :value="\App\Services\Admin\ReportService::format($value, $valueFormat)" :icon="$icon" :tone="$tone" />
        @endforeach
    </div>

    @if ($report['chart'])
        <x-admin.card :title="__(':report per day', ['report' => $report['title']])" class="mb-6">
            <div class="h-72">
                <canvas data-chart="{{ json_encode($report['chart']) }}" aria-label="{{ __(':report per day', ['report' => $report['title']]) }}" role="img"></canvas>
            </div>
        </x-admin.card>
    @endif

    <x-admin.card :padding="false">
        @if (! $rows)
            <x-admin.empty :message="__('Nothing to report for these dates.')" icon="chart-bar" />
        @else
            <div class="overflow-x-auto">
                <table class="table-base">
                    @include('admin.reports.partials.table', [
                        'numericClass' => '!text-end tabular-nums',
                        'bodyClass' => 'divide-y divide-gray-100 dark:divide-gray-800',
                        'footClass' => 'border-t-2 border-gray-200 font-semibold dark:border-gray-700',
                    ])
                </table>
            </div>
            @if (count($report['rows']) > count($rows))
                <p class="border-t border-gray-200 px-4 py-3 text-sm text-gray-500 dark:border-gray-800 dark:text-gray-400">
                    {{ __('Showing the first :shown of :total rows. Download the report to get all of them.', ['shown' => count($rows), 'total' => count($report['rows'])]) }}
                </p>
            @endif
        @endif
    </x-admin.card>
</x-admin.layout>