{% block content %}
{% if modal %}<div class="modal-content">{% endif %}
<div id="wa-slot-{{ id }}" class="frame" hx-get="/_ajax/vr_wa/v1/slot?do=details&id={{ id }}&modal=false" hx-target="this" hx-swap="outerHTML" hx-trigger="updateWaBooking from:body">
<div class="frame__header">
<h3>Zeitslot</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">Tag/Urzeit</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-standort-outline"></i>
<div class="t-label">Standort</div>
</div>
<div class="">{{ standort.title }}</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-behaelter-outline"></i>
<div class="t-label">Verfügbare Behälterkapazität</div>
</div>
<div class="">{{ slot.behaelterAvailable }}</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-schere-outline"></i>
<div class="t-label">Erntearten</div>
</div>
<div class="">{{ ernteart|join(', ') }}</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-reben-outline"></i>
<div class="t-label">Verarbeitete Sorten</div>
</div>
<div class="">{{ slot.sorte|join(', ') }}</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-lage-outline"></i>
<div class="t-label">Lagen</div>
</div>
<div class="">{{ lage|join(', ') }}</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>
{% if reservations|length %}
<div class="divider m-0 mb-2"></div>
<div class="frame__body">
<h4>Ihre Reservierungen</h4>
<ul class="no-bullets mx-0 reservations">
{% for reservation in reservations %}
{% if reservation.approved == '1' %}
{% set status = 'approved' %}
{% elseif reservation.approved == '0' %}
{% set status = 'canceled' %}
{% else %}
{% set status = 'pending' %}
{% endif %}
<li class="row u-items-center p-0 py-1 status status--{{ status }}">
<div class="col-1">
<div class="u-flex u-items-center u-gap-1">
<i class="status-icon">{{ ('MSC.wa_approval_status.'~status)|trans([], 'contao_default') }}</i>
</div>
</div>
<div class="col-2">
<div class="u-flex u-items-center u-gap-1">
<i class="icon-behaelter-outline"></i>
{{ reservation.behaelter }}
{% set uTitle = reservation.unit_title|default('Behälter') %}
{% set uAmount = reservation.unit_amount_display|default(reservation.behaelter) %}
<span class="text-sm text-muted"> ({{ uAmount }} × {{ uTitle }})</span>
</div>
</div>
<div class="col-6">
<div class="u-flex u-items-center u-gap-1">
<i class="icon-reben-outline"></i>
{{ reservation.sorten|join(', ') }}
</div>
</div>
<div class="col u-text-right">
{% if reservation.approved != '0' and not reservation.checked_in %}<div><a hx-get="/_ajax/vr_wa/v1/slot?do=booking&id={{ reservation.id }}" hx-target="body" hx-swap="beforeend" href="javascript:;" class="btn btn--sm m-0">Bearbeiten</a></div>{% endif %}
</div>
</li>
{% endfor %}
</ul>
<div class="u-flex u-items-center u-gap-2 px-1 text-sm">
<div><strong>Legende:</strong></div>
<div class="u-flex u-items-center u-gap-1">
<i class="status-icon status--approved status--small"></i>
angenommen
</div>
<div class="u-flex u-items-center u-gap-1">
<i class="status-icon status--pending status--small"></i>
Freigabe ausstehend
</div>
<div class="u-flex u-items-center u-gap-1">
<i class="status-icon status--canceled status--small"></i>
abgelehnt
</div>
</div>
</div>
{% endif %}
<div class="divider m-0 mb-2"></div>
<div class="frame__body">
<h4>Reservieren</h4>
{% if toast is defined %}
{{ toast|raw }}
{% endif %}
{% if slot.behaelterAvailable < 1 %}
<div class="toast toast--warning mx-0">
<p class="warning">Für diesen Slot können nur noch Reservierungsanfragen gestellt werden.</p>
</div>
{% endif %}
{% if buchen.buchbar %}
<form hx-post="/_ajax/vr_wa/v1/slot?do=reservate" enctype="multipart/form-data">
<input type="hidden" name="id" value="{{ id }}">
<fieldset>
<label for="res-unit"><strong>Einheit<sup class="text-danger">*</sup></strong></label>
<select id="res-unit" name="unit_id" required>
{% for unit in buchen.units %}
<option value="{{ unit.id }}" data-multiplier="{{ unit.multiplier }}">{{ unit.title }}</option>
{% endfor %}
</select>
</fieldset>
<fieldset>
<label for="res-unit-amount"><strong>Anzahl<sup class="text-danger">*</sup></strong></label>
<select id="res-unit-amount" name="unit_amount" required>
<!-- options will be populated by script based on selected unit and capacity -->
</select>
{#<div class="text-sm text-muted">Verbleibende Kapazität (Basis): {{ slot.behaelterAvailable }}</div>#}
</fieldset>
<script>
(function(){
var container = document.getElementById('wa-slot-{{ id }}');
if(!container) return;
var units = {{ buchen.units|json_encode|raw }};
var unitSel = container.querySelector('#res-unit');
var amtSel = container.querySelector('#res-unit-amount');
function fillAmounts(){
if(!unitSel||!amtSel) return;
var id = parseInt(unitSel.value||0,10);
var u = units.find(function(x){return x.id == id;});
if(!u){ amtSel.innerHTML=''; return; }
var html = '<option value="">-</option>';
var base = {{ slot.behaelter|default(0) }};
var booked = {{ slot.behaelterBooked|default(0) }};
var remainingOcBase = Math.max(0, Math.floor(base * 1.5) - booked);
var overByUnit = Math.floor(remainingOcBase / Math.max(1, parseInt(u.multiplier||1,10)));
var maxByUnit = Math.max(u.max_amount, overByUnit);
for(var i=1;i<=maxByUnit;i++){
var label = ''+i;
if(i > u.max_amount){ label = label + ' ({{ 'MSC.wa_approval_needed'|trans([], 'contao_default') }})'; }
html += '<option value="'+i+'">'+label+'</option>';
}
amtSel.innerHTML = html;
}
if(unitSel){
// avoid duplicate listeners by resetting
unitSel.onchange = null;
unitSel.addEventListener('change', fillAmounts, { once:false });
}
fillAmounts();
})();
</script>
<fieldset>
<legend>Anliefernde Rebsorte(n)<sup class="text-danger">*</sup></legend>
{% for value,label in buchen.sorten %}
<label><input type="checkbox" name="sorten[]" value="{{ value }}"> <span class="checkable">{{ label }}</span></label><br>
{% endfor %}
</fieldset>
<fieldset>
<legend>Ernteart(en)<sup class="text-danger">*</sup></legend>
{% for value,label in buchen.ernteart %}
<label><input type="checkbox" name="ernteart[]" value="{{ value }}"> <span class="checkable">{{ label }}</span></label><br>
{% endfor %}
</fieldset>
<fieldset>
<legend>Lage(n)<sup class="text-danger">*</sup></legend>
{% for value,label in buchen.lage %}
<label><input type="checkbox" name="lage[]" value="{{ value }}"> <span class="checkable">{{ label }}</span></label><br>
{% endfor %}
</fieldset>
<fieldset>
<label for="res-upload"><strong>Dateianhang</strong></label>
<input type="file" id="res-upload" name="upload">
</fieldset>
<fieldset>
<button id="res-submit" type="submit" data-label-oc="Anfragen" data-label-default="Reservieren">Reservieren</button>
</fieldset>
</form>
{% else %}
<div class="toast toast--warning mx-0">
<p class="warning">Dieser Zeit-Slot ist bereits ausgebucht</p>
</div>
{% endif %}
</div>
</div>
{% if modal %}</div>{% endif %}
{% endblock %}
{% block modal %}
{% if modal %}
<script>
(function ($) {
// Define an idempotent initializer for this modal instance
window.initWaSlotDetails{{ id }} = function() {
var container = document.getElementById('wa-slot-{{ id }}');
if(!container) return;
var units = {{ buchen.units|json_encode|raw }};
var unitSel = container.querySelector('#res-unit');
var amtSel = container.querySelector('#res-unit-amount');
function fillAmounts(){
if(!unitSel||!amtSel) return;
var id = parseInt(unitSel.value||0,10);
var u = units.find(function(x){return x.id == id;});
if(!u){ amtSel.innerHTML=''; return; }
var html = '<option value="">-</option>';
var base = {{ slot.behaelter|default(0) }};
var booked = {{ slot.behaelterBooked|default(0) }};
var remainingOcBase = Math.max(0, Math.floor(base * 1.5) - booked);
var overByUnit = Math.floor(remainingOcBase / Math.max(1, parseInt(u.multiplier||1,10)));
var maxByUnit = Math.max(u.max_amount, overByUnit);
for(var i=1;i<=maxByUnit;i++){
var label = ''+i;
if(i > u.max_amount){ label = '({{ 'MSC.wa_approval_needed'|trans([], 'contao_default') }}) ' + label; }
html += '<option value="'+i+'">'+label+'</option>';
}
amtSel.innerHTML = html;
}
if(unitSel){
unitSel.onchange = null;
unitSel.addEventListener('change', fillAmounts, { once:false });
}
fillAmounts();
};
window.modals = window.modals || []
window.modals.wa_slots = window.modals.wa_slots || []
if (window.modals.wa_slots.details{{ id }} === undefined)
{
window.modals.wa_slots.details{{ id }} = new jBox('Modal', {
closeButton: 'box',
content: $('#wa-slot-{{ id }}'),
maxWidth: 650,
minWidth: 100,
minHeight: 100,
width: 650,
overlay: true,
closeOnClick: false,
zIndex: 'auto',
addClass: '',
onOpen: function(){
if (window.initWaSlotDetails{{ id }}) { window.initWaSlotDetails{{ id }}(); }
}
}).open();
} else {
window.modals.wa_slots.details{{ id }}.content.empty();
window.modals.wa_slots.details{{ id }}.setContent($('#wa-slot-{{ id }}')).open();
if (window.initWaSlotDetails{{ id }}) { window.initWaSlotDetails{{ id }}(); }
}
})(jQuery);
</script>
{% endif %}
{% endblock %}