﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8">
    <title>Person Search</title>
    <script src="../ClientGlobalContext.js.aspx" type="text/javascript"></script>
    <script src="scripts/jquery1.10.2.min.js" type="text/javascript"></script>
    <script src="scripts/SdkRest.js" type="text/javascript"></script>
    <script src="scripts/json2.js" type="text/javascript"></script>
    <script src="scripts/utility.js" type="text/javascript"></script>
    <script src="scripts/popup.js" type="text/javascript"></script>
    <script src="scripts/MVIPersonSearch.js" type="text/javascript"></script>
    <link rel="stylesheet" href="stylesheets/MVIPersonSearch.css">
</head>
<body>
<form id="searchByTraitsForm">
    <h1 style="padding-top: 12px;">Veteran Search</h1>
    <div class="search">
        <table>
            <tbody>
            <tr>
                <td class="auto-style1">
                    <h2>Section 1 - Search By Traits</h2>
                </td>
            </tr>
            </tbody>
        </table>
        <fieldset>
            <legend>The search criteria for a search by traits includes the Social Security Number, First Name, Last Name, and Date of Birth in MM DD YYYY format</legend>
            <table>
                <tbody>
                <tr>
                    <td class="auto-style1">
                        <label for="SocialSecurityTextBox">*SSN</label>
                    </td>
                    <td>
                        <label for="FirstNameTextBox">First</label>
                    </td>
                    <td>
                        <label for="LastNameTextBox">*Last</label>
                    </td>
                    <td>
                        <label for="BirthMonthTextBox">*Month</label>
                    </td>
                    <td>
                        <label for="BirthDayTextBox">*Day</label>
                    </td>
                    <td>
                        <label for="BirthYearTextBox">*Year</label>
                    </td>

                </tr>
                <tr>
                    <td class="auto-style1">
                        <input name="ssn" tabindex="1" title="Social Security Number (9 char max)" class="formInputText" id="SocialSecurityTextBox" required="" type="text" size="16" maxlength="50">
                    </td>
                    <td>
                        <input name="firstName" tabindex="2" title="First Name (30 char max)" class="formInputText" id="FirstNameTextBox" type="text" size="16" maxlength="30">
                    </td>
                    <td>
                        <input name="lastName" tabindex="3" title="Last Name (30 char max)" class="formInputText" id="LastNameTextBox" required="" type="text" size="16" maxlength="30">
                    </td>
                    <td>

                        <input name="dateOfBirthMonth" tabindex="4" title="DOB Month in MM format" class="formInputText" id="BirthMonthTextBox" style="height: 30px;" required="" onkeyup="if($(this).val().length == 2) $('#BirthDayTextBox').focus()"
                               type="text" size="2" maxlength="2" placeholder="MM" pattern="[0-9]*">/
                    </td>
                    <td>
                        <input name="dateOfBirthDay" tabindex="5" title="DOB Day in DD format" class="formInputText" id="BirthDayTextBox" style="height: 30px;" required="" onkeyup="if($(this).val().length == 2) $('#BirthYearTextBox').focus()" type="text"
                               size="2" maxlength="2" placeholder="DD" pattern="[0-9]*">/
                    </td>
                    <td>
                        <input name="dateOfBirthYear" tabindex="6" title="DOB Year in YYYY format" class="formInputText" id="BirthYearTextBox" style="height: 30px;" required="" type="text" size="4" maxlength="4" placeholder="YYYY" pattern="[0-9]*">
                    </td>
                </tr>
                <tr>
                    <td style="padding-top: 10px;" colspan="4">
                        <button tabindex="7" id="QueryMVIByTraits" aria-label="Search by Traits" onclick="PostMVIQuery">Search</button>
                        <button tabindex="8" id="clearFieldsButton" aria-label="Reset Search by Traits" type="reset">Reset</button>
                    </td>
                </tr>

                </tbody>
            </table>
        </fieldset>
    </div>
</form>
<form id="searchByICNForm">
    <div class="search">
        <table>
            <tbody>
            <tr>
                <td class="auto-style1">
                    <h2>Section 2 - Search By ICN</h2>
                </td>
            </tr>
            </tbody>
        </table>
        <fieldset>
            <legend>The search criteria for a search by ICN includes the ICN</legend>
            <table>
                <tbody>
                <tr>
                    <td>
                        <label for="IcnTextBox">*ICN</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input name="icn" tabindex="10" title="ICN (10 char max)" class="formInputText" id="IcnTextBox" required="" type="text" size="16" maxlength="10">
                    </td>
                </tr>
                <tr>
                    <td style="padding-top: 10px;">
                        <button tabindex="11" id="QueryMVIByIcn" aria-label="Search by ICN">Search</button>
                        <button tabindex="12" id="clearFieldsButton" aria-label="Reset Search by ICN" type="reset">Reset</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </fieldset>
    </div>
</form>
<form id="searchByEdipiForm">
    <div class="search">
        <table>
            <tbody>
            <tr>
                <td class="auto-style1">
                    <h2>Section 3 - Search By EDIPI</h2>
                </td>
            </tr>
            </tbody>
        </table>
        <fieldset>
            <legend>The search criteria for a search by EDIPI includes the EDIPI</legend>
            <table>
                <tbody>
                <tr>
                    <td>
                        <label for="EdipiTextBox">*EDIPI</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input name="edipi" tabindex="10" title="EDIPI (10 char max)" class="formInputText" id="EdipiTextBox" required="" type="text" size="16" maxlength="10">
                    </td>
                </tr>
                <tr>
                    <td style="padding-top: 10px;">
                        <button tabindex="11" id="QueryMVIByEdipi" aria-label="Search by EDIPI">Search</button>
                        <button tabindex="12" id="clearEdipiFieldsButton" aria-label="Reset Search by EDIPI" type="reset">Reset</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </fieldset>
    </div>
</form>

<form id="mviResults">
    <div class="results" >
        <h2>MVI Results</h2>
        <table style="width:100%" border="1" onclick="handleTableClick(event)">
            <tbody>
                <tr>
                    <th></th>
                    <th>Firstname</th>
                    <th>LastName</th>
                    <th>Address1</th>
                    <th>Address2</th>
                    <th>City</th>
                    <th>State</th>
                    <th>Zip</th>
                    <th>PhoneNumber</th>
                    <th>DOB</th>
                    <th>SSN</th>
                </tr>
                <tr>
                    <td><input type="button" value="Select" onclick="getId(this)"></td>
                    <td>Tom</td>
                    <td>Hanks</td>
                    <td>SomeAddress Line 1</td>
                    <td>SomeAddress Line 2</td>
                    <td>Any City</td>
                    <td>Any State</td>
                    <td>12345-1234</td>
                    <td>123-456-7890</td>
                    <td>01/31/1987</td>
                    <td>123456789</td>
                </tr>
                <tr>
                    <td><input type="button" value="Select" onclick="getId(this)"></td>
                    <td>Thomas</td>
                    <td>Hall</td>
                    <td>SomeOtherAddress Line 1</td>
                    <td>SomeOtherAddress Line 2</td>
                    <td>Any Other City</td>
                    <td>Any Other State</td>
                    <td>09876-5432</td>
                    <td>0987-65-4321</td>
                    <td>12/31/1982</td>
                    <td>987654321</td>
                </tr>
            </tbody>
        </table>
    </div>
</form>  
    <br>
    <div class="search" id="validationFailedDiv" style="color: rgb(128, 0, 0); clear: both; font-size: 1em; font-weight: bold; display: none;" aria-label="Search validation failed message">The search requires some additional information. Please follow the instructions above to execute your search.</div>
    <div class="search" tabindex="50" id="resultsFieldSetDiv" style="width: 100%; float: left; display: none;">
        <h2>Section 3 - Search Results</h2>
        <div class="search" style="clear: both;"></div>
        <div class="search" id="searchResultsMessageDiv" style="color: rgb(128, 0, 0); font-size: 1em; font-weight: bold; display: none;" aria-label="Search Results Message"></div>
        <fieldset id="SearchResultFieldSet">
            <legend style="display: none;">Search Results</legend>
            <table id="personSearchResultsTable" style="width: 100%;">
            </table>
            <button tabindex="200" id="idProofVeteranCompleteButton" style="margin-top: 10px;" aria-label="Identify Veteran and ID Proof Complete">Identify Veteran and ID Proof Complete</button>
            <button tabindex="201" id="idProofCompleteButton" style="margin-top: 10px;" aria-label="ID Proof Complete">ID Proof Complete</button>
            <button tabindex="202" id="idProofFailedButton" style="margin-top: 10px;" aria-label="ID Proof Failed">ID Proof Failed</button>
        </fieldset>
    </div>
</body>
</html>
