{#
    Copyright (c) 2015 Chintalagiri Shashank
    Released under the MIT license
#}

{% import "parts/validation_errors.html" as validation %}

{% macro render_notes() -%}
<div class="small-12 columns fine-print">
    <h6>Notes</h6>
    <ul>
        <li>
            Check Sourcing Errors for any components which could not be
            sourced. Costs for these components are not incuded in the
            estimate.
        </li>
        <li>
            Costing information is based on approximations involving
            inventory quantity guidelines. Actual costs will vary based
            on the specific order circumstances.
        </li>
    </ul>
</div>
{% endmacro -%}

{% macro render_indicative_costing_chart(prototype) -%}
    <div class="small-12 columns panel header radius">
        <div class="sign small-9 medium-6 small-centered columns autoscale">
            <h6>Indicative Costing</h6>
        </div>
        <div class="small-12 medium-6 columns">

        <div id="indicative-costing-breakup-chart" class="small-12 columns">
            <svg style="width: 100%; height: 350px;"></svg>
        </div>

        {% if prototype.sourcing_errors.terrors %}
        <div class="small-12 columns">
            {{ validation.render_validation_errors(prototype.sourcing_errors) }}
        </div>
        {% endif %}

        {% if prototype.indicative_cost_hierarchical_breakup.sections %}
        {% if prototype.indicative_cost_hierarchical_breakup.sections|length > 7 %}
            {{ render_notes() }}
        {% endif %}
        {% endif %}

        </div>

        <div class="small-12 medium-6 columns">
        <div class="small-12 columns">
            <article class="indicative-source-info">
                <span class="indicative-costing-label small-6 columns">
                    Approximate Total Cost
                </span>
                <span class="indicative-costing small-6 columns">
                    {{ prototype.indicative_cost.native_string|unicode }}
                </span>
            </article>
        </div>
        {% if prototype.indicative_cost_hierarchical_breakup.sections %}
        <div class="small-12 columns">
            <h4 class="indicative-source-info">
                Top-level sections
            </h4>
            {% for title, percent, value in prototype.indicative_cost_hierarchical_breakup.sections %}
            <article class="indicative-source-section-info">
                <span class="indicative-costing-section-label small-6 columns">
                    {{ title }}
                </span>
                <span class="indicative-costing-section-percent small-2 columns">
                    {{ percent }}%
                </span>
                <span class="indicative-costing-section small-4 columns">
                    {{ value.native_string | unicode }}
                </span>
            </article>
            {% endfor %}
        </div>
        {% endif %}

        {% if prototype.indicative_cost_hierarchical_breakup.sections %}
        {% if prototype.indicative_cost_hierarchical_breakup.sections|length <= 7 %}
            {{ render_notes() }}
        {% endif %}
        {% else %}
            {{ render_notes() }}
        {% endif %}

        </div>

        <script type="text/javascript">
        $(document).ready( function () {
            nv.addGraph(function() {
              var chart = nv.models.sunburstChart()
                          .mode('size')
                          .color(d3.scale.category20c())
              ;

              valueFormatter = function(d, i, pc){
                    var rstr = '{{ prototype.indicative_cost_hierarchical_breakup.currency_symbol|unicode }} '
                               + (d).toFixed(2)
                               + ' ('
                               + pc
                               + '%)';
                    return rstr;
              };

              headerFormatter = function(d) {
                   return d;
              };

              getNodePath = function getpath(d){
                var path = '';
                var rnode = d;
                while (rnode.parent){
                    rnode = rnode.parent;
                    if (path){
                        path = ' / ' + path;
                    }
                    path = rnode.name + path;
                }
                return path;
              }

              getNodePc = function getpc(d, value){
                var rnode = d;
                while (rnode.parent){
                    rnode = rnode.parent;
                }
                t = rnode.value;
                return Math.round(((value/t) * 100) * 10) / 10;
              };

              getNodeValue = function getval(d) {
                    var value_number = 0;
                    if ( d.children ){
                        for (var i = 0; i < d.children.length; i++){
                            value_number += getNodeValue(d.children[i]);
                        }
                    }
                    else{
                        value_number = d.value;
                    };
                    return value_number;
              };

              chart.tooltip.contentGenerator( function(d){
                    value_number = getNodeValue(d.data);
                    value_pc = getNodePc(d.data, value_number);
                    header_text = getNodePath(d.data);

                    var table = d3.select(document.createElement("table"));
                    var theadEnter = table.selectAll("thead")
                        .data([d])
                        .enter().append("thead");

                    theadEnter.append("tr")
                        .append("td")
                        .attr("colspan",3)
                        .classed("x-value",true)
                        .html(headerFormatter(header_text));

                    var tbodyEnter = table.selectAll("tbody")
                        .data([d])
                        .enter().append("tbody");

                    var trowEnter = tbodyEnter.selectAll("tr")
                            .data(function(p) { return p.series})
                            .enter()
                            .append("tr")
                            .classed("highlight", function(p) { return p.highlight});

                    trowEnter.append("td")
                        .classed("legend-color-guide",true)
                        .append("div")
                        .style("background-color", function(p) { return p.color});

                    trowEnter.append("td")
                        .classed("key",true)
                        .html(function(p) {return p.key});

                    trowEnter.append("td")
                        .classed("value",true)
                        .html(function(p,i) { return valueFormatter(value_number,i,value_pc) });


                    trowEnter.selectAll("td").each(function(p) {
                        if (p.highlight) {
                            var opacityScale = d3.scale.linear().domain([0,1]).range(["#fff",p.color]);
                            var opacity = 0.6;
                            d3.select(this)
                                .style("border-bottom-color", opacityScale(opacity))
                                .style("border-top-color", opacityScale(opacity))
                            ;
                        }
                    });

                    var html = table.node().outerHTML;
                    if (d.footer !== undefined)
                        html += "<div class='footer'>" + d.footer + "</div>";
                    return html;
              });

              d3.select('#indicative-costing-breakup-chart svg')
                .datum([{{ prototype.indicative_cost_hierarchical_breakup.json|safe }}])
                .transition().duration(500)
                .call(chart)
                ;

              nv.utils.windowResize(chart.update);
              return chart;
            });
        });
        </script>
    </div>
{% endmacro %}
