@extends('layouts.account')

@section('title', __('Saved searches'))
@section('heading', __('Saved searches'))
@section('subheading', __('Searches we keep watching for you.'))

@section('actions')
    <x-button variant="outline" :href="route('properties.index')" arrow>{{ __('Start a new search') }}</x-button>
@endsection

@section('account')
    @if (session('error'))
        <x-alert type="error" class="mb-6">{{ session('error') }}</x-alert>
    @endif

    @if ($searches->isEmpty())
        <x-empty-state icon="search"
                       :title="__('No saved searches')"
                       :message="__('Filter the listings the way you want them, then save the search. We will tell you when something new matches.')">
            <x-button :href="route('properties.index')" class="mt-5" arrow>{{ __('Search properties') }}</x-button>
        </x-empty-state>
    @else
        <div class="space-y-4">
            @foreach ($searches as $search)
                <article class="rounded-xl border border-border bg-surface p-5">
                    <div class="flex flex-wrap items-start justify-between gap-4">
                        <div class="min-w-0">
                            <h2 class="font-display text-base font-semibold text-text">
                                <a href="{{ $search->url() }}" class="transition hover:text-text-brand">
                                    {{ $search->name }}
                                </a>
                            </h2>

                            <p class="mt-1 text-sm text-text-secondary">{{ $search->summary }}</p>

                            <p class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-text-muted">
                                <span>{{ trans_choice('One match now|:count matches now', $search->match_count, ['count' => $search->match_count]) }}</span>
                                <span aria-hidden="true">·</span>
                                <span>{{ $search->frequencyLabel() }}</span>

                                @if ($search->last_notified_at)
                                    <span aria-hidden="true">·</span>
                                    <span>{{ __('Last alert :when', ['when' => $search->last_notified_at->diffForHumans()]) }}</span>
                                @endif
                            </p>
                        </div>

                        <x-badge :variant="$search->wantsAlerts() ? 'success' : 'muted'">
                            {{ $search->wantsAlerts() ? __('Alerts on') : __('Alerts off') }}
                        </x-badge>
                    </div>

                    {{-- Every alert links here, so turning it off is never more
                         than one screen away from the message that prompted it. --}}
                    <form action="{{ route('account.saved-searches.update', $search) }}" method="POST"
                          class="mt-5 flex flex-wrap items-end gap-3 border-t border-border pt-4">
                        @csrf @method('PUT')

                        <div class="min-w-0 flex-1">
                            <label for="name-{{ $search->id }}" class="sr-only">{{ __('Name') }}</label>
                            <input id="name-{{ $search->id }}" type="text" name="name" value="{{ $search->name }}"
                                   class="form-input py-1.5 text-sm" maxlength="120" required>
                        </div>

                        <div class="w-full sm:w-56">
                            <label for="frequency-{{ $search->id }}" class="sr-only">{{ __('Alert frequency') }}</label>
                            <select id="frequency-{{ $search->id }}" name="alert_frequency" class="form-input py-1.5 text-sm">
                                @foreach ($frequencies as $value => $label)
                                    <option value="{{ $value }}" @selected($search->alert_frequency === $value)>
                                        {{ __($label) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <x-form.checkbox name="is_active" :checked="$search->is_active" :label="__('Active')" />

                        <button type="submit" class="btn-outline btn-sm">{{ __('Save') }}</button>
                    </form>

                    <div class="mt-3 flex justify-end">
                        <form action="{{ route('account.saved-searches.destroy', $search) }}" method="POST"
                              x-data="confirmAction('{{ __('Delete this saved search?') }}')" @submit="confirm($event)">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn-ghost btn-sm text-error">{{ __('Delete') }}</button>
                        </form>
                    </div>
                </article>
            @endforeach
        </div>

        @if ($remaining <= 3)
            <p class="mt-6 text-sm text-text-muted">
                {{ trans_choice(
                    'You can save one more search.|You can save :count more searches.',
                    max(0, $remaining), ['count' => max(0, $remaining)],
                ) }}
            </p>
        @endif
    @endif
@endsection