@model PantheonRA.WebApi.Contracts.ZDashPanel
@using PantheonRA.WebApi.Contracts 
@{
    var bodyId = "zBody-" + Model.Qid;
    var filterId = "zFilter-" + Model.Qid;
    var valuesId = "zValues-" + Model.Qid;
}
@foreach (var f in Model.DataTable.Data)
{
    @Html.Hidden(valuesId + "-" + f.Key, Json.Encode(f.Value))
}

<div class="dash-panel-header">
    <p class="dash-panel-title">@Model.Title</p>
    <p class="dash-panel-description">@Model.Description</p>

    @if (Model.HasFilter)
    {
        <div class="row">
            <div class="col-xs-6">

            </div>
            <div class="col-xs-6">
                <div class="form-group selectpicker-dropdown m-b-none">
                    <select id="@filterId"
                            class="form-control custom-select"
                            title="@Loc.SearchFilter">
                        @foreach (var f in Model.FilterValuesList)
                        {
                            if (f == Model.FilterValue)
                            {
                                <option value="@f" selected>@f</option>
                            }
                            else
                            {
                                <option value="@f">@f</option>
                            }
                        }
                    </select>
                </div>
            </div>
        </div>
    }
</div>

<div>
    <table class="list-table" style="width: 100%;">
        <thead>
            <tr>
                @for (var i = 0; i < Model.DataTable.Columns.Count; i++)
                {
                    if (Model.HasDataTable
                        && Model.DataTable.Data.FirstOrDefault().Value.FirstOrDefault()[i].DataType == ZDataType.Decimal)
                    {
                        <th class="dash-td text-right">@Model.DataTable.Columns[i]</th>
                    }
                    else
                    {
                        <th class="dash-td">@Model.DataTable.Columns[i]</th>
                    }
                }
            </tr>
        </thead>
        <tbody id="@bodyId">
            @if (Model.HasDataTable)
            {
                foreach (var row in Model.HasFilter && Model.FilterValue != null ?
                                Model.DataTable.Data.FirstOrDefault(q => q.Key == Model.FilterValue).Value : Model.DataTable.Data.FirstOrDefault().Value)
                {
                    <tr>
                        @foreach (var col in row)
                        {
                            if (col.DataType != ZDataType.Decimal)
                            {
                                <td class="dash-td">@col.Value</td>
                            }
                            else
                            {
                                <td class="dash-td text-right">@col.ValueFormatted</td>
                            }

                        }
                    </tr>
                }
            }
        </tbody>
    </table>
</div>

<script>
    $(document).ready(function () {
        $('#' + '@filterId').on('change', function () {
            let values = JSON.parse($("#@valuesId-" + this.value).val());
            let html = '';

            for (let i = 0; i < values.length; i++) {
                let row = values[i];

                html += '<tr>';

                for (let j = 0; j < row.length; j++) {
                    let col = row[j];

                    if (col.DataType != 'decimal') {
                        html += ('<td>' + col.Value + '</td>');
                    }
                    else {
                        html += ('<td class="text-right">' + col.ValueFormatted + '</td>');
                    }
                }

                html += '</tr>';
            }

            $('#' + '@bodyId').html(html);
        });
    });
</script>