@model ProductModel

<div class="card-body">
    @await Html.PartialAsync("Table", new DataTablesModel
    {
        Name = "productvideos-grid",
        UrlRead = new DataUrl("ProductVideoList", "Product", new RouteValueDictionary { [nameof(Model.ProductVideoSearchModel.ProductId)] = Model.ProductVideoSearchModel.ProductId }),
        UrlDelete = new DataUrl("ProductVideoDelete", "Product", null),
        UrlUpdate = new DataUrl("ProductVideoUpdate", "Product", null),
        Length = Model.ProductVideoSearchModel.PageSize,
        LengthMenu = Model.ProductVideoSearchModel.AvailablePageSizes,
        ColumnCollection = new List<ColumnProperty>
        {
            new ColumnProperty(nameof(ProductVideoModel.Id))
            {
                Title = T("Admin.Catalog.Products.Multimedia.Videos.Fields.Preview").Text,
                Render = new RenderCustom("renderVideosColumnProductVideoUrl")
            },
            new ColumnProperty(nameof(ProductVideoModel.VideoUrl))
            {
                Title = T("Admin.Catalog.Products.Multimedia.Videos.Fields.VideoUrl").Text,
                Width = "400",
                Editable = true,
                EditType = EditType.String
            },
            new ColumnProperty(nameof(ProductVideoModel.DisplayOrder))
            {
                Title = T("Admin.Catalog.Products.Multimedia.Videos.Fields.DisplayOrder").Text,
                Width = "150",
                ClassName = NopColumnClassDefaults.CenterAll,
                Editable = true,
                EditType = EditType.Number
            },
            new ColumnProperty(nameof(ProductVideoModel.Id))
            {
                Title = T("Admin.Common.Edit").Text,
                Width = "200",
                ClassName =  NopColumnClassDefaults.Button,
                Render = new RenderButtonsInlineEdit()
            },
            new ColumnProperty(nameof(ProductVideoModel.Id))
            {
                Title = T("Admin.Common.Delete").Text,
                Width = "100",
                Render = new RenderButtonRemove(T("Admin.Common.Delete").Text),
                ClassName = NopColumnClassDefaults.Button
            }
        }
    })
    <script>
        function renderVideosColumnProductVideoUrl(data, type, row, meta) {
            return '<iframe src="' + row.VideoUrl + '" width="300" /></iframe>';
        }
    </script>
    <div class="card card-default">
        <div class="card-header">
            @T("Admin.Catalog.Products.Multimedia.Videos.AddNew")
        </div>
        <div class="card-body">
            <div class="form-group row">
                <div class="col-md-3">
                    <nop-label asp-for="AddVideoModel.VideoUrl" />
                </div>
                <div class="col-md-9">
                    <nop-editor asp-for="AddVideoModel.VideoUrl" />
                    <span asp-validation-for="AddVideoModel.VideoUrl"></span>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-3">
                    <nop-label asp-for="AddVideoModel.DisplayOrder" />
                </div>
                <div class="col-md-9">
                    <nop-editor asp-for="AddVideoModel.DisplayOrder" />
                    <span asp-validation-for="AddVideoModel.DisplayOrder"></span>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-9 offset-md-3">
                    <button type="button" id="addProductVideo" class="btn btn-primary">@T("Admin.Catalog.Products.Multimedia.Videos.AddButton")</button>
                </div>
            </div>
        </div>
        <script>
            $(function() {
                $('#addProductVideo').click(function () {
                    $('#addProductVideo').attr('disabled', true);
                    var postData = {
                        VideoUrl: $("#@Html.IdFor(model => model.AddVideoModel.VideoUrl)").val(),
                        DisplayOrder: $("#@Html.IdFor(model => model.AddVideoModel.DisplayOrder)").val()
                    };
                    addAntiForgeryToken(postData);
                    
                    $.ajax({
                        cache: false,
                        type: "POST",
                        url: "@Html.Raw(Url.Action("ProductVideoAdd", "Product", new { ProductId = Model.Id}))",
                        data: postData,
                        success: function (data, textStatus, jqXHR) {
                            if (data.success) {
                                //reload grid
                                updateTable('#productvideos-grid');

                                //clear input value
                                $("#@Html.IdFor(model => model.AddVideoModel.VideoUrl)").val('');
                                $("#@Html.IdFor(model => model.AddVideoModel.DisplayOrder)").val('');
                            } else {
                                //display errors if returned
                                display_nop_error(data);
                            }
                        },
                        complete: function (jqXHR, textStatus) {
                            $('#addProductVideo').attr('disabled', false);
                        }
                    });
                });
            });
        </script>
    </div>
</div>