{% extends "layout.html" %}
{% from "bootstrap_wtf.html" import horizontal_field as ff %}
{% from "bootstrap_wtf.html" import form_errors as form_errors %}
{% from "_profile.html" import profile_fields_extended with context %}

{% block morehead %}    
    <!-- BEGIN histowiz/templates/edit_order_v2.html morehead -->
    <link rel="stylesheet"
        href="{{ url_for('static', filename='lib/jquery-steps-1.1.0/jquery.steps.css') }}">
    <!-- hack: Ensure all content stays visible. https://github.com/rstaib/jquery-steps/issues/10#issuecomment-25333155 -->
    <style>.wizard > .content > .body { position: inherit; }</style>

    {% assets filters="cssmin", output="gen/edit_order_v2-packed.css", "css/routine-histology.css",
            "css/stain_widgets.css", "css/ihc.css", "css/special.css", "css/tooltip.css",
            "css/edit_order.css" %}
        <link rel="stylesheet" href="{{ ASSET_URL }}">
    {% endassets %}

    <script src="{{ url_for('static', filename='lib/jquery-ui-1.11.1.custom/jquery-ui.min.js') }}"></script>

    <!-- TODO: Test jquery-steps-1.1.0 -->
    <script src="{{ url_for('static', filename='jquery.steps.min.js') }}"></script>

    <script src="{{ url_for('static', filename='lib/jquery-placeholder-2.1.1.js') }}"></script>

    {% assets filters="jsmin", output="gen/edit_order_v2-packed.js",
            "sample_validators.js", "edit_order_v2.js" %}
        <script src="{{ ASSET_URL }}"></script>
    {% endassets %}

    <!-- END histowiz/templates/edit_order_v2.html morehead -->
{% endblock %}
{% block content %}
<!-- BEGIN histowiz/templates/edit_order_v2.html content -->
<form method="POST" action="" enctype="multipart/form-data" class="form form-horizontal" id="order-form">
    <style>
    .overlay{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      background-color: rgba(0,0,0,0.5); /*dim the background*/
    }
    </style>
    {% if form.errors or sample_errors %}
    <div id="error-container">
        {% for field in form.errors %}
            {% for error in form.errors[field] %}
                <div class="alert alert-error">
                    <strong>Error!</strong> {{error}} ({{ form[field].label }})
                </div>
            {% endfor %}
        {% endfor %}
        {% for item in sample_errors %}
            <div class="alert alert-error">
                <strong>Error!</strong> {{item.error}} ({{ item.field }})
            </div>
        {% endfor %}
    </div>
    {% endif %}
    <div id="wizard">
        <h1>Project Information</h1>
        <div class="wiz-step bootstrap-hack">
            <p class="science-header">Please fill out all fields as best as you can! It will help us process your order more efficiently and tag your slides correctly for searching.</p>
            <div class="wiz-step-quarter">
            
                <h2>Project Information</h2>
                {% if is_admin() %}
                    <div class="alert">
                        {{ ff(form.owner_id) }}
                    </div>
                {% else %}
                    <input type="hidden" name="owner_id" value="{{form.owner_id.data}}" id="owner_id" />
                {% endif %}
                <button type="button" id="prefill-order-btn">Pre-fill from last order</button>
                {% if edit_mode %}
                    {{ form.order_id }}
                    {{ form.pathology_request_id }}
                    {{ form.histology_service_request_id }}
                {% endif %}
                {{ ff(form.project_id) }}
                {{ ff(form.experiment_name) }}
                {{ ff(form.po_number) }}
                {{ ff(form.scientist_1_email) }}
                {{ ff(form.scientist_2_email) }}

                <h2>Contact Information</h2>

                {{ profile_fields_extended(form) }}
            </div>
            <div class="wiz-step-quarter">
                <h2>Services<span class="required-star">*</span></h2>
                <p id="services-help" class="help-block">Check all that apply</p>
                <div class="service-container">
                {{ ff(form.process_and_embed_only) }}
                {{ ff(form.routine_histology) }}
                {{ ff(form.ihc) }}
                {{ ff(form.whole_slide_imaging) }}
                {{ ff(form.auto_image_analysis) }}
                {{ form.long_term_data_mgmt }}
                </div>
                {{ ff(form.pathologist_id) }}
                <h2>Turnaround Time<span class="required-star">*</span></h2>
                {{ ff(form.turnaround_time) }}

                <h2>Shipping Information</h2>

                {{ ff(form.generate_shipping_label) }}
                {{ ff(form.shipping_no) }}
                {{ ff(form.shipping_weight) }}
                {{ ff(form.shipping_dropoff_type) }}
                {{ ff(form.shipping_service_type) }}
            </div>
            <div class="wiz-step-half">
                <h2>Submission Information</h2>
                <div class="wiz-step-semihalf-container">
                    <div class="wiz-step-semihalf">
                        {{ ff(form.sample_collection_date) }}
                        {{ ff(form.fixation_time) }}
                        {{ ff(form.fixative_id_list) }}
                        {{ ff(form.fixative_custom) }}
                        {{ ff(form.additional_info) }}
                    </div>
                    <div class="wiz-step-semihalf">
                        {{ ff(form.received_in_id_list) }}
                        {{ ff(form.received_in_custom) }}
                        {{ ff(form.decalcification) }}
                        {{ ff(form.sample_return_requested) }}                        
                    </div>
                </div>
            </div>
        </div>
        <h1>Science Information</h1>
        <div class="wiz-step bootstrap-hack">
            <p class="science-header">Please fill out all fields as best as you can! It will help us process your order more efficiently and tag your slides correctly for searching.</p>
            <div class="wiz-step-arbitrary-column">
                {{ ff(form.species_id_list) }}
                {{ ff(form.species_custom) }}
            </div>
            <div class="wiz-step-arbitrary-column">
                {{ ff(form.bio_system_id_list) }}
                {{ ff(form.bio_system_custom) }}
            </div>
            <div class="wiz-step-arbitrary-column">
                {{ ff(form.mouse_strain_id_list) }}
                {{ ff(form.mouse_strain_custom) }}
            </div>
            <div class="wiz-step-arbitrary-column">
                {{ ff(form.experiment_type_id_list) }}
                {{ ff(form.experiment_type_custom) }}
                {{ ff(form.gender) }}
                {{ ff(form.age) }}
            </div>
            <div class="wiz-step-arbitrary-column">
                {{ ff(form.xenograft_type_id_list) }}
                {{ ff(form.xenograft_type_custom) }}
                {{ ff(form.promoters) }}
                {{ ff(form.reporters) }}
                {{ ff(form.gemm) }}
                {{ ff(form.published) }}
            </div>
            <div class="wiz-step-arbitrary-column">
                {{ ff(form.mpath_icd10_codes) }}
            </div>
        </div>
        <h1>Histology</h1>
        <div class="wiz-step do-not-grow-children histology">
            <p class="science-header red">Remember: You cannot submit more than one sample with the same ID. Please ensure you enter the special instructions each time you submit an order instead of asking us to do what was done before; we are not responsible for damages caused by missing instructions</p>
            <div class="wiz-step-full">
                <div class="histowiz-box">
                    <p>
                        If you want to provide more detailed instructions, you can <strong>upload a PDF</strong>.
                        {{ ff(form.pdf_upload) }}
                    </p>
                </div>
            </div>
            <div class="wiz-step-full">
                <div class="histowiz-box">
                    <p>
                        Instead of completing the Sample Table below, you can
                        <strong>Upload a Microsoft Excel&reg; Spreadsheet</strong>.
                    </p>
                    <p>
                        First
                        <button type="button" id="download-csv-template-btn">Download our Excel Template</button>
                        then
                        <button type="button" id="upload-dialog-btn">Upload your Excel File</button>
                    </p>
                </div>
            </div>
            <!--<div class="wiz-step-quarter">
                <h2 class="no-top-padding">Sample Table</h2>
                <button type="button" class="add-new-row-btn" name="add_new_row_btn">Add Sample</button>
            </div>-->
            <div class="wiz-step-half">
                <div class="wiz-step-semihalf-container">
                    <div class="wiz-step-semithirds">
                        {{ ff(form.thickness) }}
                    </div>
                    <div class="wiz-step-semithirds">
                        {{ ff(form.no_sections_per_slide) }}
                    </div>
                    <div class="wiz-step-semithirds">
                        {{ ff(form.section_steps) }}
                    </div>
                </div>
            </div>
            <div class="sample-table">
                <div style="clear: both;">
                    {% include 'routine_histology_table.html' %}
                </div>
                <button type="button" class="add-new-row-btn" name="add_new_row_btn">Add Sample</button>
            </div>
            <div class="below-histology">
                {{ ff(form.special_instructions) }}
                <button type="button" id="fill-previous-special-instructions">Fill previous special instructions</button>
                <span id="stuff-about-special-instructions"></span>
            </div>
        </div>
    </div>
    {{ form.hidden_tag() }}
</form>

<div id="upload-dialog">
    <form method="POST" action="" id="upload-form">
        <div id="progress-msg"></div>
        <div class="control-group ">
            <label class="control-label" for="upload-samples">Upload samples</label>
            <div class="controls">
                <input type="file" id="upload-samples" name="samples_file" value="" />
            </div>
        </div>
    </form>
</div>

<div id="dialog-prefill-confirm"></div>
<div id="dialog-place-order-confirm"></div>
<div id="dialog-delete-row-confirm"></div>
<div id="row-template-container">
    <table>
    {% with sample=row_template %}
    {% include 'routine_histology_row.html' %}
    {% endwith %}
    </table>
</div>

<!-- END histowiz/templates/edit_order_v2.html content -->
{% endblock %}

{% block tail %}
{{ super() }}
<!-- BEGIN histowiz/templates/edit_order_v2.html tail -->
<script language="javascript">

    var IHC_ANTIGENS = [];
    {% for ihc_antigen in ihc_antigens %}
        IHC_ANTIGENS[{{ihc_antigen.value}}] = '{{ihc_antigen.name}}';
    {% endfor %}

    var SPECIAL_STAINS = [];
    {% for special_stain in special_stains %}
        SPECIAL_STAINS[{{special_stain.value}}] = '{{special_stain.name}}';
    {% endfor %}

    var SAMPLE_TEMPLATE_URL = '{{sample_template_url()}}';
    var NEXT = '{{next}}';

    var PRELOADED_SAMPLE_COUNT = parseInt("{{sample_rows|length}}");

    var STAIN_CAT_IHC = {{STAIN_CAT_IHC}};
    var STAIN_CAT_SP = {{STAIN_CAT_SP}};
    var STAIN_CAT_UN = {{STAIN_CAT_UN}};
    var STAIN_CAT_HE = {{STAIN_CAT_HE}};
    var IHC_OTHER = {{IHC_OTHER}};
    var SP_OTHER = {{SP_OTHER}};

    var price_preview_url = "{{ url_for('gen_user_price_preview') }}";
</script>

<script>
    $(document).ready(function(){
        if($("#generate_shipping_label-1").prop('checked'))
            $("#shipping_info").hide();

        $(document).on("change", "#generate_shipping_label-0", function(){
            var checked = $(this).prop('checked');

            if (checked) {
                $("#shipping_info").show();
            }
        });

        $(document).on("change", "#generate_shipping_label-1", function(){
            var checked = $(this).prop('checked');

            if (checked) {
                $("#shipping_info").hide();
            }
        });
    });
</script>

<!-- END histowiz/templates/edit_order_v2.html tail -->
{% endblock %}