using Microsoft.AspNetCore.Mvc;

namespace MvcExplorer.Controllers
{
    public partial class FlexGridController : Controller
    {
        public  ActionResult ExcelImportExportRTL()
        {
            return View(Models.Sale.GetData(500));
        }
    }
}

@model IEnumerable<Sale>
@{
    ViewBag.DemoSettings = true;
}

@section Styles{
    <style>
        .checkbox-div {
            padding-left: 15px;
            display: inline-block;
            vertical-align: middle;
        }

            .checkbox-div .checkbox {
                display: inline-block;
                vertical-align: middle;
            }
    </style>
}

@section Scripts{
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script>
    var grid, colHeaderCheckBox, importFile;
    c1.documentReady(function () {
        grid = wijmo.Control.getControl("#importExportFlexGrid");
        gridContainer = document.getElementById("gridContainer");
        colHeaderCheckBox = document.getElementById("colHeaderCheckBox");
        importFile = document.getElementById("importFile");
        isRTLCheckBox = document.getElementById("isRTLCheckBox");
    });

    function importGrid() {
        if (grid) {
            var isIncludeColumnHeaders = colHeaderCheckBox.checked;
            if (importFile.files[0]) {
                wijmo.grid.xlsx.FlexGridXlsxConverter.load(grid, importFile.files[0], { includeColumnHeaders: isIncludeColumnHeaders });
            }
        }
    }

    function exportGrid() {
        if (grid) {
            var isIncludeColumnHeaders = colHeaderCheckBox.checked;
            wijmo.grid.xlsx.FlexGridXlsxConverter.save(grid, { includeStyles: false, includeColumnHeaders: isIncludeColumnHeaders }, 'FlexGrid.xlsx');
        }
    }

    function updateImportButtonState() {
        var file = document.getElementById('importFile').value;
        document.getElementById('importBtn').disabled = !file;
    }

    function setRTL() {
            if (isRTLCheckBox.checked) {
                gridContainer.dir = "rtl";
                grid.refresh();
            } else {
                gridContainer.dir = "ltr";
                grid.refresh();
            }
        }
</script>
}
<div id="gridContainer">
<c1-flex-grid id="importExportFlexGrid" show-groups="true" group-by="Product,Country,Amount"
              is-read-only="true" class="grid" auto-generate-columns="false">
    <c1-items-source initial-items-count="500" source-collection="Model"></c1-items-source>
    <c1-flex-grid-column binding="ID"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Start" header="Start Date" format="d"></c1-flex-grid-column>
    <c1-flex-grid-column binding="End" header="End Date" format="d"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Color"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" format="c" aggregate="Sum"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount2" header="Pending" format="c2" aggregate="Sum"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Discount" format="p1" aggregate="Avg"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Active"></c1-flex-grid-column>
</c1-flex-grid>
</div>
@section Settings{
    <div class="col-md-3 col-xs-12">
        <div class="form-inline well well-lg">
            <div><input type="checkbox" id="isRTLCheckBox" onclick="setRTL();" /> @Html.Raw(FlexGridRes.ExcelImportExport_RTL_Text2)</div>            
        </div>
    </div>
    <div class="col-md-6 col-xs-12">
        <div class="form-inline well well-lg">
            <button class="btn btn-default" id="importBtn" disabled onclick="importGrid();">@Html.Raw(FlexGridRes.ExcelImportExport_Import)</button>
            <input type="file" id="importFile" class="form-control" onchange="updateImportButtonState();" />
        </div>
    </div>
    <div class="col-md-3 col-xs-12">
        <div class="form-inline well well-lg">
            <a download="FlexGrid.xlsx" class="btn btn-default" id="exportBtn" onclick="exportGrid();">@Html.Raw(FlexGridRes.ExcelImportExport_Export)</a>
        </div>
    </div>
    <div class="checkbox-div">
        <label>
            <input type="checkbox" id="colHeaderCheckBox" class="checkbox" checked="checked" /> @Html.Raw(FlexGridRes.ExcelImportExport_IncludeColumnHeaders)
        </label>
    </div>
}
@section Description{
    <p>@Html.Raw(FlexGridRes.ExcelImportExport_RTL_Text0)</p>
    <p>@Html.Raw(FlexGridRes.ExcelImportExport_RTL_Text1)</p>
}