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


@{
    var contextId = Model.DataContext["contextId"];
    var fileManagerId = $"fileManager_{contextId}";
    var beforeAjaxSendFunctionName = $"beforeAjaxSend_{contextId}";
}

    

<div class="row">
                                    <div class="col-6">

                                        <form method="post" enctype="multipart/form-data" asp-controller="ManagementPage" asp-action="UploadFile">
                                            @(Html.DevExtreme().FileUploader()
                                                .ID("shippingDocumentUploader-" + contextId)
                                                .Name("files")
                                                .Multiple(true)
                                                .Accept("application/pdf")
                                                .UploadMode(FileUploadMode.UseForm)
                                            )
                                            <input type="hidden" name="ShippingDocumentId" value="@contextId" />
                                            
                                            <input type="hidden" name="PartnerId" value="hello" />
                                            
                                            @(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>
                                    <div class="col-6">
                                         @(Html.DevExtreme().FileManager()
                                            .ID(fileManagerId)
                                            .FileSystemProvider(provider => provider.Remote()
                                                .Url(Url.RouteUrl("FileManagementFileSystemApi"))
                                                .BeforeAjaxSend(@<text>
                                                    function(arg) {
                                                      arg.headers.TestHeader = @Model.DataContext["contextId"];
                                                    }
                                                </text>))
                                            .Permissions(permissions => {
                                                permissions.Download(true);
                                                permissions.Upload(true);
                                            })
                                            .AllowedFileExtensions(new[] { ".pdf", ".jpg", ".jpeg" })
                                        )
                                    </div>                                   
      </div>                                      
<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>