@extends('layouts.app')

@section('title', $product->name)
@section('description', $product->summary)

@section('content')
    <div class="shell py-stack-md">
        <nav class="u-label-sm text-on-surface-variant" aria-label="breadcrumb">
            <a href="{{ route('home') }}" class="hover:text-secondary">{{ __('nav.home') }}</a>
            <span class="px-2">/</span>
            <a href="{{ route('category', $product->category) }}" class="hover:text-secondary">{{ $product->category->name }}</a>
        </nav>
    </div>

    <div class="shell grid gap-stack-lg pb-stack-lg lg:grid-cols-2">

        <div class="overflow-hidden rounded-lg border border-outline-variant/60">
            @if ($product->image_path)
                <img src="{{ media($product->image_path) }}" alt="{{ $product->name }}"
                     class="aspect-[4/3] w-full object-cover">
            @else
                <div class="flex aspect-[4/3] items-center justify-center bg-surface-container font-display text-headline-lg text-outline-variant">
                    {{ __('shop.brand_short') }}
                </div>
            @endif
        </div>

        <div>
            @if ($product->badges)
                <div class="mb-stack-sm flex flex-wrap gap-2">
                    @foreach ($product->badges as $badge)
                        <span class="chip">{{ __("shop.badges.{$badge}") }}</span>
                    @endforeach
                </div>
            @endif

            <h1 class="text-headline-lg-mobile md:text-headline-lg">{{ $product->name }}</h1>

            @if ($product->summary)
                <p class="mt-stack-sm text-body-lg text-on-surface-variant">{{ $product->summary }}</p>
            @endif

            <div class="mt-stack-md">
                <x-price :product="$product" />
            </div>

            <form action="{{ route('cart.store') }}" method="post" data-cart-form
                  data-added-label="{{ __('shop.added') }}" class="mt-stack-md">
                @csrf
                <input type="hidden" name="product_id" value="{{ $product->id }}">

                @if ($product->options->isNotEmpty())
                    <fieldset>
                        <legend class="u-label-sm mb-3 text-secondary">{{ __('shop.choose_option') }}</legend>
                        <div class="grid gap-2 sm:grid-cols-2">
                            @foreach ($product->options as $index => $option)
                                <label class="flex cursor-pointer items-center justify-between gap-3 rounded border
                                              border-outline-variant px-4 py-3 transition-colors
                                              hover:border-secondary has-[:checked]:border-secondary
                                              has-[:checked]:bg-secondary-container/25">
                                    <span class="flex items-center gap-3">
                                        <input type="radio" name="option_id" value="{{ $option->id }}"
                                               @checked($index === 0)
                                               class="h-4 w-4 border-outline text-primary focus:ring-secondary">
                                        <span class="text-body-md">{{ $option->label }}</span>
                                    </span>
                                    <span class="font-label text-label-lg text-secondary num">{{ money($option->price, false) }}</span>
                                </label>
                            @endforeach
                        </div>
                    </fieldset>
                @endif

                <div class="mt-stack-md flex items-center gap-3">
                    <label for="quantity" class="sr-only">{{ __('cart.quantity') }}</label>
                    <input id="quantity" name="quantity" type="number" min="1" max="99" value="1"
                           class="w-20 rounded border border-outline-variant bg-transparent px-3 py-3 text-center num
                                  focus:border-secondary focus:ring-0">
                    <button type="submit" class="btn-primary flex-1">{{ __('shop.add_to_cart') }}</button>
                </div>
            </form>

            @if ($product->description)
                <div class="mt-stack-lg border-t border-outline-variant/60 pt-stack-md">
                    <p class="whitespace-pre-line text-body-md text-on-surface-variant">{{ $product->description }}</p>
                </div>
            @endif

            @if ($product->origin || $product->serves)
                <ul class="list-leaf mt-stack-md text-body-md text-on-surface-variant">
                    @if ($product->origin)
                        <li><span class="u-label-sm text-secondary">{{ __('shop.origin') }}</span> — {{ $product->origin }}</li>
                    @endif
                    @if ($product->serves)
                        <li><span class="u-label-sm text-secondary">{{ __('shop.serves') }}</span> — {{ $product->serves }}</li>
                    @endif
                </ul>
            @endif
        </div>
    </div>

    @if ($related->isNotEmpty())
        <x-leaf-rule />

        <section class="shell pb-stack-lg">
            <x-section-heading :title="__('shop.related')" />
            <div class="grid grid-cols-2 gap-4 md:gap-gutter lg:grid-cols-4">
                @foreach ($related as $item)
                    <x-product-card :product="$item" />
                @endforeach
            </div>
        </section>
    @endif
@endsection