@model Neo.Legitimate.BulkVehicleVerificationConsole.Models.DefaultModel

@using System.Web.Mvc.Html
@using Pilotfish.Afx.ComponentModel
@using Pilotfish.Afx.Security
@using Pilotfish.Afx.Mvc

@{
    ViewBag.Title = "Default";
    Layout = "Console.cshtml";
}

@Html.Partial("Scripts/Default-Init")
@Html.Partial("Scripts/Default-Events")

<style>
    #nav {
        height:38px;
    }

    #nav ul {
        margin: 0px 0px 0px 0px !important;    
    
    }

    #bodycontent div:first-child {
        padding: 0px 0px 0px 0px !important;
    }

    body {
        overflow:hidden !important;
    }
</style>

<table class="afxTable" style="width:100%">
    <thead>
        <tr>
            <th style="text-align:center">
                <a data-bind="click: OpenWorkflow, html: Application.ApplicationNumber" style="color:white; text-decoration:underline" href="#"></a>
            </th>
            <th data-bind="html: 'Vehicle ' + (viewModel.VehicleIndex() + 1) + ' of ' + viewModel.Vehicles.length"></th>
        </tr>
    </thead>
    <tbody>
        <tr style="background-color:lightgray; height:20px;">
            @if (Model.CanAction)
            {
                <td align="center" style="font-size:1.35em;" data-bind="html: SelectedQuestion()"></td>
                <td width="170px;" nowrap>
                    <button data-bind="click: YesClicked, visible: !IsSaving()" style="width:75px; height:40px; background:#71bf50 !important">Yes</button>
                    <button data-bind="click: NoClicked, visible: !IsSaving()" style="width:75px; height:40px; background:#ef4c4c !important">No</button>
                    <span data-bind="visible: IsSaving">Saving...</span>
                </td>
            }
            else
            {
                <td align="center" style="font-size:1.35em;">The verification task can not be completed by yourself</td>
                <td></td>
            }
        </tr>
        <tr>
            <td style="padding:0px; border: 0px;" colspan="2">
                <div id="verificationTabs" style="position: relative !important;">
                    <div id="nav">
                        <ul>
                            <li><a href="#corTab">COR</a></li>
                            <li><a href="#logbookTab">Logbook</a></li>
                            <li><a href="#prdpTab">PrDP</a></li>
                        </ul>
                    </div>
                    <div id="corTab">
                        <iframe id="corFrame" scrolling="auto"></iframe>
                    </div>
                    <div id="logbookTab">
                        <iframe id="logbookFrame" scrolling="auto"></iframe>
                    </div>
                    <div id="prdpTab">
                        <iframe id="prdpFrame" scrolling="auto"></iframe>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
    $(function () {
        $(function () {
            $("div#verificationTabs").tabs();

            $("#corTab").css({ "padding": "0px 0px 0px 0px" });
            $("#logbookTab").css({ "padding": "0px 0px 0px 0px" });
            $("#prdpTab").css({ "padding": "0px 0px 0px 0px" });
        });
        
        $(document).ready(function () {            
            var height = ($(window).height() - 60) + "px";
            $("#corFrame").css({ "height": height, "width": "100%", "border": "none" });
            $("#logbookFrame").css({ "height": height, "width": "100%", "border": "none" });
            $("#prdpFrame").css({ "height": height, "width": "100%", "border": "none" });
           
            viewModel.ShowVehicle(viewModel.VehicleIndex());
        });
    });
</script>