{% include 'partials/header.html.twig' %}

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/fr.js"></script>

    <script src="{{ asset('assets/libs/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/libs/select2/js/select2.min.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('assets/libs/select2/css/select2.min.css') }}">

    {% set info = get_global_parameters() %}



<style>
.drag-over { outline: 2px dashed grey; }

#loader .spinner-border {
    width: 3rem;
    height: 3rem;
}

.planning-empty {
    position: relative;
    min-height: 40px; /* adapte selon ta table */
}

.planning-empty:hover::after {
    content: 'Ajouter';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #007bff;
    font-weight: bold;
    pointer-events: none;
    background: rgba(255,255,255,0.9);
    border-radius: 4px;
    padding: 2px 8px;
    z-index: 2;
}

.planning-cell {
    min-width: 64px; /* ou 64px, ajuste selon tes besoins et la taille du tableau */
    max-width: 64px;
    width: 64px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 4px 2px !important;
}

.planning-cell-week {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 4px 2px !important;
}
.planning-cell-height {
    min-height: 72px; /* ou 64px, ajuste selon tes besoins et la taille du tableau */
    max-height: 72px;
    height: 72px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 4px 2px;
}

.planning-slot.slot-valide {
    background: #d1e7dd !important; /* Vert pâle, Bootstrap success */
    color: #155724 !important;
}

.planning-slot.slot-nonvalide {
    background: #f8d7da !important; /* Rouge pâle, Bootstrap danger */
    color: #721c24 !important;
}

.planning-slot.slot-publie {
    background: #fff3cd !important; /* Bootstrap warning background */
    color: #856404 !important;      /* Bootstrap warning text */
    border: 1px solid #ffeeba !important;
}

.sticky-col {
    position: sticky;
    left: 0;
    z-index: 2; /* Plus que les autres cellules */
    background: #fff; /* ou la couleur de ton tableau */
    /* Optionnel : bordure visuelle */
    box-shadow: 2px 0 2px -2px rgba(0,0,0,0.1);
}
.table thead .sticky-col {
    z-index: 3; /* Un peu plus haut pour l'en-tête */
}


</style>
<div class="body-wrapper">
    <div class="container-fluid">
      <div class="card bg-primary-subtle shadow-none position-relative overflow-hidden mb-4">
          <div class="card-body px-4 py-3">
              <div class="row align-items-center">
                  <div class="col-9">
                      <h4 class="fw-semibold mb-8">Planning Hebdomadaire</h4>
                  </div>
                  <div class="col-3">
                        <div class="text-center">
                            <button type="button" class="btn btn-light " data-bs-toggle="modal" data-bs-target="#parametreModal">
                                <iconify-icon icon="solar:settings-broken" class="fs-5 mb-n1 me-1"></iconify-icon>
                                Paramètres
                            </button>
                        </div>
                    </div>
              </div>
          </div>
      </div>

      <div class="card">
        <div class="card-body">
          <div class="mb-3">
            <button class="btn btn-outline-primary view-switch" data-view="day">Jour</button>
            <button class="btn btn-outline-primary view-switch" data-view="week">Semaine</button>
            <button class="btn btn-outline-primary view-switch" data-view="month">Mois</button>
          </div>
          <div id="planning-scroll" data-simplebar data-simplebar-auto-hide="false" style="max-width:100%; overflow: scroll;">
          </div>
        </div>
      </div>
    </div>  
</div>

 <!-- Modal calendrier -->
<div class="modal fade" id="calendarModal" tabindex="-1" aria-labelledby="calendarModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content" style="width:350px;">
      <div class="modal-header">
        <h5 class="modal-title" id="calendarModalLabel">Choisir une date</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <div class="modal-body">
        <div id="calendar-picker"></div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form id="filter-form">
        <div class="modal-header">
          <h5 class="modal-title" id="filterModalLabel">Filtrer par rôle</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <div class="modal-body">
          <select id="role-filter-select" name="roles[]" class="form-select" multiple style="width:100%;">
            {% for role in roles %}
                <option value="{{ role.id }}">{{ role.nom }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Fermer</button>
          <button type="submit" class="btn btn-primary">Filtrer</button>
        </div>
      </form>
    </div>
  </div>
</div>


    <script src="{{ asset('assets/js/bundle/planning.js') }}"></script>

<script>

// Calcul du lundi de la semaine courante
// Gestion navigation semaine
function getMonday(date) {
    let d = new Date(date), day = d.getDay(), diff = d.getDate() - day + (day === 0 ? -6 : 1);
    return new Date(d.setDate(diff));
}
let currentWeekStart = getMonday(new Date());
function updateWeekLabel() {
    $('#current-week-label').text(
        'Semaine du ' + currentWeekStart.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' })
    );
}

$(function() {
    $('#role-filter-select').select2({
        dropdownParent: $('#filterModal'),
        width: '100%',
        placeholder: 'Sélectionnez des rôles'
    });
});


</script>
{% include '@Planning/planning/modal/parametres.html.twig' %}
{% include 'partials/footer.html.twig' %}