{% extends 'tbudddy/tbudddy.html.twig' %}

{% block body %}
    {% set selfMenu = 'orders' %}
    {% include 'tbudddy/customer/menu-ini.html.twig' %}

    <div class="mb-5 pl-2">

        <div class="customer-title">Bilhetes / Histórico</div>

        <div class="mt-3 ml-2">
            * Para imprimir o(s) ticket(s) em uma página A4, <b>clique e segure</b> no botão de Imprimir (<i class="fas fa-print"></i>).<BR>
            ** Para apenas ver o(s) ticket(s), dê <b>um clique</b> no botão Imprimir.
        </div>

        <div class="customer-orders-content-mobile">
            {% set bookingIdAnt = 0 %}

            {% for list in arList %}
                {% if bookingIdAnt != list.booking.id %}
                    {% if bookingIdAnt > 0 %}
                        </div>
                    {% endif %}
                    <div style="margin-top: 12px">
                {% endif %}

                <div class="p-2">
                    <div class="d-flex justify-content-between" style="height: 40px; background-color: #2C536E; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; color: #fff; padding: 2px 2px 0px 5px">
                        <span class="mt-1"><b>#{{ list.booking.id }}</b> - {{ list.event.product.title }}</span>

                        <button class="btn btn-light d-flex justify-content-between btn_print_ticket" style="height: 36px" data-booking-id="{{ list.booking.id }}">
                            <div><i class="fas fa-print"></i></div>
                        </button>
                    </div>
                    <div class="d-flex justify-content-between" style="margin: 5px 10px 0px 0px">
                        <label style="font-weight: bold; padding-left: 5px; height: 24px">Data do Evento</label>
                        {{ list.event.date|date('d/m/Y') }}
                    </div>
                    <div class="d-flex justify-content-between" style="margin: 0px 10px 0px 0px">
                        <label style="font-weight: bold; padding-left: 5px; height: 24px">Hora do Evento</label>
                        {{ list.event.startAt|date('H:i') }} - {{ list.event.endAt|date('H:i') }}
                    </div>
                    <div style="background-color: #eee; color: #000; padding: 2px 2px 0px 5px; border-top-left-radius: 10px; border-top-right-radius: 10px;">
                        Tickets reservados
                    </div>
                    <div style="display: nones; padding-left: 15px; font-weight: bold; font-size: 14px; margin: 0px 10px 0px 0px">
                        {% for tic in list.booking.tickets %}
                            <div class="d-flex justify-content-between">
                                <span><label style="font-size: 12px">@{{ tic.id }}</label> - {{ tic.priceDesignation }}</span>
                                {{ moneyFormatter.format(tic.price) }} €
                            </div>
                        {% endfor %}
                    </div>
                    <div class="d-flex justify-content-between" style="margin: 0px 10px 0px 0px; font-size: 14px; padding-left: 5px; height: 24px">
                        <label style="font-weight: bold">Data da Compra</label>
                        {{ list.booking.createdAt|date('d/m/Y H:i') }}
                    </div>
                    <div class="d-flex justify-content-between" style="font-size: 14px; padding-left: 5px; margin: 0px 10px 0px 0px">
                        <label style="margin-top: 6px; font-weight: bold">Status da Compra</label>
                        <button class="btn btn-{{ BaseIncludes.bookingStatusColor(list.booking.status) }}" style="height: 36px">{{ list.booking.status }}</button>
                    </div>

                    {# <div>{{ list.operatorName }}</div> #}
                </div>

                {% set bookingIdAnt = list.booking.id %}

            {% endfor %}
            </div>
        </div>

        <div class="customer-orders-content-desktop">
            <table border="0" style="width: 100%">
                <tr style="background-color: #2C536E; color: #fff; font-size: 14px">
                    <td class="p-2" style="padding-left: 10px">Descrição</td>
                    <td class="p-2" style="text-align: center">Data do Evento</td>
                    <td class="p-2" style="text-align: center">Status</td>
                    <td class="p-2" style="text-align: center">Imprimir Ticket</td>
                </tr>

            {% set bookingIdAnt = 0 %}

            {% for list in arList %}

                {% if bookingIdAnt != list.booking.id %}
                    {% if bookingIdAnt > 0 %}
                        {#</div>#}
                        </tr>
                    {% endif %}
                    {#<div style="border: #ccc 1px solid; margin: 5px; margin-top: 12px">#}
                    <tr>
                {% endif %}

                    <td class="pl-2"><b>#{{ list.booking.id }}</b> - {{ list.event.product.title }}</td>
                    <td style="text-align: center">{{ list.event.date|date('d/m/Y') }} - {{ list.event.startAt|date('H:i') }} - {{ list.event.endAt|date('H:i') }}</td>
                    <td style="text-align: center">
                        <button class="btn btn-{{ BaseIncludes.bookingStatusColor(list.booking.status) }}" style="padding: 1px 5px 2px 5px; font-size: 14px; cursor: default">{{ list.booking.status }}</button>
                    </td>
                    <td style="text-align: center">
                        <button class="btn btn-light btn_print_ticket" data-booking-id="{{ list.booking.id }}">
                            <i class="fas fa-print"></i>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" style="background-color: #eee; color: #000; padding: 2px 2px 0px 5px">
                        Tickets reservados
                    </td>
                </tr>
                <tr style="display: nones">
                    <td colspan="4" class="d-block">
                        <div class="d-inline-block" style="padding-left: 15px; font-weight: bold; font-size: 14px; margin: 0px 10px 0px 0px">
                            <table border="0">
                            {% for tic in list.booking.tickets %}
                                <tr>
                                    <td><span style="font-size: 12px">@{{ tic.id }}</span> - {{ tic.priceDesignation }}</td>
                                    <td style="padding-left: 20px">{{ moneyFormatter.format(tic.price) }} €</td>
                                </tr>
                            {% endfor %}
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" style="border-bottom: #DBDBDB 1px solid; height: 1px"></td>

                {% set bookingIdAnt = list.booking.id %}

            {% endfor %}
                </tr>
            </table>
        </div>
    </div>

    <script language="javascript">
        $(document).ready( function() {
            var TloopCustomerTicket = 0;
            var lastCustomerTicketClickedId = 0;

            $('.btn_print_ticket').on('mousedown', function() {
                lastCustomerTicketClickedId = $(this).attr('data-booking-id');
                TloopCustomerTicket = setTimeout(function() {
                    window.open('/customer/print-ticket/' + lastCustomerTicketClickedId + '/page', '_blank');
                }, 1000);
            }).on('mouseup mouseleave', function() {
                clearTimeout(TloopCustomerTicket);
            });

            $('.btn_print_ticket').on('click', function() {
                var id = $(this).attr('data-booking-id');
                window.open('/customer/print-ticket/' + id, '_blank');
            });

            $('.btn_print_ticket').bind('taphold', function() {
                var id = $(this).attr('data-booking-id');
                window.open('/customer/print-ticket/' + id + '/page', '_blank');
            });
        });
    </script>

    {% include 'tbudddy/customer/menu-end.html.twig' %}

{% endblock %}