@extends($site->themeView('layout'))

@php
    $ads = app(\App\Services\AdManager::class);
    $intro = $recipe->body ? $recipe->renderedBody()['html'] : '';
    $facts = array_filter([
        'prep' => $recipe->prep_minutes ? \App\Models\Recipe::duration((int) $recipe->prep_minutes) : null,
        'cook' => $recipe->cook_minutes ? \App\Models\Recipe::duration((int) $recipe->cook_minutes) : null,
        'rest' => $recipe->rest_minutes ? \App\Models\Recipe::duration((int) $recipe->rest_minutes) : null,
        'total' => \App\Models\Recipe::duration($recipe->totalMinutes()),
    ]);
    $steps = collect((array) $recipe->steps)->filter(fn ($s) => filled($s['text'] ?? null))->values();
@endphp

{{-- Recipe page: the servings scaler and the ingredient checklist work in the browser (site.js); without JavaScript the recipe reads normally. --}}
@section('content')
    <article>
        <header class="bg-white">
            <div class="container-site grid max-w-7xl gap-8 py-8 md:py-12 lg:grid-cols-[1.1fr_1fr] lg:items-center">
                <div>
                    @include($site->themeView('partials.breadcrumbs'))
                    @if ($recipe->category)<a href="{{ $recipe->category->path() }}" class="eyebrow mt-6 inline-block">{{ $recipe->category->name }}</a>@endif
                    <h1 class="mt-3 font-[family-name:var(--font-heading)] text-4xl leading-[1.1] font-black tracking-tight text-balance text-ink md:text-5xl">{{ $recipe->title }}</h1>
                    @if ($recipe->summary)<p class="mt-4 text-lg text-slate-600 md:text-xl">{{ $recipe->summary }}</p>@endif
                    <dl class="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
                        @foreach ($facts as $key => $value)
                            <div class="rounded-xl bg-brand/[0.07] px-3 py-2.5"><dt class="text-xs font-semibold tracking-wide text-slate-500 uppercase">{{ __('recipes.'.$key) }}</dt><dd class="mt-0.5 font-bold text-ink">{{ $value }}</dd></div>
                        @endforeach
                    </dl>
                    <ul class="mt-4 flex flex-wrap gap-2 text-sm">
                        <li class="rounded-full bg-black/[0.05] px-3 py-1 font-medium">{{ __('recipes.difficulty') }} : {{ __('recipes.difficulties.'.$recipe->difficulty) }}</li>
                        <li class="rounded-full bg-black/[0.05] px-3 py-1 font-medium">{{ __('recipes.cost') }} : {{ __('recipes.costs.'.$recipe->cost) }}</li>
                        @if ($recipe->cuisine)<li class="rounded-full bg-black/[0.05] px-3 py-1 font-medium">{{ __('recipes.cuisine') }} : {{ $recipe->cuisine }}</li>@endif
                        @foreach ((array) $recipe->diets as $diet)<li class="rounded-full bg-emerald-50 px-3 py-1 font-semibold text-emerald-800">{{ __('recipes.diets.'.$diet) }}</li>@endforeach
                    </ul>
                    <p class="mt-6 flex flex-wrap gap-3 print:hidden">
                        <a href="#recette" class="btn bg-brand px-5 py-2.5 text-white hover:brightness-110"><x-site.icon name="chevron-down" class="size-4" /> {{ __('recipes.jump') }}</a>
                        <button type="button" data-print class="btn border border-ink/15 bg-white px-5 py-2.5 text-ink hover:border-ink/30"><x-site.icon name="file" class="size-4" /> {{ __('recipes.print') }}</button>
                    </p>
                </div>
                @if ($recipe->image)
                    <img src="{{ $recipe->image }}" alt="{{ $recipe->title }}" fetchpriority="high" class="aspect-[4/3] w-full rounded-[calc(var(--radius-card)*1.5)] object-cover shadow-xl">
                @endif
            </div>
        </header>

        @if ($intro)
            <div class="container-site max-w-3xl pt-10">
                <div class="prose-site">{!! $intro !!}</div>
            </div>
        @endif

        <div class="container-site max-w-3xl">{{ $ads->slot('after_title') }}</div>

        <div id="recette" class="container-site grid max-w-7xl scroll-mt-24 gap-10 py-10 lg:grid-cols-[22rem_1fr]">
            <section aria-labelledby="h-ingredients" class="lg:sticky lg:top-24 lg:self-start" data-recipe-scaler data-servings="{{ (int) $recipe->servings }}">
                <div class="rounded-[var(--radius-card)] bg-white p-5 shadow-[var(--shadow-card)] ring-1 ring-black/[0.05]">
                    <h2 id="h-ingredients" class="font-[family-name:var(--font-heading)] text-2xl font-bold text-ink">{{ __('recipes.ingredients') }}</h2>
                    <div class="mt-3 flex items-center justify-between gap-3 rounded-xl bg-brand/[0.07] p-2 print:hidden">
                        <button type="button" data-scale="-1" class="grid size-9 place-items-center rounded-lg bg-white text-ink shadow-sm hover:text-brand disabled:opacity-40" aria-label="{{ __('recipes.less') }}"><x-site.icon name="minus" class="size-4" /></button>
                        <p class="text-center text-sm font-semibold text-ink" aria-live="polite"><span data-servings-value class="text-lg">{{ $recipe->servings }}</span> {{ $recipe->servings_unit }}</p>
                        <button type="button" data-scale="1" class="grid size-9 place-items-center rounded-lg bg-white text-ink shadow-sm hover:text-brand" aria-label="{{ __('recipes.more') }}"><x-site.icon name="plus" class="size-4" /></button>
                    </div>
                    <p class="mt-2 text-xs text-slate-500 print:hidden">{{ __('recipes.check_hint') }}</p>
                    @foreach ($recipe->ingredientGroups() as $group => $items)
                        @if ($group !== '')<h3 class="mt-5 text-sm font-bold tracking-wide text-brand uppercase">{{ $group }}</h3>@endif
                        <ul class="mt-3 space-y-1">
                            @foreach ($items as $item)
                                @php($qty = \App\Http\Controllers\Site\RecipeController::quantity($item['quantity'] ?? null))
                                <li>
                                    <label class="flex cursor-pointer items-start gap-3 rounded-lg px-2 py-1.5 hover:bg-black/[0.03] has-[:checked]:text-slate-400 has-[:checked]:line-through">
                                        <input type="checkbox" class="mt-1 size-4 shrink-0 rounded border-slate-300 text-brand focus:ring-brand print:hidden">
                                        <span>
                                            @if ($qty !== '')<strong class="font-semibold text-ink" data-qty="{{ (float) $item['quantity'] }}">{{ $qty }}</strong>@endif
                                            @if (filled($item['unit'] ?? null)) {{ $item['unit'] }}@endif
                                            {{ $item['name'] }}@if (filled($item['note'] ?? null))<span class="text-slate-500">, {{ $item['note'] }}</span>@endif
                                            @if ($qty === '' && ! filled($item['unit'] ?? null))<span class="text-slate-500"> ({{ __('recipes.to_taste') }})</span>@endif
                                        </span>
                                    </label>
                                </li>
                            @endforeach
                        </ul>
                    @endforeach
                </div>
            </section>

            <div class="min-w-0">
                <section aria-labelledby="h-steps">
                    <h2 id="h-steps" class="font-[family-name:var(--font-heading)] text-2xl font-bold text-ink md:text-3xl">{{ __('recipes.steps') }}</h2>
                    <ol class="mt-6 space-y-6">
                        @foreach ($steps as $n => $step)
                            <li id="etape-{{ $n + 1 }}" class="grid scroll-mt-24 grid-cols-[2.75rem_1fr] gap-4">
                                <span class="grid size-11 place-items-center rounded-full bg-brand text-lg font-black text-white" aria-hidden="true">{{ $n + 1 }}</span>
                                <div class="pt-1.5">
                                    <h3 class="sr-only">{{ __('recipes.step', ['n' => $n + 1]) }}</h3>
                                    <p class="text-lg leading-relaxed text-ink">{{ $step['text'] }}</p>
                                    @if (! empty($step['minutes']))<p class="mt-1 inline-flex items-center gap-1 text-sm font-medium text-slate-500"><x-site.icon name="timer" class="size-4" /> {{ \App\Models\Recipe::duration((int) $step['minutes']) }}</p>@endif
                                    @if (! empty($step['image']))<img src="{{ $step['image'] }}" alt="" loading="lazy" class="mt-3 w-full max-w-md rounded-xl">@endif
                                </div>
                            </li>
                        @endforeach
                    </ol>
                </section>

                @if ($recipe->tips)
                    <aside class="mt-10 flex gap-4 rounded-[var(--radius-card)] border border-amber-200 bg-amber-50 p-5 text-amber-950">
                        <x-site.icon name="lightbulb" class="mt-0.5 size-6 shrink-0" />
                        <div><h2 class="font-bold">{{ __('recipes.tips') }}</h2><p class="mt-1 leading-relaxed whitespace-pre-line">{{ $recipe->tips }}</p></div>
                    </aside>
                @endif

                @if (! empty($recipe->gallery))
                    <section class="mt-10" aria-labelledby="h-gallery">
                        <h2 id="h-gallery" class="font-[family-name:var(--font-heading)] text-2xl font-bold text-ink">{{ __('recipes.gallery') }}</h2>
                        <ul class="mt-4 grid grid-cols-2 gap-3 md:grid-cols-3">
                            @foreach ($recipe->gallery as $photo)
                                <li><a href="{{ $photo }}" data-lightbox data-caption="{{ $recipe->title }}"><img src="{{ $photo }}" alt="{{ $recipe->title }}" loading="lazy" class="aspect-square w-full rounded-xl object-cover"></a></li>
                            @endforeach
                        </ul>
                    </section>
                @endif

                @if (! empty($recipe->tags))
                    <p class="mt-8 flex flex-wrap items-center gap-2 text-sm"><span class="font-semibold text-slate-500">{{ __('recipes.tags') }} :</span>@foreach ($recipe->tags as $tag)<a href="{{ lpath('/'.seg('recipes')) }}?q={{ urlencode($tag) }}" rel="nofollow" class="rounded-full bg-black/[0.05] px-3 py-1 hover:bg-brand/10 hover:text-brand">{{ $tag }}</a>@endforeach</p>
                @endif

                <div class="mt-10">{{ $ads->slot('after_content') }}</div>
            </div>
        </div>
    </article>

    @if ($related->isNotEmpty())
        <section class="container-site max-w-7xl pb-6" aria-labelledby="h-related">
            <h2 id="h-related" class="section-title">{{ __('recipes.related') }}</h2>
            <div class="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($related as $item)
                    @include($site->themeView('recipes.partials.card'), ['recipe' => $item])
                @endforeach
            </div>
        </section>
    @endif
@endsection