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

{% block stylesheets %}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
{% endblock %}

{% block body %}
    {% if app.user.isOwner == true %}
        <h1>Liste de mes travaux :</h1>
        <p>
            <a href="{{ path('works-add', {id: property.id}) }}">
                <img src="{{ asset('images/Icon/ajout_travaux.png') }}" alt="Ajouter" class="size-logo-tenants">
                Ajouter un travail
            </a>
        </p>

        {% if property.works|length %}
            <div class="container">
                {% for work in property.works %}
                    <div class="properties-show col-6 col-md-4">
                        <img src="{{ asset('images/liste_travaux.jpg') }}" alt="Avatar" class="image-bien">
                        <div class="middle">
                            <div class="modal-show" style="cursor: pointer;" data-toggle="modal" data-target="#myModal{{work.id}}">
                                <div class="title summary-text">
                                    <h2>Nature: {{ work.nature }}</h2>
                                    <p>Détail: {{ work.description }}</p>
                                    <p>Coût: {{ work.price }} €</p>
                                </div>
                            </div>

                            <div class="show-action">
                                <div class="hover-show inline">
                                    {% if app.user.isOwner == false %}
                                        <a href="{{ path('rents-add', {id: property.id}) }}" class="m-r-10">
                                            <img src="{{ asset('images/Icon/ajouter.png') }}" alt="Ajouter" class="size-icon-house">
                                        </a>
                                        <div class="position-absolute t-65 l-20">
                                            <div class="show-me">
                                                <span>Ajouter un loyer</span>
                                            </div>
                                        </div>|
                                    {% endif %}
                                </div>
                                <div class="hover-show inline">
                                    <a href="{{ path('works-modify', {id: work.id }) }}">
                                        <img src="{{ asset('images/Icon/edit.png') }}" alt="Supprimer" class="w-5 m-t-15 m-r-10">
                                    </a>
                                    <div class="position-absolute t-30 l-10">
                                        <div class="show-me">
                                            <span>Modifier le travaux</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="hover-show inline">
                                    <a href="" data-toggle="modal" data-target="#deleteWork{{ work.id }}">
                                        <img src="{{ asset('images/Icon/delete.png') }}" alt="Supprimer" class="w-5 m-t-15">
                                    </a>
                                    <div class="position-absolute t-30 l-45">
                                        <div class="show-me">
                                            <span>Supprimer le travaux</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="myModal{{work.id}}" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog modal-lg" id="{{work.id}}">
                                <div class="modal-content" >
                                    <div class="modal-header summary-text">
                                        <div class="title ">
                                            Nature des dépenses: {{ work.nature }}
                                        </div>
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="col">
                                                <p>
                                                    Description:
                                                    {{ work.description }}
                                                </p>
                                                <p>Coût: {{ work.price }}</p>
                                                <p>Le(s) facture(s)
                                                <ul>
                                                    <li>
                                                        <a href="{{ asset('/images/works/' ~ work.image ) }}" target="_blank">{{ work.image }}</a>
                                                    </li>
                                                </ul>
                                                </p>
                                                <p>Réalisé le {{ work.createdAt|date("m/d/Y") }} par {{ property.owner }}</p>
                                            </div>
                                            <div class="col col-lg-2">
                                                <div class="hover-show inline">
                                                    <a href="{{ path('works-modify', {id: work.id }) }}">
                                                        <img src="{{ asset('images/Icon/edit.png') }}" alt="Supprimer" class="modify-tenant">
                                                    </a>
                                                    <div class="position-absolute t-30 l-10">
                                                        <div class="show-me">
                                                            <span>Modifier le travaux</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="hover-show inline">
                                                    <a href="" data-toggle="modal" data-target="#deleteWork{{ work.id }}">
                                                        <img src="{{ asset('images/Icon/delete.png') }}" alt="Supprimer" class="modify-tenant">
                                                    </a>
                                                    <div class="position-absolute t-30 l-45">
                                                        <div class="show-me">
                                                            <span>Supprimer</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Modal confirm delete -->
                    <div class="modal fade" id="deleteWork{{ work.id }}" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header summary-text">
                                    <h5 class="modal-title" id="exampleModalLabel">Suppression d'une dépense</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    Voulez-vous vraiment supprimer cette dépense: {{ work.nature }} ?
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Non</button>
                                    <a href="{{ path('works-delete', {id: work.id }) }}" >
                                        <button type="button" class="btn btn-danger">Oui</button></a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <p class="alert alert-danger">Aucun travaux n'a été ajouté</p>
        {% endif %}
    {% else %}
        <h3 class="color-danger text-center">Vous n'êtes pas autorisé à accéder à cette page.</h3>
        <img src="{{ asset('images/acces_denied/403.gif') }}" class="acces-denied m-r-30">
    {% endif %}
{% endblock %}