@extends('layouts.app')

@section('title', 'Menu Item Ingredients')

@section('content')
<div class="container">
    <div class="page-heading">
        <div>
            <div class="eyebrow">Nutrition Calculator</div>
            <h1>{{ $menuItem->name }}</h1>
            <p>Add every ingredient and its quantity in grams. Nutrition is calculated automatically.</p>
        </div>
    </div>

    <div class="card">
        <form
            method="POST"
            action="{{ route('dashboard.menu-items.ingredients.update', $menuItem) }}"
        >
            @csrf
            @method('PUT')

            <div id="ingredientRows">
                @forelse($menuItem->ingredients as $selected)
                    <div class="grid grid-2 ingredient-row" style="margin-bottom: 12px;">
                        <select name="ingredient_id[]" required>
                            @foreach($ingredients as $ingredient)
                                <option
                                    value="{{ $ingredient->id }}"
                                    @selected($selected->id == $ingredient->id)
                                >
                                    {{ $ingredient->name }}
                                </option>
                            @endforeach
                        </select>

                        <div style="display: flex; gap: 8px;">
                            <input
                                type="number"
                                step="0.1"
                                name="quantity_grams[]"
                                value="{{ $selected->pivot->quantity_grams }}"
                                placeholder="Quantity in grams"
                                required
                            >

                            <button
                                type="button"
                                class="btn btn-danger remove-row"
                            >
                                ×
                            </button>
                        </div>
                    </div>
                @empty
                    <div class="grid grid-2 ingredient-row" style="margin-bottom: 12px;">
                        <select name="ingredient_id[]" required>
                            <option value="">Choose ingredient</option>

                            @foreach($ingredients as $ingredient)
                                <option value="{{ $ingredient->id }}">
                                    {{ $ingredient->name }}
                                </option>
                            @endforeach
                        </select>

                        <div style="display: flex; gap: 8px;">
                            <input
                                type="number"
                                step="0.1"
                                name="quantity_grams[]"
                                placeholder="Quantity in grams"
                                required
                            >

                            <button
                                type="button"
                                class="btn btn-danger remove-row"
                            >
                                ×
                            </button>
                        </div>
                    </div>
                @endforelse
            </div>

            <div style="display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px;">
                <button
                    id="addIngredientRow"
                    type="button"
                    class="btn btn-light"
                >
                    + Add Ingredient
                </button>

                <button type="submit" class="btn btn-primary">
                    Save and Calculate Nutrition
                </button>
            </div>
        </form>
    </div>

    @if($menuItem->nutrition_calculated)
        <div class="grid grid-4" style="margin-top: 20px;">
            <div class="card stat-card">
                <div class="stat-icon">🔥</div>
                <h2 class="stat-value">{{ $menuItem->calories }}</h2>
                <div class="stat-label">Calories</div>
            </div>

            <div class="card stat-card">
                <div class="stat-icon">P</div>
                <h2 class="stat-value">{{ $menuItem->protein }}g</h2>
                <div class="stat-label">Protein</div>
            </div>

            <div class="card stat-card">
                <div class="stat-icon">C</div>
                <h2 class="stat-value">{{ $menuItem->carbohydrates }}g</h2>
                <div class="stat-label">Carbohydrates</div>
            </div>

            <div class="card stat-card">
                <div class="stat-icon">F</div>
                <h2 class="stat-value">{{ $menuItem->fat }}g</h2>
                <div class="stat-label">Fat</div>
            </div>
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
    const ingredientOptions = @json(
        $ingredients->map(function ($ingredient) {
            return [
                'id' => $ingredient->id,
                'name' => $ingredient->name,
            ];
        })->values()
    );

    const rowsContainer = document.getElementById('ingredientRows');
    const addRowButton = document.getElementById('addIngredientRow');

    addRowButton.addEventListener('click', () => {
        const row = document.createElement('div');

        row.className = 'grid grid-2 ingredient-row';
        row.style.marginBottom = '12px';

        const options = ingredientOptions
            .map(ingredient => `
                <option value="${ingredient.id}">
                    ${escapeHtml(ingredient.name)}
                </option>
            `)
            .join('');

        row.innerHTML = `
            <select name="ingredient_id[]" required>
                <option value="">Choose ingredient</option>
                ${options}
            </select>

            <div style="display: flex; gap: 8px;">
                <input
                    type="number"
                    step="0.1"
                    name="quantity_grams[]"
                    placeholder="Quantity in grams"
                    required
                >

                <button
                    type="button"
                    class="btn btn-danger remove-row"
                >
                    ×
                </button>
            </div>
        `;

        rowsContainer.appendChild(row);
    });

    document.addEventListener('click', event => {
        if (
            event.target.classList.contains('remove-row') &&
            document.querySelectorAll('.ingredient-row').length > 1
        ) {
            event.target.closest('.ingredient-row').remove();
        }
    });

    function escapeHtml(value) {
        const element = document.createElement('div');
        element.textContent = value ?? '';
        return element.innerHTML;
    }
</script>
@endpush