@model PantheonRA.WebApi.Contracts.ZDashboard
@using PantheonRA.BackOffice.Models;

<script src="~/Scripts/ChartJs.js" charset="utf-8"></script>
@Html.Hidden("UrlDashboard", Url.Action("Index", "Dashboard"))

<style>
    .dash-head {
        margin-bottom: -3px !important;
    }

    .dash-body {
        background-color: #f2f6f7;
        min-height: 100%;
        height: 100%;
    }

    .dash-panel {
        background-color: #ffffff !important;
        margin: 5px;
        padding: 20px;
        min-height: 350px !important;
        height: 400px !important;
        overflow-y: scroll;
        box-shadow: 0 3px 7px rgb(0 0 0 / 0.1);
    }

    .dash-message {
        font-weight: bold;
    }

    .dash-td {
        padding-left: 5px;
        padding-right: 5px;
    }
</style>

<div class="wrapper wrapper-content">
    <div class="tabs-container">
        @Html.Partial("~/Views/Shared/_TabNavigation.cshtml", new TabNavigationViewModel
        {
            Tabs = new List<NavigationtabViewModel>
            {
                new NavigationtabViewModel(Loc.DashboardNavMenu, Url.Action("Index", "Dashboard"),
                    Html.IsActive("Index", "Dashboard")),
            }
        })
        <div class="row buttons-tabbed">
            <a href="#" class="btn btn-success btn-outline pull-right" title="@Loc.New">
                <i class="fa fa-plus"></i><span class="bold hidden-xs hidden-sm m-l-xs">@Loc.New</span>
            </a>
        </div>
        <div class="tab-content">
            <!-- OPTIONS -->
            <div class="row document-head dash-head">
                <div class="col-md-3 col-xs-12">
                    <div class="form-group p-l-10">
                        <label class="control-label">@Loc.Name</label>
                        <select name="Dashboard"
                                id="Dashboard"
                                data-placeholder="@Loc.Dashboard"
                                class="form-control select2withAPI"
                                data-url="@Url.Action("GetDashboards", "Dashboard")"
                                data-search-width="400"
                                onchange="changeDashboard()">
                            <option value="@Model.DashId" selected>@Model.DashName</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- PANELS -->
            <div class="row document-body dash-body">
                @if (!Model.Panels.Any())
                {
                    <div class="col-sm-12">
                        <div class="dash-panel">
                            <p class="dash-message">@Loc.DashboardPawNonConfigured</p>
                        </div>
                    </div>
                }

                @foreach (var p in Model.Panels)
                {
                    <div class="@p.ColSpan p-l-0 p-x-0">
                        <div class="dash-panel">
                            @if (p.Type == PantheonRA.WebApi.Contracts.ZPanelWebType.Graph)
                            {
                                @Html.Partial("Panels/_Chart", p)
                            }
                            @if (p.Type == PantheonRA.WebApi.Contracts.ZPanelWebType.Table)
                            {
                                @Html.Partial("Panels/_Table", p)
                            }
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

<script>
    function changeDashboard() {
        let dashboardId = $('#Dashboard').val();
        let url = $('#UrlDashboard').val() + '?dashId=' + dashboardId;

        window.location.href = url;
    }
</script>