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

{% block body %}
<div class="w-full flex flex-col h-full">
    <div class="flex flex-row items-center w-full p-3 border-b text-white bg-bungalow-yellow">
        <div class="flex flex-row w-full">
            <a href="{{ path('plan_comptages') }}" class="text-white text-lg">
                <i class="{{ icon.get('gears') }}" style="color: #FFFF;"></i>
                Plans de Comptage
            </a>
            <span class="mx-2">-</span>
            <a class="text-white text-lg">{{ plan_comptage.hotel.nom }}</a>
        </div>
    </div>
    <div class="w-full max-h-[80vh] flex flex-col overflow-y-auto p-5">
        {% include "./layouts/message_flash.html.twig" %}
        <div class="tabs-container tabs-historic" data-tab-group="plan_comptage-tabs">
            <div class="tabs-header justify-around">
                <button class="tab-button active" data-tab="administratif">Administratif</button>
                <button class="tab-button" data-tab="passerelle">Passerelle</button>
                <button class="tab-button" data-tab="electrique">Comptage éléctrique</button>
                <button class="tab-button" data-tab="air">Qualité de l'air</button>
                <button class="tab-button" data-tab="eau">Comptage eau</button>
                <button class="tab-button" data-tab="iot_existant">IoT</button>
            </div>
            <div class="tabs-content">
                <div class="tab-pane active" id="administratif">
                    <div class="mt-6 w-full">
                        {% include "./plan_comptage/partials/administratif/informations.html.twig" %}
                    </div>
                    <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                        {% include "./plan_comptage/partials/administratif/plans.html.twig" %}
                    </div>
                    <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                        {% include "./plan_comptage/partials/administratif/contacts.html.twig" %}
                    </div>
                    <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                        {% include "./plan_comptage/partials/administratif/historique.html.twig" %}
                    </div>
                </div>
                <div class="tab-pane" id="passerelle">
                    <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                        {% include "./plan_comptage/partials/passerelle/installation_passerelle.html.twig" %}
                    </div>
                    <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                        {% include "./plan_comptage/partials/passerelle/passerelle_photos.html.twig" %}
                    </div>
                </div>
                <div class="tab-pane" id="electrique">
                    <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                        {% include "./plan_comptage/partials/comptage_elec/recap_install_electrique.html.twig" %}
                    </div>
                    {% if plan_comptage_electrique %}
                        <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                            {% include "./plan_comptage/partials/comptage_elec/tableaux.html.twig" %}
                        </div>
                        <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                            {% include "./plan_comptage/partials/comptage_elec/sous_comptage.html.twig" %}
                        </div>
                        <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                            {% include "./plan_comptage/partials/comptage_elec/hierarchie.html.twig" %}
                        </div>
                        <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                            {% include "./plan_comptage/partials/comptage_elec/photos.html.twig" %}
                        </div>
                    {% endif %}
                </div>
                <div class="tab-pane" id="air">
                    <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                        {% include "./plan_comptage/partials/qualite_air/temp_interieur.html.twig" %}
                    </div>
                    <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                        {% include "./plan_comptage/partials/qualite_air/temp_exterieur.html.twig" %}
                    </div>
                    <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                        {% include "./plan_comptage/partials/qualite_air/photos.html.twig" %}
                    </div>
                </div>
                <div class="tab-pane" id="eau">
                    <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                        {% include "./plan_comptage/partials/comptage_eau/compteur.html.twig" %}
                    </div>
                    {% if comptage_eau %}
                        <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                            {% include "./plan_comptage/partials/comptage_eau/sous_comptage.html.twig" %}
                        </div>
                        <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                            {% include "./plan_comptage/partials/comptage_eau/photos.html.twig" %}
                        </div>
                    {% endif %}
                </div>
                <div class="tab-pane" id="iot_existant">
                    {% if iot_existant %}
                        <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                            {% include "./plan_comptage/partials/iot_existant/infos.html.twig" %}
                        </div>
                        <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                            {% include "./plan_comptage/partials/iot_existant/materiel.html.twig" %}
                        </div>
                        <div class="mt-6 w-full bg-white shadow-lg rounded-md">
                            {% include "./plan_comptage/partials/iot_existant/photos.html.twig" %}
                        </div>
                    {% else %}
                        <div class="w-full h-full flex flex-col items-center p-6">
                            <h3 class="w-full col-span-2 text-center text-3xl text-gray-500">Aucun IoT</h3>
                            {% if is_granted('ROLE_USER') %}
                                <a href="{{ path('plan_comptage_iot_existant_create', {'plan_comptage_id': plan_comptage.id}) }}"
                                class="w-fit m-auto mt-4 px-4 py-2 bg-bungalow-blue flex flex-row items-center text-white font-medium rounded-full text-sm cursor-pointer">
                                    Renseigner si existant
                                </a>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('instru_index') }}
    {{ encore_entry_script_tags('qualite_air_index') }}
    {{ encore_entry_script_tags('comptage_eau_index') }}
    {{ encore_entry_script_tags('iot_existant_index') }}
{% endblock %}

{% block modals %}
    {% include "./plan_comptage/modals/carousel.html.twig" %}
    {% include "./plan_comptage/modals/administratif/historique/create.html.twig" %}
    {% include "./plan_comptage/modals/administratif/historique/edit.html.twig" %}
    {% if is_granted('ROLE_USER') %}
        {% include "./plan_comptage/modals/plans.html.twig" %}

        {% include "./plan_comptage/modals/qualite_air/create.html.twig" %}
        {% include "./plan_comptage/modals/qualite_air/edit.html.twig" %}
    {% endif %}
{% endblock %}