{{--
    Formulário compartilhado de produto.

    @param \App\Models\Product|null $product  Nulo ao criar.
--}}
@php($editing = isset($product))
@php($priceCents = old('price', $editing ? $product->price : null))
@php($priceValue = $priceCents !== null && $priceCents !== '' ? number_format(((int) $priceCents) / 100, 2, ',', '.') : '')

<div class="mb-4">
    <label for="name" class="form-label">Produto</label>
    <input id="name" type="text" name="name"
           value="{{ old('name', $editing ? $product->name : '') }}"
           class="form-control @error('name') is-invalid @enderror"
           placeholder="Água mineral, Isotônico, Overgrip…" required autofocus>
    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
    <div class="form-text">O nome do produto, único dentro da sua arena.</div>
</div>

<div class="mb-4">
    <label for="product_category_id" class="form-label">Categoria</label>

    @if ($categories->isEmpty())
        {{-- SEM CATEGORIA NÃO HÁ PRODUTO: a coluna é NOT NULL e o campo é
             obrigatório. Um select vazio com `required` deixaria o usuário
             preso, clicando em "Cadastrar" sem entender o que falta — então a
             tela diz o que fazer e leva até lá. --}}
        <div class="alert alert-warning mb-0">
            Você ainda não tem categorias. Todo produto pertence a uma, então
            <a href="{{ route('product-categories.create') }}" class="alert-link">cadastre a primeira categoria</a>
            antes de continuar.
        </div>
    @else
        <select id="product_category_id" name="product_category_id"
                class="form-select @error('product_category_id') is-invalid @enderror"
                style="max-width: 20rem;" required>
            {{-- Placeholder desabilitado em vez de uma opção "Sem categoria":
                 o navegador barra o envio e a obrigatoriedade fica visível antes
                 do POST. --}}
            <option value="" disabled @selected(! old('product_category_id', $editing ? $product->product_category_id : null))>
                Selecione…
            </option>
            @foreach ($categories as $category)
                <option value="{{ $category->id }}"
                        @selected((int) old('product_category_id', $editing ? $product->product_category_id : null) === $category->id)>
                    {{ $category->name }}
                </option>
            @endforeach
        </select>
        @error('product_category_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
        <div class="form-text">Como este produto aparece agrupado na loja.</div>
    @endif
</div>

<div class="mb-4">
    <label for="price" class="form-label">Preço</label>
    <div class="input-group" style="max-width: 12rem;">
        <span class="input-group-text">R$</span>
        {{-- Texto, não `number`: o usuário digita no formato brasileiro
             ("1.250,90") e quem converte para centavos é o App\Support\Money,
             no servidor.

             `data-mask="money"` formata enquanto se digita — os dígitos entram
             pela direita, então 1-0-0-0 vira "10,00". `inputmode="numeric"` e
             não "decimal": no celular o teclado só precisa de números, já que a
             vírgula e o ponto são postos pela máscara. Mesmo gancho do campo de
             valor do financeiro. --}}
        <input id="price" type="text" name="price" inputmode="numeric" data-mask="money"
               value="{{ $priceValue }}"
               class="form-control @error('price') is-invalid @enderror"
               placeholder="0,00" required>
        @error('price')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="form-text">O valor cobrado pelo produto.</div>
</div>

<div class="mb-4">
    <label for="image" class="form-label">Imagem</label>

    @if ($editing && $product->imageUrl())
        <div class="mb-2">
            <img src="{{ $product->imageUrl() }}" alt="Imagem de {{ $product->name }}"
                 class="rounded border" style="width: 6rem; height: 6rem; object-fit: cover;">
        </div>
    @endif

    <input id="image" type="file" name="image" accept="image/jpeg,image/png,image/webp"
           class="form-control @error('image') is-invalid @enderror">
    @error('image')<div class="invalid-feedback">{{ $message }}</div>@enderror
    <div class="form-text">
        JPG, PNG ou WEBP, até 5 MB.
        @if ($editing && $product->imageUrl())
            Envie uma nova para substituir a atual; deixe em branco para mantê-la.
        @endif
    </div>
</div>