{% extends 'base.html.twig' %}

{% block title %}
	{{ loan.name }}
{% endblock %}

{% block body %}
	<div class="p-6 space-y-6" data-controller="drawer">
		<div class="flex justify-between items-center">
			<div>
				<h1 class="text-2xl font-bold">{{ loan.name }}</h1>
				<div class="text-gray-500">{{ loan.lender }}</div>
			</div>

			<div class="flex items-center gap-4">
				<button data-action="drawer#open" data-target="transactionDrawer" class="button-style success-button-style">
					Nouvelle transaction
				</button>

				<form method="post" action="{{ path('app_transaction_generate_loans') }}">
					<input type="hidden" name="_token" value="{{ csrf_token('generate-loans') }}">
					<input type="hidden" name="loan_id" value="{{ loan.id }}">

					<button type="submit" class="button-style brand-button-style">
						Générer les échéances
					</button>
				</form>

				<a href="{{ path('app_loan_edit', {id: loan.id}) }}" class="button-style warning-button-style">
					Modifier
				</a>

				{% if loan.remainingAmount == loan.initialAmount %}
					{% include "loan/_delete_form.html.twig" %}
				{% endif %}

				{% include "partials/elements/_button_return.html.twig" with { class: 'return-button-style' } %}
			</div>
		</div>

		<div class="flex items-center justify-around gap-4">
			<div class="p-4 bg-white rounded-lg">
				<div class="text-sm text-gray-500">Capital initial</div>
				<div class="font-bold">
					{{ (loan.initialAmount / 100)|format_currency('EUR') }}
				</div>
			</div>

			<div class="p-4 bg-white rounded-lg">
				<div class="text-sm text-gray-500">Restant dû</div>
				<div class="font-bold">
					{{ (loan.remainingAmount / 100)|format_currency('EUR') }}
				</div>
			</div>

			<div class="p-4 bg-white rounded-lg">
				<div class="text-sm text-gray-500">Mensualité</div>
				<div class="font-bold">
					{{ (loan.monthlyPayment / 100)|format_currency('EUR') }}
				</div>
			</div>

			<div class="p-4 bg-white rounded-lg">
				<div class="text-sm text-gray-500">Taux</div>
				<div class="font-bold">
					{{ loan.interestRate }}
					%
				</div>
			</div>

			{% if loan.insuranceRate %}
				<div class="p-4 bg-white rounded-lg">
					<div class="text-sm text-gray-500">Assurance</div>
					<div class="font-bold">
						{{ loan.insuranceRate }}
						%
					</div>
				</div>
			{% endif %}
		</div>

		<div class="bg-white rounded-lg shadow overflow-hidden">
			<table class="w-full text-sm">
				<thead class="bg-gray-100 text-left">
					<tr>
						<th class="p-3">Numéro</th>
						<th class="p-3">Date d'échéance</th>
						<th class="p-3">Montant à recouvrer</th>
						<th class="p-3">Capital amorti</th>
						<th class="p-3">Part intérêts</th>
						<th class="p-3">Accessoires</th>
						<th class="p-3">Capital restant dû</th>
						<th class="p-3">Statut</th>
					</tr>
				</thead>

				<tbody>
					{% for inst in loan.loanInstallments %}
						<tr class="border-t">
							<td class="p-3">
								{{ inst.installmentNumber ?? '-' }}
							</td>
							<td class="p-3">
								{{ inst.dueDate|date('d/m/Y') }}
							</td>
							<td class="p-3">
								{{ (inst.totalAmount / 100)|format_currency('EUR') }}
							</td>
							<td class="p-3">
								{{ (inst.capitalAmount / 100)|format_currency('EUR') }}
							</td>
							<td class="p-3">
								{{ (inst.interestAmount / 100)|format_currency('EUR') }}
							</td>
							{% if loan.insuranceRate %}
								<td class="p-3">
									{{ (inst.insuranceAmount / 100)|format_currency('EUR') }}
								</td>
							{% endif %}
							<td class="p-3">
								{{ (inst.remainingCapital / 100)|format_currency('EUR') }}
							</td>
							<td class="p-3">
								{% if inst.paidAt %}
									<span class="text-emerald-600">Payé le
										{{ inst.paidAt|date('d/m/Y') }}</span>
								{% elseif inst.paidAt == null and inst.isPaid %}
									<span class="text-red-600">Annulé</span>
								{% else %}
									<span class="text-gray-500">À venir</span>
								{% endif %}
							</td>
						</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>

		{% include 'loan/_drawer.html.twig' %}

	</div>
{% endblock %}