@model OI.Metrology.Shared.ViewModels.RunInfo
@{
    ViewData["Title"] = "Reactor";
}
<style>
    #RunGridDiv,
    #DetailsGridDiv {
        font-size: 12px;
    }
</style>

<h4>Reactor</h4>

<form class="form-inline mb-4">
    <div class="form-group" id="EvenReactorDiv">
        <button for="EvenReactor">Even Reactor</button>
        <label for="EvenReactor">Even Reactor</label>
        <div class="form-control" id="EvenReactor" hidden></div>
    </div>
    <div class="form-group" id="OddReactorDiv">
        <button for="OddReactor">Odd Reactor</button>
        <label for="OddReactor">Odd Reactor</label>
        <div class="form-control" id="OddReactor" hidden></div>
    </div>&nbsp;&nbsp;
    <div class="form-group">
        <input class="btn btn-primary" type="button" value="Load Runs" id="LoadRunsButton" />
    </div>&nbsp;&nbsp;
</form>

<div style="height: 300px;" id="RunGridDiv">
    <span id="EvenReactorID" hidden></span>
    <span id="OddReactorID" hidden></span>
    <table id="RunGrid"></table>
</div>

<div class="row" style="margin-top: 10px; margin-bottom: 20px;">
    <div class="col-xs-1">
        <input type="button" class="btn" id="GetDataButton" value="Get Data" disabled />
    </div>
</div>

<script>

    var EvenReactor = null;
    var OddReactor = null;

    function LoadRunGrid() {

        var EvenReactorID = $("#EvenReactor").igCombo("value");

        $("#EvenReactorID").text(EvenReactorID);

        HideDetailsDiv();
        DisableHeaderButtons();

        $("#HeaderId").text("");
        $("#HeaderAttachmentId").text("");
        $("#HeaderDate").text("");
        $("#SPHeaderID").text("");

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

        $.ajax({
            type: "GET",
            url: "@Url.Content("~/api/EvenReactors/")" + EvenReactorID + "?sortby=grid",
            success: function (r) {
                if ((r.Results == null) || (r.Results.EvenReactor == null) || (r.Results.Metadata == null))
                    ShowErrorMessage("Invalid Even Reactor: " + EvenReactorID);
                else {
                    EvenReactor = r.Results.EvenReactor;
                    EvenReactorMetaData = r.Results.Metadata;
                    RequestHeaderData();
                }
            },
            error: function (e) {
                DisplayWSMessage("error", "There was an error getting EvenReactor info.", e);
            }
        });

    }

    function DisableHeaderButtons() {
        $("#GetDataButton").prop("disabled", true);
        $("#ReviewButton").prop("disabled", true);
    }

    function EnableHeaderButtons() {
        $("#GetDataButton").prop("disabled", false);
        $("#ReviewButton").prop("disabled", false);
    }

    function HideDetailsDiv() {
        $("#DetailsDiv").prop("hidden", true);
        $("#DataAttachmentFrame").prop("src", "");
    }

    function ShowDetailsDiv() {
        $("#DetailsDiv").prop("hidden", false);

        $("#ExportDiv").prop("hidden", true);
        if ((EvenReactor != null) && (EvenReactor.OIExportSPName != null) && (EvenReactor.OIExportSPName.length > 0)) {
            $("#ExportDiv").prop("hidden", false);
            $("#OIExportResult").text('');
        }

        $("#DataAttachmentFrame").prop("hidden", true);
        $("#HeaderAttachmentFrame").prop("hidden", true);
        if (EvenReactor != null) {
            var visibleFrames = 0;
            if (EvenReactor.DisplayDataAttachment && EvenReactor.DisplayDataAttachment.length > 0) {
                visibleFrames += 1;
                $("#DataAttachmentFrame").prop("hidden", false);
            }
            if (EvenReactor.DisplayHeaderAttachment && EvenReactor.DisplayHeaderAttachment.length > 0) {
                visibleFrames += 1;
                $("#HeaderAttachmentFrame").prop("hidden", false);
            }
            var frameWidth = (98 / visibleFrames) + "%";
            $("#DataAttachmentFrame,#HeaderAttachmentFrame").css('width', frameWidth);
        }
    }

    function HeaderSelectionChanged(evt, ui) {
        if (ui.row.index >= 0) {
            if ($("#HeaderId").text() == ui.row.id) {
                EnableHeaderButtons();
                return;
            }
        }
        DisableHeaderButtons();
        HideDetailsDiv();
        if (ui.row.index >= 0) {
            EnableHeaderButtons();
            $("#HeaderId").text(ui.row.id);
            var rowData = ui.owner.grid.dataSource.dataView()[ui.row.index];
            $("#HeaderAttachmentId").text(rowData.AttachmentID);
            $("#HeaderDate").text(rowData.Date);
            $("#SPHeaderID").text(rowData.Title);
        }
    }

    function CancelHandler(evt, ui) {
        return false;
    }

    function DetailSelectionChanged(evt, ui) {

        $("#DataAttachmentFrame").prop("src", "");

        if (ui.row.index >= 0) {
            var rowData = ui.owner.grid.dataSource.dataView()[ui.row.index];
            var EvenReactorID = $("#EvenReactorID").text();
            var attachmentUrlBase = '@Url.Content("~/api/EvenReactors/")' + EvenReactorID;
            var attachmentId = rowData.AttachmentID;
            var test = rowData.date
            if ((attachmentId == null) || (attachmentId === ''))
                return;

            if ((EvenReactor.DisplayDataAttachment == null) || (EvenReactor.DisplayDataAttachment === ''))
                return;

            $("#DataAttachmentFrame").prop("src", attachmentUrlBase + "/data/files/" + attachmentId + "/" + EvenReactor.DisplayDataAttachment);
        }
    }

    function LoadHeaderAttachment() {
        var EvenReactorID = $("#EvenReactorID").text();
        var attachmentUrlBase = '@Url.Content("~/api/EvenReactors/")' + EvenReactorID;
        var attachmentId = $("#HeaderAttachmentId").text();
        var dateToUse = new Date($("#HeaderDate").text());
        var month = dateToUse.getMonth + 1;
        var year = dateToUse.getFullYear;
        if ((attachmentId == null) || (attachmentId === '') || (EvenReactor.DisplayHeaderAttachment == null) || (EvenReactor.DisplayHeaderAttachment === '')) {
            $("#HeaderAttachmentFrame").prop("src", "");
        } else {
            $("#HeaderAttachmentFrame").prop("src", attachmentUrlBase + "/header/files/" + attachmentId + "/" + EvenReactor.DisplayHeaderAttachment + "?date=" + dateToUse);
        }
        $("#DataAttachmentFrame").prop("src", "");
    }

    function CheckDate() {
        var date = new Date($("#HeaderDate").text());
        return date;
    }

    function LoadDetails() {
        ShowDetailsDiv();
        LoadHeaderAttachment();
        var dateToUse = $("#HeaderDate").text();
        var gridCreated = $("#DetailsGrid").data("igGrid");
        if (gridCreated)
            $("#DetailsGrid").igGrid("destroy");
        var dateID = Date.parse($("#HeaderDate").text());
        var cutoffDt = Date.parse('2019-07-08')
        var headerId = $("#HeaderId").text();
        var EvenReactorID = $("#EvenReactorID").text();
        var spHeaderID = $("#SPHeaderID").text();
        if (dateID < cutoffDt) {
            detailsURL = "@Url.Content("~/api/EvenReactors/")" + EvenReactorID + "/headers/" + spHeaderID + "/data/isSharePoint";
        }
        else {
            var detailsURL = "@Url.Content("~/api/EvenReactors/")" + EvenReactorID + "/headers/" + headerId + "/data";
        }
        var gridColumns = [
            { key: "AttachmentID", dataType: "string", hidden: true },
            { key: "Title", dataType: "string", hidden: true },
        ];

        for (var i = 0; i < EvenReactorMetaData.length; i++) {
            var f = EvenReactorMetaData[i];
            if ((f.Header == false) && (f.GridDisplayOrder > 0)) {
                var col = {
                    key: f.ColumnName,
                    headerText: f.DisplayTitle,
                    width: "150px",
                };
                if (f.GridAttributes != null)
                    jQuery.extend(col, JSON.parse(f.GridAttributes));
                if (col.formatter != null) {
                    if (col.formatter == "boolToYesNo")
                        col.formatter = boolToYesNo;
                    else
                        col.formatter = null;
                }
                gridColumns.push(col);
            }
        }
        var date = EvenReactorMetaData[2];

        var gridParms = {
            autoGenerateColumns: false,
            primaryKey: "ID",
            features: [
                { name: "Selection", mode: "row", rowSelectionChanging: DetailSelectionChanged },
                { name: "Resizing" },
                { name: "Sorting", type: "local" }
            ],
            columns: gridColumns,
            dataSource: detailsURL,
            responseDataKey: "Results"
        };

        if ((EvenReactor != null) && (EvenReactor.DataGridAttributes != null)) {
            jQuery.extend(gridParms, JSON.parse(EvenReactor.DataGridAttributes));
        }

        $("#DetailsGrid").igGrid(gridParms);
    }

    var initialHeaderId = @Model.HeaderID;
    var initialHeaderAttachmentId = "@Model.HeaderAttachmentID";

    function RequestHeaderData() {
        var startDate = $("#StartDate").igDatePicker("value");
        var startTime = $("#StartTime").igTimePicker("value");

        var endDate = $("#EndDate").igDatePicker("value");
        var endTime = $("#EndTime").igTimePicker("value");

        var parms = {
            datebegin: new Date(
                startDate.getFullYear(), startDate.getMonth(), startDate.getDate(),
                startTime.getHours(), startTime.getMinutes(), startTime.getSeconds()).toISOString(),
            dateend: new Date(
                endDate.getFullYear(), endDate.getMonth(), endDate.getDate(),
                endTime.getHours(), endTime.getMinutes(), endTime.getSeconds()).toISOString(),
        }

        var headerId = 0;
        if (initialHeaderId > 0) {
            headerId = initialHeaderId;
            parms.headerid = headerId;
            $("#HeaderId").text(headerId);
            $("#HeaderAttachmentId").text(initialHeaderAttachmentId);
            initialHeaderId = -1;
        }

        var headerURL = "@Url.Content("~/api/EvenReactors/")" + EvenReactor.ID + "/headers?" + $.param(parms);

        var gridColumns = [
            { key: "ID", dataType: "number", hidden: true },
            { key: "AttachmentID", dataType: "string", hidden: true },
            { key: "Title", dataType: "string", hidden: true },
        ];

        for (var i = 0; i < EvenReactorMetaData.length; i++) {
            var f = EvenReactorMetaData[i];
            if ((f.Header == true) && (f.GridDisplayOrder > 0)) {
                var col = {
                    key: f.ColumnName,
                    headerText: f.DisplayTitle,
                    width: "150px",
                };
                if (f.GridAttributes != null)
                    jQuery.extend(col, JSON.parse(f.GridAttributes));
                if (col.formatter != null) {
                    if (col.formatter == "boolToYesNo")
                        col.formatter = boolToYesNo;
                    else
                        col.formatter = null;
                }
                gridColumns.push(col);
            }
        }

        var gridParms = {
            autoGenerateColumns: false,
            primaryKey: "ID",
            height: "100%",
            width: "100%",
            features: [
                { name: "Paging", type: "local", recordCountKey: "TotalRows", pageSize: 100, pageSizeList: [50, 100, 250, 500], pageSizeUrlKey: "pageSize", "pageIndexUrlKey": "page" },
                { name: "Selection", mode: "row", rowSelectionChanged: HeaderSelectionChanged },
                { name: "Filtering", type: "local" },
                { name: 'Resizing' },
                { name: "Sorting", type: "local" }
            ],
            columns: gridColumns,
            dataSource: headerURL,
            responseDataKey: "Results",
        };

        if ((EvenReactor != null) && (EvenReactor.RunGridAttributes != null)) {
            jQuery.extend(gridParms, JSON.parse(EvenReactor.RunGridAttributes));
        }

        $("#RunGrid").igGrid(gridParms);

        if (headerId > 0) {
            LoadDetails();
        }
    }

    $(document).ready(function () {

        $("#EvenReactor").igCombo({
            dataSource: '@Url.Content("~/api/reactors/true")',
            responseDataKey: "Results",
            textKey: "Name",
            valueKey: "Id",
            mode: "dropdown",
            width: 150,
            itemsRendered: function (evt, ui) {
                LoadRunGrid();
            },
            selectionChanged: LoadRunGrid,
            initialSelectedItems: [{ value: @Model.HeaderID }]
        });

        $("#OddReactor").igCombo({
            dataSource: '@Url.Content("~/api/reactors/false")',
            responseDataKey: "Results",
            textKey: "Name",
            valueKey: "Id",
            mode: "dropdown",
            width: 150,
            itemsRendered: function (evt, ui) {
                LoadRunGrid();
            },
            selectionChanged: LoadRunGrid,
            initialSelectedItems: [{ value: @Model.HeaderID }]
        });

        $("#EvenReactorDiv").prop("hidden", true);
        $("#OddReactorDiv").prop("hidden", true);

        $("#RunGrid").on("dblclick", "tr", LoadDetails);

        $("#LoadRunsButton").click(LoadRunGrid);

        $("#GetDataButton").click(LoadDetails);

    });

</script>