{% extends '../_layouts/_main.twig' %}
{% block content %}
	<div class="section-profile">
		<div class="section-profile-row _column">
			<div class="section-profile-side">

				<div class="res-list-group">
					<div class="res-list-group__head">
						<div class="m-b-05 fw-bold fs-14">Выберите раздел</div>
						<button class="btn btn-block btn-primary">
                            <span class="js-val">
                                <span class="icobox size_24">
	                                <svg class="ico"><use xlink:href="/images/svg/main-sprite.svg#order-2"></use></svg>
	                                <span class="pl-4">Мои заказы (0)</span>
                                </span>
                            </span>
							<i class="fa fa-caret-down"></i>
						</button>
					</div>
					<div class="res-list-group__body">
						<ul>
							<li>
								<a href="/ru/profile/orders" class="res-list-group__item">
                                    <span class="icobox size_16">
                                        <svg class="ico"><use xlink:href="/images/svg/main-sprite.svg#order-2"></use></svg>
                                        <span class="pl-4">Мои заказы (0)</span>
                                    </span>
								</a>
							</li>
							<li>
								<a href="/ru/profile/my-data" class="res-list-group__item">
                                    <span class="icobox size_16">
                                        <svg class="ico"><use xlink:href="/images/svg/main-sprite.svg#user-2"></use></svg>
	                                    <span class="pl-4">Мои данные </span>
                                    </span>
								</a>
								<ul class="submenu">
									<li>
										<a href="/ru/profile/my-data/personal" class="res-list-group__item">
									        <span class="icobox size_16">
										        <span class="pl-4">Персональные данные</span>
										    </span>
										</a>
									</li>
									<li>
										<a href="/ru/profile/my-data/contacts" class="res-list-group__item">
									        <span class="icobox size_16">
										        <span class="pl-4">Контактные данные</span>
										    </span>
										</a>
									</li>
									<li>
										<a href="/ru/profile/my-data/bank-accounts" class="res-list-group__item">
									        <span class="icobox size_16">
										        <span class="pl-4">Банковские данные</span>
										    </span>
										</a>
									</li>
									<li>
										<a href="/ru/profile/my-data/others" class="res-list-group__item">
									        <span class="icobox size_16">
										        <span class="pl-4">Прочие данные</span>
										    </span>
										</a>
									</li>
								</ul>
							</li>
							<li class="current">
								<a href="/ru/profile/track" class="res-list-group__item">
                                    <span class="icobox size_16">
                                        <svg class="ico"><use xlink:href="/images/svg/main-sprite.svg#bill-2"></use></svg>
	                                    <span class="pl-4">Счета</span>
                                    </span>
								</a>
							</li>
							<li>
								<a href="/ru/profile/track" class="res-list-group__item">
                                    <span class="icobox size_16">
                                        <svg class="ico"><use xlink:href="/images/svg/main-sprite.svg#mapmarker-track"></use></svg>
	                                    <span class="pl-4">Отслеживание заказа (0)</span>
                                    </span>
								</a>
							</li>
						</ul>
					</div>
				</div>

			</div><!--side-->
			<div class="section-profile-content">

				<h3>Cчета</h3>

				<div class="mb-24">
					Ниже все Ваши счета на alvadi.ee
					<br />Всего счетов: 28
				</div>

				<div class="mb-24">
					<ul class="nav nav-tabs">
						<li class="active">
							<a href="bills.html">Счета</a>
						</li>
						<li class="">
							<a href="bills_credit.html">Кредитные счета</a>
						</li>
					</ul>
				</div>

				<div class="mb-20 flex-row row-32 align-items-end">
					<div class="flex-col-auto">
						<div class="form-group">
							<div class="form-label"><strong>Выберите год:</strong></div>
							<div class="form-field watcher selected">
								<select class="form-control">
									<option>2021</option>
									<option>2022</option>
									<option selected="">2023</option>
								</select>
								<span class="form-field-reset"></span>
							</div>
						</div>
					</div>
					<div class="flex-col-auto">
						<div class="form-group">
							<div class="form-label"><strong>Выберите дочернее подразделение:</strong></div>
							<div class="form-field watcher">
								<select class="form-control">
									<option>Все</option>
									<option>---</option>
									<option>---</option>
									<option>---</option>
									<option>---</option>
									<option>---</option>
								</select>
								<span class="form-field-reset"></span>
							</div>
						</div>
					</div>
					<div class="flex-col-auto ml-auto text-right">
						<span class="icobox size_16">
							<i class="ico fa fa-download text-primary"></i>
							<a href="#" class="dash-link">Скачать все pdf одним архивом</a>
						</span>
						<br>
						<span class="icobox size_16">
							<i class="ico fa fa-download text-primary"></i>
							<a href="#" class="dash-link">Скачать всю таблицу счетов в Excel</a>
						</span>
					</div>
				</div>

				<div class="scroller-x">
					{% set tableData = [
						{
							"id" : "230216-4545596",
							"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
							"date" : "16.02.2023",
							"paymentTerm" : "21.03.2023",
							"price" : 13.45,
							"tax" : 2.69,
							"total" : 16.14,
							"payments" : [
							{
								"sum" : 16.14,
								"label" : "Wire transfer",
								"details" : "18.02.2023, 13:10:45 Swedbank"
							}
						],
							"paymentDiff" : 0
						},{
							"id" : "230216-4545596",
							"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
							"date" : "16.02.2023",
							"paymentTerm" : "21.03.2023",
							"price" : 13.45,
							"tax" : 2.69,
							"total" : 16.14,
							"payments" : [
								{
									"sum" : 16.14,
									"label" : "Loan <a href='#'>193745CR4355925</a>",
									"details" : "18.02.2023, 13:10:45 Swedbank"
								},{
									"sum" : 16.14,
									"label" : "Wire transfer",
									"details" : "18.02.2023, 13:10:45 Swedbank"
								},{
									"sum" : 16.14,
									"label" : "Loan <a href='#'>193745CR4355925</a>",
									"details" : "18.02.2023, 13:10:45 Swedbank"
								}
							],
							"paymentDiff" : -109.82
						},{
							"id" : "230216-4545596",
							"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
							"date" : "16.02.2023",
							"paymentTerm" : "21.03.2023",
							"price" : 13.45,
							"tax" : 2.69,
							"total" : 16.14,
							"payments" : [
								{
									"sum" : 16.14,
									"label" : "Wire transfer",
									"details" : "18.02.2023, 13:10:45 Swedbank"
								}
							],
							"paymentDiff" : 9
						},{
							"id" : "230216-4545596",
							"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
							"date" : "16.02.2023",
							"paymentTerm" : "21.03.2023",
							"price" : 13.45,
							"tax" : 2.69,
							"total" : 16.14,
							"payments" : [
								{
									"sum" : 16.14,
									"label" : "Wire transfer",
									"details" : "18.02.2023, 13:10:45 Swedbank"
								}
							],
							"paymentDiff" : 0
						},{
							"id" : "230216-4545596",
							"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
							"date" : "16.02.2023",
							"paymentTerm" : "21.03.2023",
							"price" : 13.45,
							"tax" : 2.69,
							"total" : 16.14,
							"payments" : [
								{
									"sum" : 16.14,
									"label" : "Wire transfer",
									"details" : "18.02.2023, 13:10:45 Swedbank"
								}
							],
							"paymentDiff" : 0
						},{
							"id" : "230216-4545596",
							"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
							"date" : "16.02.2023",
							"paymentTerm" : "21.03.2023",
							"price" : 13.45,
							"tax" : 2.69,
							"total" : 16.14,
							"payments" : [
								{
									"sum" : 16.14,
									"label" : "Wire transfer",
									"details" : "18.02.2023, 13:10:45 Swedbank"
								}
							],
							"paymentDiff" : 0
						},{
							"id" : "230216-4545596",
							"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
							"date" : "16.02.2023",
							"paymentTerm" : "21.03.2023",
							"price" : 13.45,
							"tax" : 2.69,
							"total" : 16.14,
							"payments" : [
								{
									"sum" : 16.14,
									"label" : "Loan <a href='#'>193745CR4355925</a>",
									"details" : "18.02.2023, 13:10:45 Swedbank"
								}
							],
							"paymentDiff" : 0
						},{
							"id" : "230216-4545596",
							"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
							"date" : "16.02.2023",
							"paymentTerm" : "21.03.2023",
							"price" : 13.45,
							"tax" : 2.69,
							"total" : 16.14,
							"payments" : [
								{
									"sum" : 16.14,
									"label" : "Wire transfer",
									"details" : "18.02.2023, 13:10:45 Swedbank"
								},{
									"sum" : 16.14,
									"label" : "Loan <a href='#'>193745CR4355925</a>",
									"details" : "18.02.2023, 13:10:45 Swedbank"
								},{
									"sum" : 16.14,
									"label" : "Wire transfer",
									"details" : "18.02.2023, 13:10:45 Swedbank"
								}
							],
							"paymentDiff" : 0
						},{
							"id" : "230216-4545596",
							"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
							"date" : "16.02.2023",
							"paymentTerm" : "21.03.2023",
							"price" : 13.45,
							"tax" : 2.69,
							"total" : 16.14,
							"payments" : [
								{
									"sum" : 16.14,
									"label" : "Wire transfer",
									"details" : "18.02.2023, 13:10:45 Swedbank"
								}
							],
							"paymentDiff" : 0
						},{
							"id" : "230216-4545596",
							"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
							"date" : "16.02.2023",
							"paymentTerm" : "21.03.2023",
							"price" : 13.45,
							"tax" : 2.69,
							"total" : 16.14,
							"payments" : [
								{
									"sum" : 16.14,
									"label" : "Wire transfer",
									"details" : "18.02.2023, 13:10:45 Swedbank"
								}
							],
							"paymentDiff" : 0
						},{
							"id" : "230216-4545596",
							"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
							"date" : "16.02.2023",
							"paymentTerm" : "21.03.2023",
							"price" : 13.45,
							"tax" : 2.69,
							"total" : 16.14,
							"payments" : [
								{
									"sum" : 16.14,
									"label" : "Wire transfer",
									"details" : "18.02.2023, 13:10:45 Swedbank"
								}
							],
							"paymentDiff" : 0
						},{
							"id" : "230216-4545596",
							"company" : "HITEH AUTOTEENINDUS OÜ - Kristjan Palmet",
							"date" : "16.02.2023",
							"paymentTerm" : "21.03.2023",
							"price" : 13.45,
							"tax" : 2.69,
							"total" : 16.14,
							"payments" : [
								{
									"sum" : 16.14,
									"label" : "Wire transfer",
									"details" : "18.02.2023, 13:10:45 Swedbank"
								}
							],
							"paymentDiff" : 0
						}
					] %}
					<table class="table table-sm table-orders">
						<thead>
						<tr>
							<th>Номер счёта</th>
							<th>Дочернее подразделение</th>
							<th>Дата счёта</th>
							<th class="text-right">Срок оплаты</th>
							<th class="text-right">Сумма</th>
							<th class="text-nowrap">Налог</th>
							<th class="text-nowrap"><span class="text-nowrap">К оплате</span></th>
							<th class="text-nowrap">Оплачено</th>
							<th>Метод оплаты</th>
							<th class="text-right">Остаток</th>
							<th class="text-center">Скачать счёт</th>
						</tr>
						</thead>
						<tbody>
						{% for tr in tableData %}
							<tr>
								<td><a href="/bill/{{ tr.id }}">{{ tr.id }}</a></td>
								<td>{{ tr.company }}</td>
								<td class="text-right">{{ tr.date }}</td>
								<td class="text-right">{{ tr.paymentTerm }}</td>
								<td class="text-right"><span class="text-nowrap">{{ tr.price }} €</span></td>
								<td class="text-right"><span class="text-nowrap">{{ tr.tax }} €</span></td>
								<td class="text-right"><span class="text-nowrap">{{ tr.total }} €</span></td>
								<td class="text-right">
									{% for payment in tr.payments %}
										<div class="text-nowrap">{{ payment.sum }} €</div>
									{% endfor %}
								</td>
								<td>
									{% for payment in tr.payments %}
										<div class="text-nowrap" data-toggle="tooltip" title="{{ payment.details }}">{{ payment.label }}</div>
									{% endfor %}
								</td>
								<td class="text-right">
									{% if tr.paymentDiff < 0 %}
										<strong class="text-nowrap color-danger">{{ tr.paymentDiff }} €</strong>
									{% elseif tr.paymentDiff > 0 %}
										<strong class="text-nowrap color-green">{{ tr.paymentDiff }} €</strong>
									{% else %}
										<span class="text-nowrap">{{ tr.paymentDiff }} €</span>
									{% endif %}
								</td>
								<td class="text-center"><a href="/link/to/pdf/{{ tr.id }}">pdf</a></td>
							</tr>
						{% endfor %}
						</tbody>
					</table>
				</div>

			</div><!--content-->
			<div class="clearfix"></div>
		</div><!--row-->
	</div><!--.section-profile-->

	<div class="content-separator clearfix"></div>
{% endblock %}