@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("orderDataGridContainer")
        .ShowBorders(true)
        .DataSource(ds => ds.Mvc()
                        .Controller("ManagementPage")
                        .LoadAction("GetShippingDocuments"))
        .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("Partner.Name").AllowEditing(false);
            c.Add()
                        .Caption("Items in order")
                        .DataType(GridColumnDataType.Number)
                        .CalculateCellValue("calculateItemsCount").AllowEditing(false);
            c.Add().DataField("PartnerId");
                    c.Add().DataField("DocumentIdNumber");
                    c.Add().DataField("IsAllMeasured");                    
                    
                    c.Add()
                        .Caption("Completed")
                        .DataType(GridColumnDataType.Boolean)
                        .CalculateCellValue("calculateCellValue").AllowEditing(false);
                })
    .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="fileuploader">
    <div class="widget-container">

        <section id="tabs" class="project-tab">
            
                <div class="row">
                    <div class="col-md-12">
                        <nav>
                            <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Partner info</a>
                                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Products</a>
                                <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Files</a>
                            </div>
                        </nav>
                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                                <table class="table" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>Project Name</th>
                                            <th>Employer</th>
                                            <th>Awards</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><a href="#">Work 1</a></td>
                                            <td>Doe</td>
                                            <td>john@example.com</td>
                                        </tr>
                                        <tr>
                                            <td><a href="#">Work 2</a></td>
                                            <td>Moe</td>
                                            <td>mary@example.com</td>
                                        </tr>
                                        <tr>
                                            <td><a href="#">Work 3</a></td>
                                            <td>Dooley</td>
                                            <td>july@example.com</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                                <table class="table" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>Project Name</th>
                                            <th>Employer</th>
                                            <th>Time</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><a href="#">Work 1</a></td>
                                            <td>Doe</td>
                                            <td>john@example.com</td>
                                        </tr>
                                        <tr>
                                            <td><a href="#">Work 2</a></td>
                                            <td>Moe</td>
                                            <td>mary@example.com</td>
                                        </tr>
                                        <tr>
                                            <td><a href="#">Work 3</a></td>
                                            <td>Dooley</td>
                                            <td>july@example.com</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                                <form method="post" enctype="multipart/form-data" asp-controller="ManagementPage" asp-action="UploadFile">
    @(Html.DevExtreme().FileUploader()
        .ID(new JS("'shippingDocumentUploader-' + data.Id"))
        .Name("files")
        .Multiple(true)
        .Accept("application/pdf")
        .UploadMode(FileUploadMode.UseForm)
    )
    
        <input type="hidden" name="ShippingDocumentId" value="<%- data.Id %>" />
        <% if (data.PartnerId) { %>
        <input type="hidden" name="PartnerId" value="<%- data.PartnerId %>" />
        <% } %>
    
    @(Html.DevExtreme().Button()
        .Text("Upload Files")
        .Type(ButtonType.Success)
        .UseSubmitBehavior(true)
    )
</form>

<div class="content" id="selected-files">
    <div>
        <h4>Selected Files</h4>
    </div>
</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")
                )
            ) *@
                            </div>
                        </div>
                    </div>
                </div>
           
        </section>
        </div>
        </div>

        </text>);
    })
)
</div>


<script>
    function calculateCellValue(rowData) {
        return rowData.Status === "Completed";
    }
</script>
<script>
    function calculateItemsCount(rowData) {
        return rowData.ShippingItems.length;
    }
</script>


<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>

<script>

    function fileUploader_valueChanged(e) {
        var files = e.value;
        if(files.length > 0) {
            $("#selected-files .selected-item").remove();

            $.each(files, function(i, file) {
                var $selectedItem = $("<div />").addClass("selected-item");
                $selectedItem.append(
                    $("<span />").html("Name: " + file.name + "<br/>"),
                    $("<span />").html("Size " + file.size + " bytes" + "<br/>"),
                    $("<span />").html("Type " + file.type + "<br/>"),
                    $("<span />").html("Last Modified Date: " + file.lastModifiedDate)
                );
                $selectedItem.appendTo($("#selected-files"));
            });
            $("#selected-files").show();
        }
        else
            $("#selected-files").hide();
    }

    function getGridInstance() {
        return $("#shippingDocumentUploader").dxFileUploader("instance");
    }
    
    function fileUploader_fileUploaded(e) {
        const fileUploaderId = e.component.element().attr('id');

    // 2. Extract the number from the ID
    const match = fileUploaderId.match(/\d+$/);

    if (match) {
        const uniqueId = match[0];
        const gridId = `shippingDocumentGridContainer-${uniqueId}`;

        // 3. Get the DevExtreme grid instance and refresh it
        const grid = $(`#${gridId}`).dxDataGrid('instance');
        
        if (grid) {
            grid.dxDataGrid("getDataSource").reload();
            // Optional: Show a success notification
            DevExpress.ui.notify("Documents updated successfully!", "success", 2000);
        } else {
            console.error(`DevExtreme grid with ID "${gridId}" not found.`);
        }
    } else {
        console.error("Could not find a unique ID number from the file uploader.");
    }
        // shippingDocumentGridContainer
        //$("#shippingDocumentGridContainer" + e.component.ID).dxDataGrid("getDataSource").reload();
    }

</script>