@php
    $selectClass = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
    $takes = fn (string $filter): bool => $definition->takes($filter);
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <div>
            <a href="{{ route('crm.reports.index') }}" wire:navigate class="inline-flex items-center gap-1 text-xs font-medium text-slate-500 transition hover:text-slate-700">
                <x-icon name="chevron-left" class="h-3.5 w-3.5" /> {{ __('Report Centre') }}
            </a>
        </div>

        <x-page-header :title="$definition->title">
            @if ($canSchedule)
                <a href="{{ route('crm.reports.index', ['tab' => 'schedules', 'schedule' => $definition->key]) }}" wire:navigate>
                    <x-secondary-button type="button">
                        <x-icon name="clock" class="-ms-1 me-1.5 h-4 w-4" />
                        {{ __('Schedule') }}
                    </x-secondary-button>
                </a>
            @endif
            <x-secondary-button type="button" wire:click="download('xlsx')" wire:loading.attr="disabled" wire:target="download">
                <x-icon name="table-cells" class="-ms-1 me-1.5 h-4 w-4" />
                {{ __('Excel') }}
            </x-secondary-button>
            <x-button type="button" wire:click="download('pdf')" wire:loading.attr="disabled" wire:target="download">
                <x-icon name="arrow-down-tray" class="-ms-1 me-1.5 h-4 w-4" />
                <span wire:loading.remove wire:target="download">{{ __('Download PDF') }}</span>
                <span wire:loading wire:target="download">{{ __('Preparing...') }}</span>
            </x-button>
        </x-page-header>

        {{-- Filters --}}
        <x-card class="p-4 sm:p-5">
            <div class="mb-3 flex items-center gap-2">
                <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700">
                    <x-icon name="funnel" class="h-4 w-4" />
                </span>
                <h2 class="text-sm font-bold text-slate-900">{{ __('Filters') }}</h2>
                <span class="text-xs text-slate-400">{{ $group }}</span>
                <button type="button" wire:click="resetFilters" class="ms-auto text-xs font-medium text-indigo-600 transition hover:text-indigo-800">{{ __('Reset') }}</button>
            </div>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                @if ($definition->usesPeriod)
                    <div>
                        <x-label for="period" value="{{ __('Period') }}" />
                        <select id="period" wire:model.live="period" class="{{ $selectClass }}">
                            @foreach ($periods as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                    </div>
                    @if ($period === 'custom')
                        <div>
                            <x-label for="from" value="{{ __('From') }}" />
                            <x-input id="from" type="date" class="mt-1 block w-full" wire:model.live="from" />
                        </div>
                        <div>
                            <x-label for="to" value="{{ __('To') }}" />
                            <x-input id="to" type="date" class="mt-1 block w-full" wire:model.live="to" />
                        </div>
                    @endif
                @endif

                @if ($takes('user_id') && $seesTeam)
                    <div>
                        <x-label for="officer" value="{{ __('Officer') }}" />
                        <select id="officer" wire:model.live="user_id" class="{{ $selectClass }}">
                            <option value="">{{ __('Everyone') }}</option>
                            @foreach ($options['officers'] as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif

                @if ($takes('view'))
                    <div>
                        <x-label for="view" value="{{ __('Attribution view') }}" />
                        <select id="view" wire:model.live="view" class="{{ $selectClass }}">
                            @foreach ($views as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif

                @if ($takes('sector'))
                    <div>
                        <x-label for="sector" value="{{ __('Sector') }}" />
                        <select id="sector" wire:model.live="sector" class="{{ $selectClass }}">
                            <option value="">{{ __('All sectors') }}</option>
                            @foreach ($options['sectors'] as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif

                @if ($takes('source'))
                    <div>
                        <x-label for="source" value="{{ __('Source') }}" />
                        <select id="source" wire:model.live="source" class="{{ $selectClass }}">
                            <option value="">{{ __('All sources') }}</option>
                            @foreach ($options['sources'] as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif

                @if ($takes('portfolio_id'))
                    <div>
                        <x-label for="portfolio" value="{{ __('Portfolio') }}" />
                        <select id="portfolio" wire:model.live="portfolio_id" class="{{ $selectClass }}">
                            <option value="">{{ __('All portfolios') }}</option>
                            @foreach ($options['portfolios'] as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif

                @if ($takes('campaign_id'))
                    <div>
                        <x-label for="campaign" value="{{ __('Campaign') }}" />
                        <select id="campaign" wire:model.live="campaign_id" class="{{ $selectClass }}">
                            <option value="">{{ __('All campaigns') }}</option>
                            @foreach ($options['campaigns'] as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
            </div>

            <dl class="mt-4 flex flex-wrap gap-x-6 gap-y-1 border-t border-slate-100 pt-3 text-xs text-slate-500">
                @foreach ($run['filters'] as $label => $value)
                    <div><dt class="inline font-semibold text-slate-600">{{ $label }}:</dt> <dd class="inline">{{ $value }}</dd></div>
                @endforeach
                @if ($definition->money)
                    <div><dt class="inline font-semibold text-slate-600">{{ __('Currency basis') }}:</dt> <dd class="inline">{{ $run['basis'] }}</dd></div>
                @endif
            </dl>
            @if (! $seesTeam)
                <p class="mt-2 text-xs text-slate-400">{{ __('These are your own figures. Team-wide reports need team access.') }}</p>
            @endif
        </x-card>

        <div class="space-y-6" wire:loading.class="opacity-60">
            @include('livewire.crm.reports.partials.result', ['result' => $result, 'base' => $base, 'sectionPages' => $sectionPages])
        </div>

        {{-- Definitions, printed on every output too --}}
        <x-card class="overflow-hidden">
            <div class="border-b border-slate-100 bg-slate-50/60 px-5 py-3">
                <h2 class="text-sm font-bold text-slate-900">{{ __('How these figures are counted') }}</h2>
            </div>
            <dl class="divide-y divide-slate-100">
                @foreach ($definition->definitions as $term => $meaning)
                    <div class="grid grid-cols-1 gap-1 px-5 py-3 sm:grid-cols-4 sm:gap-4">
                        <dt class="text-sm font-semibold text-slate-800">{{ $term }}</dt>
                        <dd class="text-sm text-slate-600 sm:col-span-3">{{ $meaning }}</dd>
                    </div>
                @endforeach
                <div class="grid grid-cols-1 gap-1 px-5 py-3 sm:grid-cols-4 sm:gap-4">
                    <dt class="text-sm font-semibold text-slate-800">{{ __('Currency basis') }}</dt>
                    <dd class="text-sm text-slate-600 sm:col-span-3">{{ $run['basis'] }}</dd>
                </div>
            </dl>
        </x-card>

        @if ($schedules->isNotEmpty())
            <x-card class="p-4 sm:p-5">
                <h2 class="text-sm font-bold text-slate-900">{{ __('Scheduled deliveries of this report') }}</h2>
                <ul class="mt-2 space-y-1 text-sm text-slate-600">
                    @foreach ($schedules as $schedule)
                        <li wire:key="schedule-{{ $schedule->id }}" class="flex flex-wrap items-center gap-2">
                            <x-icon name="clock" class="h-3.5 w-3.5 text-slate-400" />
                            <span class="font-medium text-slate-800">{{ $schedule->name }}</span>
                            <span>{{ $scheduler->describe($schedule) }}</span>
                            @if (! $schedule->is_active)
                                <x-badge color="slate">{{ __('Paused') }}</x-badge>
                            @endif
                        </li>
                    @endforeach
                </ul>
            </x-card>
        @endif
    </div>
</div>