{% extends 'reports/base_index.html' %}
{% block title %}Рассылки{% endblock %}
{% block content %}
    <div class="col-lg-12">
        <h2 style="margin-left: 20px;margin-top:40px;font-weight: bold;border-top: 1px dotted #ccc;padding-top: 30px;"><i class="glyphicon glyphicon-envelope"></i> Ручные рассылки <img src="/static/img/preloader.gif"></h2>
    </div>
    <div class="col-lg-6 form-horizontal">
        <p style="padding-left: 5px;margin-bottom: 0;font-weight: bold;">Оболочка</p>
        <select class="form-control">
            <option>Всем</option>
            <option>Не приступил к новому Д\З</option>
            <option>Не приступил к новой попытке</option>
            <option>Не приступил к экзамену</option>
            <option>Не заходил на LMS</option>
        </select>
        <p style="padding-left: 5px;margin-top: 20px;margin-bottom: 0;font-weight: bold;">Сегмент</p>
        <select class="form-control">
            <option>Всем</option>
            <option>Не приступил к новому Д\З</option>
            <option>Не приступил к новой попытке</option>
            <option>Не приступил к экзамену</option>
            <option>Не заходил на LMS</option>
        </select>
        <p style="padding-left: 5px;margin-top: 20px;margin-bottom: 0;font-weight: bold;">Временая точка. ОТ бесконечного прошлого - ДО сейчас, минус <i>N</i> дней</p>
            <input class="form-control" placeholder="N">
            <p style="    margin-top: 20px;
    text-align: right;">
        <button class="btn btn-lg btn-info">Отправить тестовое письмо себе</button>
        <button class="btn btn-lg btn-success">Выполнить рассылку</button>
            </p>
    </div>
    <div class="col-lg-6">

        <div name="letter_example" style="clear: both;
    background: #fff;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #ccc;">
            <i class="glyphicon glyphicon-remove" style="    position: absolute;
    right: 0;
    top: 4px;cursor: pointer;" onclick="$('[name=letter_example]').fadeOut('slow')"></i>
        </div>
        <p style="clear: both;"></p>
        <button class="btn btn-warning" onclick="$('[name=letter_example]').fadeIn('slow')">Выгрузить пример</button>
        <textarea id="mail_content" class="form-control" style="height: 400px;"></textarea>

    <script>
        CKEDITOR.replace( 'mail_content' );
    </script>
    </div>
    <div class="col-lg-12">
    <h3 style="margin-left: 20px;margin-top:40px;font-weight: bold;border-top: 1px dotted #ccc;padding-top: 30px;">
       <i class="glyphicon glyphicon-equalizer"></i> Статистика отправок
    </h3>
    <table class="table table-hover" style="background: #ffc;">
        <tr style="font-weight: bold;background: #ccc;">
            <td></td>
            <td>За день</td>
            <td>За 3 дня</td>
            <td>За неделю</td>
            <td>За месяц</td>
            <td>За 3 месяца</td>
            <td>За все время</td>
        </tr>
        {% for point, numbers in stat.items %}
        <tr>
            <td style="border-right: 1px dotted #ccc;">{{ point }}</td>
            <td style="border-right: 1px dotted #ccc;">{{ numbers.d1 }}<script>if(!window.n_d1){window.n_d1={{ numbers.d1 }}}else{window.n_d1+={{ numbers.d1 }}}</script></td>
            <td style="border-right: 1px dotted #ccc;">{{ numbers.d3 }}<script>if(!window.n_d3){window.n_d3={{ numbers.d3 }}}else{window.n_d3+={{ numbers.d3 }}}</script></td>
            <td style="border-right: 1px dotted #ccc;">{{ numbers.w1 }}<script>if(!window.n_w1){window.n_w1={{ numbers.w1 }}}else{window.n_w1+={{ numbers.w1 }}}</script></td>
            <td style="border-right: 1px dotted #ccc;">{{ numbers.m1 }}<script>if(!window.n_m1){window.n_m1={{ numbers.m1 }}}else{window.n_m1+={{ numbers.m1 }}}</script></td>
            <td style="border-right: 1px dotted #ccc;">{{ numbers.m3 }}<script>if(!window.n_m3){window.n_m3={{ numbers.m3 }}}else{window.n_m3+={{ numbers.m3 }}}</script></td>
            <td style="border-right: 1px dotted #ccc;">{{ numbers.all }}<script>if(!window.n_all){window.n_all={{ numbers.all }}}else{window.n_all+={{ numbers.all }}}</script></td>
        </tr>
        {% endfor %}
        <tr style="font-weight: bold;">
            <td style="border-right: 1px dotted #ccc;">Всего</td>
            <td style="border-right: 1px dotted #ccc;"><script>document.write(window.n_d1)</script></td>
            <td style="border-right: 1px dotted #ccc;"><script>document.write(window.n_d3)</script></td>
            <td style="border-right: 1px dotted #ccc;"><script>document.write(window.n_w1)</script></td>
            <td style="border-right: 1px dotted #ccc;"><script>document.write(window.n_m1)</script></td>
            <td style="border-right: 1px dotted #ccc;"><script>document.write(window.n_m3)</script></td>
            <td style="border-right: 1px dotted #ccc;"><script>document.write(window.n_all)</script></td>
        </tr>
    </table>
    </div>
    <div class="col-lg-12">
    <h3 style="margin-left: 20px;margin-top:40px;font-weight: bold;border-top: 1px dotted #ccc;padding-top: 30px;">
       <i class="glyphicon glyphicon-music"></i> История ручных рассылок

        <div class="input-group date" style="float: right;width: 300px;font-weight: normal;">
                          <input type="text" class="form-control" name="f_date"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                      </div>
        <span style="float: right;font-weight: normal; font-size: 12px;padding: 10px;" class="hidden-xs hidden-sm">Рассылки от:</span>
    </h3>
    <table class="table table-hover" style="background: #ffc;">
        <tr style="font-weight: bold;background: #ccc;">
            <td></td>
            <td>Отправитель</td>
            <td>Текст рассылки</td>
            <td>Дата отправки</td>
            <td>Получатели</td>
            <td>Отправлено</td>
        </tr>
        {% for hist in self_reports %}
        {% empty %}
            <tr>
                <td colspan="6" style="background: #ffc;text-align: center;">История еще не написана</td>
            </tr>
        {% endfor %}
    </table>
    </div>
{% endblock %}