{% block content %}
{% if modal %}<div class="modal-content">{% endif %}
<div id="wa-booking-{{ id }}" hx-target="this" hx-swap="outerHTML" class="frame" hx-indicator="#wa-booking-{{ id }}">
<div class="frame__header">
<h3>Reservierung</h3>
<div class="grid-md u-gap-2">
<div class="grid-c-6 mb-2 mb-0-md">
<div class="u-flex u-items-center u-gap-1">
<i class="icon-uhr-outline"></i>
<div class="t-label">Beginn</div>
</div>
<div class="">{{ slot.time|date('d.m.Y H:i') }}</div>
</div>
<div class="grid-c-6 mb-2 mb-0-md">
<div class="u-flex u-items-center u-gap-1">
<i class="icon-uhr-outline"></i>
<div class="t-label">Ende</div>
</div>
<div class="">{{ (slot.time + slot.duration * 60)|date('d.m.Y H:i') }}</div>
</div>
<div class="grid-c-6 mb-2 mb-0-md">
<div class="u-flex u-items-center u-gap-1">
<i class="icon-standort-outline"></i>
<div class="t-label">Standort</div>
</div>
<div class="">{{ standort.title }}</div>
</div>
{% if slot.anmerkungen %}
<div class="grid-c-12 mb-2 mb-0-md">
<div class="u-flex u-items-center u-gap-1">
<i class="icon-info-outline"></i>
<div class="t-label">Anmerkungen</div>
</div>
{{ slot.anmerkungen|raw }}
</div>
{% endif %}
</div>
</div>
<div class="divider m-0 mb-2"></div>
<div class="frame__body">
<h3>Reservierung ändern</h3>
{% if toast is defined %}
{{ toast|raw }}
{% endif %}
<form hx-post="/_ajax/vr_wa/v1/slot?do=updateReservation" enctype="multipart/form-data">
<input type="hidden" name="id" value="{{ id }}">
<div class="grid-md u-gap-2">
<div class="grid-c-6 mb-2 mb-0-md">
<fieldset>
<label for="res-behaeltereinheit"><strong>Mengeneinheit<sup class="text-danger">*</sup></strong></label>
<select id="res-behaeltereinheit" name="unit" hx-get="/_ajax/vr_wa/v1/slot?do=availableBookingUnitAmount&id={{ id }}" hx-target="#wa-booking-{{ id }} #res-behaelter" hx-trigger="change, load">
{% if not buchen.disable_base_unit %}
<option value=""{% if buchen.default_unit == '' %} selected{% endif %}>{{ 'tl_vr_wa_units.containers.0'|trans([], 'contao_tl_vr_wa_units') }}</option>
{% endif %}
{% for value, option in buchen.units %}
<option value="{{ value }}"{% if buchen.default_unit == value %} selected{% endif %}>{{ option }}</option>
{% endfor %}
</select>
</fieldset>
</div>
<div class="grid-c-6 mb-2 mb-0-md">
<fieldset>
<label for="res-behaelter"><strong>Menge<sup class="text-danger">*</sup></strong></label>
<select id="res-behaelter" name="behaelter" required>
<option value="">-</option>
{% for option in buchen.behaelter %}
{% if option > buchen.default %}
<option value="{{ option }}"{{ buchung.amount == option ? ' selected' : '' }}>{{ option }} ({{ 'MSC.wa_overbooking'|trans([], 'contao_default') }})</option>
{% else %}
<option value="{{ option }}"{{ buchung.amount == option ? ' selected' : '' }}>{{ option }}</option>
{% endif %}
{% endfor %}
</select>
</fieldset>
</div>
</div>
{% if attribute_groups is defined and attribute_groups|length > 0 %}
{% for group in attribute_groups %}
<fieldset>
<h5 class="legend">{{ group.title }}{% if group.required %}<sup class="text-danger">*</sup>{% endif %}</h5>
{% if group.description %}
<div class="fieldset-description"><span class="info">{{ group.description }}</span></div>
{% endif %}
{% for attribute in group.attributes %}
<div class="attribute-item">
{% if group.type == 'text' %}
<label for="b_attribute_{{ attribute.id }}"><strong>{{ attribute.title }}</strong></label>
<input type="text" id="b_attribute_{{ attribute.id }}" name="attribute_{{ attribute.id }}" class="form-control" value="{{ attribute.value }}">
{% if attribute.description %}
<div class="fieldset-description"><span class="info">{{ attribute.description }}</span></div>
{% endif %}
{% elseif group.type == 'option' %}
<div class="checkbox form-ext-control form-ext-{{ group.multiple ? 'checkbox' : 'radio' }}">
<input class="form-ext-input" type="{{ group.multiple ? 'checkbox' : 'radio' }}" id="b_attribute_{{ attribute.id }}" name="{{ group.multiple ? 'attribute_'~attribute.id : 'group_'~group.id }}" value="{{ attribute.id }}" {% if attribute.id == attribute.value %}checked{% endif %}>
<label class="form-ext-label" for="b_attribute_{{ attribute.id }}">{{ attribute.title }}</label>
</div>
{% endif %}
</div>
{% endfor %}
</fieldset>
{% endfor %}
{% endif %}
<fieldset>
<label for="res-annotation"><strong>Anmerkung</strong></label>
<textarea id="res-annotation" name="annotation">{{ buchung.annotation }}</textarea>
</fieldset>
{% if file is defined %}
<fieldset>
<div class="t-label">Aktuelle Datei</div>
<div class="u-flex u-items-center u-gap-1"><a href="{{ file.link }}">{{ file.name }}</a> <a href="javascript:;" hx-get="/_ajax/vr_wa/v1/slot?do=booking&id={{ id }}&modal=false&deleteFile=true" hx-target="closest .frame" hx-swap="outerHTML" class="tag tag__close-btn tag--danger tag--xs"></a></div>
</fieldset>
<fieldset>
<label for="res-upload"><strong>Datei überschreiben</strong></label>
<input type="file" id="res-upload" name="upload">
</fieldset>
{% else %}
<fieldset>
<label for="res-upload"><strong>Datei hochladen</strong></label>
<input type="file" id="res-upload" name="upload">
</fieldset>
{% endif %}
<fieldset>
<button type="submit">Speichern</button>
</fieldset>
</form>
</div>
<div class="loader animated loading"></div>
</div>
{% if modal %}</div>{% endif %}
{% endblock %}
{% block modal %}
{% if modal %}
<script>
(function ($) {
window.modals = window.modals || []
window.modals.wa_bookings = window.modals.wa_bookings || []
if (window.modals.wa_bookings.details{{ id }} === undefined)
{
window.modals.wa_bookings.details{{ id }} = new jBox('Modal', {
closeButton: 'box',
content: $('#wa-booking-{{ id }}'),
maxWidth: 650,
minWidth: 100,
minHeight: 100,
width: 650,
overlay: true,
closeOnClick: false,
zIndex: 'auto',
addClass: ''
}).open();
} else {
window.modals.wa_bookings.details{{ id }}.content.empty();
window.modals.wa_bookings.details{{ id }}.setContent($('#wa-booking-{{ id }}')).open();
}
})(jQuery);
</script>
{% endif %}
{% endblock %}