@extends('site.master')
@section('title', __('site/cart.meta_title'))
@php
// We only do this because it reads a bit easier inline :)
$searchDateKey = App\Komma\Availability\AvailabilityService::SEARCH_DATE_KEY;
@endphp
@section('content')
<div class="l-main u-bg-neutral--100 js-cart" data-cart='@json($shoppingCart)' data-translations='@json(__('vue'))' data-addons='@json(isset($addons) ? $addons->toArray() : [])'>
@include('site.organisms.progress', [
'progressStatus' => 1
])
<div class="o-process o-process--cart">
<div class="o-process__cart-grid">
<div class="o-process__intro">
@include('site.components.button', [
'modifiers' => ['is-reversed'],
'buttonIcon' => 'arrowLeft',
'buttonType' => 'text',
'buttonClasses' => 'u-spacing-mb3',
'buttonLink' => $links->products->route,
'buttonText' => __('site/cart.add_more_activities'),
])
<h1 class="o-process__heading">@lang('site/cart.title')</h1>
</div>
<div class="o-process__main">
@if(session()->has('flashMessages'))
<div class="o-process__flash-messages u-spacing-mb2">
@foreach(session('flashMessages')->getMessages() as $flashMessage)
@include('site.components.note', [
'modifiers' => $flashMessage['type'],
'noteContent' => $flashMessage['message'],
])
@endforeach
</div>
@endif
@if(isset($shoppingCart) && $shoppingCart->getItemsCount() > 0)
<div class="o-booking">
<div class="o-booking__main-data" v-cloak>
<div class="o-booking__date">
<div class="c-input-wrapper">
<img class="c-input__icon c-input__icon--pull-up" src="/img/calendar.svg" alt="" />
<input class="c-search__input c-input"
ref="datepicker"
type="text"
placeholder="@lang('vue.choose_a_date')"
v-model="date"
/>
</div>
</div>
<div class="o-booking__location">
<div class="c-input-wrapper">
<img class="c-input__icon" src="/img/location.svg" alt="" />
<select class="c-select" v-model="location">
@foreach($locationOptions as $locationOption)
<option value="{{ $locationOption->id }}" @if(!$locationOption->open) disabled @endif >
{{ $locationOption->label }} @if(!$locationOption->open)(Gesloten)@endif
</option>
@endforeach
</select>
</div>
</div>
<button class="o-booking__change-button c-icon-button c-icon-button--secondary" :class="{ 'is-disabled': !dateOrLocationChanged }" @click="dateOrLocationChanged ? updateCartMeta() : null">
<i class="c-icon-button__icon">
<svg width="22" height="18" style="transform: rotate(45deg)">
<use href="/img/icon-transfer.svg#transfer"></use>
</svg>
</i>
</button>
</div>
<template v-if="dateOrLocationChanged">
<div class="c-poster__na-pill u-spacing-mt1" v-cloak>
Let op! Locatie en/of datum wijzigingen nog niet toegepast. Sla deze eerst op!
</div>
<div v-if="messages.length > 0" class="u-spacing-mt2">
<template v-for="message in messages">
<flash-message :lines="message.lines" :without-icon="message.withoutIcon" :message-type="message.type"></flash-message>
</template>
</div>
<button class="c-button c-button--secondary u-spacing-mt1" @click="updateCartMeta(true)" v-if="showForceCartUpdate">
<span class="c-button__text">Wijziging doorvoeren</span>
</button>
</template>
<div class="o-booking__top-info">
<div class="o-booking__sum o-booking__sum--top">
<div class="o-booking__label">Totaal</div>
<div class="o-booking__amount" v-cloak data-currency="€">@{{ cart.total }}</div>
<div class="o-booking__vat">Prijs is inclusief btw</div>
<div class="o-booking__info">*We vragen een voorschot van 50% van het geschatte totaalbedrag</div>
</div>
<div class="o-booking__top-grid">
<div :class="{ 'is-disabled': !cart.isActivityPricingCorrectForFood || isLoading || messages.length !== 0 }">
@include('site.components.button', [
'buttonIcon' => 'arrowRight',
'buttonLink' => localized_route('checkout.data.show', [], false),
'buttonText' => __('site/cart.continue'),
])
</div>
<div class="u-spacing-mt3">
@include('site.components.button', [
'modifiers' => ['secondary'],
'buttonIcon' => 'arrowRight',
'buttonLink' => localized_route('createOffer', [], false),
'buttonText' => 'Deel programma via mail',
])
</div>
</div>
</div>
<div class="o-booking__basket c-basket">
<ul class="c-basket__list" v-cloak>
<li v-for="item in cart.items" class="c-basket__item">
<div class="c-basket__header">
<div class="c-basket__image">
<img v-if="item.product.overview_image" class="u-clip-path" data-id="clip-path-image-2" :src="item.product.overview_image" alt="" />
<div v-else class="c-basket__no-image">
<img src="/img/no-image.svg" alt="">
</div>
</div>
<div class="c-basket__title">
<a :href="'{{ $links->products->route }}/' + item.product.slug" class="c-basket__product">
@{{ item.product.name }}
</a>
</div>
<button type="button" class="c-basket__remove" @click="remove(item.product.id)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 26">
<g transform="translate(2 4)">
<path class="trash__body" fill="currentColor"
d="M1,16a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V4H1ZM3,7v8H2V7ZM6,7v8H5V7ZM9,7v8H8V7Zm3,0v8H11V7Z"/>
<polygon class="trash__lid" fill="currentColor"
points="9.5 0 10.5 1 14 1 14 3 0 3 0 1 3.5 1 4.5 0 9.5 0"/>
</g>
</svg>
</button>
</div>
<div class="c-basket__main">
<div class="c-basket__time-slot" v-if="item.has_timeslot_selection">
<div class="c-input-wrapper">
<img class="c-input__icon" alt="clock icon" width="23" height="23" src="/img/icon-clock.svg">
<select class="c-select" @change="update($event, item)" v-model="item.selectedTimeslot.timeSlotValue">
<template v-for="timeSlots in item.timeSlots">
<option :value="timeSlots.slot" :disabled="!timeSlots.available">
@{{ timeSlots.label }}
<template v-if="!timeSlots.available">( @lang('vue.reason.full') )</template>
</option>
</template>
</select>
</div>
</div>
<div class="c-basket__amount">
<div class="c-input-wrapper">
<img class="c-input__icon" src="/img/people.svg" alt="">
<input @change="update($event, item)"
v-model="item.amountOfPersons"
class="c-input c-basket__input"
type="number" min="10">
</div>
<div class="c-tooltip u-spacing-ml1"
aria-label="Het aantal deelnemers is een benadering. Je geeft het juiste aantal deelnemers uiterlijk 72 uur voor je komt aan ons door."
tabindex="0">
<span class="c-tooltip__icon">
<svg width="20" height="20">
<use href="/img/icon-info.svg#info"></use>
</svg>
</span>
</div>
</div>
<div class="c-basket__cost">
<div class="c-basket__cost">
<div class="c-price">
<span class="c-price__currency">{{ config('site.shop_currency') }}</span>
<span class="c-price__amount">@{{ item.sub_total }}</span>
</div>
<div class="c-price c-price--sub">
<span class="c-price__amount" v-html="item.price_label"></span>
</div>
</div>
</div>
</div>
<button class="c-basket__add-remark" :class="(item.product.id === editId || (item.notification !== '' && item.notification !== null)) ? 'is-toggled' : ''" @click="(item.product.id === editId) ? editId = null : editId = item.product.id">
<span class="c-basket__add-icon">+</span> opmerking toevoegen
</button>
<div class="c-basket__remarks" v-if="item.product.id === editId || (item.notification !== '' && item.notification !== null)">
<div class="c-form-element" @click="editId = item.product.id">
<label class="c-form-element__label" for="notifications">Opmerkingen</label>
<textarea @blur="update($event, item)"
v-model="item.notification"
class="c-input"
id="notifications"
name="notifications"></textarea>
</div>
</div>
</li>
</ul>
</div>
<div class="o-booking__show-addons u-spacing-mt4" v-cloak v-if="!dateOrLocationChanged">
<button class="c-button c-button--secondary">
<span class="c-button__text">Nog eten of drinken erbij?</span>
</button>
</div>
{{-- only on mobile --}}
<div class="o-booking__meal-swiper" v-cloak v-if="!dateOrLocationChanged">
<div class="u-spacing-mt4">
<meal-swiper
:meals="addons"
@modal-button-clicked="(e) => handleModalButtonClicked(e)"
>
</meal-swiper>
</div>
</div>
<div class="o-booking__addons-area u-spacing-pb5" v-cloak v-if="!dateOrLocationChanged">
<ul class="o-booking__addons" v-cloak>
<li v-for="addon in addons">
<div class="c-poster c-poster--addon">
<div @click="modalProduct = addon.id" class="c-poster__image">
<img class="u-clip-path" data-id="clip-path-image-2" :src="addon.overview_image" alt="" />
</div>
<div class="c-poster__body--simple">
<h3 class="c-poster__title" @click="modalProduct = addon.id">@{{ addon.name }}</h3>
<div class="c-poster__costs">
<p class="c-poster__price">
<span v-html="addon.price_label"></span><br>
<template v-if="addon.minimum_amount_of_persons > 0">
Vanaf @{{ addon.minimum_amount_of_persons }} personen
</template>
</p>
</div>
<div class="c-poster__book">
<button class="c-icon-button c-poster__book-button" @click="modalProduct = addon.id">
<i class="c-icon-button__icon">
<svg width="32" height="32">
<use href="/img/icon-cart.svg#cart"></use>
</svg>
</i>
</button>
<a class="c-text-button c-text-button--action c-poster__read-more" :href="'{{ $links->products->route }}/' + addon.slug">
<span class="c-text-button__text">Lees meer</span>
<i class="c-text-button__icon">
<svg width="8" height="10">
<use href="/img/icon-arrowRight.svg#arrowRight"></use>
</svg>
</i>
</a>
{{-- <a class="c-icon-button c-icon-button--action c-poster__read-more" :href="'{{ $links->products->route }}/' + addon.product.slug">--}}
{{-- <i class="c-icon-button__icon">--}}
{{-- <svg width="8" height="10">--}}
{{-- <use href="/img/icon-arrowRight.svg#arrowRight"></use>--}}
{{-- </svg>--}}
{{-- </i>--}}
{{-- </a>--}}
</div>
</div>
</div>
</li>
</ul>
</div>
<plan-modal :product-id="modalProduct"
:session-date="date"
:session-location="location"
cart-route="{{ localized_route('shoppingCart') }}"
offer-link="{{ $links->quotation->route }}"
:on-success-close="true"
v-on:close="modalProduct = null"
v-on:success-close="reloadCart"
></plan-modal>
<div class="o-booking__sum">
<div class="o-booking__label">Totaal</div>
<div class="o-booking__amount" v-cloak data-currency="€">@{{ cart.total }}</div>
<div class="o-booking__vat">Prijs is inclusief btw</div>
</div>
<div class="o-booking__note" v-cloak v-if="!cart.isActivityPricingCorrectForFood">
@include('site.components.note', [
'noteContent' => __('site/cart.errors.activity-vs-food', ['link' => $links->contact->route]),
])
</div>
<div v-if="messages.length > 0" class="u-spacing-mt2">
<template v-for="message in messages">
<flash-message :lines="message.lines" :without-icon="message.withoutIcon" :message-type="message.type"></flash-message>
</template>
</div>
<div class="o-booking__footer" v-cloak>
<div class="o-booking__continue">
<div :class="{ 'is-disabled': !cart.isActivityPricingCorrectForFood || isLoading || messages.length !== 0 }">
@include('site.components.button', [
'buttonIcon' => 'arrowRight',
'buttonLink' => localized_route('checkout.data.show', [], false),
'buttonText' => __('site/cart.continue'),
])
</div>
</div>
<div class="o-booking__back">
@include('site.components.button', [
'modifiers' => ['is-reversed'],
'buttonType' => 'text',
'buttonIcon' => 'arrowLeft',
'buttonLink' => $links->products->route,
'buttonText' => 'Meer activiteiten boeken',
])
</div>
</div>
<div class="o-booking__offer-button u-spacing-mt3" v-cloak>
@include('site.components.button', [
'modifiers' => ['secondary'],
'buttonIcon' => 'arrowRight',
'buttonLink' => localized_route('createOffer', [], false),
'buttonText' => 'Deel programma via mail',
])
</div>
</div>
@else
@lang('site/cart.no_products')
@endif
</div>
<div class="o-process__cta">
@include('site.components.servicepoint')
</div>
{{-- <div class="o-process__aside">--}}
{{-- <div class="s-text">--}}
{{-- <p>Stel je eigen programma samen en maak je klaar voor een dag(deel) vol fun, beleving en lachkrampen.</p>--}}
{{-- @if(!empty($addons))--}}
{{-- <h3>Breid je programma uit</h3>--}}
{{-- @endif--}}
{{-- </div>--}}
{{-- @if(!empty($addons) && $addons->hasAnyResults())--}}
{{-- <div class="o-process__addons" id="addons">--}}
{{-- @foreach($addons->getAllResults() as $addon)--}}
{{-- @include('site.components.addon', ['addonIteration' => $loop->iteration])--}}
{{-- @endforeach--}}
{{-- </div>--}}
{{-- @endif--}}
{{-- </div>--}}
</div>
</div>
</div>
@endsection