{% extends "layout.html" %}
{% block content %}
    <section class="hero">
        <section class="session">
            <br>
            <br>
            <section class="hero is-light">
                <div class="hero-body">
                    <div class="container has-text-centered">
                        <h1 class="title">Event Details</h1>
                    </div>
                </div>
            </section>
            <br>
            <br>
            <div class="section">
                <figure class="image is-2by1">
                    <img src="https://unsplash.it/1200/600?{{ event.address }}"
                         alt="
                                {{ event.event_info.title }}"/>
                </figure>
                <div class="columns">
                    <div class="column">
                        <div class="card" style="height: 350px; width: 380px;">

                            <figure class="image">
                                <img src="{{ qrcode(url) }}" alt="Image">
                            </figure>

                        </div>
                    </div>
                    <div class="column">
                        <div class="card">
                            <div class="card-content">
                                <div class="media">
                                    <div class="media-left">
                                        <figure class="image" style="height: 70px; width: 70px;"><img
                                                src="https://source.unsplash.com/random/96x96" alt="Image"></figure>
                                    </div>
                                    <div class="media-content">
                                        <p class="title is-4">{{ event.event_info.title }}</p>
                                        <br>
                                    </div>
                                </div>
                                <div class="content">
                                    <p class="subtitle is-6">Location: {{ event.event_info.location }}</p>
                                    <p class="subtitle is-6">Start: {{ event.display_start_time }}</p>
                                    <p class="subtitle is-6">End: {{ event.display_end_time }}</p>
                                    <p class="subtitle is-6">Remaining Tickets: {{ event.remaining }}</p>
                                    <p class="subtitle is-6">Total Tickets: {{ event.event_info.total }}</p>

                                    <p>{{ event.event_info.description }} </p>
                                    <br>
                                    <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 %}
                                            <a class='is-link' onclick="myFunction()">Transaction Details</a>
                                            <div class="contents" style='display:none' id="myDIV">
                                                <p><i>You will receive</i>: a ticket for event "{{ event.event_info.title }}" </p>
                                                <p><i>You will pay</i>: {{ event.display_price }} TBA" </p>
                                                <p><b>Note:</b> Click sign to agree this transaction.</p>
                                            </div>

                                            <script>
                                                function myFunction() {
                                                    var x = document.getElementById("myDIV");
                                                    if (x.style.display === "block") {
                                                        x.style.display = "none";
                                                    } else {
                                                        x.style.display = "block";
                                                    }
                                                }
                                            </script>
                                            <div class="field">
                                                <p class="control">
                                                    <label class="checkbox">

                                                        <input type="checkbox"> I agree pay {{ event.display_price }}
                                                        ABT to execute this transaction


                                                    </label>
                                                </p>
                                            </div>
                                            <p class=""><input type=submit
                                                               value='Sign the Transaction'
                                                               class="button is-link"/></p>
                                        {% endif %}
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <br>
            <h2 class="title">Ticket Selling Transactions</h2>
            <hr>
            <section class="section">
                <section class="container">
                    {% if tx_lists %}
                        {% for tx_list in tx_lists %}
                            <section class="secion">
                                <div class="columns is-multiline features">
                                    {% for tx in tx_list %}
                                        <div class="column is-4">
                                            <div class="card is-shady">
                                                <div class="card-image">

                                                    <figure class="image is-3by2">
                                                        <img src="https://unsplash.it/900/600?{{ tx.hash }}"
                                                             alt="
                                {{ event.event_info.title }}"/>
                                                    </figure>

                                                </div>
                                                <div class="card-content">
                                                    <div class="content">
                                                        <p class="subtitle">hash: {{ tx.hash }}</p>
                                                        <div class="tags are-large">
                                                            <span class="tag are-large is-danger">Type: {{ tx.type }}</span>
                                                        </div>
                                                        <p>Sender: {{ tx.sender }}</p>
                                                        <p>Receiver: {{ tx.receiver }}</p>
                                                        <p>Time: {{ tx.time }}</p>

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

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