{% extends 'base_index.html' %}
 {% block asside %}
  <aside id="aside" class="app-aside hidden-xs bg-dark" style="background: #3a3f51;">
          <div class="aside-wrap">
        <div class="navi-wrap">
          <!-- user -->
          <div class="clearfix hidden-xs text-center" id="aside-user">
            <div class="dropdown wrapper">
              <a href="/management/profile/">
                <span class="thumb-lg w-auto-folded avatar m-t-sm">
                  <img src="{{ request.user.get_image_url }}" class="img-thumbnail" style="width: 100%;" reloader_name="avatar">
                </span>
              </a>
              <a href="#">
                <span class="clear">
                  <span class="block m-t-sm">
                    <strong class="font-bold text-lt">{{ request.user.get_short_name }}</strong>
                  </span>
                  <span class="text-muted text-xs block">{{ request.user.get_role_display }}</span>
                </span>
              </a>
            </div>
          </div>
          <!-- / user -->
            <nav ui-nav="" class="navi clearfix">
            <ul class="nav">
{% include 'index_menu.html' %}
            </ul>
          </nav>
          <!-- nav -->
        </div>
      </div>
  </aside>
{% endblock %}
  <!-- / aside -->
  
  <!-- content -->
{% block content %}
    <script>
        window.counts = {
            'info_count': 0,
            'simple_count': 0,
            'success_count': 0,
            'danger_count': 0,
            'warning_count': 0,
            'all_count': 0
        }
    </script>
  <div class="col">
      <!-- main header -->
      <div class="bg-light lter b-b wrapper-md">
        <div class="row">
          <div class="col-lg-4 col-xs-12">
            <h1 class="m-n font-thin h3">История счетов</h1>
          </div>
            <div class="col-lg-8 col-xs-12">
                <ul class="nav nav-pills" role="tablist" style="float: right;">
                    <li role="presentation" onclick="$('tr.data').hide();$('tr.info').show();" data-toggle="tooltip" data-placement="bottom" title="Активности по оплате еще не было">
                        <a href="#">
                            Ожидание согласия <span class="badge" name="info_count">0</span>
                        </a>
                    </li>
                    <li role="presentation" onclick="$('tr.data').hide();$('tr.simple').show();" data-toggle="tooltip" data-placement="bottom" title="Пользователь перешел по ссылке">
                        <a href="#">
                            На оплате <span class="badge" name="simple_count">0</span>
                        </a>
                    </li>
                    <li role="presentation" onclick="$('tr.data').hide();$('tr.success').show();">
                        <a href="#">
                            Оплачен <span class="badge" name="success_count">0</span>
                        </a>
                    </li>
                    <li role="presentation" onclick="$('tr.data').hide();$('tr.danger').show();" data-toggle="tooltip" data-placement="bottom" title="Пользователь отказался от оплаты счета">
                        <a href="#">
                            Отклонен <span class="badge" name="danger_count">0</span>
                        </a>
                    </li>
                    <li role="presentation" onclick="$('tr.data').hide();$('tr.warning').show();" data-toggle="tooltip" data-placement="bottom" title="Для услуг со временем действия">
                        <a href="#">
                            Сгорел <span class="badge" name="warning_count">0</span>
                        </a>
                    </li>
                    <li role="presentation" onclick="$('tr.data').show();">
                        <a href="#">
                            Все <span class="badge" name="all_count">0</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
      </div>
      <div class="wrapper-md">
        <div class="row">

        <table width="100%" class="table table-hover">
            <thead>
            <tr>
                <td style="padding: 10px;
    font-weight: bold;
    background-color: #fff;border-right: 1px dotted #999;">Плательщик</td>
                         <td style="padding: 10px;
    font-weight: bold;
    background-color: #fff;border-right: 1px dotted #999;">Телефон</td>
                <td style="padding: 10px;
    font-weight: bold;
    background-color: #fff;border-right: 1px dotted #999;">Email</td>
                         <td style="padding: 10px;
    font-weight: bold;
    background-color: #fff;border-right: 1px dotted #999;">Курс</td>
                <td style="padding: 10px;
    font-weight: bold;
    background-color: #fff;border-right: 1px dotted #999;">Услуга</td>
                <td style="padding: 10px;
    font-weight: bold;
    background-color: #fff;border-right: 1px dotted #999;">Сумма</td>
                <td style="padding: 10px;
    font-weight: bold;
    background-color: #fff;border-right: 1px dotted #999;">Дата выставления</td>
                <td style="padding: 10px;
    font-weight: bold;
    background-color: #fff;border-right: 1px dotted #999;">Дата смены статуса</td>
                <td style="padding: 10px;
    font-weight: bold;
    background-color: #fff;border-right: 1px dotted #999;">Статус счета</td>
                <td style="padding: 10px;
    font-weight: bold;
    background-color: #fff;border-right: 1px dotted #999;">Отправленные письма</td>
            </tr>
            </thead>
            <tbody>
                {% for i in yourbills %}
                    <script>
                        window.counts['{% if i.status == 'F' %}success_count{% endif %}{% if i.status == 'C' %}danger_count{% endif %}{% if i.status == 'H' %}warning_count{% endif %}{% if i.status == 'W' %}info_count{% endif %}{% if i.status == 'P' %}simple_count{% endif %}'] += 1;
                        window.counts['all_count'] += 1;
                    </script>
                    <tr class="data {% if i.status == 'F' %}success{% endif %}{% if i.status == 'C' %}danger{% endif %}{% if i.status == 'H' %}warning{% endif %}{% if i.status == 'W' %}info{% endif %}{% if i.status == 'P' %}simple{% endif %}" style="border-bottom: 1px dotted;">
                        <td style="padding: 10px;">{{ i.user.get_full_name }}</td>
                        <td style="padding: 10px;
    font-weight: bold;
    background: #666;
    text-align: center;
    color: #fff;">{{ i.user.get_phone }}</td>
                        <td style="padding: 10px;font-weight: bold;">{{ i.user.email }}</td>
                        <td style="padding: 10px;">{{ i.service.course }}</td>
                        <td style="padding: 10px;">{{ i.service.title }}</td>
                        <td style="padding: 10px;">{{ i.price }}</td>
                        <td style="padding: 10px;">{{ i.date }}</td>
                        <td style="padding: 10px;">{{ i.status_changed }}</td>
                        <td style="padding: 10px;">{{ i.get_status_display }}</td>
                        <td style="padding: 10px;">
                            {% for letter in i.create_letters.all %}{{ letter }}<br>{% empty %}-{% endfor %}<br>
                            {% for letter in i.finish_letters.all %}{{ letter }}<br>{% empty %}-{% endfor %}
                        </td>
                    </tr>
                {% endfor %}
            <script>
                for (var i in window.counts ){
                    $('[name='+i+']').html(window.counts[i]);
                }
            </script>
            </tbody>
        </table>
          </div>
        </div>
      <!-- / main header -->
      
    </div>
  <!-- / main -->
  <!-- right col -->
  <!-- / right col -->
{% endblock %}
{% block js %}
    <script>
    $(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
    </script>
{% endblock %}