@{
    ViewData["Title"] = "Run Headers";
}

<style>
    html,
    body {
        height: 100%;
    }

    div.container-fluid {
        height: 90%;
    }

    #HeaderGrid,
    #FieldsGrid {
        font-size: 12px;
    }

    .FieldTitle {
        font-weight: bold;
    }
</style>

<h4>Run Headers</h4>

<table>
    <tr>
        <td>
            <label for="ToolType">Tool Type:</label>
        </td>
        <td>
            <div id="ToolType"></div>
        </td>
    </tr>
</table>

<table width="100%" height="80%">
    <tr>
        <td width="50%">
            <table id="HeaderGrid"></table>
        </td>
        <td width="50%">
            <table id="FieldsGrid"></table>
        </td>
    </tr>
</table>

<script>

    function LoadHeaderGrid() {

        var toolTypeID = $("#ToolType").igCombo("value");

        var gridCreated = $("#HeaderGrid").data("igGrid");
        if (gridCreated)
            $("#HeaderGrid").igGrid("destroy");

        ClearFieldsGrid();

        var headerURL = "@Url.Content("~/api/tooltypes/")" + toolTypeID + "/headertitles";

        $("#HeaderGrid").igGrid({
            autoGenerateColumns: false,
            primaryKey: "ID",
            height: "100%",
            width: "100%",
            features: [
                { name: "Paging", type: "local", recordCountKey: "TotalRows", pageSize: 25, pageSizeUrlKey: "pageSize", "pageIndexUrlKey": "page", showPageSizeDropDown: false },
                { name: "Selection", mode: "row", rowSelectionChanged: HeaderSelectionChanged },
                { name: "Filtering", type: "local" }
            ],
            columns: [
                { key: "ID", dataType: "number", hidden: true },
                { key: "Title", dataType: "string", width: "80%" },
                { key: "InsertDate", dataType: "date", format: "dateTime", width: "20%" }
            ],
            dataSource: headerURL,
            responseDataKey: "Results",
        });

    }

    function ClearFieldsGrid() {
        var gridCreated = $("#FieldsGrid").data("igGrid");
        if (gridCreated)
            $("#FieldsGrid").igGrid("destroy");
    }

    function HeaderSelectionChanged(evt, ui) {

        var toolTypeID = $("#ToolType").igCombo("value");

        ClearFieldsGrid();

        var url = "@Url.Content("~/api/tooltypes/")" + toolTypeID + "/headers/" + ui.row.id + "/fields";

        $("#FieldsGrid").igGrid({
            autoGenerateColumns: false,
            primaryKey: "Column",
            height: "100%",
            width: "100%",
            features: [
                { name: 'Resizing' }
            ],
            columns: [
                { key: "Column", dataType: "string", width: "20%", columnCssClass: "FieldTitle", },
                { key: "Value", dataType: "string", }
            ],
            enableHoverStyles: false,
            dataSource: url,
            responseDataKey: "Results",
        });

    }

    $(document).ready(function () {

        $("#ToolType").igCombo({
            dataSource: '@Url.Content("~/api/tooltypes")',
            responseDataKey: "Results",
            textKey: "ToolTypeName",
            valueKey: "ID",
            mode: "dropdown",
            width: 150,
            dataBound: function (evt, ui) {
                $("#ToolType").igCombo("index", 0);
                LoadHeaderGrid();
            },
            selectionChanged: LoadHeaderGrid,
        });

    });
</script>