@using Microsoft.AspNetCore.Components.Sections
@using Microsoft.EntityFrameworkCore
@using CocktailWeb.Data
@using Microsoft.Extensions.Options
@page "/settings/cocktails/edit"
@page "/settings/cocktails/edit/{id}"
@inject IDbContextFactory<DbDataContext> DataContextFactory;
@inject NavigationManager nav;
@inject IWebHostEnvironment env;
@inject IOptions<GeneralSettings> Config;

<SectionContent SectionId="TopRow.Title">
    <label>Cocktail hinzufügen</label>
</SectionContent>


<div class="d-flex gap-3">
    <div class="border border-2 rounded p-3 w-100">
        <div class="mb-3">
            <label class="form-label" for="cocktailname">Cocktailname</label>
            <input id="cocktailname" name="cocktailname" type="text" class="form-control" @bind="@EditCocktail.Name" />
        </div>
        <div class="mb-3">
            <label class="form-label" for="ersteller">Ersteller</label>
            <input id="ersteller" name="ersteller" type="text" class="form-control" @bind="@EditCocktail.Ersteller" />
        </div>
        <div class="mb-3">
            <label class="form-label" for="cocktailimage">Bild</label>
            <div class="mb-2">
                @if (EditCocktail.ImageURL != null)
                {
                    <img style="max-width:128px;" src="@EditCocktail.ImageURL" />
                } else
                {
                    <div>Kein Bild vorhanden</div>
                }
            </div>
            <label class="form-label" for="cocktailimage">Neues Bild hochladen</label>
            <InputFile OnChange="Bild_OnChange" class="form-control" id="cocktailimage" name="cocktailimage" accept=".jpg,.png,.jpeg,.gif,.webp" />
        </div>

        <h5>Cocktail-Zutaten</h5>
        <table class="table table-dark align-middle">
            <tbody>
                @if (EditCocktail.Cocktailflaschen.Count == 0)
                {
                    <tr>
                        <td class="disabled" aria-disabled="true">Noch keine Zutaten hinzugefügt</td>
                    </tr>
                }
                else
                {
                    @foreach (CocktailFlasche cf in EditCocktail.Cocktailflaschen.OrderBy(cf => cf.Reihenfolge))
                    {
                        <tr>
                            <th>@cf.Reihenfolge</th>
                            <th>@cf.Flasche.Name</th>
                            <td>
                                <div class="input-group">
                                    <input class="form-control" id="Menge" name="menge" type="number" @bind="@cf.Menge" />
                                    <span class="input-group-text">ml</span>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button class="btn btn-outline-primary" @onclick="args => FlascheReihenfolge(args, cf,-2)">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-up-fill" viewBox="0 0 16 16">
                                            <path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z" />
                                        </svg>
                                    </button>
                                    <button class="btn btn-outline-primary" @onclick="args => FlascheReihenfolge(args, cf ,2)">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
                                            <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
                                        </svg>
                                    </button>
                                </div>
                            </td>
                            <td>
                                <button class="btn btn-outline-danger" @onclick="args => FlascheEntfernen(args, cf)">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-circle" viewBox="0 0 16 16">
                                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                                        <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8" />
                                    </svg>
                                </button>
                            </td>
                        </tr>
                    }
                    <tr>
                        <th></th>
                        <th>Gesamt</th>
                        <td>@EditCocktail.Cocktailflaschen.Sum(cf => cf.Menge)</td>
                        <td colspan="2"></td>
                    </tr>
                }
            </tbody>
        </table>
        <button @onclick="OnSubmit" class="btn btn-primary">Speichern</button>
        <button @onclick="@(() => nav.NavigateTo("/settings/cocktails"))" class="btn btn-secondary">Abbrechen</button>
    </div>

    <div class="border border-2 rounded p-3 w-100">
        <h4>Verfügbare Zutaten</h4>
        <ul class="list-group">
            @if (FlaschenListe.Count == 0)
            {
                <li class="list-group-item list-group-item-action align-middle">
                    Es wurden noch keine Zutaten angelegt
                </li>
            }
            else
            {
                @foreach (Flasche fl in FlaschenListe)
                {
                    <li class="list-group-item list-group-item-action align-middle z-0" @onclick="args => FlascheHinzufuegen(args,fl)">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle text-success" viewBox="0 0 16 16">
                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                            <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4" />
                        </svg>
                        <label class="form-check-label stretched-link">@fl.Name</label>
                    </li>
                }
            }
        </ul>
    </div>
</div>