@php
    $featuresText = old('features', implode("\n", $price->featureRows()));
@endphp

<div class="grid gap-5 lg:grid-cols-2">
    <div>
        <label for="name" class="text-sm font-semibold text-zinc-700 dark:text-zinc-200">Name</label>
        <input id="name" name="name" value="{{ old('name', $price->name) }}" required
            class="mt-2 w-full rounded-xl border-zinc-300 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950"
            placeholder="Basic">
        @error('name')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="code" class="text-sm font-semibold text-zinc-700 dark:text-zinc-200">Code</label>
        <input id="code" name="code" value="{{ old('code', $price->code) }}"
            class="mt-2 w-full rounded-xl border-zinc-300 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950"
            placeholder="basic">
        @error('code')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="strapline" class="text-sm font-semibold text-zinc-700 dark:text-zinc-200">Strapline</label>
        <input id="strapline" name="strapline" value="{{ old('strapline', $price->strapline) }}"
            class="mt-2 w-full rounded-xl border-zinc-300 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950"
            placeholder="Core warehouse visibility">
        @error('strapline')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="badge_label" class="text-sm font-semibold text-zinc-700 dark:text-zinc-200">Badge label</label>
        <input id="badge_label" name="badge_label" value="{{ old('badge_label', $price->badge_label) }}"
            class="mt-2 w-full rounded-xl border-zinc-300 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950"
            placeholder="Popular">
        @error('badge_label')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="monthly_amount" class="text-sm font-semibold text-zinc-700 dark:text-zinc-200">Monthly price</label>
        <input id="monthly_amount" name="monthly_amount" type="number" step="0.01" min="0"
            value="{{ old('monthly_amount', $price->exists ? number_format($price->monthly_amount / 100, 2, '.', '') : '0.00') }}"
            required
            class="mt-2 w-full rounded-xl border-zinc-300 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950"
            placeholder="99.00">
        @error('monthly_amount')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="annual_amount" class="text-sm font-semibold text-zinc-700 dark:text-zinc-200">Annual price</label>
        <input id="annual_amount" name="annual_amount" type="number" step="0.01" min="0"
            value="{{ old('annual_amount', $price->annual_amount !== null ? number_format($price->annual_amount / 100, 2, '.', '') : '') }}"
            class="mt-2 w-full rounded-xl border-zinc-300 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950"
            placeholder="990.00">
        @error('annual_amount')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="currency" class="text-sm font-semibold text-zinc-700 dark:text-zinc-200">Currency</label>
        <input id="currency" name="currency" value="{{ old('currency', $price->currency ?: 'gbp') }}" maxlength="3"
            required
            class="mt-2 w-full rounded-xl border-zinc-300 bg-white px-4 py-3 text-sm uppercase dark:border-zinc-700 dark:bg-zinc-950"
            placeholder="gbp">
        @error('currency')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="sort_order" class="text-sm font-semibold text-zinc-700 dark:text-zinc-200">Sort order</label>
        <input id="sort_order" name="sort_order" type="number" min="0"
            value="{{ old('sort_order', $price->sort_order ?? 0) }}" required
            class="mt-2 w-full rounded-xl border-zinc-300 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950">
        @error('sort_order')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
        @enderror
    </div>

    <div class="lg:col-span-2">
        <label for="description" class="text-sm font-semibold text-zinc-700 dark:text-zinc-200">Description</label>
        <textarea id="description" name="description" rows="3"
            class="mt-2 w-full rounded-xl border-zinc-300 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950"
            placeholder="Short customer-facing description">{{ old('description', $price->description) }}</textarea>
        @error('description')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
        @enderror
    </div>

    <div class="lg:col-span-2">
        <label for="features" class="text-sm font-semibold text-zinc-700 dark:text-zinc-200">Features</label>
        <textarea id="features" name="features" rows="6"
            class="mt-2 w-full rounded-xl border-zinc-300 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950"
            placeholder="One feature per line">{{ $featuresText }}</textarea>
        @error('features')
            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
        @enderror
    </div>

    <div class="flex flex-wrap gap-4 lg:col-span-2">
        <label
            class="inline-flex items-center gap-2 rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm font-semibold dark:border-zinc-800 dark:bg-zinc-950">
            <input type="checkbox" name="is_featured" value="1" @checked(old('is_featured', $price->is_featured))
                class="rounded border-zinc-300">
            Featured price
        </label>

        <label
            class="inline-flex items-center gap-2 rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm font-semibold dark:border-zinc-800 dark:bg-zinc-950">
            <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $price->is_active ?? true))
                class="rounded border-zinc-300">
            Active
        </label>
    </div>
</div>