@model Jewelery.ViewModels.DTO.Product.ProductCMSDTO
@{
    Layout = "~/Views/Shared/_LayoutCSM.cshtml";
}
<script src="~/js/CMS/ProductImageFunc.js"></script>
<script src="~/js/CMS/ProductAtributeFunc.js"></script>
<script src="~/js/CMS/CategoryDropList.js"></script>

<div>
    @using (Html.BeginForm("AddProduct", "Product", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <div >
            @* 
                public List<Product_imagesDTO> Images { get; set; }
            *@
            <div class="Image_Container">
                @for(int i = 0; i < Model.Images.Count; i++)
                {
                    <div class="Image_group" id="Image_group_@i">
                        <div>
                            <img src="#" alt="Image Preview @i" id="ImagePreview_@i">
                        </div>
                        <div>
                            <input type="file" accept="image/*" name="Images[@i].ImageFile" onchange="PreviewImage(event,@i)">
                        </div>
                        
                        <div>
                            <label for="Images[@i].Alt_text">Alt_text</label>
                            @Html.EditorFor(model => model.Images[i].Alt_text);
                        </div>
                        <div>
                            <button type="button" onclick="RemoveImage(@i)">RemoveImage</button>
                        </div>

                    </div>               
                }
            </div>

            <div>
                <button type="button" id="newImageInput" onclick="AddImageField(event)"> Add Image </button>
            </div>            
        </div>
        <div>

            <div>
                <label for="Name_UKR">Name_UKR</label>
                @Html.EditorFor(model => model.Name_UKR)
            </div>
            <div>
                <label for="Name_ENG">Name_ENG</label>
                @Html.EditorFor(model => model.Name_ENG)
            </div>
            <div>
                <label for="Description_UKR">Description_UKR</label>
                @Html.TextAreaFor(model => model.Description_UKR)
            </div>
            <div>
                <label for="Description_ENG">Description_ENG</label>
                @Html.TextAreaFor(model => model.Description_ENG)
            </div>
            <div>
                <label for="Price">Price</label>
                @Html.EditorFor(model => model.Price)
            </div>
            <div>
                <label for="Category_id">Category_id</label>
                @*@Html.EditorFor(model => model.Category_id) @*Recode*@
                <select name="Category_id" id="Category_id" onchange="GetSubCategory(event)">
                    <option>Choose Category</option>
                </select>
            </div>
            <div>
                <label for="SubCategory_id">SubCategory_id</label>
                @*@Html.EditorFor(model => model.SubCategory_id) @*Recode*@
                <select name="SubCategory_id" id="SubCategory_id">
                    <option selected>Choose SubCategory_id</option>
                </select>
            </div>
            <div>
                <label for="Articul">Articul</label>
                @Html.EditorFor(model => model.Articul)
            </div>           

            <div>
                <label for="isExist">isExist</label>
                @Html.EditorFor(model => model.isExist)
            </div>
            <div>
                <label for="isDisplay">isDisplay</label>
                @Html.EditorFor(model => model.isDisplay)
            </div>

            <div>
                <div id="Atribute_Container">
                    @for(int i = 0; i < Model.Attributes.Count; i++)
                    {
                        <div class="Atribute_group" id="Atribute_group_@i">
                            <div>
                                <label for="">Atribute_name_UKR</label>
                                @Html.EditorFor(model => model.Attributes[i].Atribute_name_UKR)
                            </div>
                            <div>
                                <label for="">Atribute_name_ENG</label>
                                @Html.EditorFor(model => model.Attributes[i].Atribute_name_ENG)
                            </div>
                            <div>
                                <label for="">Unit</label>
                                @Html.EditorFor(model => model.Attributes[i].Unit)
                            </div>
                            <div>
                                <label for="">DetermineTheSize_Id</label>
                                @Html.EditorFor(model => model.Attributes[i].DetermineTheSize_Id)
                            </div>
                            <div class="Option_container" id="Option_container_for_atribute_@i">
                                @for (int x = 0; x < Model.Attributes[i].Options.Count; x++)
                                {
                                    <div class="Option_group" id="Option_group_@x">
                                        <div>
                                            <label for="Attributes[@i].Options[@x].Size">Size</label>
                                            @Html.EditorFor(model => model.Attributes[i].Options[x].Size) Attributes[1].Options[2].Size
                                        </div>
                                        <div>
                                            <label for="Attributes[@i].Options[@x].PriceAdjustment">PriceAdjustment</label>
                                            @Html.EditorFor(model => model.Attributes[i].Options[x].PriceAdjustment)
                                        </div>                                  
                                        <div>
                                            <button type="button" onclick="RemoveOption(@x)">Delete Option</button>
                                        </div>
                                    </div>
                                }
                                <div>
                                    <button type="button" onclick="AddOption(@i)">Add Option</button>
                                </div>                            
                            </div>
                            <div>
                                <button type="button" onclick="RemoveAtribute(@i)">Delete Atribute</button>
                            </div>                                                                                   
                        </div>                   
                    }                
                    <div>
                        <button type="button" onclick="AddAtribute()">Add Atribute</button>
                    </div>
                </div>
            </div>

            @*
                public List<AtributeCMSDTO> Attributes { get; set; }
            *@
        </div>

        <div>
            <button type="submit">Add Product</button>
        </div>
    }
</div>

    public class ProductCMSDTO
    {
        public int Product_id { get; set; }
        public string Name_UKR { get; set; }
        public string Name_ENG { get; set; }

        public string Description_UKR { get; set; }
        public string Description_ENG { get; set; }

        public decimal Price { get; set; }
        public int Category_id { get; set; }
        public int Articul { get; set; }
        public int? SubCategory_id { get; set; }
        public List<Product_imagesDTO> Images { get; set; }
        public List<AtributeCMSDTO> Attributes { get; set; }
        public bool isExist { get; set; }
        public bool isDisplay { get; set; }
        public DateTime Created_at { get; set; }
        public DateTime Updated_at { get; set; }
    }

public class AtributeCMSDTO
    {
        public int Atribute_id { get; set; }
        public string Atribute_name_UKR { get; set; }
        public string Atribute_name_ENG { get; set; }

        public int Product_id { get; set; }
        public List<Option> Options { get; set; }
        public string? Unit { get; set; }

        public int? DetermineTheSize_Id { get; set; }
    }

public class Option
    {
        public int Option_id { get; set; }
        public int Atribute_id { get; set; }
        public Atribute Atribute { get; set; }
        public decimal Size { get; set; }
        public decimal PriceAdjustment { get; set; }
    }