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

{% block title %}Affaires - James Gestion de Production{% endblock %}

{% block body %}  
{# <div class="mt-4 text-center"><h1>Planification</h1></div> #}
<div class="card mt-4">
    <div class="card-header">    
    </div>
    <div class="card-body">
        <div class="row">
            <ul class="list-group list-group-lg">
                <li class="list-group-item active">Planification banc {{banc.designation}} le {{dateCollage| date('d/m/Y')}} - Semaine : {{dateCollage|date('W')}}</li>     
                <li class="list-group-item">
                {# SÉLECTEUR DE BANC POUR CE JOUR #}
                  <form method="get"
                        action="{{ path('app_planification_detail', {
                          banc: 0,
                          jour: jour,
                          mois: mois,
                          annee: annee,
                          heure: heure,
                          minute: minute
                        }) }}"
                        class="d-inline">
                    <label for="banc-select" class="me-2">Changer de banc :</label>
                    <select name="bancId" id="banc-select" class="form-select d-inline w-auto"
                            onchange="this.form.action = this.form.action.replace('/0/', '/' + this.value + '/'); this.form.submit();">
                      {% for b in bancsPourJour %}
                        <option value="{{ b.id }}" {% if b.id == banc.id %}selected{% endif %}>
                          {{ b.designation }}
                        </option>
                      {% endfor %}
                    </select>
                  </form>
                </li>

            </ul>
            <div id="react-planification"></div>
            {{ encore_entry_link_tags('app') }}
            {{ encore_entry_script_tags('app') }}
        </div>
    </div>
</div>
<script>
  window.PLANIF = {
    bancId: {{ banc.id }},
    date: "{{ dateCollage.format('Y-m-d') }}",
    heure: "{{ heureCollage }}"
  };
</script>

{% endblock %}