{{--
    Кнопка «в избранное» (ТЗ §12.2).

    Обычная форма POST: без JavaScript она отправляется как раньше и страница
    перезагружается. Со скриптом та же форма уходит фоном, кнопка меняет вид
    на месте, а счётчик в шапке обновляется ответом сервера.

    Гостю без входа кнопка предлагает войти, а не молча ничего не делает.

    Два вида по макету: `overlay` — кружок 36 px поверх фотографии в карточке,
    обычный — кнопка рядом с другими на странице заведения.
--}}
@props([
    'venue',
    'isFavorite' => false,
    'label' => false,
    'overlay' => false,
])

@php
    $guest = auth('guest')->user();

    $base = $overlay
        ? 'inline-grid size-9 place-items-center rounded-pill bg-white/[.92] transition-colors'
        : 'btn';

    // Начальный вид рисует сервер, дальше теми же классами его переключает
    // Alpine — иначе после нажатия кнопка осталась бы прежней.
    $state = $overlay
        ? ($isFavorite ? 'text-primary' : 'text-ink-30 hover:text-primary')
        : ($isFavorite ? 'btn-tonal' : 'btn-secondary');
@endphp

@if ($guest === null)
    <a href="{{ route('auth.login') }}"
       @if ($showAuthModal ?? false) x-on:click.prevent.stop="$store.authModal.show()" @endif
       title="Войдите, чтобы сохранять избранное"
       {{ $attributes->merge(['class' => $base.' '.$state.' no-underline hover:no-underline']) }}>
        <x-ui-icon name="heart" :size="$overlay ? 19 : 18" />
        @if ($label)<span>В избранное</span>@endif
        <span class="sr-only">Войдите, чтобы добавить в избранное</span>
    </a>
@else
    <form method="POST" action="{{ route('cabinet.favorites.toggle') }}" class="contents"
          x-data="favoriteButton({ initial: {{ $isFavorite ? 'true' : 'false' }} })"
          x-ref="form"
          x-on:submit.prevent="toggle()">
        @csrf
        <input type="hidden" name="venue_id" value="{{ $venue->id }}">

        <button type="submit"
                @if ($overlay)
                    x-bind:class="{ 'text-primary': favorite, 'text-ink-30': ! favorite, 'hover:text-primary': ! favorite }"
                @else
                    x-bind:class="{ 'btn-tonal': favorite, 'btn-secondary': ! favorite }"
                @endif
                {{ $attributes->merge(['class' => $base.' '.$state]) }}>
            <x-ui-icon name="heart" :size="$overlay ? 19 : 18" :filled="$isFavorite"
                       x-bind:fill="favorite ? 'currentColor' : 'none'" />

            @if ($label)
                <span x-text="favorite ? 'В избранном' : 'В избранное'">{{ $isFavorite ? 'В избранном' : 'В избранное' }}</span>
            @endif

            <span class="sr-only" x-text="favorite ? 'Убрать из избранного' : 'Добавить в избранное'">
                {{ $isFavorite ? 'Убрать из избранного' : 'Добавить в избранное' }}
            </span>
        </button>
    </form>
@endif