{% extends "base.html" %}
{% load freckle_budgets_tags i18n %}

{% block main %}
<h1>{% trans "Budgets:" %} {{ year.year }}</h1>

{% for project_month in project_months %}
    <h2>{{ project_month.0.get_date|date:"F" }}</h2>
    <div class="row">
        <div class="col-sm-9">
            <table class="table table-bordered freckle-budgets-table">
                <thead>
                    <tr>
                        <th>{% trans "Monday" %}</th>
                        <th>{% trans "Tuesday" %}</th>
                        <th>{% trans "Wednesday" %}</th>
                        <th>{% trans "Thursday" %}</th>
                        <th>{% trans "Friday" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% get_weeks project_month.0 as weeks %}
                    {% for week in weeks %}
                        <tr>
                            {% for day in week|slice:":5" %}
                                <td>
                                    <table class="freckle-budgets-table-cell">
                                        <tr>
                                            <td class="freckle-budgets-date {% if day.month != project_month.0.month %}text-muted-lighter{% endif %}">{{ day|date:"j" }}</td>
                                            <td>
                                                {% if day.month == project_month.0.month %}
                                                    {% for project in project_month.1 %}
                                                        {% is_budget_fulfilled entries_times project day as is_budget_fulfilled_ %}
                                                        <div class="freckle-budgets-project" style="border:1px solid {{ project.project.color }};{% if is_budget_fulfilled_ %}background-color:{{ project.project.color }};{% endif %}"></div>
                                                    {% endfor %}
                                                {% endif %}
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            {% endfor %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="col-sm-3 freckle-budgets-month-info">
            <p>Available ressources: {{ project_month.0.get_available_ressources|floatformat:2 }}</p>
            <hr />
            {% for project in project_month.0.get_cashflow_projects %}
                <p><div class="freckle-budgets-project" style="background-color:{{ project.project.color }};" data-toggle="tooltip" title="{{ project.get_daily_hours|floatformat:2 }}h / day"></div> {{ project.project.name }}: {{ project.get_budget_hours|floatformat:2 }}h (S${{ project.budget }})</p>
            {% endfor %}
            <p>Total profit: {{ project_month.0.get_total_cashflow_hours|floatformat:2 }}h (S${{ project_month.0.get_total_profit }})</p>
            <hr />
            {% for project in project_month.0.get_investment_projects %}
                <p><div class="freckle-budgets-project" style="background-color:{{ project.project.color }};" data-toggle="tooltip" title="{{ project.get_daily_hours|floatformat:2 }}h / day"></div> {{ project.project.name }}: {{ project.get_budget_hours|floatformat:2 }}h (S${{ project.budget }})</p>
            {% endfor %}
            <p>Total investment: {{ project_month.0.get_total_investment_hours|floatformat:2 }}h (S${{ project_month.0.get_total_investment }})</p>
            <hr />
            <p><div class="freckle-budgets-project" style="background-color:#000;" data-toggle="tooltip" title="{{ project_month.0.get_unused_daily_hours|floatformat:2 }}h / day"></div> Unused: {{ project_month.0.get_unused_hours|floatformat:2 }}h (S${{ project_month.0.get_unused_budget|floatformat:2 }})</p>
        </div>
    </div>
{% endfor %}
{% endblock %}

{% block extrajs %}
<script>
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>
{% endblock %}