<!DOCTYPE html>
<html th:replace="~{modele-page :: layout('Accueil - ENI-Enchères',~{::link} , ~{::#container-main})}" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="container-main">
    <div class="container mt-4">
        <div class="row mb-4">
            <div class="col-12">
                <!-- Card principale pour le formulaire -->
                <div class="card">
                    <div class="card-body">
                        <!-- Formulaire de recherche avec sélection de catégorie -->
                        <form th:action="@{/enchere}" method="post" class="mb-3">
                            <div class="row">
                                <div class="col-lg-6 col-12" th:if="${#authentication.principal != 'anonymousUser'}">
                                    <!-- Zone de recherche -->
                                    <div class="mb-3">
                                        <input type="text" class="form-control" th:attr="placeholder=#{home.search.title}, value=${session.searchTitle != null ? session.searchTitle : ''}" name="searchTitle">
                                    </div>
                                    <div class="mb-4">
                                        <select class="form-control" name="searchCategory">
                                            <option value="" th:text="#{home.search.cat}"></option>
                                            <option th:each="category : ${categories}" th:value="${category.id}" th:text="${category.libelle}" th:selected="${category.id == session.searchCategory}"></option>
                                        </select>
                                    </div>
                                    <!-- Achats et Ventes -->
                                </div>
                                <div class="col-lg-12" th:if="${#authentication.principal == 'anonymousUser'}">
                                    <!-- Zone de recherche -->
                                    <div class="mb-3">
                                        <input type="text" class="form-control" th:attr="placeholder=#{home.search.title}, value=${session.searchTitle != null ? session.searchTitle : ''}" name="searchTitle">
                                    </div>
                                    <div class="mb-4">
                                        <select class="form-control" name="searchCategory">
                                            <option value="" th:text="#{home.search.cat}"></option>
                                            <option th:each="category : ${categories}" th:value="${category.id}" th:text="${category.libelle}" th:selected="${category.id == session.searchCategory}"></option>
                                        </select>
                                    </div>
                                    <!-- Achats et Ventes -->
                                </div>
                                <!-- Colonne pour le bouton de recherche -->
                                <div class="col-lg-6 col-12 d-flex justify-content-center align-items-center"th:if="${#authentication.principal != 'anonymousUser'}">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" name="typeTransaction" id="achats" value="achats" th:checked="${SessionTypeTransaction != null and SessionTypeTransaction == 'achats'}" onchange="toggleCheckbox(this.value)">
                                                            <label class="form-check-label" for="achats" th:text="#{home.buy.title}"></label>
                                                        </div>
                                                    </div>
                                                    <!-- Checkboxes pour Achats -->
                                                    <div id="achatsOptions">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" name="achatOption" id="encheresOuvertes" th:value="encheresOuvertes" th:checked="${sessionAchatOptions != null and #lists.contains(sessionAchatOptions, 'encheresOuvertes')}" th:disabled="${sessionAchatOptions == null}">
                                                            <label class="form-check-label" for="encheresOuvertes" th:text="#{home.buy.open}"></label>
                                                        </div>
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" name="achatOption" id="enchereEnCours" th:value="enchereEnCours" th:checked="${sessionAchatOptions != null and #lists.contains(sessionAchatOptions, 'enchereEnCours')}" th:disabled="${sessionAchatOptions == null}">
                                                            <label class="form-check-label" for="enchereEnCours" th:text="#{home.buy.progress}"></label>
                                                        </div>
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" name="achatOption" id="enchereRemportees" th:value="enchereRemportees" th:checked="${sessionAchatOptions != null and #lists.contains(sessionAchatOptions, 'enchereRemportees')}" th:disabled="${sessionAchatOptions == null}">
                                                            <label class="form-check-label" for="enchereRemportees" th:text="#{home.buy.success}"></label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <!-- Boutons radio pour Ventes -->
                                                    <div class="mb-3">
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" name="typeTransaction" id="ventes" value="ventes" th:checked="${SessionTypeTransaction != null and SessionTypeTransaction == 'ventes'}" onchange="toggleCheckbox(this.value)">
                                                            <label class="form-check-label" for="ventes" th:text="#{home.sell.title}"></label>
                                                        </div>
                                                    </div>
                                                    <!-- Checkboxes pour Ventes -->
                                                    <div id="ventesOptions">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" th:name="venteOption" id="venteEnCours" th:value="venteEnCours" th:checked="${sessionVenteOptions != null and #lists.contains(sessionVenteOptions, 'venteEnCours')}" th:disabled="${sessionVenteOptions == null}">
                                                            <label class="form-check-label" for="venteEnCours" th:text="#{home.sell.progress}"></label>
                                                        </div>
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" th:name="venteOption" id="ventesNonDebutees" th:value="ventesNonDebutees" th:checked="${sessionVenteOptions != null and #lists.contains(sessionVenteOptions, 'ventesNonDebutees')}" th:disabled="${sessionVenteOptions == null}">
                                                            <label class="form-check-label" for="ventesNonDebutees" th:text="#{home.sell.nostarted}"></label>
                                                        </div>
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" th:name="venteOption" id="ventesTerminees" th:value="ventesTerminees" th:checked="${sessionVenteOptions != null and #lists.contains(sessionVenteOptions, 'ventesTerminees')}" th:disabled="${sessionVenteOptions == null}">
                                                            <label class="form-check-label" for="ventesTerminees" th:text="#{home.sell.finish}"></label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>

                            </div>
                            <div class="row">
                                <br>
                            </div>
                            <div class="row">
                                <div class="col-md-12 col-12 d-flex justify-content-center align-items-center">
                                    <button type="submit" style="font-size: 1em;" class="btn btn-primary btn-lg w-100" th:text="#{home.button.search}"></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div th:each="article : ${articles}" class="col-lg-6 col-12 mb-4">
                <a th:href="@{/article/show(id=${article.id})}" class="text-decoration-none text-dark" id="article-card">
                    <div class="card shadow-sm h-100 card-article">
                        <div class="row g-0">
                            <div class="col-md-4 d-flex align-items-center justify-content-center p-3">
                                <img th:src="${article.lienImg}" alt="Image de l'article" class="img-fluid rounded">
                            </div>
                            <div class="col-md-8">
                                <div class="card-body d-flex flex-column">
                                    <h5 class="text-dark card-title" th:text="${article.nom}"></h5>
                                    <p class="text-dark card-text mb-3" th:text="${article.desc}" style="overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;"></p>
                                    <div class="mt-2 d-flex flex-row align-items-center justify-content-between">
                                        <strong><label class="col-form-label mr-2" th:text="#{article.details.label.sale_price}"></label></strong>
                                        <div class="col-form-label">
                                    <span class="text-dark">
                                        <i class="fas fa-coins"></i>
                                        <span th:text="${article.prixInitial}"></span>
                                    </span>
                                        </div>
                                    </div>
                                    <div class="mt-2 d-flex flex-row align-items-center justify-content-between">
                                        <strong><label class="col-form-label mr-2" th:text="#{article.details.label.last_price}"></label></strong>
                                        <div class="col-form-label">
                                            <i class="fas fa-coins"></i>
                                            <span class="text-dark" th:text="${article.prixMaxEnchere}"></span>
                                        </div>
                                    </div>
                                    <div class="mt-2 d-flex flex-row align-items-center justify-content-between">
                                        <strong><label class="col-form-label mr-2" th:text="#{article.details.label.seller}"></label></strong>
                                        <div class="col-form-label">
                                            <span class="text-dark" th:text="${article.pseudoUtilisateur}"></span>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h6 class="text-muted"><strong><span th:text="#{article.details.label.start_date}"></span>: </strong></h6>
                                        </div>
                                        <div class="col-md-6">
                                            <h6 class="text-muted"><span th:text="${#dates.format(article.dateDebutEnch, 'dd/MM/yyyy')}"></span></h6>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h6 class="text-muted"><strong><span th:text="#{article.details.label.end_date}"></span></strong></h6>
                                        </div>
                                        <div class="col-md-6">
                                            <h6 class="text-muted"><span th:text="${#dates.format(article.dateFinEnch, 'dd/MM/yyyy')}"></span></h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <!-- Pagination -->
        <div class="row mt-4" th:if="${not #lists.isEmpty(articles)}">
            <div class="col-md-12">
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                        <!-- Bouton pour la première page -->
                        <li class="page-item">
                            <a class="page-link" th:href="@{/enchere(page=1)}">
                                <span aria-hidden="true">&laquo;</span>
                                <span th:text="#{home.button.first}"></span>
                            </a>
                        </li>

                        <!-- Bouton pour la page précédente -->
                        <li th:if="${currentPage > 1}" class="page-item">
                            <a class="page-link" th:href="@{/enchere(page=${currentPage - 1})}">
                                <span aria-hidden="true">&lsaquo;</span>
                                <span th:text="#{home.button.previous}"></span>
                            </a>
                        </li>

                        <!-- Afficher les deux dernières pages, la page en cours et les deux suivantes -->
                        <th:block th:each="page, iter : ${#numbers.sequence((currentPage - 2 > 0 ? currentPage - 2 : 1), (currentPage + 2 < totalPages ? currentPage + 2 : totalPages))}">
                            <li class="page-item" th:classappend="${currentPage == page ? 'active' : ''}">
                                <a class="page-link" th:href="@{/enchere(page=${page})}" th:text="${page}"></a>
                            </li>
                        </th:block>

                        <!-- Bouton pour la page suivante -->
                        <li th:if="${currentPage < totalPages}" class="page-item">
                            <a class="page-link" th:href="@{/enchere(page=${currentPage + 1})}">
                                <span aria-hidden="true">&rsaquo;</span>
                                <span th:text="#{home.button.next}"></span>
                            </a>
                        </li>

                        <!-- Bouton pour la dernière page -->
                        <li class="page-item">
                            <a class="page-link" th:href="@{/enchere(page=${totalPages})}">
                                <span aria-hidden="true">&raquo;</span>
                                <span th:text="#{home.button.end}"></span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
</body>
</html>
