{% extends "base.html" %}

{% block style %}
    <link rel="stylesheet" href="/static/css/modal.css" type="text/css">
<style>
    input.error {
        border-color: red;
    }

    .share-list {
        list-style-type: none;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .share-list li, .share-list li a {
        width: 100%;
    }

    .share-list li a {
        margin-bottom: 5px;
        text-align: center;
    }

    .share-list li.copy > a.btn { background-color: #eee; }
    .share-list li.twitter > a.btn { background-color: lightblue; color: #fff; }
    .share-list li.facebook > a.btn { background-color: blue; color: #fff; }
    .share-list li.whatsapp > a.btn { background-color: green; color: #fff; }
</style>
{% endblock %}

{% block body %}
    <main>
        <div class="ev-main">
            <div class="ev-image">
                <img src="{{ event.image }}" alt="{{ event.name }} image">
            </div>
            <div class="ev-details">
                <div class="detail-group">
                    <h3>{{ event.name }}</h3>
                    <p>{{ event.start_date }}</p>
                    <p>{{ event.description }}</p>
                </div>
                    <div class="error">{{ error }}</div>
                    <div class="section">
                        <table class="styled-table">
                            <thead>
                                <tr>
                                    <th class="hidden-sm">Players</th>
                                    <th>Type</th>
                                    <th>Amount</th>
                                    <th class="hidden-sm">Total Amount Bet</th>
                                    <th class="hidden-xs">Selected Options</th>

                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for bet in bets %}
                                    <tr>
                                        <td class="hidden-sm">{{ bet.total_bets }}</td>
                                        <td>{{ bet.type }}</td>
                                        <td>{{ bet.min_bet }}</td>
                                        <td class="hidden-sm">{{ bet.total_stake }}</td>

                                        <td class="hidden-xs">{{ bet.selected }}</td>

                                        {% if player.id != b.initiator_id %}
                                            <td><a href="{% url 'match_bet' bet_key=bet.bet_key %}" class="btn">View</a></td>
                                        {% endif %}
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <!-- <div class="section">
                        <h3>My Bets</h3>
                        <table class="styled-table">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Amount</th>
                                    <th>Private</th>
                                    <th>Selected Option</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for bet in mybets %}
                                    <tr>
                                        <td>{{ bet.date_placed }}</td>
                                        <td>{{ bet.amount }}</td>
                                        <td>{% if bet.private %}Yes{% else %}No{% endif %}</td>
                                        <td>{{ bet.selected }}</td>
                                        {% if player.id != b.initiator_id %}
                                            <td>
                                                <a href="{% url 'match_bet' bet_key=bet.bet_key %}" class="btn">View</a>
                                                <a href="{% url 'delete_bet' evt=event.id bet_key=bet.bet_key %}" class="btn">Delete</a>
                                                <button type="button" class="btn modal-open" data-url="{% url 'match_bet' bet_key=bet.bet_key %}">Share</button>
                                            </td>
                                        {% endif %}
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div> -->
                    <div class="column section">
                        {% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
                        <form action="{% url 'post_bet' event.id %}" method="post">
                            {% csrf_token %}
                            <!-- use fieldset to group related inputs -->
                            <fieldset>
                                <legend class="new-bet">New Bet</legend>
                                {% for option in event.eventoption_set.all %}
                                    <label>
                                        <input type="radio" name="event_option" value="{{ option.id }}" />
                                        {{ option.name }}
                                    </label>
                                {% endfor %}
                                <div class="form-group">
                                    <label for="amount">Amount</label>
                                    <input type="tel" id="amount" name="amount" required />
                                </div>
                                <div class="bet-options">
                                    <fieldset class="betset">
                                        <legend>Type of Bet</legend>
                                        <p>
                                            <input type="radio" id="fixed" value="fixed" name="type" checked>
                                            <label for="fixed">Fixed Amount</label>
                                        </p>
                                        <p>
                                            <input type="radio" id="variable" value="variable" name="type">
                                            <label for="variable">Variable</label>
                                        </p>
                                        <p class="min-amount form-group">
                                            
                                        </p>
                                    </fieldset>
                                    <fieldset class="betset">
                                        <legend>Private Bet?</legend>
                                        <p>
                                            <input type="radio" id="yes" value="yes" name="private">
                                            <label for="yes">Yes</label>
                                        </p>
                                        <p>
                                            <input type="radio" id="no" value="no" name="private" checked>
                                            <label for="no">No</label>
                                        </p>
                                        
                                    </fieldset>
                                </div>

                            </fieldset>
                            <input type="submit" value="Play" />
                        </form>
                    </div>
            </div>
            
        </div>
    </main>
{% endblock %}

{% block js %}
<script src="/static/js/micromodal.min.js"></script>
<script>
    var minInput;

    document.querySelectorAll('.modal-open').forEach(modal => {
        modal.addEventListener('click', function(e){
            e.preventDefault()
            var lnk = window.location.origin + e.target.dataset.url
            var cover = document.createElement('div')
            cover.classList.add('modal')
            cover.classList.add('micromodal-slide')
            cover.setAttribute('id', 'modal-share')
            cover.setAttribute('aria-hidden', 'true')
            cover.innerHTML = modTemplate('Share bet link', shareTemplate(lnk))
            document.body.appendChild(cover)

            document.querySelector('.copy-clip').addEventListener('click', function(e){
                e.preventDefault()
                var inp = document.createElement('input')
                document.body.appendChild(inp)
                inp.value = lnk;
                inp.select();
                inp.setSelectionRange(0, 99999);
                document.execCommand('copy');
                document.body.removeChild(inp)
            })

            MicroModal.show('modal-share', { 
                onShow: function(modal) {
                },
                onClose: function(modal){
                    document.body.removeChild(cover)
                }
            })
        })
    })
    const modTemplate = (header, content) => {
        return `<div class="modal__overlay" tabindex="-1" data-micromodal-close>
                    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
                        <header class="modal__header">
                        <h2 class="modal__title" id="modal-1-title">
                            ${header}
                        </h2>
                        </header>
                            <main class="modal__content" id="modal-1-content">
                        ${content}
                        </main>
                        <footer class="modal__footer">
                            <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
                        </footer>
                    </div>
                </div>`
    }

    const shareTemplate = (link) => {
        const encoded = encodeURI(`Bet me on ${link}`)
        return `<ul class="share-list">
                    <li class="copy">
                        <a class="btn copy-clip">Copy Link</a>
                    </li>
                    <li class="twitter">
                        <a href="https://twitter.com/share?text=Bet me on&url=${link}" class="btn" target="_blank">Share via Twitter</a>
                    </li>
                    <li class="facebook">
                        <a href="https://www.facebook.com/sharer/sharer.php?u=${link}" class="btn" target="_blank">
                            Share via Facebook
                        </a>
                    </li>
                    <li class="whatsapp">
                        <a href="https://wa.me/?text=${encoded}" class="btn">Share via WhatsApp</a>
                    </li>
                </ul>
            `;
    }

    document.querySelector('#variable').addEventListener('change', function(e) {
        const amt = document.querySelector('#amount').value;
        if(+ amt) {
            minInput = document.createElement('input');
            minInput.setAttribute('placeholder', 'Minimum amount')
            minInput.setAttribute('type', 'tel')
            minInput.setAttribute('name', 'minamount')
            document.querySelector('.min-amount').appendChild(minInput)
        }else {
            //document.querySelector('#amount')
            document.querySelector('#amount').classList.add('error');
        }
    })


</script>
{% endblock %}