<div class="c-reservation-append-item__overlay  js-modal" hidden>

    <div class="c-reservation-append-item__shader  js-close-modal"></div>

    <div class="c-reservation-append-item">
        <form action="{{ route('reservations.appendItem') }}" method="post">
            {{ csrf_field() }}
            <h3 class="c-reservation-append-item__title">
                Voeg activiteit toe
            </h3>

            <div class="c-reservation-append-item__content">

                <p class="c-reservation-append-item__text  c-reservation-append-item__text-intro">
                    Sla eventuele wijzigingen aan de reservering eerst op, voordat er nieuwe activiteiten worden  toegevoegd.
                </p>

                <input type="hidden" name="reservation_id" value="{{ $currentModel->id }}">

                <div class="c-reservation-append-item__row">
                    <p class="label">Product:</p>
                    <div class="c-simple-select__wrapper">
                        <select class="c-simple-select" name="product_id">
                            @foreach($optionalProducts as $optionalProduct)
                                <option value="{{ $optionalProduct->id }}">{{ $optionalProduct->translation->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <p class="c-reservation-append-item__text">
                    Tijd kan pas geselecteerd worden nadat de activiteit is toegevoegd.
                </p>

                <div class="c-reservation-append-item__row">
                    <label for="pop-up-quantity">
                        Aantal personen:
                    </label>
                    <input id="pop-up-quantity" class="c-reservation-append-item__input" type="number" min="1" name="quantity" value="" required/>
                </div>

                <div class="c-reservation-append-item__row">
                    <label for="pop-up-remarks">
                        Opmerkingen (optioneel):
                    </label>
                    <textarea id="pop-up-remarks" class="c-reservation-append-item__textarea" name="remarks"></textarea>
                </div>

                <div class="c-reservation-append-item__buttons">
                    <button class="c-reservation-append-item__cancel  js-close-modal" type="button">Annuleer</button>
                    <button class="c-reservation-append-item__submit" type="submit">Voeg toe</button>
                </div>

            </div>

        </form>
    </div>

</div>