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

{% block body %}
<div class="w-full flex flex-col min-h-full overflow-y-auto">
    <div class="flex flex-row w-full p-3 border-b items-center justify-between text-white bg-bungalow-yellow">
        <span class="text-white text-lg">
            <i class="{{ icon.get('file') }}" style="color: #FFFF;"></i>
            Livrable d'Instrumentation
        </span>
        {% if not is_granted('ROLE_WIIFOR') %}
            <div class="w-fit text-right text-sm">
                <a href="{{ path('create_instrumentation_livrable') }}" class="bg-bungalow-blue mx-2 p-2 px-4 rounded-full">Ajouter</a>
            </div>
        {% endif %}
    </div>

    {% if instrumentation_livrable|length == 0 %}
        <div class="h-1/2 w-full p-4 items-center flex flex-col justify-evenly">
            <p class="text-gray-600 text-center text-5xl">Aucun livrable d'instrumentation</p>
        </div>
    {% else %}
        <div class="w-full p-4">
            {% include "./layouts/message_flash.html.twig" %}
            <div id="datatable" class="overflow-x-auto">
                <table class="min-w-full bg-white border border-gray-300 shadow-lg rounded-lg">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Hôtel</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Référence</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dates prévisionnelles</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dates réelles</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Validation</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Documents</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for livrable in instrumentation_livrable %}
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ livrable.hotel.nom }}</div>
                                    <div class="text-sm text-gray-500">{{ livrable.hotel.adresse.ville }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">LIV-{{ livrable.id }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">
                                        {% if livrable.prevStartAt and livrable.prevEndAt %}
                                            {{ livrable.prevStartAt|date('d/m/Y') }} - {{ livrable.prevEndAt|date('d/m/Y') }}
                                        {% else %}
                                            ---
                                        {% endif %}
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">
                                        {% if livrable.reaStartAt and livrable.reaEndAt %}
                                            {{ livrable.reaStartAt|date('d/m/Y') }} - {{ livrable.reaEndAt|date('d/m/Y') }}
                                        {% else %}
                                            ---
                                        {% endif %}
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if livrable.reaEndAt %}bg-green-100 text-green-800{% else %}bg-yellow-100 text-yellow-800{% endif %}">
                                        <i class="{{ icon.get( livrable.reaEndAt ? 'check' : 'clock' ) }} mr-1"></i>
                                        {{ livrable.reaEndAt ? 'Terminé' : 'En cours' }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if livrable.livrableValide %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
                                        <i class="{{ icon.get( livrable.livrableValide ? 'check' : 'cross' ) }} mr-1"></i>
                                        {{ livrable.livrableValide ? 'Validé' : 'Non validé' }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">
                                        {{ livrable.livrableDocuments|length }} document(s)
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <div class="flex space-x-2">
                                        <a href="{{ path('vue_instrumentation_livrable', {instrumentation_livrable_id: livrable.id}) }}" class="text-bungalow-blue hover:text-bungalow-blue-dark">
                                            <i class="{{ icon.get('eye') }}"></i>
                                        </a>
                                        <a href="{{ path('edit_instrumentation_livrable', {instrumentation_livrable_id: livrable.id}) }}" class="text-indigo-600 hover:text-indigo-900">
                                            <i class="{{ icon.get('pen') }}"></i>
                                        </a>
                                        <button href="{{ path('delete_instrumentation_livrable', {instrumentation_livrable_id: livrable.id}) }}" class="text-red-600 hover:text-red-900 delete-btn">
                                            <i class="{{ icon.get('trash') }}"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('instrumentation_livrable_index') }}
{% endblock %}