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

{% block title %}LALD / LCDL{% endblock %}

{% block body %}
<div class="bg-gray-100 h-screen h-auto">
      <div class="p-6  md:mx-auto">
      {% if vacation.state =="pending" %}
        <svg viewBox="0 0 24 24" class="text-orange-600 w-16 h-16 mx-auto my-6">
            <path d="M10,2.172c-4.324,0-7.828,3.504-7.828,7.828S5.676,17.828,10,17.828c4.324,0,7.828-3.504,7.828-7.828S14.324,2.172,10,2.172M10,17.004c-3.863,0-7.004-3.141-7.004-7.003S6.137,2.997,10,2.997c3.862,0,7.004,3.141,7.004,7.004S13.862,17.004,10,17.004M10,8.559c-0.795,0-1.442,0.646-1.442,1.442S9.205,11.443,10,11.443s1.441-0.647,1.441-1.443S10.795,8.559,10,8.559 M10,10.619c-0.34,0-0.618-0.278-0.618-0.618S9.66,9.382,10,9.382S10.618,9.661,10.618,10S10.34,10.619,10,10.619 M14.12,8.559c-0.795,0-1.442,0.646-1.442,1.442s0.647,1.443,1.442,1.443s1.442-0.647,1.442-1.443S14.915,8.559,14.12,8.559 M14.12,10.619c-0.34,0-0.618-0.278-0.618-0.618s0.278-0.618,0.618-0.618S14.738,9.661,14.738,10S14.46,10.619,14.12,10.619 M5.88,8.559c-0.795,0-1.442,0.646-1.442,1.442s0.646,1.443,1.442,1.443S7.322,10.796,7.322,10S6.675,8.559,5.88,8.559 M5.88,10.619c-0.34,0-0.618-0.278-0.618-0.618S5.54,9.382,5.88,9.382S6.498,9.661,6.498,10S6.22,10.619,5.88,10.619"></path>
        </svg>
        <div class="text-center">
            <h3 class="md:text-2xl text-base text-gray-900 font-semibold text-center">Votre demande à été envoyé !</h3>
      {% elseif vacation.state =="valid" %}
        <svg viewBox="0 0 24 24" class="text-orange-600 w-16 h-16 mx-auto my-6">
            <path d="M10.219,1.688c-4.471,0-8.094,3.623-8.094,8.094s3.623,8.094,8.094,8.094s8.094-3.623,8.094-8.094S14.689,1.688,10.219,1.688 M10.219,17.022c-3.994,0-7.242-3.247-7.242-7.241c0-3.994,3.248-7.242,7.242-7.242c3.994,0,7.241,3.248,7.241,7.242C17.46,13.775,14.213,17.022,10.219,17.022 M15.099,7.03c-0.167-0.167-0.438-0.167-0.604,0.002L9.062,12.48l-2.269-2.277c-0.166-0.167-0.437-0.167-0.603,0c-0.166,0.166-0.168,0.437-0.002,0.603l2.573,2.578c0.079,0.08,0.188,0.125,0.3,0.125s0.222-0.045,0.303-0.125l5.736-5.751C15.268,7.466,15.265,7.196,15.099,7.03"></path>
        </svg>
        <div class="text-center">
            <h3 class="md:text-2xl text-base text-gray-900 font-semibold text-center">Votre demande à été validé !</h3>
        {% elseif vacation.state =="refused" %}
        <svg viewBox="0 0 24 24" class="text-orange-600 w-16 h-16 mx-auto my-6">
            <path d="M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z"></path>
        </svg>
        <div class="text-center">
            <h3 class="md:text-2xl text-base text-gray-900 font-semibold text-center">Votre demande à été réfusé !</h3>
        {% elseif vacation.state =="canceled" %}
        <svg viewBox="0 0 24 24" class="text-orange-600 w-16 h-16 mx-auto my-6">
            <path d="M14.776,10c0,0.239-0.195,0.434-0.435,0.434H5.658c-0.239,0-0.434-0.195-0.434-0.434s0.195-0.434,0.434-0.434h8.684C14.581,9.566,14.776,9.762,14.776,10 M18.25,10c0,4.558-3.693,8.25-8.25,8.25c-4.557,0-8.25-3.691-8.25-8.25c0-4.557,3.693-8.25,8.25-8.25C14.557,1.75,18.25,5.443,18.25,10 M17.382,10c0-4.071-3.312-7.381-7.382-7.381C5.929,2.619,2.619,5.93,2.619,10c0,4.07,3.311,7.382,7.381,7.382C14.07,17.383,17.382,14.07,17.382,10"></path>
        </svg>
        <div class="text-center">
            <h3 class="md:text-2xl text-base text-gray-900 font-semibold text-center">Vous avez annulé cette demande !</h3>
        {% endif %}

            <p class="text-gray-600 my-2">{{nom}} {{prenom}} / {{ fonction }}</p>
            <p class="text-xl">Votre demande :</p>
            <ul class="text-gray-600">
                <li> Du {{ vacation.startDate|date("d/m/Y") }}</li>
                <li> Au {{ vacation.endDate|date("d/m/Y") }} </li>
                {% if vacation.half %}
                    <li> Demi-journée : oui </li>
                {% endif %}
                {% if vacation.state =="canceled" %}
                    <li> Statut : ❌ Demande annulée le {{ vacation.responseDate|date("d/m/Y à H:i:s") }} <li>
                {% elseif vacation.state =="valid" %}
                    <li> Statut : ✅ Demande validée le {{ vacation.responseDate|date("d/m/Y à H:i:s") }} <li>
                {% elseif vacation.state == "refused" %}
                    <li> Statut : ❌ Demande refusée le {{ vacation.responseDate|date("d/m/Y à H:i:s") }} <li>
                {% elseif vacation.state == "pending" %}
                    <li> Statut : ⏳ Demande en attente </li>
                {% else %}
                    <li> Statut : ⚙️ Erreur </li>
                {% endif %}
                <li> Semaines :
                    {% set startDateWeek = vacation.startDate|date("W") %}
                    {% set endDateWeek = vacation.endDate|date("W") %}
                    {% for week in range(startDateWeek, endDateWeek) %}
                        {{ week }},
                    {% endfor %}
                </li>
                <li> Nombre de jours : {{ vacationDays }} jours (hors week-ends et jours fériés)</li>
            </ul>       

            {% if vacation.reason %}
                <hr class="w-48 h-1 mx-auto bg-gray-100 border-0 rounded my-2 dark:bg-gray-700">
                <p>{{vacation.reason}}</p>
                <hr class="w-48 h-1 mx-auto bg-gray-100 border-0 rounded my-2 dark:bg-gray-700">
            {% endif %}
            {% if vacation.state =="pending" %}
            <p> Vous recevrez une réponse à votre demande par mail  </p>
            {% endif %}
            {% if vacation.responseDate %}
            <p class="font-bold"> Date de la réponse : {{ vacation.responseDate|date("d/m/Y") }} </p>
            {% endif %}
            <p id="printDate" class="hidden"> Date d'impression : {{ 'now'|date("d/m/Y à H:i:s") }} </p>
            <div class="py-10 text-center">
                <bouton onclick="window.print();"
                   id="btnPrintHide" class="align-middle w-1/3 select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg border border-blue-500 text-blue-500 hover:opacity-75 focus:ring focus:ring-blue-200 active:opacity-[0.85] block m-auto mb-5">
                    Imprimer ma demande
                </bouton>
                 <a href="{{ path('app_member_show') }}"
                    id="btnAccueilHide" class="align-middle w-1/3 select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg border border-green-500 text-green-500 hover:opacity-75 focus:ring focus:ring-green-200 active:opacity-[0.85] block m-auto">
                    Retour
                </a>

            </div>
        </div>
    </div>
  </div>
      
    <style>
        @media print {
            #foot,#btnPrintHide,#btnAccueilHide {
                display: none;
            }
            #printDate{
                display: contents;
            }
        }
    </style>
{% endblock %}