{% extends "layout.html" %}
{% from "_order_v2.html" import
        project_info, services, shipping_info, submission_info, science_info,
        histology, samples, unstained, he, ihc, special with context %}

{% from "_slide.html" import slides_grid with context %}
{% from "_profile.html" import profile_details %}

{% block content %}

<h2>Order Details</h2>

{% if is_admin() %}
    <h4>Upload Slides</h4>
    <form action="{{ url_for("upload_slides") }}" method="GET">
        <fieldset>
            <input type="hidden" name="default_order" value="{{ order.id }}"/>
            <input style="width: 400px;" type="text" name="path" placeholder="s3://bucket.name/path/to/slides"></input>
        </fieldset>
        <input type="submit" name="upload" value="Upload" class="btn btn-warning"></input>
    </form>
{% endif %}

    <p>
        {% if is_admin() %}
        <a class="btn btn-primary" href="{{ url_for('edit_order', order_id=order.id) }}?next={{ url_for('get_order', order_id=order.id) }}">
            <span class="icon-pencil icon-white"></span> Edit Order
        </a>
        {% else %}
            {% if not order.received_date  %}
        <a class="btn btn-primary" href="{{ url_for('user_edit_order', order_id=order.id) }}?next={{ url_for('get_order', order_id=order.id) }}">
            <span class="icon-pencil icon-white"></span> Edit Order
        </a>
            {% endif %}
        {% endif %}
    
        <a href="{{ url_for('get_order_csv', order_id=order.id) }}" class="btn btn-info">Download as CSV</a>

        {% if storage_status.total == storage_status.available %}
            <a href="#" id="order-extend-btn" data-order-id="{{order.id}}" data-order-slide-count="{{order.available_slide_count}}" class="btn btn-info">
                <span class="icon-white"></span> Extend Expiration
            </a>
        {% else %}
            {% if storage_status.restoring == 0 %}
                <a href="#" id="order-restore-btn" data-order-id="{{order.id}}" data-order-slide-count="{{order.restorable_slide_count}}" class="btn btn-info">
                    <span class="icon-white"></span> Restore
                </a>
            {% else %}
                <span class="icon-search icon-white"></span> Restoration in progress.
            {% endif %}
        {% endif %}
        {% if is_admin() %}
            {% if order.total_slide_count > 0 %}
            <a href="#" id="dload-slide-print-conf-btn" class="btn btn-warning">
                Download Slide Printer Config
            </a>
            <form id="print-conf-form" method="POST" action="/orders/gen-print-conf">
                <input type="hidden" id="print-conf" name="printconf" value="" />
            </form>
            {% endif %}
            {% if order.samples %}
            <a href="#" id="dload-cassette-print-conf-btn" class="btn btn-warning">
                Download Cassette Printer Config
            </a>
            {% endif %}
        {% endif %}
        {% if is_super_admin() %}
            {% if not order.received_date %}
                <a href="{{ url_for('receive_order', order_id=order.id) }}" class="btn btn-warning">Received Order</a>
            {% endif %}
            {% if order.fulfilled %}
                <a href="{{ url_for('unfulfill_order', order_id=order.id) }}?next={{ url_for('get_order', order_id=order.id) }}" class="btn btn-warning">
                    Unfulfill Order
                </a>
            {% else %}
                {% if order.received_date %}
                <a href="{{ url_for('fulfill_order', order_id=order.id) }}?next={{ url_for('get_order', order_id=order.id) }}" class="btn btn-warning">
                    Fulfill Order
                </a>
                {% endif %}
            {% endif %}
            {% if demo_user_exists %}
            <a href="#" id="make-demo-order-btn" class="btn btn-warning">
                Add To Public Library
            </a>
            {% endif %}
            {% if not order.deleted %}
                <a href="{{ url_for('delete_order', order_id=order.id) }}" class="btn btn-danger"
                    onclick="return window.confirm('Are you sure you want to delete this order?')">
                    Delete Order
                </a>
            {% endif %}
        {% endif %}
        <a href="#" id="dload-pricing-preview-btn" class="btn btn-warning">
            Show Pricing Preview
        </a>
        {% if order.generate_shipping_label %}
            {% if order.shipping_label_url %}
                <a class="btn btn-warning" target="_blank" href="{{ url_for_storage(order.shipping_label_url) }}">View Shipping Label</a>
            {% endif %}
        {% endif %}
    </p>
{% if is_admin() and order.samples %}
<p>
    <label>Cassette Printer Magazine:</label>
    {% for m in cassette_print_mags %}
        {% if m.id == default_cassette_print_mag %}
            <span class="cassette-print-mag">
                <input type="radio" name="cassette_print_mag" value="{{m.id}}" checked="checked"> {{m.label}}
            </span>
        {% else %}
            <span class="cassette-print-mag">
                <input type="radio" name="cassette_print_mag" value="{{m.id}}"> {{m.label}}
            </span>
        {% endif %}
    {% endfor %}
</p>
{% endif %}    
<!--
<p><a href="{{ url_for('get_order_csv', order_id=order.id) }}">Download order as CSV</a></p>
-->
<div class="accordion" id="order">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="order"
                href="#feedback">
                Customer Feedback
            </a>
        </div>
        <div id="feedback" class="accordion-body collapse in">
            <div class="accordion-inner">
                <div class="control-group ">
                    <form id="user-feedback-form" action="/orders/feedback/" method="POST">
                        <label class="control-label" for="user-feedback">Please let us know if you have any questions or comments about your order:</label>
                        <div class="controls">
                            <input type="hidden" name="order_id" value="{{order.id}}" />
                            <textarea id="user-feedback" name="user_feedback" rows="8" cols="100"></textarea>
                        </div>
                        <input type="submit" value="Submit" />
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="order"
                href="#project_info">
                Project Information
            </a>
        </div>
        <div id="project_info" class="accordion-body collapse in">
            <div class="accordion-inner">
                {{ project_info(order) }}
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="order"
                href="#shipping_info">
                Shipping Information
            </a>
        </div>
        <div id="shipping_info" class="accordion-body collapse in">
            <div class="accordion-inner">
                {{ shipping_info(order) }}
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="order"
                href="#services">
                Services
            </a>
        </div>
        <div id="services" class="accordion-body collapse in">
            <div class="accordion-inner">
                {{ services(order) }}
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="order"
                href="#submission_info">
                Submission Information
            </a>
        </div>
        <div id="submission_info" class="accordion-body collapse in">
            <div class="accordion-inner">
                {{ submission_info(order) }}
            </div>
        </div>
    </div>    
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="order"
                href="#science_info">
                Science Information
            </a>
        </div>
        <div id="science_info" class="accordion-body collapse in">
            <div class="accordion-inner">
                {{ science_info(order) }}
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="order"
                href="#histology">
                Histology
            </a>
        </div>
        <div id="histology" class="accordion-body collapse in">
            <div class="accordion-inner">
                {{ histology(order) }}
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="order"
                href="#samples">
                Samples
            </a>
        </div>
        <div id="samples" class="accordion-body collapse in">
            <div class="accordion-inner">
                {{ samples(order) }}
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="order"
                href="#unstained_slides">
                Unstained slides
            </a>
        </div>
        <div id="unstained_slides" class="accordion-body collapse">
            <div class="accordion-inner">
                {{ unstained(order) }}
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="order"
                href="#he_stains">
                H&E slides
            </a>
        </div>
        <div id="he_stains" class="accordion-body collapse">
            <div class="accordion-inner">
                {{ he(order) }}
            </div>
        </div>
    </div>    
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="order"
                href="#ihc_stains">
                Immunohistochemistry slides
            </a>
        </div>
        <div id="ihc_stains" class="accordion-body collapse">
            <div class="accordion-inner">
                {{ ihc(order) }}
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="order"
                href="#special_stains">
                Special Stain slides
            </a>
        </div>
        <div id="special_stains" class="accordion-body collapse">
            <div class="accordion-inner">
                {{ special(order) }}
            </div>
        </div>
    </div>
</div>

<div id="slides">
    {{ slides_grid(slides, 'get_order', order_id=order.id) }}
</div>

{% include 'slide_restore.html' %}
{% include 'make_demo_order.html' %}
<div id="price-preview-dialog">
</div>
<script type="text/javascript">
    $(document).ready(function(){
        init_slide_restore_dialog();
        init_order_restore_dialog();
        init_extend_order_dialog();
        init_make_demo_order_dialog();
        
        $("#price-preview-dialog").dialog({
            resizable: false,
            autoOpen: false,
            modal: true,
            title: "Order Price Preview",
            height: 350,
            width: Math.min(550, $(window).width()),
            maxWidth: $(document).width(),
            responsive: true, // jQuery-UI-Dialog-extended-1.0
            buttons: {
                "Ok": function() {
                    $(this).empty();
                    $(this).dialog('close');
                }
            }
        });
        
        $(document).on('click', '#dload-pricing-preview-btn', function(){
            $.ajax({
                url: "{{ url_for('gen_price_preview', order_id=order.id) }}",
            }).done(function( data ) {
                $("#price-preview-dialog").append(data);
                $("#price-preview-dialog").dialog("open");
            });
        });
        
        $(document).on('click', '#dload-cassette-print-conf-btn', function(){
            var base_url = "{{ url_for('gen_cassette_conf', order_id=order.id) }}?next={{ url_for('get_order', order_id=order.id) }}";
            var mag = $('input[name=cassette_print_mag]:checked').val();
            document.location.href = base_url+'&m='+mag;
        });
        
        $(document).on('click', '#dload-slide-print-conf-btn', function(){
            // Collect cartridge options
            var data = {
                orderId: parseInt('{{order.id}}'),
                slides: []
            };
            
            $(".slide-meta-magazine").each(function(){
                var name = $(this).attr("name");
                var val = $(this).val();
                if ($(this).is(":checked")) {
                    var parts = name.split("_");
                    if (parts[0] == 'slidemeta-stain') {
                        data.slides.push({
                            stainId: parseInt(parts[1]),
                            slideNum: parseInt(parts[2]),
                            magazineId: parseInt(val)
                        });
                    }
                    else {
                        data.slides.push({
                            sampleId: parseInt(parts[1]),
                            slideNum: parseInt(parts[2]),
                            magazineId: parseInt(val)
                        });
                    }
                }
            });
            
            $("#print-conf").val(JSON.stringify(data));
            $("#print-conf-form").submit();
            /*

            $.ajax({
                type: "POST",
                url: "/orders/gen-print-conf",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data){
                    if (data.length > 0) {
                        console.log("DATA: "+data);
                        var datablob = new Blob([data]);
                        var a = document.getElementById('dload-slide-print-conf-btn');
                        a.href= URL.createObjectURL(datablob);
                        a.click();
                    }
                    else {
                        console.log("Problem creating slide config file");
                    }
                },
                failure: function(errMsg) {
                    alert(errMsg);
                }
            });
            */

        });
    });
</script>
{% endblock %}