@using OI.Metrology.Shared.ViewModels
@model OI.Metrology.Shared.ViewModels.Export
@{
    ViewData["Title"] = "Export Data";
}

<style>
    td {
        padding-bottom: 2em;
        padding-right: 1em;
    }
</style>

<h3>Export Data</h3>

<hr />

<form asp-controller="Export" asp-action="ExportData" method="post" class="form-inline">
    <div class="form-group">
        <label for="ToolType">Tool Type</label>
        <div class="form-control" id="ToolType"></div>
    </div>
    <div class="form-group">
        <label for="StartDate">Start Time</label>
        <div class="form-control mb-2 mr-sm-2" id="StartDateControl"></div>
        <div class="form-control mb-2 mr-sm-2" id="StartTimeControl"></div>
    </div>
    <div class="form-group">
        <label for="EndDate">End Time</label>
        <div class="form-control mb-2 mr-sm-2" id="EndDateControl"></div>
        <div class="form-control mb-2 mr-sm-2" id="EndTimeControl"></div>
    </div>&nbsp;&nbsp;
    <div class="form-group">
        <button type="submit" class="btn btn-primary">Export Data</button>
    </div>

    <div asp-validation-summary="ModelOnly" class="text-danger"></div>

</form>

<script>

    $(document).ready(function () {

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

        var startTime = new Date("@Model.StartTime.ToString("yyyy-MM-ddTHH:mm")");

        $("#StartDateControl").igDatePicker({
            dateInputFormat: "date",
            value: startTime,
            width: 125,
            inputName: "StartDate",
        });

        $("#StartTimeControl").igTimePicker({
            dateInputFormat: "time",
            value: startTime,
            width: 110,
            inputName: "StartTime",
        });

        var endTime = new Date("@Model.EndTime.ToString("yyyy-MM-ddTHH:mm")");

        $("#EndDateControl").igDatePicker({
            dateInputFormat: "date",
            value: endTime,
            width: 125,
            inputName: "EndDate",
        });
        
        $("#EndTimeControl").igTimePicker({
            dateInputFormat: "time",
            value: endTime,
            width: 110,
            inputName: "EndTime",
        });

    });

</script>