@model Shzoom.Areas.Wireframes.Data.WireframeModel
@{
    ViewData["Title"] = "Dashboard";
}
@section Head {
    <link href="~/assets/vendor/rickshaw/rickshaw.min.css" rel="stylesheet">
    <style>
        div.legend {
            text-align: left;
        }
    </style>
}
<div class="br-pagebody pd-20 pd-sm-x-30">
    <div class="card-deck">
        <div class="card">
            <div class="card-body rounded-0">
                <h6 class="tx-inverse tx-18 mg-b-5">Fleet Status</h6>
                <div class="tx-center mg-t-20">
                    <div id="flotPie1" class="ht-200 ht-sm-300"></div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body rounded-0">
                <div class="float-left">
                    <h6 class="tx-inverse tx-18 mg-b-5">Current Cycle Time</h6>
                    <h2 class="tx-inverse tx-bold tx-lato">
                        <span>20 days</span>
                    </h2>
                    <p class="tx-14 tx-medium mg-b-0 tx-spacing-1">22 day Avg</p>
                </div>
                <div class="float-right tx-right">
                    <h6 class="tx-inverse tx-18 mg-b-5">Historical Cycle Time</h6>
                    <h2 class="tx-inverse tx-bold tx-lato">
                        <span>45 days</span>
                    </h2>
                    <p class="tx-14 tx-medium mg-b-0 tx-spacing-1">Before SHzoom</p>
                </div>
                <div class="tx-center clearfix" style="margin-top: 190px;">
                    <div id="rickshaw3" class="wd-100p ht-150"></div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body rounded-0">
                <h6 class="tx-inverse tx-18 mg-b-5">Vehicle Statuses</h6>
                <div class="tx-center mg-t-20">
                    <div id="flotPie2" class="ht-200 ht-sm-300"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row row-sm mg-t-20">
        <div class="col-lg-12">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="damage-tab" data-toggle="tab" href="#damage" role="tab" style="padding: .5rem .5rem;">Damage Details&nbsp;&nbsp;<span class="badge badge-pill badge-secondary">@Model.DamageDetailIncidents.Count</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="report-tab" data-toggle="tab" href="#report" role="tab" style="padding: .5rem .5rem;">Incident Report&nbsp;&nbsp;<span class="badge badge-pill badge-secondary">@Model.IncidentReportIncidents.Count</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="estimate-tab" data-toggle="tab" href="#estimate" role="tab" style="padding: .5rem .5rem;">Estimates&nbsp;&nbsp;<span class="badge badge-pill badge-secondary">@Model.EstimatesIncidents.Count</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="estimate-sel-tab" data-toggle="tab" href="#estimate_sel" role="tab" style="padding: .5rem .5rem;">Estimate Selection&nbsp;&nbsp;<span class="badge badge-pill badge-secondary">@Model.EstimateSelectionIncidents.Count</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="payment-tab" data-toggle="tab" href="#payment" role="tab" style="padding: .5rem .5rem;">Payment Approval&nbsp;&nbsp;<span class="badge badge-pill badge-secondary">@Model.PaymentApprovalIncidents.Count</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pickup-tab" data-toggle="tab" href="#pickup" role="tab" style="padding: .5rem .5rem;">Shop Pickup&nbsp;&nbsp;<span class="badge badge-pill badge-secondary">@Model.ShopPickupIncidents.Count</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="shop-tab" data-toggle="tab" href="#shop" role="tab" style="padding: .5rem .5rem;">At Shop&nbsp;&nbsp;<span class="badge badge-pill badge-secondary">@Model.AtShopIncidents.Count</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="sup-tab" data-toggle="tab" href="#sup" role="tab" style="padding: .5rem .5rem;">Supplement Approval&nbsp;&nbsp;<span class="badge badge-pill badge-secondary">1</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="completed-tab" data-toggle="tab" href="#completed" role="tab" style="padding: .5rem .5rem;">Completed&nbsp;&nbsp;<span class="badge badge-pill badge-secondary">@Model.RepairCompleteIncidents.Count</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="accepted-tab" data-toggle="tab" href="#accepted" role="tab" style="padding: .5rem .5rem;">Accepted&nbsp;&nbsp;<span class="badge badge-pill badge-secondary">@Model.RepairAcceptedIncidents.Count</span></a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade show active bg-white bd-b bd-x pd-15" id="damage" role="tabpanel" aria-labelledby="damage-tab">
                    <h6 class="mg-10">Awaiting Damage Details</h6>
                    <partial name="_IncidentData" model="@Model.DamageDetailIncidents" />
                </div>
                <div class="tab-pane fade bg-white bd-b bd-x pd-15" id="report" role="tabpanel" aria-labelledby="report-tab">
                    <h6 class="mg-10">Awaiting Incident Report</h6>
                    <partial name="_IncidentData" model="@Model.IncidentReportIncidents" />
                </div>
                <div class="tab-pane fade bg-white bd-b bd-x pd-15" id="estimate" role="tabpanel" aria-labelledby="estimate-tab">
                    <h6 class="mg-10">Awaiting Estimates</h6>
                    <partial name="_IncidentData" model="@Model.EstimatesIncidents" />
                </div>
                <div class="tab-pane fade bg-white bd-b bd-x pd-15" id="estimate_sel" role="tabpanel" aria-labelledby="estimate_sel-tab">
                    <h6 class="mg-10">Awaiting Estimate Selection</h6>
                    <partial name="_IncidentData" model="@Model.EstimateSelectionIncidents" />
                </div>
                <div class="tab-pane fade bg-white bd-b bd-x pd-15" id="payment" role="tabpanel" aria-labelledby="payment-tab">
                    <h6 class="mg-10">Awaiting Payment Approval</h6>
                    <partial name="_IncidentData" model="@Model.PaymentApprovalIncidents" />
                </div>
                <div class="tab-pane fade bg-white bd-b bd-x pd-15" id="pickup" role="tabpanel" aria-labelledby="pickup-tab">
                    <h6 class="mg-10">Awaiting Shop Pickup</h6>
                    <partial name="_IncidentData" model="@Model.ShopPickupIncidents" />
                </div>
                <div class="tab-pane fade bg-white bd-b bd-x pd-15" id="shop" role="tabpanel" aria-labelledby="shop-tab">
                    <h6 class="mg-10">At Shop</h6>
                    <partial name="_IncidentData" model="@Model.AtShopIncidents" />
                </div>
                <div class="tab-pane fade bg-white bd-b bd-x pd-15" id="sup" role="tabpanel" aria-labelledby="sup-tab">
                    <h6 class="mg-10">Supplement Approval</h6>
                    <div class="table-responsive">
                        <table class="table table-striped mg-b-0 tx-12">
                            <thead>
                            <tr class="tx-10">
                                <th>Incident</th>
                                <th>Vehicle Number</th>
                                <th>Opened</th>
                                <th>Days in System</th>
                                <th>Days in Status</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><a asp-controller="Incident" asp-action="ShopEstimate">000408</a></td>
                                <td>C-408</td>
                                <td>8/19/2019</td>
                                <td>18 days</td>
                                <td>15 days</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade bg-white bd-b bd-x pd-15" id="completed" role="tabpanel" aria-labelledby="completed-tab">
                    <h6 class="mg-10">Repair Completed</h6>
                    <partial name="_IncidentData" model="@Model.RepairCompleteIncidents" />
                </div>
                <div class="tab-pane fade bg-white bd-b bd-x pd-15" id="accepted" role="tabpanel" aria-labelledby="accepted-tab">
                    <h6 class="mg-10">Repair Accepted</h6>
                    <partial name="_IncidentData" model="@Model.RepairAcceptedIncidents" />
                </div>
            </div>
        </div>
    </div>
</div>
@section Scripts
{
    <script src="~/assets/vendor/d3/d3.js"></script>
    <script src="~/assets/vendor/rickshaw/rickshaw.min.js"></script>
    <script src="~/assets/vendor/Flot/jquery.flot.js"></script>
    <script src="~/assets/vendor/Flot/jquery.flot.pie.js"></script>
    <script src="~/assets/vendor/Flot/jquery.flot.resize.js"></script>
    <script src="~/assets/vendor/flot-spline/jquery.flot.spline.js"></script>
    <script src="~/assets/app/resizesensor.js"></script>

    <script>
        $(function () {
            'use strict';

            function labelFormatter(label, series) {
                if (label === "Up") {
                    return "<div style='text-align:left; color:white;'><span style='font-size:1.2rem;'>" + Math.round(series.percent) + "%</span><br/><span>" + label + "</span></div>";
                } else {
                    return "<div style='text-align:right; color:white;'><span style='font-size:1.2rem;'>" + Math.round(series.percent) + "%</span><br/><span>" + label + "</span></div>";
                }
            }

            var piedata = [
                { label: "Down", data: [[1, 45]], color: '#06703C' },
                { label: "Up", data: [[1, 55]], color: '#FF9902' }
            ];

            $.plot('#flotPie1', piedata, {
                series: {
                    pie: {
                        show: true,
                        radius: 1,
                        innerRadius: 20,
                        label: {
                            show: true,
                            radius: 2 / 3,
                            formatter: labelFormatter,
                            threshold: 0.1
                        }
                    }
                },
                grid: {
                    clickable: true
                },
                legend: {
                    show: false
                }
            });


            var rs3 = new Rickshaw.Graph({
                element: document.querySelector('#rickshaw3'),
                renderer: 'area',
                max: 50,
                series: [{
                    data: [
                        { x: 0, y: 40 },
                        { x: 1, y: 49 },
                        { x: 2, y: 38 },
                        { x: 3, y: 30 },
                        { x: 4, y: 32 },
                        { x: 5, y: 40 },
                        { x: 6, y: 20 },
                        { x: 7, y: 10 },
                        { x: 8, y: 20 },
                        { x: 9, y: 25 },
                        { x: 10, y: 35 },
                        { x: 11, y: 20 },
                        { x: 12, y: 40 },
                        { x: 13, y: 25 }
                    ],
                    color: '#FF9902'
                }]
            });
            rs3.render();

            // Responsive Mode
            new ResizeSensor($('.br-mainpanel'), function () {
                rs3.configure({
                    width: $('#rickshaw3').width(),
                    height: $('#rickshaw3').height()
                });
                rs3.render();
            });

            var piedata2 = [
                { label: "Damange Details", data: [[1, @Model.DamageDetailIncidents.Count]], color: '#FF6D4A' },
                { label: "Incident Report", data: [[1, @Model.IncidentReportIncidents.Count]], color: '#FF9902' },
                { label: "Estimates", data: [[1, @Model.EstimatesIncidents.Count]], color: '#3E47DD' },
                { label: "Estimate Selection", data: [[1, @Model.EstimateSelectionIncidents.Count]], color: '#00A78D' },
                { label: "Payment Approval", data: [[1, @Model.PaymentApprovalIncidents.Count]], color: '#701A07' },
                { label: "Shop Pickup", data: [[1, @Model.ShopPickupIncidents.Count]], color: '#EE2A2A' },
                { label: "At Shop", data: [[1, @Model.AtShopIncidents.Count]], color: '#07703C' },
                { label: "Completed", data: [[1, @Model.RepairCompleteIncidents.Count]], color: '#626976' },
                { label: "Accepted", data: [[1, @Model.RepairAcceptedIncidents.Count]] }
            ];

            var myPlot = $.plot('#flotPie2', piedata2, {
                series: {
                    pie: {
                        show: true,
                        radius: 1,
                        innerRadius: .6,
                        label: {
                            show: false,
                            radius: 2 / 3,
                            threshold: 0.1
                        }
                    }
                },
                grid: {
                    clickable: true,
                    hoverable: true
                }
            });

            $("<div id='tooltip2'></div>").css({
                position: "absolute",
                display: "none",
                border: "1px solid #fdd",
                padding: "2px",
                "background-color": "#000",
                opacity: 0.80
            }).appendTo("div.br-pagebody");

            $("#flotPie2").bind("plothover", function (event, pos, item) {
                if (item) {
                    var x = item.datapoint[1];
                    $("#tooltip2").html(x[0][1] + " " + item.series.label)
                        .css({top: pos.pageY-50, left: pos.pageX-200})
                        .fadeIn(200);
                } else {
                    $("#tooltip2").hide();
                }
            });

            $("#flotPie2").bind("plothovercleanup", function (event, pos, item) {
                $("#tooltip2").hide();
            });

            $("#flotPie2").bind("plotclick", function (event, pos, item) {
                if (item) {

                }
            });
        });
    </script>
}