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

{% block title %}Liste des annonces{% endblock %}

{% block body %}
    <div class="col-md-12 mb-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <h5 class="card-title">Liste des annonces</h5>
                    </div>
                    <div class="col-6 text-end ">
                        <a href="{{ path('news_add') }}" class="btn btn-primary rounded-pill"><i
                                    class="ti-plus"></i> Ajouter</a>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>Titre</th>
                            <th class="text-center">Date de début</th>
                            <th class="text-center">Date de fin</th>
                            <th class="text-center">En cours</th>
                            <th class="text-center">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for new in news %}
                            <tr>
                                <td>
                                    {{ new.title }}
                                </td>
                                <td class="text-center">
                                    {{ new.beginAt|date('d/m/Y') }}
                                </td>
                                <td class="text-center">
                                    {{ new.endAt is null ? 'Non renseigné' : new.endAt|date('d/m/Y') }}
                                </td>
                                <td class="text-center">
                                    {% if new.beginAt|date('U') < "now"|date('U') and (new.endAt is null or new.endAt|date('U') > "now"|date('U')) %}
                                        <span class="text-success fw-bolder"><i
                                                    class="ti-check fw-bold"></i> </span>
                                    {% else %}
                                        <span class="text-danger fw-bolder"><i
                                                    class="ti-close fw-bold"></i> </span>
                                    {% endif %}
                                </td>
                                <td class="text-center">
                                    <a class="action-link"
                                       href="{{ path('news_edit', {'idNews':new.id}) }}"><i
                                                class="ti-pencil"></i></a><br/>
                                    <a class="action-link deleteNews" data-id="{{ new.id }}"
                                       data-info="{{ new.title }}"
                                       href="#modal-delete-new" role="button" data-bs-toggle="modal"><i
                                                class="ti-trash"></i></a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
{% endblock %}

{% block modals %}
    <div class="modal" id="modal-delete-new" aria-hidden="true"
         aria-labelledby="exampleModalToggleLabel2"
         tabindex="0">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalToggleLabel2">Supprimer l'annonce</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    Tu veux vraiment supprimer l'annonce ?<br/>
                    <span class="fw-bold" id="info"></span>
                </div>
                <div class="modal-footer">
                    <a href="#"
                       class="btn btn-primary modal-submit"><i class="ti-trash"></i>
                        Supprimer</a>
                    <button class="btn btn-light" data-bs-dismiss="modal" aria-label="Close">Annuler
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/js/jquery-3.7.1.min.js') }}"></script>
    <script type="text/javascript">
        $('.deleteNews').on('click', function (element) {
            var url = "{{ path('news_delete', {'idNews':'___'}) }}";
            url = url.replace('___', $(this).data('id'));

            $('#info').text($(this).data('info'));

            $('#modal-delete-new .modal-submit').attr('href', url);
        });
    </script>
{% endblock %}