@model Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models.TestGridModel
@using DevExtreme.AspNet.Mvc

@{
    var contextId = Model;
    // var gridId = $"dataGrid_{Guid.NewGuid():N}";
}

<div>
    @(Html.DevExtreme().DataGrid()
    .ID(Model.Id.ToString())
    .ShowBorders(true)
    .DataSource(ds => ds.Mvc()
                    .Controller("ManagementPage")
                    .LoadAction("GetShippings"))
    .KeyExpr("Id")
    .SearchPanel(sp => sp.Visible(true))
    .HeaderFilter(hf => hf.Visible(true))
    .Paging(p => p.PageSize(15))
    .Pager(p => p.Visible(true))
    .OnRowExpanded("onRowExpanded")
    .Editing(editing => {
        editing.Mode(GridEditMode.Cell);
        editing.AllowUpdating(true);
        editing.AllowAdding(true);
        editing.AllowDeleting(true);
    })
    .Columns(c => {
        c.Add().DataField("Id").AllowEditing(false);
        c.Add().DataField("ShippingDate");
        c.Add().DataField("LicencePlate");
        c.Add().DataField("IsAllMeasured");        
    })
    .Toolbar(toolbar => {
            toolbar.Items(items => {
                items.Add()
                    .Name("addRowButton")
                    .ShowText(ToolbarItemShowTextMode.Always);

                items.Add()
                    .Location(ToolbarItemLocation.After)
                    .Widget(w =>
                        w.Button()
                            .Text("Delete Selected Records")
                            .Icon("trash")
                            .Disabled(true)
                            .OnClick("onDeleteBtnClick")
                    );
            });
        })
        .MasterDetail(md => {
        md.Enabled(true);
        md.Template(@<text>
            <div class="master-detail-caption"><%- data.ShippingDate %> <%- data.LicencePlate %>'s shippingdocuments:</div>
            
        <div id="@(new JS("'shippingDocumentGridContainer-' + data.ID"))"></div>
            @(Html.DevExtreme().DataGrid<FruitBank.Common.Entities.ShippingDocument>()
                .ColumnAutoWidth(true)
                .ShowBorders(true)
                .ID(new JS("'shippingDocumentGridContainer-' + data.Id"))
                .Columns(columns => {
                    columns.AddFor(m => m.Id).AllowEditing(false);

                    columns.AddFor(m => m.Country);

                    columns.AddFor(m => m.Created);

                    columns.AddFor(m => m.PartnerId);

                    columns.Add()
                        .Caption("Completed")
                        .DataType(GridColumnDataType.Boolean)
                        .CalculateCellValue("calculateCellValue");
                })
                .DataSource(ds => ds.Mvc()
                    .Controller("Shipping")
                    .LoadAction("GetShippingDocumentsByShippingId")
                    .LoadParams(new { shippingId = new JS("data.Id") })
                    .Key("Id")
                )
            )
        </text>);
    })
)
</div>


<script>
    function onDeleteBtnClick(){
        let dataGrid = $("#gridContainer").dxDataGrid("instance");
        $.when.apply($, dataGrid.getSelectedRowsData().map(function(data) {
            return dataGrid.getDataSource().store().remove(data.ID);
        })).done(function() {
            dataGrid.refresh();
        });
    }

    function calculateFilterExpression(filterValue, selectedFilterOperation, target) {
        if(target === "search" && typeof(filterValue) === "string") {
            return [this.dataField, "contains", filterValue]
        }
        return function(data) {
            return (data.AssignedEmployee || []).indexOf(filterValue) !== -1
        }
    }

    function onSelectionChanged(data) {
        let dataGrid = $("#gridContainer").dxDataGrid("instance");
        dataGrid.option("toolbar.items[1].options.disabled", !data.selectedRowsData.length);
    }

    function onRowExpanded(e) {
        e.component.dxDataGrid("getDataSource").reload();
    }
</script>