@model Neo.Legitimate.VerificationConsole.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")
@Html.Partial("Afx/Form/ChecklistTemplates")

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

</style>

@{ 
    var detailTab = "";
    if (Model.AppOrLir == "APP")
    {
        detailTab = "Application Details";
    }
    else
    {
        detailTab = "Licence Issue Details";
    }
} 

<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="#detailsTab">@detailTab</a></li>
                        <li><a href="#appCommentTab">Comments</a></li>
                    </ul>
                </div>

                @if (Model.AppOrLir == "APP")
                {
                    <div id="detailsTab">
                        <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>
                }
                else
                {
                    <div id="detailsTab">
                        <table class="afxTable borderless fill-content">
                            <thead>
                                <tr>
                                    <th colspan="2">
                                        <a data-bind="click: OpenWorkflow, html: LicenceIssueDetail.LicenceReferenceNumber" style="color:white; text-decoration:underline" href="#"></a>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="background-color:lightgray">
                                    <td colspan="3">
                                        <b>Licence Details</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td valign="top">
                                        <i>Name</i>
                                        <br />
                                        <span data-bind="html: LicenceIssueDetail.MemberFullName"></span>
                                    </td>
                                    <td valign="top">
                                        <i>Tax Reference No.</i>
                                        <br />
                                        <span data-bind="html: LicenceIssueDetail.MemberTaxReference"></span>
                                    </td>
                                </tr>
                                <tr>                                   
                                    <td valign="top">
                                        <i>ID/Business Reg. No.</i>
                                        <br />
                                        <span data-bind="html: LicenceIssueDetail.MemberIDNumber"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td valign="top">
                                        <i>Association Name</i>
                                        <br />
                                        <span data-bind="html: LicenceIssueDetail.Association"></span>
                                    </td>
                                    <td valign="top">
                                        <i>Cell Number</i>
                                        <br />
                                        <span data-bind="html: LicenceIssueDetail.MemberCell"></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: LicenceIssueDetail.VehicleVIN"></span>
                                    </td>
                                    <td valign="top">
                                        <i>Engine No.</i>
                                        <br />
                                        <span data-bind="html: LicenceIssueDetail.VehicleEngineNumber"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td valign="top">
                                        <i>Vehicle Reg. No.</i>
                                        <br />
                                        <span data-bind="html: LicenceIssueDetail.VehicleRegistrationNumber"></span>
                                    </td>
                                    <td valign="top">
                                        <i>Vehicle Make</i>
                                        <br />
                                        <span data-bind="html: LicenceIssueDetail.VehicleMake"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td valign="top">
                                        <i>Seated Capacity</i>
                                        <br />
                                        <span data-bind="html: LicenceIssueDetail.VehicleSeatedCapacity"></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>
                }
                <button class="ui-button" id="previousButton" data-bind="visible: documentCheckIndex() != 0, click: PreviousDocumentCheck">Previous</button>
                &nbsp;
                <button class="ui-button" id="nextButton" data-bind="visible: SaveVisible(), click: NextDocumentCheck" style="float:right;">Next</button>
            </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>