{% extends "Global/layout.html.twig" %}

{% set pagetitle = 'Checkout' | trans %}

{% block title %}{{pagetitle}}{% endblock %}

{% block content %}

    {% set navigation = [{"current":(pagetitle)}] %}
    {% include "Global/navigation.html.twig" with navigation %}

    <section class="section-content padding-y bg-white">
        <div class="{{ envFileAccessor.getSetting("app_layout") }}">
            <div class="row">
                <aside class="col-lg-3 pt-3 pt-lg-0">
                    {% include "Dashboard/sidebar.html.twig" %}
                </aside>
                <div class="col-lg-9 mt-4 mt-lg-0">

                    {% set secondsLeft = 0 %}

                    {% set expirationDate = null %}


                    {% for orderElement in order.orderElements %}
                        {% for ticketReservation in orderElement.ticketReservations %}

                            {% if not ticketReservation.isExpired %}
                                {% set expirationDate = ticketReservation.expiresAt %}

                                {% set dateInterval = ticketReservation.expiresAt.diff(date("now")) %}
                                {% set secondsLeft = dateInterval|date("%i") * 60 + dateInterval|date("%s") %}
                            {% endif %}

                        {% endfor %}
                    {% endfor %}

                    <div id="checkout-timer-wrapper" data-start-count-to="{{ expirationDate|date('Y-m-d H:i:s') }}" data-attendee-cancel-order-url="{{ path('dashboard_pointOfSale_order_cancel', {reference: order.reference}) }}" class="checkout-timer-wrapper">

                        {% if secondsLeft > 0 %}
                            {% include 'Global/message.html.twig' with { type: 'warning',icon: 'fas fa-hourglass-half', message: '%mins% left before tickets are released'|trans({"%mins%" : "<span class='checkout-timer' data-seconds-left='"~secondsLeft~"'></span>"}) } %}
                        {% endif %}

                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h6 class="b mb-0">{{ "Order summary"|trans }}</h6>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover shopping-cart-wrap">
                                    <thead class="text-muted">
                                        <tr>
                                            <th scope="col">{{ "Event / Ticket"|trans }}</th>
                                            <th scope="col" width="100">{{ "Price"|trans }}</th>
                                            <th scope="col" width="100">{{ "Quantity"|trans }}</th>
                                            <th scope="col" class="text-right" width="100">{{ "Subtotal"|trans }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for orderElement in order.orderElements %}
                                            <tr>
                                                <td>
                                                    {% include "Global/event-preview-horizontal.html.twig" with { eventTicket: orderElement.eventTicket } %}
                                                    {% if orderElement.reservedSeats and orderElement.reservedSeats|length > 0 %}
                                                        <h6 class='text-primary'><i class="fas fa-braille"></i> {{ "Reserved seats"|trans }}</h6>
                                                        <ul class='list-check'>
                                                            {% for reservedSeat in orderElement.reservedSeats %}
                                                                <li>{{ utils.stringifySeatLabel(reservedSeat) }}</li>
                                                                {% endfor %}
                                                        </ul>
                                                    {% endif %}
                                                </td>
                                                <td>
                                                    <div class="price-wrap">
                                                        {% if orderElement.eventTicket.eventDate.event.isFree %}
                                                            <span class="price-new">{{ "Free"|trans }}</span>
                                                        {% else %}
                                                            {% if orderElement.eventTicket.eventDate %}
                                                                <span class="price-new">{{ orderElement.eventTicket.getSalePrice()|format_amount }}</span>
                                                            {% endif %}
                                                        {% endif %}
                                                    </div>
                                                </td>
                                                <td>
                                                    {{ orderElement.quantity }}
                                                </td>
                                                <td class="text-right">
                                                    <div class="price-wrap">
                                                        <var class="price">{{ orderElement.getPrice()|format_amount }}</var>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    {{ form_start(form, {'attr': { 'novalidate': 'novalidate' } }) }}

                    {{ form_widget(form.orderReference, { value: order.reference }) }}

                    <div class="card mt-4 mb-5">
                        <div class="card-header">
                            <h6 class="b mb-0">{{ "Optional attendee information"|trans }}</h6>
                        </div>
                        <div class="card-body">
                            <div class="form-row">
                                <div class="col form-group">
                                    {{ form_label(form.firstName, null, {'label_attr': {'class': 'not-required'}}) }}
                                    {{ form_widget(form.firstName) }}
                                    {{ form_errors(form.firstName) }}
                                </div>
                                <div class="col form-group">
                                    {{ form_label(form.lastName, null, {'label_attr': {'class': 'not-required'}}) }}
                                    {{ form_widget(form.lastName) }}
                                    {{ form_errors(form.lastName) }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <dl class="dlist-align">
                        <dt>{{ "Tickets"|trans }}</dt>
                        <dd class="text-right ml-5">{{ order.getOrderElementsPriceSum()|format_amount }}</dd>
                    </dl>
                    <dl class="dlist-align">
                        <dt>{{ "Fees"|trans }}</dt>
                        <dd class="text-right ml-5">{{ order.getTotalFees()|format_amount }}</dd>
                    </dl>
                    <dl class="dlist-align h4">
                        <dt>{{ "Total"|trans }}</dt>
                        <dd class="text-right ml-5"><strong>{{ order.getOrderElementsPriceSum(true)|format_amount }}</strong></dd>
                    </dl>

                    {% if order.getOrderElementsPriceSum(true) > 0 %}
                        <button id="checkout_submit" type="submit" class="btn btn-primary btn-block mt-4"><i class="fas fa-money-check"></i> {{ "Confirm payment and place order"|trans }}</button>
                    {% else %}
                        <button id="checkout_submit" type="submit" class="btn btn-primary btn-block mt-4"><i class="fas fa-edit"></i> {{ "Register attendees"|trans }}</button>
                    {% endif %}
                    {{ form_widget(form._token) }}

                    {{ form_end(form, {'render_rest': false}) }}

                </div>
            </div>

        </div>
    </section>

{% endblock %}