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

{% block title %}Paiement d'une commande
{% endblock %}

{% block body %}
	<div class="container-payment">
		<h1 class="text-center">
			<i class="fa-solid fa-credit-card"></i>Paiement de la commande</h1>

		<table class="table table-bordered text-center">
			<thead>
				<tr>
					<th>Référence</th>
					<th>Client</th>
					<th>Montant</th>
					<th>Date</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>{{ commande.reference }}</td>
					<td>{{ commande.user.lastname }}&nbsp;
						{{ commande.user.firstname }}</td>
					<td>{{ commande.totalCommande|number_format(2, ',', ' ') }}
						€</td>
					<td>{{ commande.createdAt|date('d/m/Y H:i') }}</td>
				</tr>
			</tbody>
		</table>


		{{ form_start(form) }}

		<div class="payment-methods">
			{{ form_label(form.paymentMethod) }}
			<div class="choices">
				{{ form_widget(form.paymentMethod) }}
			</div>
		</div>

		<div id="card-info" class="card-info">
			{{ form_row(form.cardHolder) }}
			{{ form_row(form.cardNumber) }}
		</div>

		<button type="submit" class="btn btn-primary" id="submit-payment">
			<i class="fas fa-check"></i>
			Valider le paiement
		</button>

		{{ form_end(form) }}
	</div>
{% endblock %}

{% block javascripts %}
	<script type="module" src="{{asset('assets/js/mock-payment-form.js')}}"></script>
{% endblock %}

{% block stylesheets %}
	<link rel="stylesheet" href="{{ asset('assets/css/form.css') }}">
	<link rel="stylesheet" href="{{ asset('assets/css/table.css') }}">
{% endblock %}