nouveau-theatre-de-besancon/site/templates/program.php

<?php snippet('header') ?>
<div 
  class="program-methods"
  x-data="{
    setInitialTab() {
      const queryString = window.location.search;
      if (queryString.length === 0) return 'Programme';
      const urlParams = new URLSearchParams(queryString);
      const tab = urlParams.get('tab');
      return tab;
    },
    disableEmptySections() {
      setTimeout(() => {
        const sections = document.querySelectorAll('.collapsable')
        sections.forEach(section => {
          const sessions = section.querySelector('.sessions li')
          const toggleBtn = section.querySelector('.toggle')

          if (sessions) {
            toggleBtn.removeAttribute('disabled')
            toggleBtn.setAttribute('title', '')
            toggleBtn.querySelector('.arrow-right').classList.remove('unvisible')
          } else {
            toggleBtn.setAttribute('disabled', true)
            toggleBtn.setAttribute('title', 'aucune séance')
            toggleBtn.querySelector('.arrow-right').classList.add('unvisible')
          }
        })
      })
    },
    scrollToNextClosestDate() {
      const nodes = document.querySelectorAll('.sessions [data-date]');
      const today = new Date();
      today.setHours(0, 0, 0, 0);

      const nextNode = Array.from(nodes).find(node => {
        const date = new Date(node.getAttribute('data-date'));
        date.setHours(0, 0, 0, 0);
        return date >= today;
      });

      if (nextNode) {
        nextNode.scrollIntoView({ behavior: 'smooth' });
      }
    },

    getFilter(string) {
      return string.split('—')[1].trim()
    }
  }"
>
  <div class="program-data"
    x-data="{
      tab: setInitialTab(),
      filter: null
    }"
    x-init="
      disableEmptySections()
      $watch('tab', value => {
        disableEmptySections()
      })
    "
  >
  
  
    <section class="filters">
      <button 
        x-data="{title: 'Calendrier'}"
        x-text="title"
        :class="tab === title ? 'strong' : ''"
        @click="
          tab = title
          
          const url = new URL(window.location.href);
          url.searchParams.set('tab', tab);
          window.history.pushState({}, '', url);
          setTimeout(scrollToNextClosestDate, 100)
          "
      ></button>
      <?php foreach($page->categories()->split() as $filter): ?>
        <button
          x-data="{
            title: '<?= $filter ?>',
            get filterTitle() {
              if(tab.includes('Calendrier')){
                return 'Calendrier — ' + this.title
              }
              else{
                return this.title
              }
            }
          }"
          x-text="title"
          :class="tab === filterTitle ? 'strong' : ''"
          @click="
            tab = filterTitle;
            filter = title; /* où est utiliser cette vriable ? */
            const url = new URL(window.location.href);
            url.searchParams.set('tab', tab);
            window.history.pushState({}, '', url);
            setTimeout(scrollToNextClosestDate, 100);

          "
        ></button>
      <?php endforeach ?>
    </section>
    <section class="page-title">
      <h1 x-text="tab"></h1>
    </section>
    <!-- Programme -->
    <template x-if="!tab.includes('Calendrier')">
      <div class="program-content__events">

      <?php
        $categoriesInNextEvents = [];
        foreach($events['next'] as $event) {
          foreach($event->categories()->split() as $cat) {
            $categoriesInNextEvents[] = $cat;
          }
        }
        $categoriesInNextEvents = array_values(array_unique($categoriesInNextEvents));
        $hasNextEvents = count($events['next']) > 0;
      ?>

      <template
        x-if="<?= $hasNextEvents ? 'true' : 'false' ?> && (tab === 'Programme' || <?= htmlspecialchars(json_encode($categoriesInNextEvents)) ?>.includes(tab))"
      >
        <div class="temporality-wrapper">
          <section class="yellow">
            <h2>Prochainement — <?= $page->children()->first()->title() ?></h2>
          </section>
          <?php snippet('events-grid', ['events' => $events['next'], 'columns' => 3]) ?>
        </div>
      </template>

        <?php
          $categoriesInPrevEvents = [];
          foreach($events['previous'] as $event) {
            foreach($event->categories()->split() as $cat) {
              $categoriesInPrevEvents[] = $cat;
            }
          }
          $categoriesInPrevEvents = array_values(array_unique($categoriesInPrevEvents));
          $hasPrevEvents = $events['previous']->count() > 0;
        ?>

        <template
          x-if="<?= $hasPrevEvents ? 'true' : 'false' ?> && (tab === 'Programme' || <?= htmlspecialchars(json_encode($categoriesInPrevEvents)) ?>.includes(tab))"
        >
          <div class="temporality-wrapper">
            <section class="yellow">
              <h2>Événements passés</h2>
            </section>
            <?php snippet('events-grid', ['events' => $events['previous'], 'columns' => 3]) ?>
          </div>
        </template>
      </div>
    </template>

    <!-- Calendrier -->
    <template x-if="tab.includes('Calendrier')">
      <div class="program-content__events">
        <section class="collapsable-sections">
          <?php 
          $currentMonth = date('n');
          foreach($currentSeasonSessions as $month => $sessions): ?>
            <?php
              $open = getMonthNumber($month) == $currentMonth || getMonthNumber($month) == $currentMonth + 1;
            ?>
            <?php if (count($sessions) > 0): ?>
              <?php snippet('collapsable-section', ['title' => $month, 'padding' => false, 'open' => $open], slots: true) ?>
                <?php slot('content') ?>

                <ul 
                  class="sessions sessions--detailed"
                  x-init="
                    scrollToNextClosestDate()
                    
                  "
                >
                  <?php
                    foreach($sessions as $session):
                      $date = new DateTime($session['date']);
                      $formatter = new IntlDateFormatter('fr_FR', IntlDateFormatter::NONE, IntlDateFormatter::NONE);
                      $formattedDate = $formatter->formatObject($date, "d MMMM");
                  ?>
                    <template 
                      x-if="tab === 'Calendrier' || ('<?= $session['categories'] ?>'.length > 0 && '<?= $session['categories'] ?>'.includes(getFilter(tab)))"
                    >
                    <li id="<?= Str::slug($session['title']) ?>" class="collapsable__item--padding session grid js-link" style="--color: <?= $session['color'] ?>" data-date="<?= $session['date'] ?>">
                      <div class="left-column">
                        <div class="session__info">
                          <p><?= $formattedDate ?></p>
                          <p><?= $session['time'] ?></p>
                        </div>
                        <div class="session__info">
                          <p><strong><?= $session['title'] ?></strong></p>
                          <p><?= $session['authors'] ?></p>
                        </div>
                      </div>
                      <div class="right-column">
                        <div class="mobile-group">
                          <div class="session__info">
                            <?php if (strlen($session['duration']) > 0 || strlen($session['public']) > 0): ?>
                              <p>
                                <?php if (strlen($session['duration']) > 0): ?>
                                  Durée : <?= $session['duration'] ?><br />
                                <?php endif ?>
                                <?php if (strlen($session['public']) > 0): ?>
                                  <?= $session['public'] ?>
                                <?php endif ?>
                              </p>
                            <?php endif ?>
                          </div>
                          <div class="session__info">
                            <p><?= $session['place'] ?></p>
                          </div>
                        </div>
                        <div class="session__info session__info--ticket">
                          <?php if ($session['bookableStock'] === 'free'): ?>
                            <?php if (strlen($session['ticketingUrl']) > 0): ?>
                              <a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank" tabindex="-1"><?php snippet('ticket') ?>Billetterie</a>
                            <?php else: ?>
                            <a class="ticket-link" title="Entrée libre" disabled tabindex="-1"><?php snippet('ticket') ?>Entrée libre</a>
                            <?php endif ?>
                          <?php elseif ($session['bookableStock'] == 0): ?>
                            <a class="ticket-link" title="Séance complète" disabled tabindex="-1"><?php snippet('ticket') ?>Complet</a>
                          <?php elseif ($session['bookableStock'] < (($session['totalStock'] / 100) * 25)): ?>
                            <a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank" tabindex="-1"><?php snippet('ticket') ?>Plus que quelques places !</a>
                          <?php else: ?>
                            <a class="ticket-link" title="Plateforme de réservation" href="<?= $session['ticketingUrl'] ?>" target="_blank" tabindex="-1"><?php snippet('ticket') ?>Billetterie</a>
                          <?php endif ?>
                        </div>
                      </div>
                      <a class="event-link" href="<?= $session['event-url'] ?>" title="En savoir plus" tabindex="-1"></a>
                    </li>
                    </template>
                    <?php endforeach ?>
                  </ul>
                <?php endslot() ?>
              <?php endsnippet() ?>
            <?php endif ?>
          <?php endforeach ?>
        </section>
      </div>
    </template>  
  </div>
</div>
<?php snippet('footer') ?>