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

{% block title %}Gestion pour {{ event.name }}{% endblock %}

{% block content %}

<div class="card" {{ stimulus_controller('dropdown')}} >
  <div class="card-footer">
    <div class="dropdown card-footer-item is-flex is-justify-content-space-between is-align-items-center" data-action="click->dropdown#toggle">
      <button>
        <span><strong>{{ event.name }} - du {{ event.startOn|date('d/m/y à H:i', app_timezone) }} au {{ event.endOn|date('d/m/y à H:i', app_timezone)}}</strong></span>        
      </button>
      {% if events|length > 1 %}
      <span class="icon is-small">
        <twig:ux:icon name="bi:chevron-down" />&nbsp;
      </span>
      <div data-dropdown-target="menu" class="dropdown-menu">
        <div class="dropdown-content">
          {% for evt in events %}
          {% if event.id != evt.id %}
          <a href="{{ path('app_manage_planning', {id: evt.id})}}" class="dropdown-item"><strong>{{ evt.name }}</strong><small> du {{ evt.startOn|date('d/m/y H:i', app_timezone) }} au {{ evt.endOn|date('d/m/y H:i', app_timezone)}}</small></a>
          {% endif %}
          {% endfor %}
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>

<div class="box is-clearfix">
  <div class="columns">
    {% if not event.isHiddenPlanning %}
    <div class="column">
      <p>{{ event.getParties()|length }} parties proposées</p>
    </div>
    {% endif %}
    <div class="column">
      <p class="is-inline-block icon-text">{{ event.getGamemastersAssigned|length }} meneur(euse)s de jeu
        {% for gamemaster in event.getGamemastersAssigned %}
          <span class="icon">
              <a href="{{ path('app_gamemaster_public_profile', {id: gamemaster.id}) }}" class="open-modal" title="{{ gamemaster.preferedName }}"><figure class="image is-24x24 is-inline-block">
              {% if gamemaster.picture %}
              <img class="is-rounded" src="/images/gamemasters/{{ gamemaster.picture }}" alt="{{ gamemaster.preferedName }}"/>
              {% else %}
              <twig:ux:icon name="bi:person-fill"/>
              {% endif %}
              </figure></a>
          </span>   
        {% endfor %}
      </p>
    </div>
  </div>
</div>

<div class="tabs is-boxed">
    <ul>
        <li><a href="{{ path('app_manage_planning', {id: event.id}) }}">Planning</a></li>
        <li><a href="{{ path('app_manage_party_list', {id: event.id}) }}">Liste des parties</a></li>
        <li><a href="{{ path('app_manage_booking', {id: event.id}) }}">Liste des participant(e)s</a></li>
        {% if event.isEveryoneCanAskForGame %}<li class="is-active"><a>Liste des demandes</a></li>{% endif %}
    </ul>
</div>

<section>
    <div clas="block">
        <div class="content">
            <h3 class="title is-3">Traiter la demande</h3>
            <p class="subtitle is-5">Résumer de la demande à traiter</p>
            <p>Suivez chaque étape, vous pouvez revenir en arrière à tout moment pour sélectionner un autre créneau dans le planning. Scrollez vers le bas pour la suite.</p>
        </div>
        <div class="box">
            <div class="columns">
                <div class="column is-one-third has-text-right">
                    <strong>Demandeur(euse)</strong>
                </div>
                <div class="column">
                    {{ partyRequest.requester.fullName }}
                </div>
            </div>
            <div class="columns">
                <div class="column is-one-third has-text-right">
                    <strong>Jeu demandé</strong>
                </div>
                <div class="column">
                    {{ partyRequest.gameChoosen.name }}
                </div>
            </div>
            <div class="columns">
                <div class="column is-one-third has-text-right">
                    <strong>Meneur(euse) demandé(e)</strong>
                </div>
                <div class="column">
                    {{ partyRequest.gamemasterChoosen.preferedName }}
                </div>
            </div>
            <div class="columns">
                <div class="column is-one-third has-text-right">
                    <strong>Message</strong>
                </div>
                <div class="column">
                    {{ partyRequest.message }}
                </div>
            </div>
        </div>
        <div class="content has-text-centered">
            <p><span class="has-text-danger"><em>Attention, cette version de l'application ne prend pas encore en charge la disponibilité des MJ ! Vous devez vous assurer de la disponibilité en contrôlant le planning.</em></span></p>
            <a class="button is-primary" href="#findSlot">Trouver un créneau</a>
            <a class="button is-warning" href="#" data-id="{{ path('app_manage_request_refuse', {id: partyRequest.id}) }}"  {{ stimulus_controller('admin_confirm') }}>Refuser</a>
        </div>
    </div>
    <hr class="jump-page" />
</section>

<section {{ stimulus_controller('request_process') }}>
    <a name="findSlot" id="findSlot"></a>
    <div clas="block">
        <div class="content">
            <h3 class="title is-3">Trouver un créneau libre</h3>
            <p class="subtitle is-5">Sélectionner le créneau pour la partie demandée.</p>
            <p>Au pied du planning, vous disposez d'un bouton pour refuser si cette demande ne peut pas être honorée. Cliquez sur le créneau pour passer à l'étape suivante.</p>
            <p><span class="has-text-danger"><em>Attention, cette version de l'application ne prend pas encore en charge la disponibilité des MJ ! Vous devez vous assurer de la disponibilité en contrôlant le planning.</em></span></p>
        </div>
        
        {{ component('Planning', {event: partyRequest.event, pathEmptySlot: 'app_manage', displayUnvalidates: true}) }}
    </div>
    <div class="content has-text-centered">
        <p>Aucun créneau disponible ne convient ?</p>
        <a class="button is-warning" href="#" data-id="{{ path('app_manage_request_refuse', {id: partyRequest.id}) }}"  {{ stimulus_controller('admin_confirm') }}>Refuser</a>
    </div>
    <hr class="jump-page" />
</section>

<section>
    <a name="lastStep" id="lastStep"></a>
    <div clas="block">
        <div class="content">
            <h3 class="title is-3">Finaliser la demande</h3>
            <p class="subtitle is-5">Sélectionner l'horaire de fin.</p>
            <p><span class="has-text-danger"><em>Attention, cette version de l'application ne prend pas encore en charge la disponibilité des MJ ! Vous devez vous assurer de la disponibilité en contrôlant le planning.</em></span></p>
        </div>
        
        <div class="content">
            {{ form_errors(form) }}
            {{ form_start(form) }}
            <div class="box">
                <div class="columns">
                    <div class="column">
                        <div class="field">
                            <label class="label">Horaire de début</label>
                            <a href="#findSlot" id="party_start"></a>
                            <small class="help"></small>Cliquez sur la date pour changer l'horaire de début et choisissez un autre créneau.</small>
                        </div>
                    </div>
                    <div class="column">
                        <div class="field">
                            <label class="label">Horaire de fin</label>
                            <select id="party_slots" name="party_slots" class="input">
                            </select>
                        </div>
                    </div>
                </div>       
            </div>
            {{ form_widget(form) }}
            <div class="control has-text-centered">
                <button class="button is-primary" type="submit">Envoyer</button>
                <a href="#" data-id="{{ path('app_manage_request_refuse', {id: partyRequest.getId}) }}" class="button is-warning" data-turbo="false" {{ stimulus_controller('admin_confirm') }}>Refuser</a>
            </div>
            {{ form_end(form) }}
        </div>
    </div>
</section>

{% endblock %}