<div>
<ui-view autoscroll='true'></ui-view>
<section class="heading b-b">
<div class="row no-gutter">
<div class="col-xs-2 col-sm-2 col-md-1">
<section class="heading-btn">
<a ng-click="backPrevLocation($event)"><i class="fas fa-long-arrow-alt-left "></i></a>
</section>
</div>
<div class="col-xs-10 col-sm-10 col-md-8 b-l b-r-md">
<section class="heading-title">
<h1>{{ event.title }} <span class="v-middle badge text-xs bg-event">{{event.category.name}}</span></h1>
</section>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md" ng-if="isAuthorized(['admin', 'manager'])">
<section class="heading-actions wrapper">
<a ui-sref="app.admin.events_edit({id: event.id})" class="btn btn-lg btn-warning bg-white b-2x rounded m-t-xs text-u-c text-sm"><i class="fa fa-edit"></i> {{ 'app.shared.buttons.edit' | translate }}</a>
<a ng-click="deleteEvent(event)" class="btn btn-lg btn-danger b-2x rounded no-b m-t-xs"><i class="fa fa-trash-o"></i></a>
</section>
</div>
</div>
</section>
<div class="row no-gutter">
<div class="col-sm-12 col-md-12 col-lg-8">
<div class="article wrapper-lg">
<div class="article-thumbnail" ng-if="event.event_image_attributes">
<img ng-src="{{event.event_image_attributes.attachment_url}}" alt="{{event.title}}" class="img-responsive">
</div>
<h3 translate>{{ 'app.public.events_show.event_description' }}</h3>
<p ng-bind-html="event.description | toTrusted"></p>
</div>
<div class="text-center" id="social-share">
<a ng-href="{{shareOnFacebook()}}" target="_blank" class="btn btn-facebook btn-lg m-t"><i class="fa fa-facebook m-r"></i> {{ 'app.public.events_show.share_on_facebook' | translate }}</a>
<a ng-href="{{shareOnTwitter()}}" target="_blank" class="btn btn-twitter btn-lg m-t"><i class="fa fa-twitter m-r"></i> {{ 'app.public.events_show.share_on_twitter' | translate }}</a>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-4">
<section class="widget panel b-a m" ng-if="event.event_files_attributes.length">
<div class="panel-heading b-b">
<span class="badge bg-warning pull-right">{{event.event_files_attributes.length}}</span>
<h3 translate>{{ 'app.public.events_show.downloadable_documents' }}</h3>
</div>
<ul class="widget-content list-group list-group-lg no-bg auto">
<li ng-repeat="file in event.event_files_attributes" class="list-group-item no-b clearfix">
<a target="_blank" ng-href="{{file.attachment_url}}"><i class="fa fa-arrow-circle-o-down"> </i> {{file.attachment_name | humanize : 25}}</a>
</li>
</ul>
</section>
<div ng-if="isAuthorized(['admin', 'manager'])">
<select-member></select-member>
</div>
<section class="widget panel b-a m m-t-lg">
<div class="panel-heading b-b small">
<h3 translate>{{ 'app.public.events_show.information_and_booking' }}</h3>
</div>
<div class="panel-content wrapper">
<div>
<span ng-if="event.event_type === 'nominative'" class="v-middle badge text-xs bg-event" translate="">{{ 'app.public.events_show.event_type.nominative' }}</span>
<span ng-if="event.event_type === 'family'" class="v-middle badge text-xs bg-event" translate="">{{ 'app.public.events_show.event_type.family' }}</span>
<span ng-if="event.pre_registration" class="v-middle badge text-xs bg-info" translate="">{{ 'app.public.events_show.pre_registration' }}</span>
</div>
<dl class="text-sm">
<dt ng-repeat="theme in event.event_themes">
<i class="fa fa-tags" aria-hidden="true"></i> {{theme.name}}
</dt>
<dt ng-if="event.age_range"><i class="fa fa-users" aria-hidden="true"></i> {{event.age_range.name}}</dt>
</dl>
<dl class="text-sm">
<dt><i class="fa fa-calendar" aria-hidden="true"></i> {{ 'app.public.events_show.dates' | translate }}</dt>
<dd>{{ 'app.public.events_show.beginning' | translate }} <span class="text-u-l">{{event.start_date | amDateFormat:'L'}}</span><br>{{ 'app.public.events_show.ending' | translate }} <span class="text-u-l">{{event.end_date | amDateFormat:'L'}}</span></dd>
<dt><i class="fas fa-clock"></i> {{ 'app.public.events_show.opening_hours' | translate }}</dt>
<dd ng-if="event.all_day"><span translate>{{ 'app.public.events_show.all_day' }}</span></dd>
<dd ng-if="!event.all_day">{{ 'app.public.events_show.from_time' | translate }} <span class="text-u-l">{{event.start_time}}</span> {{ 'app.public.events_show.to_time' | translate }} <span class="text-u-l">{{event.end_time}}</span></dd>
<dt ng-if="event.pre_registration_end_date"><i class="fa fa-calendar" aria-hidden="true"></i> {{ 'app.public.events_show.pre_registration_end_date' | translate }}</dt>
<dd ng-if="event.pre_registration_end_date"><span class="text-u-l">{{event.pre_registration_end_date | amDateFormat:'L'}}</span></dd>
</dl>
<div class="text-sm" ng-if="event.amount">
<div>{{ 'app.public.events_show.full_price_' | translate }} <span>{{ event.amount | currency}}</span></div>
<div ng-repeat="price in event.event_price_categories_attributes" class="description-hover">
<span uib-popover="{{getPriceCategoryConditions(price.category.id)}}" popover-trigger="mouseenter">
{{price.category.name}} :
</span>
{{price.amount | currency}}
</div>
</div>
<div class="text-sm m-b" ng-if="event.nb_total_places">
<div ng-if="event.nb_free_places > 0">{{ 'app.public.events_show.tickets_still_availables' | translate }} <span class="font-sbold">{{event.nb_free_places}}</span></div>
<div ng-if="event.nb_total_places > 0 && event.nb_free_places <= 0"><span class="badge font-sbold" translate>{{ 'app.public.events_show.sold_out' }}</span></div>
<div ng-if="event.nb_total_places == -1"><span class="badge font-sbold" translate>{{ 'app.public.events_show.cancelled' }}</span></div>
</div>
<div class="text-sm m-b" ng-if="!event.nb_total_places">
<div><span class="badge font-sbold" translate>{{ 'app.public.events_show.without_reservation' }}</span></div>
</div>
<div class="m-b">
<div ng-show="reserve.toReserve">
<div class="panel panel-default bg-light m-n text-sm">
<div class="panel-body">
<div class="row">
<label class="col-sm-6 control-label">{{ 'app.public.events_show.full_price_' | translate }} <span class="text-blue">{{event.amount | currency}}</span></label>
<div class="col-sm-6">
<select ng-model="reserve.nbReservePlaces" ng-change="changeNbPlaces('normal')" ng-options="i for i in reserve.nbPlaces.normal">
</select> {{ 'app.public.events_show.ticket' | translate:{NUMBER:reserve.nbReservePlaces} }}
</div>
<div class="col-sm-12 m-b" ng-if="event.event_type === 'nominative' && reserve.nbReservePlaces > 0">
<div ng-repeat="user in reserve.bookingUsers.normal">
<label class="" translate>{{ 'app.public.events_show.last_name_and_first_name '}}</label>
<input type="text" class="form-control" ng-model="user.name" ng-required="true">
</div>
</div>
<div class="col-sm-12 m-b" ng-if="ctrl.member.id && event.event_type === 'family' && reserve.nbReservePlaces > 0">
<div ng-repeat="user in reserve.bookingUsers.normal">
<label class="" translate>{{ 'app.public.events_show.last_name_and_first_name '}}</label>
<select ng-model="user.booked"
ng-options="option.name for option in user.bookedUsers track by option.key"
ng-change="changeBookedUser()"
name="booked"
ng-required="true"
class="form-control">
<option value=""></option>
</select>
<uib-alert type="danger" ng-if="enableChildValidationRequired && user.booked && user.booked.type === 'Child' && !user.booked.validatedAt" style="margin-bottom: 0.8rem;">
<span class="text-sm">
<i class="fa fa-warning"></i>
<span translate>{{ 'app.shared.cart.child_validation_required_alert' }}</span>
</span>
</uib-alert>
<uib-alert type="danger" ng-if="user.booked && user.booked.type === 'Child' && !isUnder18YearsAgo(user.booked.birthday)" style="margin-bottom: 0.8rem;">
<span class="text-sm">
<i class="fa fa-warning"></i>
<span translate>{{ 'app.shared.cart.child_birthday_must_be_under_18_years_ago_alert' }}</span>
</span>
</uib-alert>
</div>
</div>
</div>
<div class="row" ng-repeat="price in event.event_price_categories_attributes">
<label class="col-sm-6 control-label">{{price.category.name}} : <span class="text-blue">{{price.amount | currency}}</span></label>
<div class="col-sm-6">
<select ng-model="reserve.tickets[price.id]" ng-change="changeNbPlaces(price.id)" ng-options="i for i in reserve.nbPlaces[price.id]">
</select> {{ 'app.public.events_show.ticket' | translate:{NUMBER:reserve.tickets[price.id]} }}
</div>
<div class="col-sm-12 m-b" ng-if="event.event_type === 'nominative' && reserve.tickets[price.id] > 0">
<div ng-repeat="user in reserve.bookingUsers[price.id]">
<label class="" translate>{{ 'app.public.events_show.last_name_and_first_name '}}</label>
<input type="text" class="form-control" ng-model="user.name" ng-required="true">
</div>
</div>
<div class="col-sm-12 m-b" ng-if="ctrl.member.id && event.event_type === 'family' && reserve.tickets[price.id] > 0">
<div ng-repeat="user in reserve.bookingUsers[price.id]">
<label class="" translate>{{ 'app.public.events_show.last_name_and_first_name '}}</label>
<select ng-model="user.booked"
ng-options="option.name for option in user.bookedUsers track by option.key"
ng-change="changeBookedUser()"
name="booked"
ng-required="true"
class="form-control">
<option value=""></option>
</select>
<uib-alert type="danger" ng-if="enableChildValidationRequired && user.booked && user.booked.type === 'Child' && !user.booked.validatedAt">
<p class="text-sm">
<i class="fa fa-warning"></i>
<span translate>{{ 'app.shared.cart.child_validation_required_alert' }}</span>
</p>
</uib-alert>
<uib-alert type="danger" ng-if="user.booked && user.booked.type === 'Child' && !isUnder18YearsAgo(user.booked.birthday)">
<p class="text-sm">
<i class="fa fa-warning"></i>
<span translate>{{ 'app.shared.cart.child_birthday_must_be_under_18_years_ago_alert' }}</span>
</p>
</uib-alert>
</div>
</div>
</div>
<div ng-show="currentUser.role == 'admin' && !event.pre_registration" class="m-t">
<label for="offerSlot" class="control-label m-r" translate>{{ 'app.public.events_show.make_a_gift_of_this_reservation' }}</label>
<input bs-switch
ng-model="event.offered"
id="offerSlot"
type="checkbox"
class="form-control"
switch-on-text="{{ 'app.shared.buttons.yes' | translate }}"
switch-off-text="{{ 'app.shared.buttons.no' | translate }}"
switch-animate="true"
switch-readonly="{{trainingIsValid}}"
ng-change="computeEventAmount()"/>
</div>
</div>
</div>
</div>
<div class="clear">
<a class="pull-right m-t-xs text-u-l ng-scope" ng-click="cancelReserve($event)" ng-show="reserve.toReserve" translate>{{ 'app.shared.buttons.cancel' }}</a>
</div>
<div ng-if="reserveSuccess && !event.pre_registration" class="alert alert-success">{{ 'app.public.events_show.thank_you_your_payment_has_been_successfully_registered' | translate }}<br>
{{ 'app.public.events_show.you_can_find_your_reservation_s_details_on_your_' | translate }} <a ui-sref="app.logged.dashboard.invoices" translate>{{ 'app.public.events_show.dashboard' }}</a>
</div>
<div ng-if="reserveSuccess && event.pre_registration" class="alert alert-success">{{ 'app.public.events_show.thank_you_your_pre_registration_has_been_successfully_saved' | translate }}<br>
{{ 'app.public.events_show.informed_by_email_your_pre_registration' | translate }}
</div>
<div class="m-t-sm" ng-if="reservations && !reserve.toReserve" ng-repeat="reservation in reservations">
<div ng-hide="isCancelled(reservation)" class="well well-warning">
<div class="font-sbold text-u-c text-sm" ng-if="!event.pre_registration">{{ 'app.public.events_show.you_booked_DATE' | translate:{DATE:(reservation.created_at | amDateFormat:'L LT')} }}</div>
<div class="font-sbold text-u-c text-sm" ng-if="event.pre_registration">{{ 'app.public.events_show.you_pre_booked_DATE' | translate:{DATE:(reservation.created_at | amDateFormat:'L LT')} }}</div>
<div class="font-sbold text-sm" ng-if="reservation.nb_reserve_places > 0">{{ 'app.public.events_show.full_price_' | translate }} {{reservation.nb_reserve_places}} {{ 'app.public.events_show.ticket' | translate:{NUMBER:reservation.nb_reserve_places} }}</div>
<div class="font-sbold text-sm" ng-repeat="ticket in reservation.tickets_attributes">
{{ticket.event_price_category.price_category.name}} : {{ticket.booked}} {{ 'app.public.events_show.ticket' | translate:{NUMBER:ticket.booked} }}
</div>
<div class="clear" ng-if="event.recurrence_events.length > 0 && reservationCanModify(reservation)">
<a class="pull-right m-t-xs text-u-l pointer" ng-click="modifyReservation(reservation, $event)" translate>{{ 'app.shared.buttons.change' }}</a>
</div>
<div class="clear" ng-if="reservationCanCancel(reservation)">
<a class="pull-right m-t-xs text-u-l pointer" ng-click="cancelReservation(reservation, $event)" translate>{{ 'app.shared.buttons.cancel' }}</a>
</div>
</div>
<div ng-show="isCancelled(reservation)" class="well well-disabled">
<div class="text-italic text-sm">{{ 'app.public.events_show.canceled_reservation_SEATS' | translate:{SEATS:reservation.total_booked_seats} }}</div>
</div>
</div>
<div ng-show="now.isSameOrAfter(eventEndDateTime)" class="alert alert-info">
<span translate>{{ 'app.public.events_show.event_is_over' }}</span>
<span ng-show="reservations.length > 0" translate>{{ 'app.public.events_show.thanks_for_coming' }}</span>
<a ui-sref="app.public.events_list" translate>{{ 'app.public.events_show.view_event_list' }}</a>
</div>
<button class="btn btn-warning-full rounded btn-block text-sm" ng-click="reserveEvent()" ng-show="isShowReserveEventButton()">
<span ng-if="event.pre_registration">{{ 'app.public.events_show.pre_book' | translate }}</span>
<span ng-if="!event.pre_registration">{{ 'app.public.events_show.book' | translate }}</span>
</button>
<uib-alert type="danger" ng-if="ctrl.member.id && !isUserValidatedByType()">
<p class="text-sm">
<i class="fa fa-warning"></i>
<span translate>{{ 'app.shared.cart.user_validation_required_alert' }}</span>
</p>
</uib-alert>
<coupon show="reserve.totalSeats > 0 && ctrl.member && !event.pre_registration" coupon="coupon.applied" total="reserve.totalNoCoupon" user-id="{{ctrl.member.id}}"></coupon>
</div>
</div>
<div class="panel-footer no-padder ng-scope" ng-if="!event.pre_registration && event.amount && reservationIsValid()">
<button class="btn btn-valid btn-info btn-block p-l btn-lg text-u-c r-b text-base" ng-click="payEvent()" ng-if="reserve.totalSeats > 0">{{ 'app.public.events_show.confirm_and_pay' | translate }} {{reserve.amountTotal | currency}}</button>
</div>
<div class="panel-footer no-padder ng-scope" ng-if="(event.pre_registration || event.amount == 0) && reservationIsValid()">
<button class="btn btn-valid btn-info btn-block p-l btn-lg text-u-c r-b text-base" ng-click="validReserveEvent()" ng-if="reserve.totalSeats > 0" ng-disabled="attempting">{{ 'app.shared.buttons.confirm' | translate }}</button>
</div>
</section>
<uib-alert type="warning m" ng-if="eventExplicationsAlert.length > 0">
<p class="text-sm pull-left">
<i class="fa fa-warning"></i>
<div class="m-l-lg" ng-bind-html="eventExplicationsAlert"></div>
</p>
</uib-alert>
</div>
</div>
<div ng-if="onlinePayment.showModal">
<card-payment-modal is-open="onlinePayment.showModal"
toggle-modal="toggleOnlinePaymentModal"
after-success="afterOnlinePaymentSuccess"
on-error="onOnlinePaymentError"
cart="onlinePayment.cartItems"
current-user="currentUser"
customer="ctrl.member"/>
</div>
</div>