@model Neo.Legitimate.VerificationConsole.Models.AuditModel

@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/Audit-Init")
@Html.Partial("Scripts/Audit-Events")
@Html.Partial("Afx/Form/ChecklistTemplates")

<style>
    .ui-tabs .ui-tabs-panel {
        display: block;
        border-width: 0;
        padding: 0em;
        background: none;
    }
</style>

<div>
    <div style="width: 38%; float: left;">
        <div class="contentBlock">

            <div id="verificationTabs" style="position: relative !important; top: 1.0em !important;">
                <div id="nav">
                    <ul>
                        <li><a href="#appDetailsTab">Application Details</a></li>
                        <li><a href="#appCommentTab">Comments</a></li>
                    </ul>
                </div>

                <div id="appDetailsTab">
                    <table class="afxTable borderless fill-content">
                        <thead>
                            <tr>
                                <th colspan="2">
                                    <a data-bind="click: OpenWorkflow, html: Application.ApplicationNumber" style="color:white; text-decoration:underline" href="#"></a>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style="background-color:lightgray">
                                <td colspan="3">
                                    <b>Applicant Details</b>
                                </td>
                            </tr>
                            <tr>
                                <td valign="top">
                                    <i>Name</i>
                                    <br />
                                    <span data-bind="html: Application.Member"></span>
                                </td>
                                <td valign="top">
                                    <i>Tax Reference No.</i>
                                    <br />
                                    <span data-bind="html: Application.TaxNumber"></span>
                                </td>
                            </tr>
                            <tr>
                                <td valign="top">
                                    <i>Proxy Name</i>
                                    <br />
                                    <span data-bind="html: (Application.ProxyName != '') ? Application.ProxyName : 'N/A'"></span>
                                </td>
                                <td valign="top">
                                    <i>ID/Business Reg. No.</i>
                                    <br />
                                    <span data-bind="html: Application.IDNumberOrBusinessRegistrationNo"></span>
                                </td>
                            </tr>
                            <tr>
                                <td valign="top">
                                    <i>Association Name</i>
                                    <br />
                                    <span data-bind="html: Application.AssociationName"></span>
                                </td>
                                <td valign="top">
                                    <i>Cell Number</i>
                                    <br />
                                    <span data-bind="html: Application.TelCell"></span>
                                </td>
                            </tr>
                            <tr style="background-color:lightgray">
                                <td colspan="3"><b>Existing Licence Details</b></td>
                            </tr>
                            <tr>
                                <td valign="top">
                                    <i>Licence Number</i>
                                    <br />
                                    <span data-bind="html: Application.ExistingLicenceNumber"></span>
                                </td>
                            </tr>
                            <tr style="background-color:lightgray">
                                <td colspan="3"><b>Existing Licence Holder Details</b></td>
                            </tr>
                            <tr>
                                <td valign="top">
                                    <i>Name</i>
                                    <br />
                                    <span data-bind="html: (Application.ExistingLicenceHolder != '') ? Application.ExistingLicenceHolder : 'N/A'"></span>
                                </td>
                                <td valign="top">
                                    <i>ID/Business Reg. No.</i>
                                    <br />
                                    <span data-bind="html: (Application.ExistingLicenceHolderID != '') ? Application.ExistingLicenceHolderID : 'N/A'"></span>
                                </td>
                            </tr>
                            <tr style="background-color:lightgray">
                                <td colspan="3"><b>Vehicle Details</b></td>
                            </tr>
                            <tr>
                                <td valign="top">
                                    <i>VIN/Chassis No.</i>
                                    <br />
                                    <span data-bind="html: Application.ChassisNumber"></span>
                                </td>
                                <td valign="top">
                                    <i>Engine No.</i>
                                    <br />
                                    <span data-bind="html: Application.EngineNumber"></span>
                                </td>
                            </tr>
                            <tr>
                                <td valign="top">
                                    <i>Vehicle Reg. No.</i>
                                    <br />
                                    <span data-bind="html: Application.VehicleRegNumber"></span>
                                </td>
                                <td valign="top">
                                    <i>Vehicle Make</i>
                                    <br />
                                    <span data-bind="html: Application.VehicleMake"></span>
                                </td>
                            </tr>
                            <tr>
                                <td valign="top">
                                    <i>Seated Capacity</i>
                                    <br />
                                    <span data-bind="html: Application.SeatedCapacity"></span>
                                </td>

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

                <div id="appCommentTab">
                    <div class="noDataMessage" data-bind="visible: comments.length == 0">No comments found</div>
                    <table class="afxTable" data-bind="visible: comments.length > 0">
                        <thead>
                            <tr>
                                <th style="width: 70%">Comment</th>
                                <th style="width: 30%">Added By</th>
                            </tr>
                        </thead>
                        <tbody class="alt-row-indicator" data-bind="foreach: comments">
                            <tr>
                                <td data-bind="text: Comments"></td>
                                <td data-bind="text: UserCreatedBy.FullName"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>




        </div>
        <div class="contentBlock">
            <div class="header" style="margin-bottom:5px"><h2>Verification Checks</h2></div>
            <select data-bind="options: documentChecks, optionsText: 'ChecklistTitle', optionsValue: 'ChecklistTemplateID', value: documentCheck, enable: false" style="width:100%;"></select>
            <div style="display:block; width:100%;">
                <button id="previousButton" data-bind="visible: documentCheckIndex() != 0, click: PreviousDocumentCheck">Previous</button>
                <button id="nextButton" data-bind="visible: SaveVisible(), click: NextDocumentCheck" style="float:right;">Next</button>
                <br /><br />
            </div>
            <div id="checklistHolder" data-bind="enable: CanAction()">
                @foreach (var ct in Model.DocumentChecks)
                {
                    <span id="@ct.ChecklistTemplateID" data-checklist-bind="title: @ct.ChecklistTitle"></span>
                }
            </div>

        </div>
    </div>
    <div style="width: 60%; float: right;">
        <div class="contentBlock">
            <div class="header" style="margin-bottom:5px"><h2>Verification Document 1 Viewer</h2><select data-bind="options: documents, optionsText: 'Value', optionsValue: 'Key', value: documentViewer1ID, optionsCaption: 'Choose a document'" style="width:350px;"></select></div>
            <div>
                <iframe id="documentViewer1" width="100%" height="800px" scrolling="auto"></iframe>
            </div>
        </div>
    </div>

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

    $(function () {
        $(document).ready(function () {
            var s = viewModel;
            s.documentViewer1ID.subscribe(function (newValue) { if (newValue != null || newValue != 0) { viewModel.ShowDocument("#documentViewer1", newValue); } });
            s.documentCheck.subscribe(function (newValue) {
                viewModel.DocumentCheckChanged(newValue);
            });
            s.DocumentCheckChanged(viewModel.GetDocumentCheckByIndex(0));

            var nextCheck = s.documentCheckIndex() + 1;
            if (nextCheck == s.documentChecks.length) {
                $("#nextButton span").html("Finalise Verification");
            }

            var height = ($(window).height() - 70) + "px";
            $("#documentViewer1").css({ "height": height, "width": "100%", "border": "none" });
        });
    });
</script>