<div class="o-summary">
    <h2 class="o-summary__title">Programma</h2>
    <ul class="o-summary__list">

        @foreach($shoppingCart->getItems() as $shoppingCartItem)

            <li class="o-summary__item">
                <h3 class="o-summary__heading">{{ $shoppingCartItem->getProduct()->translation->name }}</h3>
                <div class="o-summary__info">
                    <div class="o-summary__details">
                        @if(!in_array($shoppingCartItem->getProduct()->id, [33, 34]))

                        <div class="o-summary__detail">
                            <svg width="23" height="23">
                                <use href="/img/icon-clock.svg#clock"></use>
                            </svg>
                            {{ $shoppingCartItem->getSelectedTimeSlot()->start->format('H.i') }}u - {{ $shoppingCartItem->getSelectedTimeSlot()->visualEnd->format('H.i') }}u
                        </div>

                        @endif

                        <div class="o-summary__detail">
                            <svg width="24" height="24">
                                <use href="/img/icon-group.svg#group"></use>
                            </svg>

                            @if(!empty($shoppingCartItem->amountOfPersons))
                                {{ $shoppingCartItem->amountOfPersons }}
                            @else
                                {{ $shoppingCartItem->getProduct()->minimum_amount_of_persons }} - {{ (isset($shoppingCartItem->getProduct()->maximum_amount_of_persons) && $shoppingCartItem->getProduct()->maximum_amount_of_persons != 0) ? $shoppingCartItem->getProduct()->maximum_amount_of_persons : $maxAmountOfPersons }}
                            @endif
                        </div>
                    </div>
                    @if(!empty($shoppingCartItem->notification))
                        <div class="o-summary__notification">
                            <div class="o-summary__notification-label">Opmerking:</div>
                            <p class="o-summary__notification-text">{{ $shoppingCartItem->notification }}</p>
                        </div>
                    @endif
                </div>
                <div class="o-summary__price">{!! $shoppingCartItem->getTotal()  !!}</div>
                <div class="o-summary__unitprice  o-summary__subline">{!! $shoppingCartItem->getCartLabel(true, false)  !!}</div>
            </li>

        @endforeach

            <li class="o-summary__item">
                <h3 class="o-summary__heading  o-summary__heading--nm">Totaal</h3>
                <div class="o-summary__note  o-summary__note--no-mt  o-summary__subline">
                    <p class="o-summary__price-without-vat">Prijs is inclusief btw</p>
{{--                    <p class="o-summary__price-without-vat">Prijs exclusief btw: <span class="o-summary__price-without-vat-amount">{{ config('site.shop_currency') }} {{ $shoppingCart->getTotalWithoutVat() }}</span></p>--}}
                </div>
                <div class="o-summary__price">{{ $shoppingCart->getTotal() }}</div>
            </li>

            <li class="o-summary__item--downpayment">
                <div class="o-summary__downpayment-header">
                    <h3 class="o-summary__heading  o-summary__heading--nm">Voorschot</h3>
                    <div class="o-summary__price  o-summary__price--heavy">{{ $shoppingCart->getDeposit() }}</div>
                </div>

                <div class="o-summary__info  o-summary__subline">
                    <p>{{ config('site.deposit_percentage') }}% van het geschatte totaalbedrag</p>
                    <div class="o-summary__note">
                        @include('site.components.note', [
                            'noteContent' => __('site/checkout.invoice_mail_notification', ['email' => ($checkoutData->checkout_send_invoice_to_other_email) ? $checkoutData->checkout_email_for_invoice : $checkoutData->email ]),
                        ])
                    </div>
                </div>
            </li>

    </ul>

    <form class="js-checkout-summary" method="post" action="{{ route('checkout.summary.validate') }}">

        @csrf

        @php $formElementNoErrorArea = true; @endphp

        <div class="o-summary__form">
            @include('site.components.form.checkbox', ['formElementCodeName' => 'checkout_newsletter', 'formElementNoLabel' => true])
            @include('site.components.form.checkbox', ['formElementCodeName' => 'checkout_accept_terms_conditions', 'formElementNoLabel' => true, 'formElementLabel' => __('site/form.checkout_accept_terms_conditions.description', ['legal' => $links->legal->route, 'privacy' => $links->privacy->route])])

            @if($errors->any())
                @foreach($errors->all() as $errorMessage)
                    <div class="o-summary__note">
                        @include('site.components.note', ['noteContent' => $errorMessage])
                    </div>
                @endforeach
            @endif

            <div class="o-summary__confirm  js-confirm">
                @include('site.components.button', [
                'isButton' => true,
                'modifiers' => ['large', 'wide'],
                'buttonClasses' => 'js-submit',
                'buttonText' => 'Bevestigen',
                'buttonProperties' => 'type=button',
            ])
            </div>

            <div class="o-summary__loading  u-hidden  js-loading">

                <div class="c-cart-button  c-cart-button--animate  c-cart-button--loader" data-item="0">
                    <i class="c-cart-button__icon">
                        <span class="c-cart-button__icon-placeholder">
                            <span class="c-cart-button__speed-icons">
                                <span class="c-cart-button__speed-icon"></span>
                                <span class="c-cart-button__speed-icon"></span>
                            </span>

                            <svg width="32" height="32">
                                <use href="/img/icon-cart.svg#cart"></use>
                            </svg>
                        </span>
                    </i>

                    <span class="c-cart-button__text">
                        Bezig met boe'ken van je reservering<br/>
                        Een ogenblik geduld...
                    </span>
                </div>

            </div>

        </div>

    </form>

</div>