File: /home/imensosw/www/imenso.co/demo/claapp/code.html
<figure>
<div id="code_section_1">
<div class="well">
<div class="row">
<div class="col-md-4 col-sm-6" style="padding-right:4px;padding-left:0px;">
<div style="background:#006666;height:50px;">
</div>
<div class="left padding-10">
<div class="code-inputs padding-10">
<div class="form-group margin-right-10">
<label>ICD-10-CM Diagnoses</label>
<div><input type="text" maxlength="8" class="form-control text pdx-input" name="code[]"> <span></span></div>
<div><input type="text" maxlength="8" class="form-control text" name="code[]"> <span><a href="#" class="remove_field"><i class="fa fa-times icon-color" aria-hidden="true"></i></a></span></div>
<div><input type="text" maxlength="8" class="form-control text" name="code[]"> <span><a href="#" class="remove_field"><i class="fa fa-times icon-color" aria-hidden="true"></i></a></span></div>
<div><input type="text" maxlength="8" class="form-control text" name="code[]"> <span><a href="#" class="remove_field"><i class="fa fa-times icon-color" aria-hidden="true"></i></a></span></div>
</div>
<a href="#" class="add_field_button instruct-word"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add field</a>
<hr/>
<div class="form-group_pcs margin-right-10">
<label>ICD-10-PCS Procedures</label>
<div><input type="text" maxlength="8" class="form-control text pcs-input" name="code[]"> <span></span></div>
<div><input type="text" maxlength="8" class="form-control text" name="pcs[]"> <span><a href="#" class="remove_field"><i class="fa fa-times icon-color" aria-hidden="true"></i></a></span></div>
<div><input type="text" maxlength="8" class="form-control text" name="pcs[]"> <span><a href="#" class="remove_field"><i class="fa fa-times icon-color" aria-hidden="true"></i></a></span></div>
<div><input type="text" maxlength="8" class="form-control text" name="pcs[]"> <span><a href="#" class="remove_field"><i class="fa fa-times icon-color" aria-hidden="true"></i></a></span></div>
</div>
<a href="#" class="add_field_button_pcs instruct-word"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add field</a>
<hr/>
<div class="form-group_proc margin-right-10">
<label>ICD-10-PCS Procedures</label>
<div><input style="width:41%" type="text" maxlength="8" class="form-control text" name="procedure[]"> <span>-</span> <input style="width:41%" type="text" maxlength="8" class="form-control text" name="procedure1[]"> <span></span> </div>
<div><input style="width:41%" type="text" maxlength="8" class="form-control text" name="procedure[]"> <span>-</span> <input style="width:41%" type="text" maxlength="8" class="form-control text" name="procedure1[]"> <span><a href="#" class="remove_field"> <i class="fa fa-times icon-color" aria-hidden="true"></i></a></span> </div>
<div><input style="width:41%" type="text" maxlength="8" class="form-control text" name="procedure[]"> <span>-</span> <input style="width:41%" type="text" maxlength="8" class="form-control text" name="procedure1[]"> <span><a href="#" class="remove_field"> <i class="fa fa-times icon-color" aria-hidden="true"></i></a></span> </div>
</div>
<a href="#" class="add_field_button_proc instruct-word"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add field</a>
</div>
<div style="width:90%;position:absolute;z-index:300;bottom:38px;" class="alert alert-danger hide">
<a href="javascript:void(0);" class="close" aria-label="close">×</a>
<strong>Error!</strong> <span class="msg">Resolve duplicate code.</span>
</div>
<div class="code-submit">
<a href="#" data-toggle="modal" data-target="#noteModal"><img src="images/icn-scratch-pad.png" class="img-icon"/></a>
<button type="button" class="btn btn-secondary submit-code">Submit</button>
<a href="javascript:previewCode();"><img src="images/icn-view.png" class="img-icon"/></a>
</div>
</div>
</div>
<div class="col-md-8 col-sm-6" style="padding-left:4px;padding-right:0px;">
<div class="padding-10" style="background:#4a1c6b;height:50px;">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-5">
<ul class="nav nav-pills">
<li role="presentation"><a class="time"><b>10 hrs 10 mins</b></a></li>
</ul>
</div>
<div id="record-summary" class="hide col-lg-8 col-md-6 col-sm-6 col-xs-7">
<ul class="nav nav-pills">
<li role="presentation"><a href="#" class="record">Record</a></li>
<li role="presentation" class="active"><a href="#" class="summary">Summary</a></li>
</ul>
</div>
</div>
</div>
<div class="left" style="background:#ffffff;">
<div id="code-block" class="hide">
<div class="row padding-10">
<div class="col-lg-12 contact-info">
<label>
Refer to the answer key below to see which codes you have correctly assigned. When you have finished reviewing the results you may close this window.
</label>
</div>
</div>
<div class="row padding-10">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<label class="vadidate-code-correct pull-right">You correctly assigned this code <i class="fa fa-check-circle icon-color" aria-hidden="true"></i>
</label>
<div class="clearfix"></div>
<label class="vadidate-code-incorrect pull-right">You incorrectly assigned this code <i class="fa fa-times-circle icon-color" aria-hidden="true"></i>
</label>
</div>
</div>
</div>
</div>
<div class="row padding-10">
<div class="col-lg-12">
<h4 style="border-bottom:2px solid #8e2b5a">PRINCIPAL DIAGNOSIS</h4>
<div id="dCodePrimary">
</div>
</div>
<div class="col-lg-12">
<h4 style="border-bottom:2px solid #8e2b5a">
SECONDARY DIAGNOSES
</h4>
<div id="dCodeSecondary">
</div>
</div>
<div class="col-lg-12">
<h4 style="border-bottom:2px solid #8e2b5a">
ICD-10-PCS PRIMARY
</h4>
<div id="pcsCodePrimary">
</div>
</div>
<div class="col-lg-12">
<h4 style="border-bottom:2px solid #8e2b5a">
ICD-10-PCS SECONDARY
</h4>
<div id="pcsCodeSecondary">
</div>
</div>
<div class="col-lg-12">
<h4 style="border-bottom:2px solid #8e2b5a">
CPT
</h4>
<div id="pCode">
</div>
</div>
</div>
</div>
<div id="instruction-block">
<div class="row padding-10">
<div class="col-lg-12">
<label>
Click each link below to open the PDF document in a new window. Review the Coding Guidelines document before you begin coding. Enter codes into the abstract on the left.
</label>
<div class="pdf-links padding-10">
<i class="fa fa-info-circle" aria-hidden="true"></i> <a target="_blank" id="openpdf">Coding Guidelines</a><br/>
</div>
</div>
</div>
<div class="row instruct-box" style="font-size:small;">
<div class="col-lg-12" style="display:table;">
<div class="step padding-right-15">
<p class="text-color">TIPS</p>
</div>
<div>
<div class="instruction-note">
<div class="step"><span class="badge">1</span></div>
<div class="padding-left-20">Please take note of the <span class="instruct-word">Add Field</span> button. This allows you to add more rows for codes to the abstract as needed.
</div>
</div>
<div class="instruction-note">
<div class="step"><span class="badge">2</span></div>
<div class="padding-left-20">Use the <img src="images/icn-scratch-pad.png" class="img-icon"/> button to access the scratch pad. The scratch pad is like a notepad for jotting thoughts while you work. Nothing entered here effects how you work is evaluated.
</div>
</div>
<div class="instruction-note">
<div class="step"><span class="badge">3</span></div>
<div class="padding-left-20">Use the <img src="images/icn-view.png" class="img-icon"/> button to access the quick look view. The window allows you to see at glance all the codes you've assigned without having to scroll throght the abstract.</div>
</div>
</div>
</div>
</div>
<div class="row padding-10">
<div class="col-lg-12" style="font-size:0.8em;">
<p>
Portion of this content are copyright 2017 American Medical Association. CPT is a registered trademark of the American Medical Association.
</p>
<p>
nThrive Education recommends using this in conjuction with the most recent edition of Current Procedural Terminology(CPT), Fourth Edition, published by the Amrican Medical Association(AMA).
All CPT codes, description, book-specific instructions and/or guidelines are copyrighted by AMA. The AMA assumes no liability for this content.
</p>
<p>
CPT is used to report medical services and procedures performed by providers. This application includes a select few CPT codes, description, modifiers, book-specific instructions, and/or guidelines.
The nThrive Education team selected the items included.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="pull-right" data-dismiss="modal" aria-label="Close">
<i aria-hidden="true" class="fa fa-times"></i>
</div>
<label class="modal-title" id="deleteModalLabel">Confirm Delete</label>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<h4 class="centered">Deleteing this field will also remove <span id="inputVal"></span> from abstract.</h4>
<h4 class="centered">Do you wish to continue?</h4>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No
</button>
<button type="button" id="continueDelete" class="btn btn-secondary">Yes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-12">
<div class="pull-left">
<label class="modal-title" id="previewModalLabel"><img src="images/icn-view.png" class="img-icon"/> <span class="previewHeader">Here's a quick look at the codes you've assigned so far.</span>
<span class="submitHeader">Please review your code before continuing.</span>
</label>
</div>
<div class="pull-right" data-dismiss="modal" aria-label="Close">
<i aria-hidden="true" class="fa fa-times"></i>
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="row" style="height:380px;overflow-y:auto;">
<div class="col-sm-4" style="min-height:100%">
<h4>ICD-10-CM Diagnoses</h4>
<ul class="list-group" id="preview-code">
</ul>
</div>
<div class="col-sm-4" style="min-height:100%">
<h4>ICD-10-PCS Procedures</h4>
<ul class="list-group" id="preview-pcs">
</ul>
</div>
<div class="col-sm-4" style="border-left:1px solid #DDD;min-height:100%">
<h4>CPT Procedures</h4>
<ul class="list-group" id="preview-proc">
</ul>
</div>
</div>
</div>
<div class="modal-footer hide">
<div class="row">
<div class="col-sm-6 text-left">
<div>Code submission is final.</div>
<small>Do you want to continue?</small>
</div>
<div class="col-sm-6" style="margin-top: 5px">
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel
</button>
<button type="button" id="continueCode" class="btn btn-primary">Continue</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-12">
<div class="pull-left">
<label class="modal-title" id="noteModalLabel">
<img src="images/icn-scratch-pad.png" class="img-icon"/> Scratch Pad</span> <small><i>(Leave notes here for yourself while you're working.)</i></small>
</label>
</div>
<div class="pull-right" data-dismiss="modal" aria-label="Close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<textarea class="form-control" rows="20" placeholder="Type notes here..."></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="overlay" id="overlay_container">
<figcaption>
<div class="content">
<div class="arrow" style="position: absolute;top: 180px;left:110px">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-3"><img src="images/arrow.png" style="height:390px;"/></div>
<div class="col-lg-5"></div>
</div>
</div>
<div class="arrow-dialog" style="position: absolute;bottom: 30px;">
<div class="row">
<div class="arrow-padding col-sm-4 col-xs-12"></div>
<div class="col-sm-5 col-xs-6" style="padding-left:60px;">
<h1 class="content-in-overlay">Opening documents may cause this window to become hidden behind other applications. Please be mindful of this while working with the nThrive Education Incubator.</h1>
<button type="button" class="btn begin-code" id="understand_begin_button">I understand, let's begin </button>
</div>
<div class="col-sm-3 col-xs-6">
<img class="img-responsive" src="images/gif-animation.gif" style="width:90%;height:auto;"/></div>
</div>
</div>
</div>
</figcaption>
</div>
</figure>