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

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

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

{% block content %}

    {% set navigation = [{"dashboard_index": "Dashboard"|trans, "dashboard_attendee_cart": ("My cart"|trans), "current":(pagetitle)}] %}
    {% include "Global/navigation.html.twig" with navigation %}

    <section class="section-content bg-white padding-y">

        <div class="{{ envFileAccessor.getSetting("app_layout") }}">

            <div class="row">
                <main class="col-lg-8 order-1 order-lg-0 mt-4 mt-lg-0">
                    <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 style="width:55%;" scope="col">{{ "Event / Ticket"|trans }}</th>
                                            <th style="width:15%;" scope="col" width="100">{{ "Price"|trans }}</th>
                                            <th style="width:15%;" scope="col" width="100">{{ "Quantity"|trans }}</th>
                                            <th style="width:15%;" scope="col" class="text-right" width="100">{{ "Subtotal"|trans }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for orderElement in order.orderElements %}
                                            <tr>
                                                <td width="55%">
                                                    {% 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 width="15%">
                                                    <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 width="15%">
                                                    {{ orderElement.quantity }}
                                                </td>
                                                <td width="15%" 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">
                        <div class="card-header">
                            <h6 class="b mb-0">{{ "Billing information"|trans }}</h6>
                        </div>
                        <div class="card-body">
                            <div class="form-row">
                                <div class="col form-group">
                                    {{ form_label(form.firstName) }}
                                    {{ form_widget(form.firstName, { value: app.user.firstName }) }}
                                    {{ form_errors(form.firstName) }}
                                </div>
                                <div class="col form-group">
                                    {{ form_label(form.lastName) }}
                                    {{ form_widget(form.lastName, { value: app.user.lastName }) }}
                                    {{ form_errors(form.lastName) }}
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col form-group">
                                    {{ form_label(form.email) }}
                                    {{ form_widget(form.email, { value: app.user.email }) }}
                                    {{ form_errors(form.email) }}
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col form-group">
                                    {{ form_label(form.country) }}
                                    {{ form_widget(form.country) }}
                                    {{ form_errors(form.country) }}
                                </div>
                                <div class="col form-group">
                                    {{ form_label(form.state) }}
                                    {{ form_widget(form.state, { value: app.user.state }) }}
                                    {{ form_errors(form.state) }}
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col form-group">
                                    {{ form_label(form.city) }}
                                    {{ form_widget(form.city, { value: app.user.city }) }}
                                    {{ form_errors(form.city) }}
                                </div>
                                <div class="col form-group">
                                    {{ form_label(form.postalCode) }}
                                    {{ form_widget(form.postalCode, { value: app.user.postalCode }) }}
                                    {{ form_errors(form.postalCode) }}
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col form-group">
                                    {{ form_label(form.street) }}
                                    {{ form_widget(form.street, { value: app.user.street }) }}
                                    {{ form_errors(form.street) }}
                                </div>
                                <div class="col form-group">
                                    {{ form_label(form.street2) }}
                                    {{ form_widget(form.street2, { value: app.user.street2 }) }}
                                    {{ form_errors(form.street2) }}
                                </div>
                            </div>
                        </div>
                    </div>

                    {% if order.getOrderElementsPriceSum(true) > 0 %}
                        <div class="card mt-4">
                            <div class="card-header">
                                <h6 class="b mb-0">{{ "Payment method"|trans }}</h6>
                            </div>
                            <div class="card-body">
                                <div class="form-row">
                                    {% for paymentGateway in paymentGateways %}
                                        <div class="col-6 form-group">

                                            <div class="custom-control custom-radio custom-control-inline">
                                                <input data-paymentGateway-id="{{ paymentGateway.id }}" class="custom-control-input" id="{{ paymentGateway.type }}" type="radio" name="payment_gateway" value="{{ paymentGateway.type }}" {{ loop.first ? "checked"}}/>
                                                <label class="custom-control-label required" for="{{ paymentGateway.type }}"><img src="{{ vich_uploader_asset(paymentGateway, 'logoFile') }}" class="img-80-80 mr-3 ml-3" />{{ paymentGateway.name }}</label>
                                            </div>

                                        </div>
                                    {% endfor %}
                                </div>
                                {% for paymentGateway in paymentGateways %}
                                    {% if paymentGateway.instructions %}

                                        <div id="paymentGateway{{ paymentGateway.id }}-instructions" class="form-row paymentGateways-instructions">
                                            <div class="col-12 form-group">

                                                {% include "Global/message.html.twig" with { type: "info", message: (paymentGateway.instructions|raw), icon: "fas fa-info-circle" } %}

                                            </div>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                        <button id="checkout_submit" type="submit" class="btn btn-primary btn-block mt-4"><i class="fas fa-money-check"></i> {{ "Pay now"|trans }}</button>
                    {% else %}
                        <button id="checkout_submit" type="submit" class="btn btn-primary btn-block mt-4"><i class="fas fa-edit"></i> {{ "Register"|trans }}</button>
                    {% endif %}


                    {{ form_end(form) }}

                </main>
                <aside class="col-lg-4 pt-3 pt-lg-0 order-0 order-lg-1">
                    <div class="sticky-top sticky-sidebar" style="top: 75px;">

                        {% 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_attendee_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>
                        <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>

                    </div>
                </aside>
            </div>

        </div>
    </section>

{% endblock %}

{% block javascripts %}

    <script>

        $(document).ready(function () {
        {% if app.user.country %}
                $('#checkout_country').val('{{ app.user.country.id }}');
                $('#checkout_country').trigger('change');
        {% endif %}

                $('input[name="payment_gateway"]').on('change', function () {
                    if ($(this).is(':checked')) {
                        $('.paymentGateways-instructions').hide();
                        $('#paymentGateway' + $(this).attr('data-paymentGateway-id') + '-instructions').show();
                    }
                });
                $('input[name="payment_gateway"]').trigger('change');

            });
    </script>

{% endblock %}