{% extends "layout.html" %}
{% block content %}
    <section class="hero">
        <section class="section">
            <section class="container">
                <section class="session" style="margin-top: 40px;">
                    <div class="card is-transparent">
                        <div class="card-image">
                            <figure class="image is-3by1"><img src="https://unsplash.it/900/300?{{ event.address }}"
                                                               alt="Image"></figure>
                        </div>
                        <div class="card-content">
                            <div class="content">
                                <table class="table is-no-bordered" width="100%">
                                    <tbody>
                                    <tr style="padding: 0px;">
                                        <td>
                                            <p class="title is-2">{{ event.event_info.title }}</p>
                                            <p class="subtitle is-6">Created by <a>{{ host.moniker }} (
                                                Account: {{ host.address }} )</a></p>
                                        </td>
                                        <td width="30%">
                                            <nav class="level">
                                                <div class="level-item has-text-centered">
                                                    <div>
                                                        <p class="heading">Tickets</p>
                                                        <p class="title">{{ event.event_info.remaining }}/{{ event.event_info.total }}</p>
                                                    </div>
                                                </div>
                                                <div class="level-item has-text-centered">
                                                    <div>
                                                        <p class="heading">Price</p>
                                                        <p class="title">{{ event.display_price }} ABT</p>
                                                    </div>
                                                </div>
                                            </nav>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <table class="table is-no-bordered" width="100%">
                                    <tbody>
                                    <tr style="padding: 0px;">
                                        <td>
                                            <p>Event Detail:</p>
                                            <p>{{ event.event_info.description }}</p>
                                        </td>
                                        <td width="30%">
                                            <hr>
                                            <p><span class="icon is-small is-left" style="margin-right:4px;">
                          <i class="fa fa-map-marker" style="margin-right:2px;"></i>
                        </span> {{ event.event_info.location }}</p>
                                            <p><span class="icon is-small is-left" style="margin-right:4px;">
                          <i class="fa fa-calendar"></i>
                        </span> {{ event.display_start_time }}</p>
                                            <p><span class="icon is-small is-left" style="margin-right:4px;">
                          <i class="fa fa-hourglass-start"></i>
                        </span> {{ event.display_end_time }}</p>
                                            <section class="section" style="padding: 6px 0px;" id="modal">
                                                <a class="button fullwidth is-link is-bold"
                                                   onclick="$('#buyTicket').toggleClass('is-active')">Buy Ticket</a>
                                                <div class="modal" id="buyTicket">
                                                    <div class="modal-background"></div>
                                                    <div class="modal-card">
                                                        <article class="message is-light">
                                                            <div class="message-header">
                                                                <h4 class="subtitle" style="margin-bottom:-6px;">Buy
                                                                    Ticket</h4>
                                                                <button class="delete"
                                                                        onclick="$('#buyTicket').toggleClass('is-active')"></button>
                                                            </div>
                                                            <div class="message-body">
                                                                <form method="POST" action="/buy">
                                                                    {{ form.hidden_tag() }}
                                                                    <input type="hidden" name="address"
                                                                           value="{{ event.address }}"/>

                                                                    {% if event.event_info.remaining == 0 %}
                                                                        <p class=""><input type=submit value='Buy'
                                                                                           class="button is-info"
                                                                                           disabled/>
                                                                        </p>

                                                                    {% else %}
                                                                        <div class="contents">
                                                                            <p>Please confirm you are going to buy the
                                                                                ticket for
                                                                                this event: </p>
                                                                            <p class="title is-3">{{ event.event_info.title }}</p>
                                                                            <p>by paying <b>{{ event.display_price }}
                                                                                TBA</b></p>
                                                                            <table class="table is-no-bordered"
                                                                                   width="100%">
                                                                                <tbody>
                                                                                <tr>
                                                                                    <td style="padding: 0px;"
                                                                                        width="66.6666%">
                                                                                        <br>
                                                                                        <div class="field">
                                                                                            <p class="control">
                                                                                                <label class="checkbox">
                                                                                                    <input type="checkbox"
                                                                                                           onclick="$('#buyTicketButton').prop('disabled', !$('#buyTicketButton').prop('disabled'))">
                                                                                                    By click
                                                                                                    the button below, I
                                                                                                    agree with
                                                                                                    the payment
                                                                                                    information and
                                                                                                    confirm to buy the
                                                                                                    ticket.
                                                                                                </label>
                                                                                            </p>
                                                                                        </div>
                                                                                        <br>
                                                                                        <input type=submit
                                                                                               id='buyTicketButton'
                                                                                               value='Buy Ticket'
                                                                                               class="button is-link"
                                                                                               disabled/>
                                                                                    </td>
                                                                                    <td style="padding: 0px;">
                                                                                        <figure class="image"
                                                                                                style="display: block; margin-left: auto; margin-right: 0px; width: 80%;">
                                                                                            <img src="{{ qrcode(url) }}"
                                                                                                 alt="Image">
                                                                                        </figure>
                                                                                    </td>
                                                                                </tr>
                                                                                </tbody>
                                                                            </table>
                                                                        </div>
                                                                    {% endif %}
                                                                </form>
                                                            </div>
                                                        </article>
                                                    </div>

                                                </div>
                                            </section>
                                            <section class="section" style="padding: 6px 0px;" id="modal">
                                                <a class="button fullwidth is-link is-bold"
                                                   onclick="$('#useTicket').toggleClass('is-active')">Join Event</a>
                                                <div class="modal" id="useTicket">
                                                    <div class="modal-background"></div>
                                                    <div class="modal-card">
                                                        <article class="message is-light">
                                                            <div class="message-header">
                                                                <h4 class="subtitle" style="margin-bottom:-6px;">Join
                                                                    Event</h4>
                                                                <button class="delete"
                                                                        onclick="$('#useTicket').toggleClass('is-active')"></button>
                                                            </div>
                                                            <div class="message-body" style="padding-bottom: 60px;">
                                                                <div class="contents">
                                                                    <p>Join us in</p>
                                                                    <p class="title is-3">{{ event.event_info.title }}</p>
                                                                    <p>by scanning the QR code below</p>
                                                                    <figure class="image"
                                                                            style="display: block; margin-left: auto; margin-right: auto; width: 30%;">
                                                                        <img src="{{ qrcode(consume_url) }}"
                                                                             alt="Image">
                                                                    </figure>
                                                                </div>
                                                            </div>
                                                        </article>
                                                    </div>
                                                </div>
                                            </section>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="section">
                        <br>
                        <br>
                        <h2 class="title">Who already got the tickets?</h2>
                        <hr>
                        <section class="container">
                            {% if tx_lists %}
                                {% for tx_list in tx_lists %}
                                    <section class="container">
                                        <div class="columns is-multiline features">
                                            {% for tx in tx_list %}
                                                <div class="column is-4">
                                                    <div class="card is-shady">
                                                        <header class="card-header">
                                                            <p class="card-header-title "
                                                               style="word-break: break-word;">
                                                                Tx Hash: {{ tx.hash }}</p>
                                                        </header>
                                                        <div class="card-content">
                                                            <div class="content">
                                                                <p><strong>Ticket Bought By: </strong></p>
                                                                <p>{{ tx.receiver }}</p>
                                                                <p><strong>At Time: </strong></p>
                                                                <p>{{ tx.time }}</p>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </section>
                                {% endfor %}
                            {% else %}
                            {% endif %}
                        </section>
                    </div>
                </section>
            </section>
        </section>
    </section>
{% endblock %}
