{% extends 'dashboard/layout.html' %}
{% load currency_filters %}
{% block body_class %}users{% endblock %}

{% block title %}
Customer {{ customer.email }} | {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
<ul class="breadcrumb">
    <li>
        <a href="{% url dashboard:index %}">Dashboard</a>
        <span class="divider">/</span>
    </li>
    <li>
        <a href="{% url dashboard:users-index %}">Customers</a>
        <span class="divider">/</span>
    </li>
	<li class="active"><a href=".">#{{ customer.id }}</a></li>
</ul>
{% endblock %}

{% block header %}
    <div class="page-header">
		<h1>Customer #{{ customer.id }} - {{ customer.email }}</h1>
    </div>
{% endblock header %}

{% block dashboard_content %}
<div class="row-fluid">
    <div class="span3">
        <h2>General</h2>
        <div id="user_details" class="well well-info">
            <ul>
                <li>Email: {{ customer.email }}</li>
                <li>First name: {{ customer.first_name|default:"-" }}</li>
                <li>Last name: {{ customer.last_name|default:"-" }}</li>
                <li>This customer is <strong>{% if user.is_active %}active{% else %}inactive{% endif %}</strong></li>
                {% if user.is_superuser %}
                <li><strong>Superuser</strong></li>
                {% endif %}
            </ul>
        </div>
    </div>

    <div class="span9">
        <h2>Detailed information</h2>
        <div id="user_order_details" class="row-fluid">
            <div class="span4">
                <div class="well well-info">
                    <h3>General</h3>
                    <ul>
                        <li>Last login: {{ customer.last_login }}</li>
                        <li>Date joined: {{ customer.date_joined }}</li>
                        <li>Number of viewed products: {{ customer.userrecord.num_product_views|default:0 }}</li>
                    </ul>
                </div>
            </div>

            <div class="span4">
                <div class="well well-info">
                    <h3>Orders</h3>
                    <ul>
                        <li>Number of orders: {{ customer.userrecord.num_orders|default:0 }}</li>
                        <li>Number of ordered items: {{ customer.userrecord.num_order_items|default:0 }}</li>
                        <li>Total spent: {{ customer.userrecord.total_spent|default:0|currency }}</li>
                        <li>Date of last order: {{ customer.userrecord.date_last_order|default:"-" }}</li>
                    </ul>
                </div>
            </div>

            <div class="span4">
                <div class="well well-info">
                    <h3>Reviews</h3>
                    <ul>
                        <li>Number of reviews: {{ customer.reviews.count }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="tabbable dashboard">
	<ul class="nav nav-tabs">
		<li class="active"><a href="#user_orders" data-toggle="tab">Orders</a></li>
		<li><a href="#user_addresses" data-toggle="tab">Addresses</a></li>
		<li><a href="#user_reviews" data-toggle="tab">Reviews</a></li>
	</ul>

	<div class="tab-content">
        <div id="user_orders" class="tab-pane active">
            <h2>Orders</h2>
            {% if user.orders.count %}
             <table class="table table-striped table-bordered">
                 <tr>
                     <th>Order Number</th>
                     <th>Num items</th>
                     <th>Total value</th>
                     <th>Date placed</th>
                     <th>Status</th>
                     <th></th>
                 </tr>
                 {% for order in user.orders.all %}
                 <tr>
                     <td>{{ order.number }}</td>
                     <td>{{ order.num_items }}</td>
                     <td>{{ order.basket_total_incl_tax|currency }}</td>
                     <td>{{ order.date_placed|date:"d/m/y H:s" }}</td>
                     <td>{{ order.status }}</td>
                     <td><a href="{% url dashboard:order-detail order.number %}" class="btn btn-info">View</a></td>
                 </tr>
                 {% endfor %}
             </table>
            {% else %}
                <p>This customer has not placed any orders yet.</p>
            {% endif %}
        </div>

        <div id="user_addresses" class="tab-pane">
            <h2>Addresses</h2>
            <div class="row-fluid">
        	{% for address in user.addresses.all %}

                <div class="span3">
            	    <div class="well well-info">
            			{% for field in address.active_address_fields %}
            			{{ field }}<br/>
            			{% endfor %}
            		</div>
            	</div>
                {% if forloop.counter|divisibleby:4 %}
					</div>
					{% if not forloop.last %}
					<div class="row-fluid">
					{% endif %}
                {% endif %}
			{% empty %}
			<p>This customer has not saved any addresses.</p>
        	{% endfor %}
            </div>
        </div>

        <div id="user_reviews" class="tab-pane">
            <div class="sub-header">
                <h2>Reviews</h2>
            </div>
            {% if user.reviews.count %}
            <table class="table table-striped table-bordered">
                <tr>
                    <th>Product ID</th>
                    <th>Score</th>
                    <th>Title</th>
                    <th>Body</th>
                    <th>Date created</th>
                </tr>
                {% for review in user.reviews.all %}
                <tr>
                    <td>{{ review.product_id }}</td>
                    <td>{{ review.score }}</td>
                    <td>{{ review.title }}</td>
                    <td>{{ review.body }}</td>
                    <td>{{ review.date_created }}</td>
                </tr>
                {% endfor %}
            </table>
            {% else %}
            <p>This customer has not written any reviews yet.</p>
            {% endif %}
        </div>

    </div>
</div>
{% endblock dashboard_content %}
