{% extends '@Commercial/commercial/layout.html.twig' %}
{% block commercial_title %}{{ editing|default(false) ? 'Modifier l’événement' : 'Nouvel événement' }}{% endblock %}
{% block commercial_content %}
<div class="container-fluid py-4">
  <header class="capsule-heading"><div><h1 class="capsule-titre">{{ editing|default(false) ? 'Modifier l’événement' : 'Nouvel événement' }}</h1><p class="capsule-sous-titre">Créez un rendez-vous dans votre agenda ou dans un calendrier partagé.</p></div><a class="capsule-button capsule-button--secondary" href="{{ editing|default(false) ? path('calendar_event_show',{token:event.publicId}) : path('calendar_dashboard') }}">Annuler</a></header>
  {% for error in errors %}<div class="alert alert-danger">{{ error }}</div>{% endfor %}
  <form method="post" class="card p-4">
    <input type="hidden" name="_token" value="{{ csrf_token(editing|default(false) ? 'calendar_event_edit_'~event.publicId : 'calendar_event_create') }}">
    <div class="row g-3">
      <div class="col-md-6"><label class="form-label">Calendrier</label><select class="form-select" name="event[calendarToken]">{% for calendar in calendars %}<option value="{{ calendar.publicId }}" {{ data.calendarToken|default('') == calendar.publicId ? 'selected' }}>{{ calendar.label }}</option>{% endfor %}</select></div>
      <div class="col-md-6"><label class="form-label">Type</label><select class="form-select" name="event[eventType]">{% for value,label in {appointment:'Rendez-vous',meeting:'Réunion',absence:'Absence',other:'Autre'} %}<option value="{{ value }}" {{ data.eventType|default('appointment') == value ? 'selected' }}>{{ label }}</option>{% endfor %}</select></div>
      <div class="col-12"><label class="form-label">Titre</label><input required maxlength="255" class="form-control" name="event[title]" value="{{ data.title|default('') }}"></div>
      <div class="col-md-3"><label class="form-label">Date de début</label><input required type="date" class="form-control" name="event[startDate]" value="{{ data.startDate|default('') }}"></div>
      <div class="col-md-3"><label class="form-label">Heure de début</label><input required type="time" class="form-control" name="event[startTime]" value="{{ data.startTime|default('') }}"></div>
      <div class="col-md-3"><label class="form-label">Date de fin</label><input required type="date" class="form-control" name="event[endDate]" value="{{ data.endDate|default('') }}"></div>
      <div class="col-md-3"><label class="form-label">Heure de fin</label><input required type="time" class="form-control" name="event[endTime]" value="{{ data.endTime|default('') }}"></div>
      <div class="col-md-6"><label class="form-label">Lieu</label><input class="form-control" name="event[location]" value="{{ data.location|default('') }}"></div>
      <div class="col-md-6"><label class="form-label">Visibilité</label><select class="form-select" name="event[visibilityLevel]"><option value="details" {{ data.visibilityLevel|default('details') == 'details' ? 'selected' : '' }}>Détails visibles</option><option value="busy_only" {{ data.visibilityLevel|default('') == 'busy_only' ? 'selected' : '' }}>Occupé uniquement</option><option value="private" {{ data.visibilityLevel|default('') == 'private' ? 'selected' : '' }}>Privé</option></select></div>
      <div class="col-12"><label class="form-label">Description</label><textarea class="form-control" rows="4" name="event[description]">{{ data.description|default('') }}</textarea></div>
      <div class="col-md-6"><label class="form-label">Mode du rendez-vous</label><select class="form-select" name="event[meetingMode]">{% for value,label in {in_person:'Présentiel',video:'Visioconférence',phone:'Téléphone',other:'Autre'} %}<option value="{{ value }}" {{ data.meetingMode|default('other') == value ? 'selected' : '' }}>{{ label }}</option>{% endfor %}</select></div>
      <div class="col-md-6"><label class="form-label">Lien de conférence manuel</label><input type="url" class="form-control" name="event[manualConferenceUrl]" value="{{ data.manualConferenceUrl|default('') }}"></div>
      <div class="col-md-6"><label class="form-label">Participants internes</label><select multiple class="form-select" name="event[internalParticipantTokens][]">{% for employee in employees %}<option value="{{ employee.idtoken }}" {{ employee.idtoken in data.internalParticipantTokens|default([]) ? 'selected' : '' }}>{{ employee }}</option>{% endfor %}</select><div class="form-text">Utilisez Ctrl/Cmd pour sélectionner plusieurs salariés.</div></div>
      {% set externalCount = data.externalParticipants|default([])|length %}{% set externalLast = externalCount > 3 ? externalCount - 1 : 2 %}<div class="col-md-6"><label class="form-label">Participants externes</label>{% for index in 0..externalLast %}{% set participant = data.externalParticipants[index]|default({}) %}<div class="input-group mb-2"><input class="form-control" name="event[externalParticipants][{{ index }}][name]" placeholder="Nom" value="{{ participant.name|default('') }}"><input type="email" class="form-control" name="event[externalParticipants][{{ index }}][email]" placeholder="email@exemple.fr" value="{{ participant.email|default('') }}"><span class="input-group-text"><input class="form-check-input mt-0" type="checkbox" name="event[externalParticipants][{{ index }}][optional]" value="1" aria-label="Facultatif" {{ participant.optional|default(false) ? 'checked' : '' }}>&nbsp;Facultatif</span></div>{% endfor %}</div>
      <div class="col-md-3"><label class="form-check"><input class="form-check-input" type="checkbox" name="event[allDay]" value="1" {{ data.allDay|default(false) ? 'checked' }}> Toute la journée</label></div>
      <div class="col-md-3"><label class="form-check"><input class="form-check-input" type="checkbox" name="event[blocksAvailability]" value="1" {{ data.blocksAvailability|default(true) ? 'checked' }}> Bloque la disponibilité</label></div>
      <div class="col-md-4"><label class="form-check"><input class="form-check-input" type="checkbox" name="event[sendInvitations]" value="1" {{ data.sendInvitations|default(false) ? 'checked' }}> Envoyer les invitations</label></div>
      <div class="col-md-4"><label class="form-check"><input class="form-check-input" type="checkbox" name="event[createGoogleMeet]" value="1" {{ data.createGoogleMeet|default(false) ? 'checked' }}> Ajouter Google Meet</label></div>
    </div>
    <input type="hidden" name="event[timeZone]" value="Europe/Paris"><input type="hidden" name="event[status]" value="confirmed"><input type="hidden" name="event[visibility]" value="default">
    <button class="capsule-button capsule-button--primary align-self-start mt-4">{{ editing|default(false) ? 'Enregistrer' : 'Créer l’événement' }}</button>
  </form>
</div>
{% endblock %}