{% extends 'base.html' %}
{% block content %}
    <div class="col-12">
        <div class="content">
            <div class="cabinet">
                <div class="row">
                    <div class="col-lg-6 col-12">
                        <div class="content__title">{{ title }}</div>
                        <div class="cabinet__bonus">
                            <div class="d-sm-flex flex-row cabinet__wrap">
                                <div class="cabinet__title bonus__title">
                                    Ваши бонусы: <span>1326</span>
                                </div>
                                <div class="bonus__btn_bx flex-xl-fill">
                                    <a href="#" class="cabinet__link_fill">Вывести бонусы</a>
                                </div>
                                <div class="bonus__btn_bx">
                                    <a href="#" class="cabinet__link_fill">Потратить на подарки</a>
                                </div>
                            </div>
                        </div>
                        <div class="d-sm-flex flex-row cabinet__wrap">
                            <div class="cabinet__title bonus__title">
                                Ваша ссылка: <a href="#"title="{{ ref_link }}">{{ ref_link }}</a>
                            </div>
                            <div class="bonus__btn_bx">
                                <a href="{{ request.path }}#" id="ref-link" class="cabinet__link_fill">Скопировать</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 offset-lg-1 col-122">
                        <div class="cabinet__friends">
                            <div class="cabinet__title">Приглашенные друзья</div>
                            <div class="d-flex flex-row friends__row">
                                <div class="friends__title_header">Имя</div>
                                <div class="friends__info_header">Баллы</div>
                            </div>
                            {% for ref_user in referral_user_list %}
                                <div class="d-flex flex-row friends__row">
                                    <div class="friends__title">{{ ref_user.name }}</div>
                                    <div class="friends__info">{{ ref_user }}</div>
                                </div>
                            {% empty %}
                                <div class="d-flex flex-row friends__row">
                                    <div class="friends__title">Nikolas</div>
                                    <div class="friends__info">120</div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-12">
                    <div class="cabinet__history">
                        <div class="cabinet__title">История покупок</div>
                        <table class="table">
                            <tr>
                                <th>Дата</th>
                                <th>№ счета</th>
                                <th>Наименование</th>
                                <th>Кол-во</th>
                                <th>Сумма</th>
                            </tr>
                            {% for bought_item in bought_item_list %}
                                <tr>
                                    <td>{{ bought_item.bought_at }}</td>
                                    <td>{{ bought_item.id }}</td>
                                    <td>{{ bought_item.product.name }}</td>
                                    <td>{{ bought_item.amount }}</td>
                                    <td>{{ bought_item.total_price }}7570₽</td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td>12.06.17</td>
                                    <td>142251366</td>
                                    <td>Windows 7 BOX...</td>
                                    <td>1</td>
                                    <td>7570₽</td>
                                </tr>
                            {% endfor %}
                        </table>
                        <div class="history__btn_bx">
                            <a href="{% url 'cart:history' %}" class="cabinet__link_fill">Вся история покупок</a>
                        </div>
                    </div>
                    <div class="cabinet__userdata">
                        <div class="d-flex flex-row userdata_row">
                            <div class="userdata_title">ФИО:</div>
                            <div class="userdata_info">{{ full_name|default:'-' }}</div>
                        </div>
                        <div class="d-flex flex-row userdata_row">
                            <div class="userdata_title">Дата рождения:</div>
                            <div class="userdata_info">{{ birthday|default:'-' }}</div>
                        </div>
                        <div class="d-flex flex-row userdata_row">
                            <div class="userdata_title">Номер телефона:</div>
                            <div class="userdata_info">{{ phone_number|default:'-' }}</div>
                        </div>
                        <div class="d-flex flex-row userdata_row">
                            <div class="userdata_title">Эл.почта:</div>
                            <div class="userdata_info">{{ email }}</div>
                        </div>
                    </div>
{#                    <div class="cabinet__nextpay">#}
{#                        <div class="cabinet__title">Ближайшие продления</div>#}
{#                        <div class="d-flex flex-row nextpay__row">#}
{#                            <div class="nextpay__title">Windows 7...</div>#}
{#                            <div class="nextpay__date">22.07.2018 (!)</div>#}
{#                            <div class="nextpay__btn_bx"><a href="#" class="cabinet__link_fill">Продлить</a></div>#}
{#                        </div>#}
{#                    </div>#}
                </div>
                <div class="col-lg-5 offset-lg-1 col-12">
                    <div class="cabinet__userdata cabinet__userdata_right">
                        <div class="d-flex flex-row userdata_row">
                            <div class="userdata_title">Наименование:</div>
                            <div class="userdata_info">{{ company.name|default:'-' }}</div>
                        </div>
                        <div class="d-flex flex-row userdata_row">
                            <div class="userdata_title">Юридический адрес:</div>
                            <div class="userdata_info">{{ company.address|default:'-' }}</div>
                        </div>
                        <div class="d-flex flex-row userdata_row">
                            <div class="userdata_title">ИНН:</div>
                            <div class="userdata_info">{{ company.inn|default:'-' }}</div>
                        </div>
                        <div class="d-flex flex-row userdata_row">
                            <div class="userdata_title">КПП:</div>
                            <div class="userdata_info">{{ company.kpp|default:'-' }}</div>
                        </div>
                        <div class="d-flex flex-row userdata_row">
                            <div class="userdata_title">ОГРН:</div>
                            <div class="userdata_info">{{ company.ogrn|default:'-' }}</div>
                        </div>
                        <div class="d-flex flex-row userdata_row">
                            <div class="userdata_title">Платежные реквизиты:</div>
                            <div class="userdata_info">-</div>
                        </div>
                        <div class="d-flex flex-row userdata_row">
                            <div class="userdata_title">Р/C:</div>
                            <div class="userdata_info">-</div>
                        </div>
                        <div class="d-flex flex-row userdata_row">
                            <div class="userdata_title">Банк:</div>
                            <div class="userdata_info">-</div>
                        </div>
                        <div class="d-flex flex-row userdata_row">
                            <div class="userdata_title">К/C:</div>
                            <div class="userdata_info">-</div>
                        </div>
                        <div class="d-flex flex-row userdata_row">
                            <div class="userdata_title">БИК:</div>
                            <div class="userdata_info">-</div>
                        </div>
                        <div class="d-flex flex-row userdata_row">
                            <div class="userdata_title">Телефон:</div>
                            <div class="userdata_info">{{ profile.phone|default:'-' }}</div>
                        </div>
                    </div>
{#                    <div class="cabinet__prolonged">#}
{#                        <div class="cabinet__title">Продлеваемые продукты</div>#}
{#                        <table class="table">#}
{#                            <tr>#}
{#                                <th>Продукт</th>#}
{#                                <th>Количество</th>#}
{#                                <th>Дата окончания</th>#}
{#                            </tr>#}
{#                            <tr>#}
{#                                <td>Windows 7...</td>#}
{#                                <td>1</td>#}
{#                                <td>22.07.2018</td>#}
{#                            </tr>#}
{#                            <tr>#}
{#                                <td>Windows 7...</td>#}
{#                                <td>1</td>#}
{#                                <td>22.07.2018</td>#}
{#                            </tr>#}
{#                        </table>#}
{#                    </div>#}
                </div>
            </div>
        </div>
    </div>
{% endblock content %}
{% block extra_body_js %}
    <script type="text/javascript">
        $(document).ready(function () {
            $('#ref-link').on('click', function(e) {
                e.preventDefault();
                var ref_href = $(e.target).parent().prev().children(":first-child").attr('title');
                var input = $('<input>').attr({
                    'type':'text',
                    'id': 'href_copy'
                }).val(ref_href);
                $('body').append(input);
                input.select();
                document.execCommand('copy');
                $(e.target).attr('disabled', true).text('Скопированно');

                setTimeout(function() {
                    $('body').remove("#href_copy");
                    $(e.target).attr('disabled',false).text('Скопировать');
                },300);
            })
        })
    </script>
{% endblock extra_body_js %}