{% extends '@Commercial/commercial/layout.html.twig' %}

{% block commercial_title %}Calendrier{% endblock %}

{% block commercial_content %}
<div class="commercial-calendar"
     data-controller="commercial-calendar"
     data-commercial-calendar-events-url-value="{{ path('commercial_calendar_api_events_list') }}"
     data-commercial-calendar-create-url-value="{{ path('commercial_calendar_api_events_create') }}"
     data-commercial-calendar-default-view-value="{{ calendarPreference.defaultView|default('month') }}"
     data-commercial-calendar-csrf-value="{{ csrf_token('commercial_calendar') }}">
  <header class="calendar-header">
    <div>
      <h1 class="capsule-titre">Calendrier</h1>
      <p class="capsule-sous-titre">Rendez-vous, tâches, calendrier société et événements Google réunis au même endroit.</p>
    </div>
    <div class="calendar-header-actions">
      {% if canSyncGoogle|default(false) %}
        <form method="post" action="{{ path('calendar_google_sync_now') }}">
          <input type="hidden" name="_token" value="{{ csrf_token('calendar_google_sync_now') }}">
          <button class="capsule-button capsule-button--secondary" type="submit"><i class="ti ti-refresh"></i> Synchroniser Google</button>
        </form>
      {% endif %}
      <a class="capsule-button capsule-button--secondary" href="{{ path('calendar_google_personal_index') }}"><i class="ti ti-brand-google"></i> Google personnel</a>
      <a class="capsule-button capsule-button--secondary" href="{{ path('commercial_calendar_settings') }}"><i class="ti ti-settings"></i> Paramètres</a>
      {% if is_granted('ROLE_SUPER_ADMIN') or is_granted('ROLE_ADMIN') or is_granted('ROLE_COMPANY_ADMIN') %}<a class="capsule-button capsule-button--secondary" href="{{ path('calendar_google_company_index') }}"><i class="ti ti-building"></i> Google société</a>{% endif %}
      {% if centralCalendar|default(false) %}<a class="capsule-button capsule-button--secondary" href="{{ path('calendar_booking_request_index') }}"><i class="ti ti-calendar-question"></i> Demandes</a><a class="capsule-button capsule-button--secondary" href="{{ path('calendar_sharing_index') }}"><i class="ti ti-users"></i> Partage</a>{% endif %}
      <a class="capsule-button capsule-button--primary" href="{{ path('calendar_event_new') }}"><i class="ti ti-calendar-plus"></i> Nouveau rendez-vous</a>
    </div>
  </header>

  {% for label, messages in app.flashes %}
    {% for message in messages %}<div class="alert alert-{{ label }}">{{ message }}</div>{% endfor %}
  {% endfor %}

  <section class="calendar-status-bar">
    {% set activeGoogleAccount = googleAccount and googleAccount.connected ? googleAccount : (companyGoogleAccount|default(null) and companyGoogleAccount.connected ? companyGoogleAccount : null) %}
    <span class="calendar-connection {{ activeGoogleAccount ? 'is-connected' : '' }}">
      <i class="ti ti-brand-google"></i>
      {{ activeGoogleAccount ? 'Google connecté · ' ~ activeGoogleAccount.googleAccountEmail : 'Google non connecté' }}
    </span>
    {% if not activeGoogleAccount %}
      <a href="{{ path('calendar_google_personal_connect') }}">Connecter mon Google Calendar</a>
    {% endif %}
    <a href="{{ path('commercial_calendar_conflicts') }}">Voir les conflits</a>
  </section>

  <div class="calendar-layout">
    <aside class="calendar-sidebar">
      <div class="calendar-filter">
        <label for="calendar-owner">Calendrier</label>
        <select id="calendar-owner" data-commercial-calendar-target="ownerFilter" data-action="change->commercial-calendar#reload">
          <option value="">Mon agenda</option>
          {% for commercial in users %}
            <option value="{{ commercial.id }}">{{ commercial.prenom }} {{ commercial.nom }}</option>
          {% endfor %}
        </select>
      </div>
      <fieldset class="calendar-filter">
        <legend>Types</legend>
        {% set types = {
          appointment: 'Rendez-vous',
          company: 'Calendrier société',
          task_reminder: 'Rappels',
          prospection_task: 'Prospection',
          commercial_activity: 'Activités CRM',
          project_task: 'Projets',
          external_google: 'Google'
        } %}
        {% for value, label in types %}
          {% set visible = calendarPreference.visibleLayers|default([]) %}{% set selected = not centralCalendar|default(false) or (value == 'appointment' and 'appointments' in visible) or (value == 'task_reminder' and ('tasks' in visible or 'routine_task' in visible)) or value in visible or (value == 'external_google' and 'google' in visible) %}<label class="calendar-check"><input type="checkbox" value="{{ value }}" {{ selected ? 'checked' }} data-commercial-calendar-target="typeFilter" data-action="change->commercial-calendar#reload"> {{ label }}</label>
        {% endfor %}
      </fieldset>
      {% if centralCalendar|default(false) %}<label class="calendar-check"><input type="checkbox" {{ calendarPreference.showCompletedTasks|default(false) ? 'checked' }} data-commercial-calendar-target="completedFilter" data-action="change->commercial-calendar#reload"> Tâches terminées</label><a class="small" href="{{ path('calendar_preference_edit') }}">Préférences d’affichage</a>{% endif %}
      <fieldset class="calendar-filter">
        <legend>Calendriers Google</legend>
        {% for source in calendarSources %}
          <label class="calendar-check"><span class="calendar-dot" style="--dot: {{ source.color }}"></span>{{ source.name }}</label>
        {% else %}
          <p class="text-muted small">Aucun calendrier connecté.</p>
        {% endfor %}
      </fieldset>
    </aside>

    <main class="calendar-card">
      <div class="calendar-toolbar">
        <div class="calendar-nav">
          <button type="button" aria-label="Période précédente" data-action="commercial-calendar#previous"><i class="ti ti-chevron-left"></i></button>
          <button type="button" data-action="commercial-calendar#today">Aujourd’hui</button>
          <button type="button" aria-label="Période suivante" data-action="commercial-calendar#next"><i class="ti ti-chevron-right"></i></button>
        </div>
        <h2 data-commercial-calendar-target="periodLabel"></h2>
        <div class="calendar-views" role="group" aria-label="Vue du calendrier">
          <button type="button" data-view="month" data-action="commercial-calendar#setView" class="active">Mois</button>
          <button type="button" data-view="week" data-action="commercial-calendar#setView">Semaine</button>
          <button type="button" data-view="day" data-action="commercial-calendar#setView">Jour</button>
          <button type="button" data-view="list" data-action="commercial-calendar#setView">Agenda</button>
        </div>
      </div>
      <div class="calendar-loading" data-commercial-calendar-target="loading" hidden><span class="spinner-border spinner-border-sm"></span> Chargement…</div>
      <div class="calendar-canvas" data-commercial-calendar-target="canvas" aria-live="polite"></div>
      <noscript>
        <div class="calendar-list">
          {% for item in fallbackItems|default([])|sort((a,b) => a.start <=> b.start) %}
            <article class="p-3 border-bottom"><strong>{% if item.extendedProps.taskSourceOfTruth|default(false) %}{% if item.extendedProps.url|default(false) %}<a href="{{ item.extendedProps.url }}">{{ item.title }}</a>{% else %}{{ item.title }}{% endif %}{% else %}<a href="{{ path('calendar_event_show',{token:item.id}) }}">{{ item.title }}</a>{% endif %}</strong><br><small>{{ item.start|date('d/m/Y à H:i') }}</small></article>
          {% else %}<p class="calendar-empty">Aucun élément dans les 31 prochains jours.</p>{% endfor %}
        </div>
      </noscript>
    </main>
  </div>

  {% set writableCalendarSources = calendarSources|filter(source => source.canWrite) %}
  {% set meetCalendarSources = writableCalendarSources|filter(source => source.supportsGoogleMeet) %}
  {% set verifiedMeetCalendarSources = writableCalendarSources|filter(source => source.googleMeetCapability == 'supported') %}
  <div class="modal fade calendar-event-modal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-commercial-calendar-target="dialog">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
      <div class="modal-content">
        <form data-action="submit->commercial-calendar#save">
          <div class="modal-header calendar-event-modal__header">
            <div class="calendar-event-modal__heading"><span><i class="ti ti-calendar-plus"></i></span><div><h2 class="modal-title" data-commercial-calendar-target="dialogTitle">Nouvel événement</h2><p>Planifiez le rendez-vous et invitez les collaborateurs concernés.</p></div></div>
            <button type="button" class="btn-close" data-action="commercial-calendar#closeDialog" aria-label="Fermer"></button>
          </div>
          <div class="modal-body calendar-event-modal__body">
            <section class="calendar-event-modal__section">
              <header><span><i class="ti ti-info-circle"></i></span><div><h3>Informations générales</h3><p>Décrivez l’événement et son niveau de visibilité.</p></div></header>
              <div class="calendar-form-grid">
                {% if internalCalendarChoices|default([])|length > 1 %}<label class="span-2">Calendrier<select name="internalCalendarToken">{% for internalCalendar in internalCalendarChoices %}<option value="{{ internalCalendar.publicId }}">{{ internalCalendar.label }}</option>{% endfor %}</select></label>{% endif %}
                <label class="span-2">Titre<input name="title" required maxlength="255" placeholder="Ex. Point de suivi commercial"></label>
                <label>Type<select name="sourceType"><option value="appointment">Rendez-vous</option><option value="commercial_activity">Activité CRM</option></select></label>
                <label>Statut<select name="status"><option value="confirmed">Confirmé</option><option value="tentative">Provisoire</option><option value="completed">Terminé</option></select></label>
                <label>Visibilité<select name="visibility"><option value="default">Par défaut</option><option value="private">Privé</option><option value="public">Public</option></select></label>
                <label>Rappel<select name="reminderPolicy"><option value="use_google_default">Défaut Google</option><option value="no_reminder">Aucun</option><option value="popup_10_min">10 minutes</option><option value="popup_30_min">30 minutes</option><option value="popup_1_hour">1 heure</option><option value="email_1_day">1 jour par e-mail</option></select></label>
              </div>
            </section>

            <section class="calendar-event-modal__section">
              <header><span class="is-violet"><i class="ti ti-users"></i></span><div><h3>Participants</h3><p>Les personnes invitées retrouveront l’événement dans leur calendrier et recevront l’invitation.</p></div></header>
              <div class="calendar-form-grid">
                <label class="span-2">Inviter des personnes
                  <select name="internalParticipantTokens[]" multiple data-controller="tom-select" data-tom-select-placeholder-value="Rechercher une personne…" data-commercial-calendar-target="participants">
                    {% for participant in participants|default([]) %}{% if participant.id != app.user.id %}<option value="{{ participant.idtoken }}">{{ participant.prenom }} {{ participant.nom }} · {{ participant.email }}</option>{% endif %}{% endfor %}
                  </select>
                </label>
                <label class="span-2">Responsable de l’événement<select name="assignedToId"><option value="">Non assigné</option>{% for commercial in users %}<option value="{{ commercial.id }}">{{ commercial.prenom }} {{ commercial.nom }}</option>{% endfor %}</select></label>
              </div>
            </section>

            <section class="calendar-event-modal__section">
              <header><span class="is-green"><i class="ti ti-clock"></i></span><div><h3>Date et lieu</h3><p>Définissez le créneau et les informations de connexion.</p></div></header>
              <div class="calendar-form-grid">
                <label>Début<input type="datetime-local" name="startsAt" required></label>
                <label>Fin<input type="datetime-local" name="endsAt" required></label>
                <label class="span-2">Lieu<input name="location" placeholder="Adresse ou salle"></label>
                <div class="calendar-meeting-row span-2">
                  <label data-commercial-calendar-target="meetingUrlGroup">Lien de réunion<input type="url" name="meetingUrl" placeholder="https://…" data-commercial-calendar-target="meetingUrl"></label>
                  <label class="calendar-meet-toggle {{ meetCalendarSources|length ? '' : 'is-disabled' }}"><input type="checkbox" name="createGoogleMeet" value="1" {{ meetCalendarSources|length ? '' : 'disabled' }} data-commercial-calendar-target="googleMeet" data-action="change->commercial-calendar#toggleGoogleMeet"><span><i class="ti ti-brand-google"></i><strong>Générer le lien Google Meet</strong><small>{% if verifiedMeetCalendarSources|length %}Le lien sera créé et envoyé aux participants.{% elseif meetCalendarSources|length %}Capacité non vérifiée : Capsule demandera directement la création à Google.{% else %}Aucun calendrier Google accessible en écriture n’autorise Meet.{% endif %}</small></span></label>
                </div>
                <label class="span-2">Description<textarea name="description" rows="4" placeholder="Ordre du jour, informations utiles…"></textarea></label>
              </div>
            </section>

            {% if writableCalendarSources|length %}
            <section class="calendar-event-modal__section calendar-event-modal__google">
              <header><span class="is-blue"><i class="ti ti-brand-google"></i></span><div><h3>Synchronisation Google</h3><p>Choisissez le calendrier qui portera l’événement et les invitations.</p></div></header>
              <div class="calendar-sync-modern">
                <label class="form-check form-switch"><input class="form-check-input" type="checkbox" name="syncEnabled" value="1" data-commercial-calendar-target="syncEnabled"><span>Synchroniser avec Google Calendar</span></label>
                <select name="calendarSourceId" data-commercial-calendar-target="calendarSource" data-action="change->commercial-calendar#calendarSourceChanged"><option value="">Choisir un calendrier</option>{% for source in writableCalendarSources %}<option value="{{ source.id }}" data-supports-meet="{{ source.supportsGoogleMeet ? '1' : '0' }}" data-meet-capability="{{ source.googleMeetCapability }}" data-calendar-token="{{ source.localCalendar ? source.localCalendar.publicId : '' }}">{{ source.name }}{% if source.googleMeetCapability == 'supported' %} · Google Meet{% elseif source.googleMeetCapability == 'unknown' %} · Meet à vérifier{% endif %}</option>{% endfor %}</select>
              </div>
            </section>
            {% endif %}
            <p class="calendar-form-error" data-commercial-calendar-target="formError" hidden></p>
          </div>
          <div class="modal-footer calendar-event-modal__footer">
            <a class="btn btn-outline-secondary me-auto" target="_blank" rel="noopener" hidden data-commercial-calendar-target="googleLink"><i class="ti ti-brand-google"></i> Ouvrir dans Google</a>
            <button type="button" class="btn btn-outline-danger" hidden data-commercial-calendar-target="cancelButton" data-action="commercial-calendar#cancelEvent">Annuler l’événement</button>
            <button type="button" class="btn btn-outline-success" hidden data-commercial-calendar-target="completeButton" data-action="commercial-calendar#completeTask">Terminer</button>
            <button type="button" class="btn btn-light" data-action="commercial-calendar#closeDialog">Fermer</button>
            <button class="btn btn-primary" type="submit"><i class="ti ti-device-floppy"></i> Enregistrer</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <dialog class="calendar-dialog calendar-detail-dialog" data-commercial-calendar-target="detailDialog">
    <div class="calendar-detail">
      <header>
        <div>
          <span class="calendar-detail-type" data-commercial-calendar-target="detailType"></span>
          <h2 data-commercial-calendar-target="detailTitle">Détail de l’événement</h2>
        </div>
        <button type="button" data-action="commercial-calendar#closeDetail" aria-label="Fermer">×</button>
      </header>
      <div class="calendar-detail-body">
        <span class="calendar-detail-status" data-commercial-calendar-target="detailStatus"></span>
        <dl>
          <div>
            <dt><i class="ti ti-calendar-event"></i>Date et heure</dt>
            <dd data-commercial-calendar-target="detailDate"></dd>
          </div>
          <div data-commercial-calendar-target="detailOwnerRow">
            <dt><i class="ti ti-user"></i>Assigné à</dt>
            <dd data-commercial-calendar-target="detailOwner"></dd>
          </div>
          <div data-commercial-calendar-target="detailLocationRow">
            <dt><i class="ti ti-map-pin"></i>Lieu</dt>
            <dd data-commercial-calendar-target="detailLocation"></dd>
          </div>
          <div class="calendar-detail-description" data-commercial-calendar-target="detailDescriptionRow">
            <dt><i class="ti ti-align-left"></i>Description</dt>
            <dd data-commercial-calendar-target="detailDescription"></dd>
          </div>
        </dl>
        <p class="calendar-detail-notice" data-commercial-calendar-target="detailNotice" hidden>
          <i class="ti ti-info-circle"></i>
          Cet élément est géré depuis sa fiche métier et ne peut pas être modifié ici.
        </p>
      </div>
      <footer>
        <a class="btn btn-outline-primary" target="_blank" rel="noopener noreferrer" data-commercial-calendar-target="detailMeetingLink" hidden>
          <i class="ti ti-video"></i>Rejoindre la réunion
        </a>
        <a class="btn btn-outline-secondary" target="_blank" rel="noopener noreferrer" data-commercial-calendar-target="detailGoogleLink" hidden>
          <i class="ti ti-brand-google"></i>Ouvrir dans Google
        </a>
        <button type="button" class="btn btn-light ms-auto" data-action="commercial-calendar#closeDetail">Fermer</button>
        <button type="button" class="btn btn-primary" data-commercial-calendar-target="detailEditButton" data-action="commercial-calendar#editSelectedEvent">
          <i class="ti ti-edit"></i>Modifier
        </button>
      </footer>
    </div>
  </dialog>
</div>
{% endblock %}