@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 => $selected?->takes($filter) ?? false;
@endphp

<div class="space-y-6">
    <x-card class="overflow-hidden">
        <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
            <div>
                <h2 class="text-base font-semibold text-slate-900">{{ __('Scheduled delivery') }}</h2>
                <p class="text-xs text-slate-400">{{ __('Reports emailed to chosen people on a schedule, each covering the period just gone, with the report attached.') }}</p>
            </div>
            @if ($canCreate)
                <x-button type="button" wire:click="create">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New schedule') }}
                </x-button>
            @endif
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-100">
                <thead>
                    <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                        <th class="px-3 py-3.5 lg:px-4">{{ __('Schedule') }}</th>
                        <th class="px-3 py-3.5 lg:px-4">{{ __('Report') }}</th>
                        <th class="px-3 py-3.5 lg:px-4">{{ __('When') }}</th>
                        <th class="px-3 py-3.5 lg:px-4">{{ __('To') }}</th>
                        <th class="px-3 py-3.5 lg:px-4">{{ __('Next') }}</th>
                        <th class="px-3 py-3.5 lg:px-4">{{ __('Last sent') }}</th>
                        <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 bg-white">
                    @forelse ($schedules as $schedule)
                        @php $tz = config('app.display_timezone'); @endphp
                        <tr wire:key="schedule-{{ $schedule->id }}" class="transition hover:bg-slate-50/70">
                            <td class="px-3 py-4 text-sm lg:px-4">
                                <div class="font-medium text-slate-900">{{ $schedule->name }}</div>
                                <div class="mt-1 flex flex-wrap gap-1.5">
                                    <x-badge color="slate">{{ __(\App\Models\Crm\ReportSchedule::FORMATS[$schedule->format] ?? $schedule->format) }}</x-badge>
                                    @if (! $schedule->is_active)
                                        <x-badge color="amber">{{ __('Paused') }}</x-badge>
                                    @endif
                                </div>
                            </td>
                            <td class="px-3 py-4 text-sm text-slate-700 lg:px-4">
                                @if ($report = $registry->find($schedule->report_key))
                                    <a href="{{ route('crm.reports.show', $report->key) }}" wire:navigate class="text-indigo-600 hover:text-indigo-800">{{ __($report->title) }}</a>
                                    <div class="text-xs text-slate-400">{{ __(\App\Services\Crm\Reports\ReportFilters::PERIODS[$schedule->filters['period'] ?? ''] ?? '') }}</div>
                                @else
                                    <span class="text-slate-400">{{ __('Report no longer offered') }}</span>
                                @endif
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">{{ $scheduler->describe($schedule) }}</td>
                            <td class="px-3 py-4 text-sm text-slate-500 lg:px-4">
                                {{ collect($schedule->recipients ?? [])->map(fn ($id) => $members[$id] ?? null)->filter()->implode(', ') ?: __('Nobody') }}
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">{{ $schedule->next_run_at?->setTimezone($tz)->format('j M Y H:i') ?? __('Not scheduled') }}</td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">{{ $schedule->last_sent_at?->setTimezone($tz)->format('j M Y H:i') ?? __('Never') }}</td>
                            <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-medium lg:px-4">
                                <div class="flex items-center justify-end gap-3">
                                    @can('update', $schedule)
                                        <button type="button" wire:click="sendNow({{ $schedule->id }})" wire:confirm="{{ __('Send this report to everyone on the list now?') }}" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Send now') }}</button>
                                        <button type="button" wire:click="toggle({{ $schedule->id }})" class="text-slate-600 transition hover:text-slate-800">{{ $schedule->is_active ? __('Pause') : __('Resume') }}</button>
                                        <button type="button" wire:click="edit({{ $schedule->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Edit') }}</button>
                                    @endcan
                                    @can('delete', $schedule)
                                        <button type="button" wire:click="delete({{ $schedule->id }})" wire:confirm="{{ __('Delete this schedule? Nothing more will be sent.') }}" class="text-rose-600 transition hover:text-rose-800">{{ __('Delete') }}</button>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-12">
                                <x-empty-state icon="clock" :title="__('Nothing scheduled yet')" :message="__('Schedule the weekly pipeline for Monday morning or the monthly commercial report for the 1st, and it arrives by email with the report attached.')" class="border-0 bg-transparent py-0" />
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @include('livewire.crm.partials.paginator', ['rows' => $schedules])
    </x-card>

    <x-dialog-modal wire:model.live="showForm" maxWidth="2xl">
        <x-slot name="title">{{ $editingId ? __('Edit schedule') : __('New schedule') }}</x-slot>
        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <x-label for="report_key" value="{{ __('Report') }}" />
                    <select id="report_key" wire:model.live="report_key" class="{{ $selectClass }}">
                        <option value="">{{ __('Choose a report') }}</option>
                        @foreach ($grouped as $group)
                            <optgroup label="{{ __($group['label']) }}">
                                @foreach ($group['reports'] as $report)
                                    <option value="{{ $report->key }}">{{ __($report->title) }}</option>
                                @endforeach
                            </optgroup>
                        @endforeach
                    </select>
                    <x-input-error for="report_key" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="schedule_name" value="{{ __('Name, used as the email subject') }}" />
                    <x-input id="schedule_name" type="text" class="mt-1 block w-full" wire:model="name" placeholder="{{ __('For example: Weekly pipeline for the directors') }}" />
                    <x-input-error for="name" class="mt-2" />
                </div>
                <div>
                    <x-label for="frequency" value="{{ __('How often') }}" />
                    <select id="frequency" wire:model.live="frequency" class="{{ $selectClass }}">
                        @foreach (\App\Models\Crm\ReportSchedule::FREQUENCIES as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="frequency" class="mt-2" />
                </div>
                <div>
                    @if ($frequency === 'monthly')
                        <x-label for="day_of_month" value="{{ __('Day of the month') }}" />
                        <x-input id="day_of_month" type="number" min="1" max="28" class="mt-1 block w-full" wire:model="day_of_month" />
                        <x-input-error for="day_of_month" class="mt-2" />
                    @else
                        <x-label for="day_of_week" value="{{ __('Day of the week') }}" />
                        <select id="day_of_week" wire:model="day_of_week" class="{{ $selectClass }}">
                            @foreach (\App\Services\Crm\Reports\ReportScheduler::WEEKDAYS as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="day_of_week" class="mt-2" />
                    @endif
                </div>
                <div>
                    <x-label for="send_time" value="{{ __('Time, :tz', ['tz' => config('app.display_timezone')]) }}" />
                    <x-input id="send_time" type="time" class="mt-1 block w-full" wire:model="send_time" />
                    <x-input-error for="send_time" class="mt-2" />
                </div>
                <div>
                    <x-label for="format" value="{{ __('Attach as') }}" />
                    <select id="format" wire:model="format" class="{{ $selectClass }}">
                        @foreach (\App\Models\Crm\ReportSchedule::FORMATS as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="format" class="mt-2" />
                </div>

                @if ($selected?->usesPeriod)
                    <div>
                        <x-label for="schedule_period" value="{{ __('Period each email covers') }}" />
                        <select id="schedule_period" wire:model="period" class="{{ $selectClass }}">
                            @foreach ($periods as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
                @if ($takes('user_id'))
                    <div>
                        <x-label for="schedule_officer" value="{{ __('Officer') }}" />
                        <select id="schedule_officer" wire:model="user_id" class="{{ $selectClass }}">
                            <option value="">{{ __('Everyone') }}</option>
                            @foreach ($options['officers'] as $id => $officer)
                                <option value="{{ $id }}">{{ $officer }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
                @if ($takes('view'))
                    <div>
                        <x-label for="schedule_view" value="{{ __('Attribution view') }}" />
                        <select id="schedule_view" wire:model="view" class="{{ $selectClass }}">
                            @foreach ($views as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
                @if ($takes('sector'))
                    <div>
                        <x-label for="schedule_sector" value="{{ __('Sector') }}" />
                        <select id="schedule_sector" wire:model="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('portfolio_id'))
                    <div>
                        <x-label for="schedule_portfolio" value="{{ __('Portfolio') }}" />
                        <select id="schedule_portfolio" wire:model="portfolio_id" class="{{ $selectClass }}">
                            <option value="">{{ __('All portfolios') }}</option>
                            @foreach ($options['portfolios'] as $id => $label)
                                <option value="{{ $id }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif

                <div class="sm:col-span-2">
                    <x-label value="{{ __('Send to') }}" />
                    <div class="mt-1 flex flex-wrap gap-2">
                        @foreach ($members as $id => $member)
                            <label wire:key="recipient-{{ $id }}" class="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 px-3 py-1.5 text-sm text-slate-600 transition has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                <input type="checkbox" value="{{ $id }}" wire:model="recipients" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                                {{ $member }}
                            </label>
                        @endforeach
                    </div>
                    <p class="mt-1 text-xs text-slate-400">{{ __('Only members who can see the CRM receive it.') }}</p>
                    <x-input-error for="recipients" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                        <input type="checkbox" wire:model="is_active" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                        {{ __('Active') }}
                    </label>
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button type="button" wire:click="$set('showForm', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button type="button" class="ms-3" wire:click="save" wire:loading.attr="disabled" wire:target="save">
                <span wire:loading.remove wire:target="save">{{ __('Save schedule') }}</span>
                <span wire:loading wire:target="save">{{ __('Saving...') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>