{% extends 'custom_admin_base.html' %}
{% load staticfiles %}
{% block extrastyle %}
<link rel="stylesheet" href="{% static 'order_contract/custom_admin/business_status/business_status.css' %}">
<link rel='stylesheet' href="{% static 'order_contract/custom_admin/business_status/rank/jquery.jqplot.css' %}"/>
{% endblock extrastyle %}
{% block content %}
    {% include 'order_contract/custom_admin/custom_admin_order_sub.html' %}
		<article>
            <div class="introTab">
                <ul>
                    <li class="season">
                        <ul>
                            <li>
                                <a href="{% url 'order_contract:custom_admin_catalog_ranking' 'winter' style %}">
                                    {% if season == 'winter' %}
                                        <img src="{% static 'base/image/winter_c.png' %}">
                                    {% else %}
                                        <img src="{% static 'base/image/winter_b.png' %}">
                                    {% endif %}
                                    <p>동복</p>
                                </a>
                            </li>
                            <li>
                                <a href="{% url 'order_contract:custom_admin_catalog_ranking' 'summer' style %}">
                                    {% if season == 'summer' %}
                                        <img src="{% static 'base/image/summer_c.png' %}">
                                    {% else %}
                                        <img src="{% static 'base/image/summer_b.png' %}">
                                    {% endif %}
                                    <p>하복</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="type borderN">
                        <ul>
                            <li>
                                <a href="{% url 'order_contract:custom_admin_catalog_ranking' season 'formal'%}">
                                    {% if style == 'formal' %}
                                        <img src="{% static 'base/image/school_c.png' %}">
                                    {% else %}
                                        <img src="{% static 'base/image/school_b.png' %}">
                                    {% endif %}
                                    <p>정복</p>
                                </a>
                            </li>
                            <li>
                                <a href="{% url 'order_contract:custom_admin_catalog_ranking' season 'training' %}">
                                    {% if style == 'training' %}
                                        <img src="{% static 'base/image/gym_c.png' %}">
                                    {% else %}
                                        <img src="{% static 'base/image/gym_b.png' %}">
                                    {% endif %}
                                <p>체육복</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
			<div class="catalogRackWrap">
				<div class="rackChartWrap" id='chart1'></div>
				<table class="adminRank n1to5">
					<tr>
						<th>순위</th>
						<th>카탈로그</th>
						<th>득표</th>
						<th>이미지</th>
					</tr>
                    {% for catalog in catalog_rank_array %}
                        {% if forloop.counter < 6 %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ catalog.couple.name }}</td>
                            <td>{{ catalog.selected_count }}</td>
                            <td><img class="rankcatalogimg" src="{{ catalog.couple.front_image.url }}"></td>
                        </tr>
                        {% endif %}
                    {% endfor %}
				</table>
				<table class="adminRank n6to10">
					<tr>
						<th>순위</th>
						<th>카탈로그</th>
						<th>득표</th>
						<th>이미지</th>
					</tr>
                    {% for catalog in catalog_rank_array %}
                        {% if forloop.counter > 5 and forloop.counter < 11 %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ catalog.couple.name }}</td>
                            <td>{{ catalog.selected_count }}</td>
                            <td><img class="rankcatalogimg" src="{{ catalog.couple.front_image.url }}"></td>
                        </tr>
                        {% endif %}
                    {% endfor %}
				</table>
			</div>
		</article>
{% endblock content %}
{% block extrascript %}
<script type="text/javascript" src="{% static 'order_contract/custom_admin/business_status/rank/jquery.jqplot.js' %}"></script>
<script type="text/javascript" src="{% static 'order_contract/custom_admin/business_status/rank/jqplot.barRenderer.js' %}"></script>
<script type="text/javascript" src="{% static 'order_contract/custom_admin/business_status/rank/jqplot.pointLabels.js' %}"></script>
<script type="text/javascript" src="{% static 'order_contract/custom_admin/business_status/rank/jqplot.categoryAxisRenderer.js' %}"></script>
<script type="text/javascript">


	$(document).ready(function(){
        $.jqplot.config.enablePlugins = true;

        var couple_selected_counts = {{ couple_selected_counts|safe }};
        var couple_names = {{ couple_names|safe }};

        //var s1 = [18,11,9,7,6,5,4,3,2,1];
		//var ticks = ['CW001','CW001','CW001','CW001','CW001','CW001','CW001','CW001','CW001','CW001'];

        plot1 = $.jqplot('chart1', [couple_selected_counts], {
            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
            animate: !$.jqplot.use_excanvas,
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: couple_names
                }
            },
            highlighter: { show: false }
        });

        $('#chart1').bind('jqplotDataClick',
            function (ev, seriesIndex, pointIndex, data) {
                $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
            }
        );
    });

    //참고 사이트 링크 걸어둘게욤
    //http://link2me.tistory.com/1132 - DB 연동 관련 게시글이 있는데 mysql 입니당......참고용?ㅎㅎㅎㅎㅎ핳
    //http://www.jqplot.com/examples/barTest.php - 플러그인 사이트입니다~

</script>
{% endblock extrascript %}