@{
    ViewData["Title"] = "Edit Flower";
}
@model FlowerMaterialViewModel

<form asp-action="Edit" method="post" enctype="multipart/form-data">
    @Html.HiddenFor(model => model.FlowerId)
    <div class="form-group">
        <label asp-for="FlowerName" class="control-label"></label>
        <input asp-for="FlowerName" class="form-control" />
        <span asp-validation-for="FlowerName" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="FlowerType" class="control-label"></label>
        <select asp-for="FlowerType" class="form-control  material_to_be_Added">
            @foreach (var item in ViewBag.FlowerType)
            {
                {
                    var selectedvalue = (item.Value == Model.FlowerType.ToString() ? "selected" : "");
                }
                <option value="@item.Value" selectedvalue> @item.Text</option>
            }
        </select>
        <span asp-validation-for="FlowerType" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="FlowerCostPrice" class="control-label"></label>
        <input asp-for="FlowerCostPrice" class="form-control" />
        <span asp-validation-for="FlowerCostPrice" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="DateCreated" class="control-label"></label>
        <input asp-for="DateCreated" class="form-control" />
        <span asp-validation-for="DateCreated" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="FlowerImg" class="control-label"></label>
        <input asp-for="FlowerImg" class="form-control" />
        <span asp-validation-for="FlowerImg" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="ImgPath">Image</label>
        <input asp-for="ImgPath" name="ImgPath" type="file" class="form-control">
    </div>

    <div class="form-group">
        <label for="MaterialId">Material</label>
        <select id="MaterialId" class="form-select">
            @foreach (var material in ViewBag.Materials)
            {
                <option value="@material.Id">@material.Name</option>
            }
        </select> 
    </div>
    <div class="form-group">
        <label for="QuantityInput">Quantity</label>
        <input type="number" id="QuantityInput" class="form-control" />
    </div>
    <button type="button" onclick="addMaterialAndQuantity()">Add Material</button>

    <div id="materialList">
        @foreach (var material in Model.MaterialQuantities)
        {
            <div class="alert alert-info alert-dismissible fade show" role="alert" data-material-id="@material.MaterialId">
                <strong>@material.MaterialName</strong> - Quantity: @material.Quantity
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" onclick="removeMaterialAndQuantity(@material.MaterialId)"></button>
            </div>
        }
    </div>

    <div id="hiddenFields">
        @foreach (var material in Model.MaterialQuantities)
        {
            <input type="hidden" name="MaterialQuantities.Index" value="@material.MaterialId" data-material-id="@material.MaterialId" />
            <input type="hidden" name="MaterialQuantities[@material.MaterialId].MaterialId" value="@material.MaterialId" data-material-id="@material.MaterialId" />
            <input type="hidden" name="MaterialQuantities[@material.MaterialId].Quantity" value="@material.Quantity" data-material-id="@material.MaterialId" />
        }
    </div>

    <button type="submit" class="btn btn-primary">Save</button>
</form>

@section Scripts {
    <script>
        function addMaterialAndQuantity() {
            var materialId = $('#MaterialId').val();
            var materialText = $('#MaterialId option:selected').text();
            var quantity = $('#QuantityInput').val();

            if (materialId && quantity) {
                var html = '<div class="alert alert-info alert-dismissible fade show" role="alert" data-material-id="' + materialId + '">';
                html += '<strong>' + materialText + '</strong> - Quantity: ' + quantity;
                html += '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" onclick="removeMaterialAndQuantity(' + materialId + ')"></button>';
                html += '</div>';
                $('#materialList').append(html);

                var hiddenField = '<input type="hidden" name="MaterialQuantities.Index" value="' + materialId + '" data-material-id="' + materialId + '" />';
                hiddenField += '<input type="hidden" name="MaterialQuantities[' + materialId + '].MaterialId" value="' + materialId + '" data-material-id="' + materialId + '" />';
                hiddenField += '<input type="hidden" name="MaterialQuantities[' + materialId + '].Quantity" value="' + quantity + '" data-material-id="' + materialId + '" />';
                $('#hiddenFields').append(hiddenField);

                $('#MaterialId').val('').trigger('change');
                $('#QuantityInput').val('');
            }
        }

        function removeMaterialAndQuantity(materialId) {
            $('#materialList').find('div[data-material-id="' + materialId + '"]').remove();

            $('#hiddenFields').find('input[data-material-id="' + materialId + '"]').remove();
        }
    </script>
}