{% block content %}
    {% if modal %}<div class="modal-content">{% endif %}
    <div id="wa-booking-{{ id }}" hx-target="this" hx-swap="outerHTML" class="frame">
        <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-behaelter-outline"></i>
                    <div class="t-label">Gebuchte Behälterkapazität</div>
                </div>
                <div class="">{{ buchung.behaelter }}</div>
            </div>
            {% if buchung is defined %}
            <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">Einheit</div>
                </div>
                {% set uTitle = buchung.unit_title|default('Behälter') %}
                {% set uAmount = buchung.unit_amount_display|default(0) %}
                {% if uAmount > 0 %}
                    <div class="">{{ uAmount }} × {{ uTitle }}</div>
                {% else %}
                    <div class="">{{ buchung.behaelter }} × {{ 'Behälter' }}</div>
                {% endif %}
            </div>
            {% endif %}
                <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>

                {% 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 }}">
                <fieldset>
                    <label for="bok-unit"><strong>Einheit</strong><sup class="text-danger">*</sup></label>
                    <select id="bok-unit" name="unit_id" required>
                        {% for unit in buchen.units %}
                            <option value="{{ unit.id }}" data-multiplier="{{ unit.multiplier }}"{% if buchung.unit_id == unit.id %} selected{% endif %}>{{ unit.title }}</option>
                        {% endfor %}
                    </select>
                </fieldset>
                <fieldset>
                    <label for="bok-unit-amount"><strong>Anzahl</strong><sup class="text-danger">*</sup></label>
                    <select id="bok-unit-amount" name="unit_amount" required>
                    </select>
                    {#<div class="text-sm text-muted">Verbleibende Kapazität (Basis): {{ slot.behaelterAvailable }}</div>#}
                </fieldset>
                <script>
                    (function(){
                        var container = document.getElementById('wa-booking-{{ id }}');
                        if(!container) return;
                        var units = {{ buchen.units|json_encode|raw }};
                        var unitSel = container.querySelector('#bok-unit');
                        var amtSel = container.querySelector('#bok-unit-amount');
                        var selectedAmount = {{ buchung.unit_amount|default(0) }};
                        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 currentBase = {{ buchung.behaelter|default(0) }};
                            var remainingOcBase = Math.max(0, Math.floor(base * 1.5) - Math.max(0, booked - currentBase));
                            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+'"'+(selectedAmount==i?' selected':'')+'>'+label+'</option>';
                            }
                            amtSel.innerHTML = html;
                        }
                        if(unitSel){
                            unitSel.onchange = null;
                            unitSel.addEventListener('change', function(){ selectedAmount = 0; fillAmounts();});
                        }
                        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 }}"{{ value in buchung.sorten|keys ? ' checked' : '' }}> <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 }}"{{ value in buchung.ernteart ? ' checked' : '' }}> <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 }}"{{ value in buchung.lage ? ' checked' : '' }}> <span class="checkable">{{ label }}</span></label><br>
                    {% endfor %}
                </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="bok-upload"><strong>Datei überschreiben</strong></label>
                {% else %}
                    <fieldset>
                        <label for="bok-upload"><strong>Datei hochladen</strong></label>
                {% endif %}
                    <input type="file" id="bok-upload" name="upload">
                </fieldset>
                <fieldset>
                    <button id="bok-submit" type="submit" data-label-oc="Anfragen" data-label-default="Speichern">Speichern</button>
                </fieldset>
            </form>
        </div>
    {% if modal %}</div>{% endif %}
{% endblock %}

{% block modal %}
    {% if modal %}
        <script>
            (function ($) {

                // Define an idempotent initializer for this modal instance
                window.initWaBookingDetails{{ id }} = function() {
                    var container = document.getElementById('wa-booking-{{ id }}');
                    if(!container) return;
                    var units = {{ buchen.units|json_encode|raw }};
                    var unitSel = container.querySelector('#bok-unit');
                    var amtSel = container.querySelector('#bok-unit-amount');
                    var selectedAmount = {{ buchung.unit_amount|default(0) }};
                    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 currentBase = {{ buchung.behaelter|default(0) }};
                        var remainingOcBase = Math.max(0, Math.floor(base * 1.5) - Math.max(0, booked - currentBase));
                        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+'"'+(selectedAmount==i?' selected':'')+'>'+label+'</option>';
                        }
                        amtSel.innerHTML = html;
                    }
                    if(unitSel){
                        unitSel.onchange = null;
                        unitSel.addEventListener('change', function(){ selectedAmount = 0; fillAmounts();});
                    }
                    fillAmounts();
                };

                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: '',
                    onOpen: function(){
                        if (window.initWaBookingDetails{{ id }}) { window.initWaBookingDetails{{ id }}(); }
                    }
                }).open();
                } else {
                    window.modals.wa_bookings.details{{ id }}.content.empty();
                    window.modals.wa_bookings.details{{ id }}.setContent($('#wa-booking-{{ id }}')).open();
                    if (window.initWaBookingDetails{{ id }}) { window.initWaBookingDetails{{ id }}(); }
                }

            })(jQuery);
        </script>
    {% endif %}
{% endblock %}