@php
    $recipe ??= null;
    $initialIngredients = old('ingredients', $recipe?->ingredients->map(fn ($i) => [
        'id' => $i->id,
        'name' => $i->name,
        'quantity' => $i->quantity,
        'media' => $i->media->map(fn ($m) => ['id' => $m->id, 'url' => $m->url()])->toArray(),
    ])->toArray() ?? []);
    $initialSteps = old('steps', $recipe?->steps->map(fn ($s) => [
        'id' => $s->id,
        'name' => $s->name,
        'description' => $s->description,
        'media' => $s->media->map(fn ($m) => ['id' => $m->id, 'url' => $m->url()])->toArray(),
    ])->toArray() ?? []);
    if (empty($initialIngredients)) {
        $initialIngredients = [['id' => null, 'name' => '', 'quantity' => '', 'media' => []]];
    }
    if (empty($initialSteps)) {
        $initialSteps = [['id' => null, 'name' => '', 'description' => '', 'media' => []]];
    }
    $initialTags = old('tags', $recipe?->tags->pluck('name')->implode(', '));
@endphp

<div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
    <div class="md:col-span-2">
        <x-input-label for="name" :value="__('Name')" />
        <x-text-input id="name" name="name" type="text" class="mt-1 block w-full" :value="old('name', $recipe?->name)" required autofocus />
        <x-input-error :messages="$errors->get('name')" class="mt-2" />
    </div>

    <div class="md:col-span-2">
        <x-input-label for="description" :value="__('Description')" />
        <div class="mt-1" x-data="richText(@js(old('description', $recipe?->description)))">
            <div class="flex justify-end mb-1">
                <button type="button" @click="toggleSource()" class="text-xs text-gray-500 hover:text-gray-800" x-text="showSource ? '{{ __('Back to editor') }}' : '{{ __('View/edit HTML') }}'"></button>
            </div>
            <div x-show="!showSource" x-ref="editor" class="bg-white"></div>
            <textarea x-show="showSource" x-model="value" rows="6" class="block w-full font-mono text-xs border-gray-300 focus:border-gray-500 focus:ring-gray-500 rounded-md shadow-sm"></textarea>
            <input type="hidden" name="description" x-model="value">
        </div>
        <x-input-error :messages="$errors->get('description')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="time" :value="__('Time')" />
        <x-text-input id="time" name="time" type="number" min="0" class="mt-1 block w-full" :value="old('time', $recipe?->time)" />
        <x-input-error :messages="$errors->get('time')" class="mt-2" />
    </div>
    <div>
        <x-input-label for="unit" :value="__('Unit')" />
        <x-text-input id="unit" name="unit" type="text" placeholder="{{ __('minutes, hours') }}" class="mt-1 block w-full" :value="old('unit', $recipe?->unit)" />
        <x-input-error :messages="$errors->get('unit')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="difficulty" :value="__('Difficulty')" />
        @php $difficulty = old('difficulty', $recipe?->difficulty ?? 'easy'); @endphp
        <select id="difficulty" name="difficulty" class="mt-1 block w-full border-gray-300 focus:border-gray-500 focus:ring-gray-500 rounded-md shadow-sm">
            @foreach (['easy', 'medium', 'high', 'professional'] as $option)
                <option value="{{ $option }}" @selected($difficulty === $option)>{{ __(ucfirst($option)) }}</option>
            @endforeach
        </select>
        <x-input-error :messages="$errors->get('difficulty')" class="mt-2" />
    </div>
    <div>
        <x-input-label for="category_id" :value="__('Category')" />
        @php $selectedCategory = old('category_id', $recipe?->category_id); @endphp
        <select id="category_id" name="category_id" class="mt-1 block w-full border-gray-300 focus:border-gray-500 focus:ring-gray-500 rounded-md shadow-sm">
            <option value="">{{ __('Select a category') }}</option>
            @foreach ($categories as $category)
                <option value="{{ $category->id }}" @selected((string) $selectedCategory === (string) $category->id)>{{ $category->name }}</option>
            @endforeach
        </select>
        <x-input-error :messages="$errors->get('category_id')" class="mt-2" />
    </div>

    <div class="md:col-span-2">
        <x-input-label for="notes" :value="__('Notes')" />
        <x-text-input id="notes" name="notes" type="text" class="mt-1 block w-full" :value="old('notes', $recipe?->notes)" />
        <x-input-error :messages="$errors->get('notes')" class="mt-2" />
    </div>

    <div class="md:col-span-2">
        <x-input-label for="tags" :value="__('Tags (comma separated)')" />
        <x-text-input id="tags" name="tags" type="text" placeholder="{{ __('vegan, dessert, quick') }}" class="mt-1 block w-full" :value="$initialTags" />
        <x-input-error :messages="$errors->get('tags')" class="mt-2" />
    </div>

    <div class="md:col-span-2 flex items-center">
        <input id="public" name="public" type="checkbox" value="1" {{ old('public', $recipe?->public) ? 'checked' : '' }} class="rounded border-gray-300 text-gray-800 shadow-sm focus:ring-gray-800">
        <label for="public" class="ms-2 text-sm text-gray-600">{{ __('Make this recipe public (shown on the home page, visible to everyone)') }}</label>
    </div>

    <div class="md:col-span-2" x-data="{
        rows: @js($initialIngredients),
        removeImage(row, mediaId) {
            if (!confirm('{{ __('Remove this image?') }}')) return;
            fetch(`/media/${mediaId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                    'Accept': 'application/json',
                },
            }).then(res => { if (res.ok) row.media = row.media.filter(m => m.id !== mediaId); });
        },
    }">
        <x-input-label :value="__('Ingredients')" />
        <div class="space-y-3 mt-1">
            <template x-for="(row, index) in rows" :key="index">
                <div class="border rounded-md p-3">
                    <input type="hidden" :name="`ingredients[${index}][id]`" :value="row.id">
                    <div class="flex gap-2">
                        <input type="text" :name="`ingredients[${index}][name]`" x-model="row.name" placeholder="{{ __('Ingredient') }}" class="block w-1/2 border-gray-300 focus:border-gray-500 focus:ring-gray-500 rounded-md shadow-sm">
                        <input type="text" :name="`ingredients[${index}][quantity]`" x-model="row.quantity" placeholder="{{ __('Quantity') }}" class="block w-1/3 border-gray-300 focus:border-gray-500 focus:ring-gray-500 rounded-md shadow-sm">
                        <button type="button" @click="rows.length > 1 && rows.splice(index, 1)" class="text-red-600 hover:text-red-900 px-2">&times;</button>
                    </div>
                    <div class="mt-2 flex flex-wrap items-center gap-2">
                        <template x-for="img in row.media" :key="img.id">
                            <div class="relative">
                                <img :src="img.url" class="h-14 w-14 object-cover rounded border">
                                <button type="button" @click="removeImage(row, img.id)" class="absolute -top-1.5 -right-1.5 bg-red-600 text-white rounded-full w-4 h-4 text-[10px] leading-none">&times;</button>
                            </div>
                        </template>
                        <input type="file" :name="`ingredient_images[${index}][]`" accept="image/*" multiple class="text-xs text-gray-600">
                    </div>
                </div>
            </template>
        </div>
        <button type="button" @click="rows.push({ id: null, name: '', quantity: '', media: [] })" class="mt-2 text-sm text-gray-600 hover:text-gray-900">{{ __('+ Add ingredient') }}</button>
        <x-input-error :messages="collect($errors->get('ingredients.*.name'))->flatten()->all()" class="mt-2" />
    </div>

    <div class="md:col-span-2" x-data="{
        rows: @js($initialSteps),
        removeImage(row, mediaId) {
            if (!confirm('{{ __('Remove this image?') }}')) return;
            fetch(`/media/${mediaId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                    'Accept': 'application/json',
                },
            }).then(res => { if (res.ok) row.media = row.media.filter(m => m.id !== mediaId); });
        },
    }">
        <x-input-label :value="__('Steps')" />
        <div class="space-y-3 mt-1">
            <template x-for="(row, index) in rows" :key="index">
                <div class="border rounded-md p-3">
                    <input type="hidden" :name="`steps[${index}][id]`" :value="row.id">
                    <div class="flex gap-2 items-start">
                        <span class="mt-2 text-sm text-gray-400" x-text="index + 1"></span>
                        <div class="flex-1 space-y-1">
                            <input type="text" :name="`steps[${index}][name]`" x-model="row.name" placeholder="{{ __('Step title') }}" class="block w-full border-gray-300 focus:border-gray-500 focus:ring-gray-500 rounded-md shadow-sm">
                            <div x-data="richText(row.description)">
                                <div class="flex justify-end mb-1">
                                    <button type="button" @click="toggleSource()" class="text-xs text-gray-500 hover:text-gray-800" x-text="showSource ? '{{ __('Back to editor') }}' : '{{ __('View/edit HTML') }}'"></button>
                                </div>
                                <div x-show="!showSource" x-ref="editor" class="bg-white"></div>
                                <textarea x-show="showSource" x-model="value" rows="4" class="block w-full font-mono text-xs border-gray-300 focus:border-gray-500 focus:ring-gray-500 rounded-md shadow-sm"></textarea>
                                <input type="hidden" :name="`steps[${index}][description]`" x-model="value">
                            </div>
                        </div>
                        <button type="button" @click="rows.length > 1 && rows.splice(index, 1)" class="text-red-600 hover:text-red-900 px-2">&times;</button>
                    </div>
                    <div class="mt-2 ms-6 flex flex-wrap items-center gap-2">
                        <template x-for="img in row.media" :key="img.id">
                            <div class="relative">
                                <img :src="img.url" class="h-14 w-14 object-cover rounded border">
                                <button type="button" @click="removeImage(row, img.id)" class="absolute -top-1.5 -right-1.5 bg-red-600 text-white rounded-full w-4 h-4 text-[10px] leading-none">&times;</button>
                            </div>
                        </template>
                        <input type="file" :name="`step_images[${index}][]`" accept="image/*" multiple class="text-xs text-gray-600">
                    </div>
                </div>
            </template>
        </div>
        <button type="button" @click="rows.push({ id: null, name: '', description: '', media: [] })" class="mt-2 text-sm text-gray-600 hover:text-gray-900">{{ __('+ Add step') }}</button>
        <x-input-error :messages="collect($errors->get('steps.*.name'))->flatten()->all()" class="mt-2" />
    </div>

    <div class="md:col-span-2">
        <x-input-label for="images" :value="__('Add recipe images')" />
        <input id="images" name="images[]" type="file" accept="image/*" multiple class="mt-1 block w-full text-sm text-gray-600">
        <x-input-error :messages="collect($errors->get('images.*'))->flatten()->all()" class="mt-2" />
    </div>
</div>