@csrf
@if ($component->exists)
    @method('PUT')
@endif

@php
    $micronutrientsText = old('micronutrients_text', collect($component->micronutrients ?? [])
        ->map(fn ($value, $key) => $key . ': ' . (is_scalar($value) ? $value : json_encode($value)))
        ->implode("\n"));
    $checkboxes = [
        'menu_labels' => array_combine(\App\Models\Component::MENU_LABELS, \App\Models\Component::MENU_LABELS),
        'meal_slots' => collect(\App\Models\Component::MEAL_SLOTS)->mapWithKeys(fn ($slot) => [$slot => __('admin_components.meals.' . $slot)])->all(),
        'diet_types' => collect(\App\Models\Component::DIET_TYPES)->mapWithKeys(fn ($diet) => [$diet => __('admin_components.diets.' . $diet)])->all(),
    ];
    $numberFields = [
        'kcal' => '0.1', 'fat_g' => '0.01', 'saturated_fat_g' => '0.01', 'protein_g' => '0.01',
        'carbs_g' => '0.01', 'fiber_g' => '0.01', 'sugar_g' => '0.01',
        'calcium_mg' => '0.1', 'vitamin_c_mg' => '0.1', 'vitamin_d_mcg' => '0.01',
    ];
    $requiredNumbers = ['kcal', 'fat_g', 'saturated_fat_g', 'protein_g', 'carbs_g', 'fiber_g', 'sugar_g'];
    $portionPhotos = $component->exists ? $component->portionPhotos->keyBy('slot') : collect();
@endphp

<h3 class="mb-3 text-sm font-bold text-ink-900">{{ __('admin_components.section_basic') }}</h3>
<div class="grid gap-4 md:grid-cols-2">
    <div>
        <label for="name_en" class="field-label">{{ __('admin_components.name_en') }}</label>
        <input id="name_en" name="name_en" type="text" dir="ltr" required value="{{ old('name_en', $component->name_en) }}" class="field-input">
    </div>
    <div>
        <label for="name_ar" class="field-label">{{ __('admin_components.name_ar') }}</label>
        <input id="name_ar" name="name_ar" type="text" dir="rtl" required value="{{ old('name_ar', $component->name_ar) }}" class="field-input">
    </div>
    <div>
        <label for="food_group_id" class="field-label">{{ __('admin_components.food_group') }}</label>
        <select id="food_group_id" name="food_group_id" required class="field-input">
            @foreach ($foodGroups as $group)
                <option value="{{ $group->id }}" @selected((string) old('food_group_id', $component->food_group_id) === (string) $group->id)>{{ $group->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="grid grid-cols-2 gap-3">
        <div>
            <label for="reference_quantity" class="field-label">{{ __('admin_components.reference_quantity') }}</label>
            <input id="reference_quantity" name="reference_quantity" type="number" step="0.1" min="0" required value="{{ old('reference_quantity', $component->reference_quantity) }}" class="field-input">
        </div>
        <div>
            <label for="reference_unit" class="field-label">{{ __('admin_components.reference_unit') }}</label>
            <select id="reference_unit" name="reference_unit" class="field-input">
                @foreach (['g', 'ml'] as $unit)
                    <option value="{{ $unit }}" @selected(old('reference_unit', $component->reference_unit) === $unit)>{{ $unit }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div>
        <label for="serving_size" class="field-label">{{ __('admin_components.serving_size') }}</label>
        <input id="serving_size" name="serving_size" type="text" maxlength="120" value="{{ old('serving_size', $component->serving_size) }}" class="field-input" placeholder="{{ __('admin_components.serving_size_placeholder') }}">
        <p class="mt-1 text-xs text-ink-400">{{ __('admin_components.serving_size_hint') }}</p>
    </div>
    <div>
        <label for="measure_method" class="field-label">{{ __('admin_components.measure_method') }}</label>
        <select id="measure_method" name="measure_method" class="field-input">
            @foreach (\App\Models\Component::MEASURE_METHODS as $method)
                <option value="{{ $method }}" @selected(old('measure_method', $component->measure_method ?? 'weight') === $method)>{{ __('admin_components.measure_methods.' . $method) }}</option>
            @endforeach
        </select>
    </div>
</div>

<h3 class="mb-3 mt-6 text-sm font-bold text-ink-900">
    {{ __('admin_components.section_nutrition') }}
    <span class="font-normal text-ink-400">— {{ __('admin_components.per_reference') }}</span>
</h3>
<div class="grid gap-4 md:grid-cols-5">
    @foreach ($numberFields as $field => $step)
        <div>
            <label for="{{ $field }}" class="field-label">{{ __('admin_components.' . $field) }}</label>
            <input id="{{ $field }}" name="{{ $field }}" type="number" step="{{ $step }}" min="0" @required(in_array($field, $requiredNumbers, true)) value="{{ old($field, $component->{$field} ?? (in_array($field, $requiredNumbers, true) ? 0 : null)) }}" class="field-input">
        </div>
    @endforeach
</div>

@include('portal.admin.components._portions')

<div class="mt-4 grid gap-4 md:grid-cols-2">
    <div>
        <label for="micronutrients_text" class="field-label">{{ __('admin_components.micronutrients') }}</label>
        <textarea id="micronutrients_text" name="micronutrients_text" rows="4" dir="ltr" class="field-input" placeholder="iron_mg: 2.7&#10;magnesium_mg: 30">{{ $micronutrientsText }}</textarea>
        <p class="mt-1 text-xs text-ink-400">{{ __('admin_components.micronutrients_hint') }}</p>
    </div>
    <div>
        <label for="allergens_text" class="field-label">{{ __('admin_components.allergens') }}</label>
        <input id="allergens_text" name="allergens_text" type="text" dir="ltr" value="{{ old('allergens_text', implode(', ', $component->allergens ?? [])) }}" class="field-input" placeholder="nuts, lactose, egg">
        <p class="mt-1 text-xs text-ink-400">{{ __('admin_components.allergens_hint') }}</p>
    </div>
</div>

<h3 class="mb-3 mt-6 text-sm font-bold text-ink-900">{{ __('admin_components.section_menu') }}</h3>
<div class="grid gap-4 md:grid-cols-3">
    @foreach ($checkboxes as $field => $options)
        <fieldset>
            <legend class="field-label">{{ __('admin_components.' . $field) }}</legend>
            <div class="flex flex-wrap gap-x-4 gap-y-2">
                @foreach ($options as $value => $label)
                    <label class="flex items-center gap-2 text-sm text-ink-600">
                        <input type="checkbox" name="{{ $field }}[]" value="{{ $value }}" @checked(in_array($value, old($field, $component->{$field} ?? []), true)) class="rounded border-ink-300 text-brand-500 focus:ring-brand-300">
                        {{ $label }}
                    </label>
                @endforeach
            </div>
        </fieldset>
    @endforeach
</div>

<div class="mt-4">
    <label for="data_note" class="field-label">{{ __('admin_components.data_note') }}</label>
    <textarea id="data_note" name="data_note" rows="2" class="field-input">{{ old('data_note', $component->data_note) }}</textarea>
</div>

<div class="mt-4">
    <label class="flex items-center gap-2 text-sm font-semibold text-ink-600">
        <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $component->is_active ?? true)) class="rounded border-ink-300 text-brand-500 focus:ring-brand-300">
        {{ __('admin_components.show_in_menu') }}
    </label>
    <p class="mt-1 text-xs text-ink-400">{{ __('admin_components.show_in_menu_hint') }}</p>
</div>

<div class="mt-6 flex items-center gap-3">
    <button type="submit" class="btn-brand">{{ __('common.save') }}</button>
    <a href="{{ route('portal.admin.components.index') }}" class="btn-ghost no-underline">{{ __('common.cancel') }}</a>
</div>