{% extends "layout.html" %}
{% from "bootstrap_wtf.html" import horizontal_field as ff %}
{% from "bootstrap_wtf.html" import form_errors as form_errors %}

{% 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/user_edit-packed.css", "css/routine-histology.css",
            "css/stain_widgets.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>
    <script src="{{ url_for('static', filename='lib/jquery-steps-1.1.0/jquery.steps.min.js') }}"></script>
    <script src="{{ url_for('static', filename='lib/jquery-placeholder-2.1.1.js') }}"></script>

    <!-- 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">
    {% 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-arbitrary-column">
                {{ ff(form.project_id) }}
                {{ ff(form.experiment_name) }}
                {{ ff(form.po_number) }}
                {{ ff(form.scientist_1_email) }}
                {{ ff(form.scientist_2_email) }}
            </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 bootstrap-hack">
            <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>
            <table>
                <thead>
                    <th>Sample ID</th>
                    <th>Organ Type</th>
                    <th>Additional Scientific Info</th>
                </thead>
                <tbody>
                    {% for s in samples %}
                    <tr>
                        <td>{{s.name}}</td>
                        <td><input type="text" name="sample_organ_type_{{s.id}}" value="{{s.description}}" /></td>
                        <td><textarea name="sample_special_{{s.id}}" cols="80">{{s.special_instructions}}</textarea></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {{ form.hidden_tag() }}
</form>

<div id="dialog-place-order-confirm"></div>

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

{% block tail %}
{{ super() }}
<!-- BEGIN histowiz/templates/edit_order_v2.html tail -->
<script language="javascript">
    function sortNumber(a,b) {
        return a - b;
    }

    function init_plist(plist) {
        var static_steps = [
            'science'
        ];
        
        for(var i = 0; i < static_steps.length; i++) {
            $("#wizard").data(static_steps[i], i);
        }
    };
        
    function get_step_index_by_name(name) {        
        return $("#wizard").data(name);
    };
    
    function open_place_order_dialog() {        
        $("#dialog-place-order-confirm").html("Place order?<br/>Please double check your order details. Once you click Confirm, you will not be able to edit this order. Thank you for using our services!");
        
        $("#dialog-place-order-confirm").dialog({
            resizable: false,
            modal: true,
            title: "Confirm Order",
            height: 250,
            width: 400,
            buttons: {
                "Confirm": function () {
                    $("#dialog-place-order-confirm").data("go-forth", true);
                    $(this).dialog('close');
                    $("a[href='#finish']").trigger('click');
                },
                "Recheck": function () {
                    $("#dialog-place-order-confirm").data("go-forth", false);
                    $(this).dialog('close');
                }
            }            
        });
    }
    
    function isNumber(thing) {
        if (typeof(thing) !== typeof(1)) {
            return false;
        }
        return !isNaN(thing);
    }

    $(document).ready(function(){

        $('input, textarea').placeholder();

        $("#cancel").on('click', function() { document.location = '{{ next }}'; return false })
    
        $(".optional-content").css("display", "none");
        $(".optional-content").css("visibility", "hidden");

        $("#digital_stain_type_custom").addClass("custom-text");
        $("#digital_stain_type_custom").attr("disabled", "disabled");
        
        $(document).on("change", "#digital_stain_type_id_list", function(){
            var selval = $(this).val();
            if (selval == $("#digital_stain_type_id_list option:last-child").val()) {
                $("#digital_stain_type_custom").removeAttr("disabled");
            }
            else {
                $("#digital_stain_type_custom").attr("disabled", "disabled");
            }
        });
        
        $(".sample-stain .stain-custom").addClass("custom-text");
        $(".sample-stain .stain-custom").attr("disabled", "disabled");
        
        $(document).on("change", "select.sample-stain-field", function(){
            var selval = $(this).val();
            var sel_index = $(this).attr("data-index");
            var this_id = $(this).get(0).id;
            var last_val = $('#' + this_id+" option:last-child").val();
            // console.log("selval="+selval);
            // console.log("last_val="+last_val);
            if (selval == last_val) {
                $("#sample_stain_custom_"+sel_index).removeAttr("disabled");
            }
            else {
                $("#sample_stain_custom_"+sel_index).attr("disabled", "disabled");
            }
        });
        
        $("#wizard").steps({
            onStepChanging: function(event, currentIndex, newIndex) {                
                // console.log("About to change from step "+currentIndex+" to step "+newIndex);
                
                var ok_to_continue = true;
                
                $("#wizard-p-"+currentIndex).find(".custom-text").each(function(){
                    //console.log("Found custom text element: "+$(this).attr("name"));
                    var is_disabled = $(this)[0].hasAttribute("disabled");
                    var val = $(this).val();
                    //console.log("is_disabled: "+is_disabled+" val="+val);
                    if (!is_disabled && val.length <= 0) {
                        ok_to_continue = false;
                        $(this).addClass("error");
                    }
                });

                return ok_to_continue;
            },
            
            onStepChanged: function(event, currentIndex, priorIndex) {
                //console.log("step changed: Current index="+currentIndex);
            },

            onFinishing: function(event, currentIndex) {
                var ok_to_continue = true;

                return ok_to_continue;
            },
            
            onFinished: function(event, currentIndex) {
                $("#order-form").submit();
            },
            
            enableAllSteps: true
        });
        
        $("#wizard").data("step-count", 1);
        
        // Which ones should be custom?
        var multi_check_lists = [
                                  {'name': 'fixative', 'count': 4},
                                  {'name': 'received_in', 'count': 8},
                                  {'name': 'species', 'count': 13},
                                  {'name': 'bio_system', 'count': 13},
                                  {'name': 'mouse_strain', 'count': 11},
                                  {'name': 'experiment_type', 'count': 8},
                                  {'name': 'xenograft_type', 'count': 7 }
                                ];
        for(var i = 0; i < multi_check_lists.length; i++) {
            var name = multi_check_lists[i]['name'];
            var count = multi_check_lists[i]['count'];
            var cust = name+"_custom";
            var idlist = name+"_id_list-"+(count-1);
            $("#"+cust).addClass("custom-text");
            $("#"+cust).attr("disabled", "disabled");
            
            $("#"+idlist).on('click', {'idlist': idlist, 'cust': cust}, function(event){
                var i = event.data['idlist'];
                var c = event.data['cust'];
                if ($("#"+i).is(':checked')) {
                    $("#"+c).removeAttr("disabled");
                }
                else {
                    $("#"+c).attr("disabled", "disabled");
                }
            });
        }

        $("ul#gender").parent().prev().css("margin-left", "-20px");
        $("ul#gender").parent().parent().css("margin-left", "25px");

        var plist = [];
        init_plist(plist);

        $(document).on("keydown", "input.custom-text", function(){
            $(this).removeClass("error");
        });

        // Re-enable all custom fields that have values
        $(".custom-text").each(function(){
            var val = $(this).val();
            if (val.length > 0) {
                $(this).removeAttr("disabled");
            }
        });
        
        // Fix checkbox field css
        $("input.checkbox-field").each(function(){
            $(this).parent().addClass("checkbox-controls");
        });

        $("span.tt-question").hover(function () {
            var tt_text = $(this).attr("data-tip");
            $(this).append('<div class="tt-tooltip"><p>'+tt_text+'</p></div>');
        }, function () {
            $("div.tt-tooltip").remove();
        });

        // Dave asked me to move this here.
        $("#sample_collection_date").datepicker();
    });
</script>
<!-- END histowiz/templates/edit_order_v2.html tail -->
{% endblock %}