@using Newtonsoft.Json
@model Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models.ShippingListModel
@{
    // Layout = "_AdminLayout";
    ViewBag.PageTitle = "Edit Shipping";
    NopHtml.SetActiveMenuItemSystemName("Shippings.Edit");
}


<div class="content-header clearfix">
            <h1 class="float-left">
                @T("Admin.Shipments")
            </h1>
            <div class="float-right">
                <div class="btn-group">
                    <button type="button" class="btn btn-success">
                        <i class="fas fa-download"></i>
                        @T("Admin.Common.Export")
                    </button>
                    <button type="button" class="btn btn-success dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">
                        <span class="sr-only">&nbsp;</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li class="dropdown-item">
                            <button asp-action="ExportXml" type="submit" name="exportxml-all">
                                <i class="far fa-file-code"></i>
                                @T("Admin.Common.ExportToXml.All")
                            </button>
                        </li>
                        <li class="dropdown-item">
                            <button type="button" id="exportxml-selected">
                                <i class="far fa-file-code"></i>
                                @T("Admin.Common.ExportToXml.Selected")
                            </button>
                        </li>
                        <li class="dropdown-divider"></li>
                        <li class="dropdown-item">
                            <button asp-action="ExportExcel" type="submit" name="exportexcel-all">
                                <i class="far fa-file-excel"></i>
                                @T("Admin.Common.ExportToExcel.All")
                            </button>
                        </li>
                        <li class="dropdown-item">
                            <button type="button" id="exportexcel-selected">
                                <i class="far fa-file-excel"></i>
                                @T("Admin.Common.ExportToExcel.Selected")
                            </button>
                        </li>
                    </ul>
                </div>
                <button type="button" name="importexcel" class="btn bg-olive" data-toggle="modal" data-target="#importexcel-window">
                    <i class="fas fa-upload"></i>
                    @T("Admin.Common.Import")
                </button>
                <div class="btn-group">
                    <button type="button" class="btn btn-info">
                        <i class="far fa-file-pdf"></i>
                        @T("Admin.Orders.PdfInvoices")
                    </button>
                    <button type="button" class="btn btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">
                        <span class="sr-only">&nbsp;</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li class="dropdown-item">
                            <button asp-action="PdfInvoice" type="submit" name="pdf-invoice-all">
                                @T("Admin.Orders.PdfInvoices.All")
                            </button>
                        </li>
                        <li class="dropdown-item">
                            <button type="button" id="pdf-invoice-selected">
                                @T("Admin.Orders.PdfInvoices.Selected")
                            </button>
                        </li>
                    </ul>
                </div>
                @await Component.InvokeAsync(typeof(AdminWidgetViewComponent), new { widgetZone = AdminWidgetZones.OrderListButtons, additionalData = Model })
            </div>
        </div>
        <section class="content">
            <div class="container-fluid">


@{
    var list = Model.ShippingList;
}

@(Html.DevExtreme().DataGrid()
    .ID("gridContainer")
    .ShowBorders(true)
    .DataSource(list)
    .KeyExpr("Id")
    .SearchPanel(sp => sp.Visible(true))
    .HeaderFilter(hf => hf.Visible(true))
    .Paging(p => p.PageSize(15))
    .Pager(p => p.Visible(true))
    .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="fileuploader">
    <div class="widget-container">
        @(Html.DevExtreme().FileUploader()
            .ID($"file-uploader-{new JS("data.Id")}")
            .Name("myFile")
            .Multiple(true)
            .Accept("application/pdf")
            .UploadMode(FileUploadMode.Instantly)
            .UploadUrl(Url.Action("UploadFile", "Shipping"))
            .OnValueChanged("fileUploader_valueChanged")
            .OnUploaded("fileUploader_fileUploaded")
        )
        <div class="content" id="selected-files">
            <div>
                <h4>Selected Files</h4>
            </div>
        </div>
        </div>
        <div id="@($"shippingDocumentGridDiv-{new JS("data.Id")}")"></div>
            @(Html.DevExtreme().DataGrid<FruitBank.Common.Entities.ShippingDocument>()
                .ColumnAutoWidth(true)
                .ShowBorders(true)
                .ID($"shippingDocumentGridContainer-{new JS("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(new JS("data.ShippingDocuments"))
            )
        </text>);
    })
    
)


</div>
        </section>

<script>
    function calculateCellValue(rowData) {
        return rowData.Status === "Completed";
    }
</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);
    }
</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 $("#file-uploader").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>