@model Aberwyn.Models.RecipeLabEntry

@{
    ViewData["Title"] = "Matlabb";
}

<link rel="stylesheet" href="/css/lab.css" />

<div class="lab-container">
    <!-- Vänster: formulär för labb-entry -->
    <div class="lab-main">
        <h2>Matlabb – @(string.IsNullOrEmpty(Model.Title) ? "Ny" : Model.Title)</h2>

        <form asp-action="SaveLabEntry" method="post">
            <input type="hidden" name="Id" value="@Model.Id" />
            <div class="lab-form-group">
                <label>Titel</label>
                <input type="text" name="Title" value="@Model.Title" class="lab-input" required />
            </div>
            <div class="lab-form-group">
                <label>Inspiration</label>
                <input type="text" name="Inspiration" value="@Model.Inspiration" class="lab-input" />
            </div>
            <div class="lab-form-group">
                <label>Anteckningar</label>
                <textarea name="Notes" class="lab-textarea">@Model.Notes</textarea>
            </div>
            <div class="lab-form-group">
                <label>Taggar</label>
                <input type="text" name="Tags" value="@Model.Tags" class="lab-input" />
            </div>
            <button type="submit" class="lab-save-button">Spara labb</button>
        </form>

        @if (Model.Id > 0)
        {
            <hr />

            <!-- Ingredienser sektion -->
            <h3>Ingredienser</h3>
            <div id="ingredients-section">
                <form asp-action="SaveLabIngredients" method="post">
                    <input type="hidden" name="RecipeLabEntryId" value="@Model.Id" />
                    <div id="ingredients-list">
                        @if (Model.Ingredients?.Any() == true)
                        {
                            @for (int i = 0; i < Model.Ingredients.Count; i++)
                            {
                                <div class="ingredient-row">
                                    <input type="text" name="Ingredients[@i].Quantity" value="@Model.Ingredients[i].Quantity" placeholder="Mängd" class="lab-input" />
                                    <input type="text" name="Ingredients[@i].Item" value="@Model.Ingredients[i].Item" placeholder="Ingrediens" class="lab-input" />
                                    <button type="button" class="remove-ingredient" onclick="removeIngredient(this)">Ta bort</button>
                                </div>
                            }
                        }
                        else
                        {
                            <div class="ingredient-row">
                                <input type="text" name="Ingredients[0].Quantity" placeholder="Mängd" class="lab-input" />
                                <input type="text" name="Ingredients[0].Item" placeholder="Ingrediens" class="lab-input" />
                                <button type="button" class="remove-ingredient" onclick="removeIngredient(this)">Ta bort</button>
                            </div>
                        }
                    </div>
                    <button type="button" onclick="addIngredient()" class="lab-add-button">Lägg till ingrediens</button>
                    <button type="submit" class="lab-save-button">Spara ingredienser</button>
                </form>
            </div>

            <hr />

            <!-- Ny version sektion -->
            <h3>Ny version</h3>
            <form asp-action="AddLabVersion" method="post">
                <input type="hidden" name="RecipeLabEntryId" value="@Model.Id" />
                <div class="lab-form-group">
                    <label>Version-label</label>
                    <input type="text" name="VersionLabel" value="v@((Model.Versions?.Count + 1 ?? 1))" class="lab-input" />
                </div>
                <div class="lab-form-group">
                    <label>Instruktioner</label>
                    <textarea name="Instructions" class="lab-textarea"></textarea>
                </div>
                <div class="lab-form-group">
                    <label>Resultat</label>
                    <textarea name="ResultNotes" class="lab-textarea"></textarea>
                </div>
                <button type="submit" class="lab-add-button">Lägg till version</button>
            </form>
        }
        else
        {
            <p><em>Spara labbet först för att kunna lägga till ingredienser och versioner.</em></p>
        }
    </div>

    <!-- Höger: versioner -->
    <div class="lab-versions">
        <h3>Versioner</h3>
        @if (Model.Versions?.Any() == true)
        {
            <div class="version-scroll">
                @foreach (var version in Model.Versions.OrderByDescending(v => v.CreatedAt))
                {
                    <div class="version-card">
                        <h4>@version.VersionLabel</h4>
                        <p><strong>Skapat:</strong> @version.CreatedAt.ToString("yyyy-MM-dd")</p>
                        
                        @if (!string.IsNullOrEmpty(version.Instructions))
                        {
                            <p><strong>Instruktioner:</strong><br />@version.Instructions</p>
                        }
                        
                        @if (!string.IsNullOrEmpty(version.ResultNotes))
                        {
                            <p><strong>Resultat:</strong><br />@version.ResultNotes</p>
                        }
                        
                        @if (version.Ingredients?.Any() == true)
                        {
                            <p><strong>Ingredienser:</strong></p>
                            <ul>
                                @foreach (var ing in version.Ingredients)
                                {
                                    <li>@ing.Quantity @ing.Item</li>
                                }
                            </ul>
                        }
                    </div>
                }
            </div>
        }
        else
        {
            <p>Inga tidigare versioner ännu.</p>
        }
    </div>
</div>

<script>
let ingredientIndex = @(Model.Ingredients?.Count ?? 1);

function addIngredient() {
    const list = document.getElementById('ingredients-list');
    const div = document.createElement('div');
    div.className = 'ingredient-row';
    div.innerHTML = `
        <input type="text" name="Ingredients[${ingredientIndex}].Quantity" placeholder="Mängd" class="lab-input" />
        <input type="text" name="Ingredients[${ingredientIndex}].Item" placeholder="Ingrediens" class="lab-input" />
        <button type="button" class="remove-ingredient" onclick="removeIngredient(this)">Ta bort</button>
    `;
    list.appendChild(div);
    ingredientIndex++;
}

function removeIngredient(button) {
    const row = button.closest('.ingredient-row');
    row.remove();
    reindexIngredients();
}

function reindexIngredients() {
    const rows = document.querySelectorAll('.ingredient-row');
    rows.forEach((row, index) => {
        const quantityInput = row.querySelector('input[name*="Quantity"]');
        const itemInput = row.querySelector('input[name*="Item"]');
        
        if (quantityInput) quantityInput.name = `Ingredients[${index}].Quantity`;
        if (itemInput) itemInput.name = `Ingredients[${index}].Item`;
    });
    ingredientIndex = rows.length;
}
</script>