{% extends 'base.html' %}{% block title %} {{ title }} {% endblock %}{% load static %}
{% with events_active="active" %}
    {% block page_heading %}
        <span class="d-none d-md-block">
            {% if false %} <img src="{{ event.away_team.image.url }}" height=64>{% endif %}
            {{ event.away_team.name }} vs. {{ event.home_team.name }}
            {% if false %}<img src="{{ event.home_team.image.url }}" height=64>{% endif %}
        </span>
        <span class="d-md-none">
            {% if event.home_team.name == user.profile.teamsnapsettings.managed_team.name %}
                {% if false %} <img src="{{ event.away_team.image.url }}" height=32>{% endif %}
                vs. {{ event.away_team }}
            {% elif event.away_team.name == user.profile.teamsnapsettings.managed_team.name %}
                {% if false %}<img src="{{ event.home_team.image.url }}" height=32>{% endif %}
                at {{ event.home_team }}
            {% else %}
                Event
            {% endif %}
        </span>
       {% endblock %}
    {% block page_subheading %}
        <p class="d-none d-md-block">{{ event.start|date:"l, F j, Y g:i A" }}, {{ event.venue.name }}</p>
        <p class="d-md-none">{{ event.start|date:"D" }}&nbsp;{{ event.start|date:"n/j" }} {{ event.start|date:"g:i" }}, <span class="text-truncate">{{ event.venue.name }}</span></p>
    {% endblock %}

    {% block header %}

        <ul class="nav nav-tabs nav-fill bg-white" role="tablist">
            {% if previous_event %}
            <li class="nav-item m-1">
                <a href="{% url 'event' event_id=previous_event.id active_tab=active_tab %}">
                    <i class="bi bi-chevron-left"></i>{{ previous_event.start|date:"D" }}&nbsp;{{ previous_event.start|date:"n/j" }}
                </a>
            </li>
            {% endif %}

            <li class="nav-item m-1" role="presentation">
                <a id="event-details-tab" class="nav-link {% if active_tab == "details" %}active{% endif %}  px-2 py-0" href="{% url 'event' event_id=event.id active_tab='details'%}">Details</a></li>
            <li class="nav-item m-1" role="presentation"><a id="event-lineup-tab" class="nav-link {% if active_tab == "lineup" %}active{% endif %} px-2 py-0" href="{% url 'event' event_id=event.id active_tab='lineup'%}">Lineup</a></li>
            {% if next_event %}
                <li class="nav-item m-1">
                <a href="{% url 'event' event_id=next_event.id active_tab=active_tab%}" role="button">
                    {{ next_event.start|date:"D" }}&nbsp;{{ next_event.start|date:"n/j" }}<i class="bi bi-chevron-right"></i>
                </a>
                </li>
            {% endif %}

        </ul>

    {% endblock %}{% endwith %}
{% block content %}
    {% include 'messages.html' %}
    <div id="pills-tabContent" class="container-fluid tab-content w-100 p-0 m-0" data-toggle="tab">
        <div id="event-details" class="tab-pane {% if active_tab == "details" %}show active{% endif %} " role="tabpanel" aria-labelledby="event-details-tab">
            <div>
                <div class="card my-1">
                    <div class="card-header d-inline-flex">
                        <div class="d-inline-flex flex-grow-1"><h5>Event</h5></div>
                        <div class="d-inline-flex">
                            {% include 'teamsnap/update-button.html' with object_name='event' object_id=event.id next=request.path %}
                        </div>
                    </div>
                    <div class="card-body p-0">
                        {% include 'benchcoach/info-table.html' with d=details %}
                    </div>
                </div>
            </div>
            </form>
        </div>
        <div id="event-lineup" class="tab-pane {% if active_tab == "lineup" %}show active{% endif %}" role="tabpanel" aria-labelledby="event-lineup-tab">
            <form action="{%  url 'event' event_id=event.id active_tab=active_tab%}" method="post">
                {% csrf_token %}
                {{ formset.management_form }}
                <div class="row w-100">
                    <div class="col-md-6">
                        <div class="card my-1">
                            <div class="card-header d-inline-flex">
                                <div class="d-inline-flex flex-grow-1"><h5>Lineup</h5></div>
                                <div>
                                    <input type="submit" value="Submit" class="btn btn-sm btn-success d-xl-flex align-items-xl-center">
                                </div>
                            </div>
                            <div class="card-body p-0">
                                {% include 'benchcoach/player-table.html' with table_id="dhd" formset=formset_dhd available_class="d-none" %}

                                <hr class="m-0">
                                {% include 'benchcoach/player-table.html' with table_id="lineup" formset=formset_lineup available_class="d-none"%}
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="card my-1">
                            <div class="card-header d-inline-flex">
                                <div class="d-inline-flex flex-grow-1">
                                    <h5>Bench</h5>
                                </div>
                            </div>

                            <div class="card-body p-0">
                                {% include 'benchcoach/player-table.html' with table_id="bench" formset=formset_bench order_class="d-none" %}
                            </div>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
    <script src="{% static 'js/Sortable.js' %}"></script>
    <script id="form changes">
        function positionSelectChanged(elem) {
            let row = elem.parentElement.parentElement
            let original_table = elem.parentElement.parentElement.parentElement
            let lineup_table = document.getElementById('lineup')
            let bench_table = document.getElementById('bench')
            let dhd_table = document.getElementById('dhd')
            let player_order = row.querySelector('[id^="player-order"]')
            let player_available = row.querySelector('[id^="player-availability"]')
            console.dir(original_table)
            console.dir(bench_table)
            console.dir(original_table == bench_table)
            if (elem.value == "P" && original_table == bench_table ) {
                dhd_table.appendChild(row)
                player_order.classList.remove('d-none')
                player_available.classList.add('d-none')
                refresh_lineup_order()
            }
            else if (elem.value && original_table == dhd_table ) {
                dhd_table.appendChild(row)
                player_order.classList.remove('d-none')
                player_available.classList.add('d-none')
                refresh_lineup_order()
            }
            else if (elem.value) {
                lineup_table.appendChild(row)
                player_order.classList.remove('d-none')
                player_available.classList.add('d-none')
                refresh_lineup_order()
            }
            else {
                bench_table.prepend(row)
                player_order.classList.add('d-none')
                player_available.classList.remove('d-none')
            }
        }
    </script>
    <script id="sortable">
        function refresh_lineup_order (){
            var player_rows = document.getElementById('lineup').querySelectorAll('tr')
            for (let i = 0; i < player_rows.length; i++) {
                var player_order = player_rows[i].querySelector('[id^="player-order"]')
                var form_element_order = player_rows[i].querySelector('[id$="order"]')
                {#player_order.innerText = parseInt(player_rows[i].dataset.order)#}
                player_rows[i].dataset.order = i+1
                form_element_order.value = i+1
                player_order.innerHTML = i+1
            }
            var player_rows = document.getElementById('bench').querySelectorAll('tr')
            for (let i = 0; i < player_rows.length; i++) {
                var player_order = player_rows[i].querySelector('[id^="player-order"]')
                var form_element_order = player_rows[i].querySelector('[id$="order"]')
                {#player_order.innerText = parseInt(player_rows[i].dataset.order)#}
                player_rows[i].dataset.order = null
                form_element_order.value = null
                player_order.innerHTML = null
            }
            var player_rows = document.getElementById('dhd').querySelectorAll('tr')
            for (let i = 0; i < player_rows.length; i++) {
                var player_order = player_rows[i].querySelector('[id^="player-order"]')
                var form_element_order = player_rows[i].querySelector('[id$="order"]')
                {#player_order.innerText = parseInt(player_rows[i].dataset.order)#}
                player_rows[i].dataset.order = 0
                form_element_order.value = 0
                player_order.innerHTML = null
            }
        }
        var dhd = new Sortable.create(
            document.getElementById('dhd'), {
                animation: 150,
                ghostClass: "ghost",
                handle: ".drag-handle",
                {#handle: ".bars-move",#}
                group: {
                    put: true,
                    pull: true
                },
                onAdd: function (/**Event*/evt){
                    // Add to DH'd
                    var itemEl = evt.item;  // dragged HTMLElement
                    var player_order = itemEl.querySelector('[id^="player-order"]')
                    var player_available =itemEl.querySelector('[id^="player-availability"]')
                    refresh_lineup_order()
                    player_order.classList.remove('d-none')
                    player_available.classList.add('d-none')
                }
            })
        var lineup = new Sortable.create(
            document.getElementById('lineup'), {
                animation: 150,
                handle: ".drag-handle",
                ghostClass:"ghost",
                {#handle: ".bars-move",#}
                group:{
                    put:true,
                    pull:true
                },
                onAdd: function (/**Event*/evt) {
                    // Add to Lineup
                    var itemEl = evt.item;  // dragged HTMLElement
                    var player_order = itemEl.querySelector('[id^="player-order"]')
                    var player_available =itemEl.querySelector('[id^="player-availability"]')
                    refresh_lineup_order()
                    player_order.classList.remove('d-none')
                    player_available.classList.add('d-none')
                },
                onUpdate: function (/**Event*/evt) {
                    console.log('update to lineup')
                    var itemEl = evt.item;  // dragged HTMLElement
                    refresh_lineup_order()
                },
            });
        var bench = new Sortable.create(
            document.getElementById('bench'), {
                animation: 150,
                ghostClass:"ghost",
                sort: false,
                handle: ".drag-handle",
                {#handle: ".bars-move",#}
                group:{
                    put:true,
                    pull:true
                },
                onAdd: function (/**Event*/evt) {
                    var itemEl = evt.item;  // dragged HTMLElement
                    var player_order = itemEl.querySelector('[id^="player-order"]')
                    var player_available =itemEl.querySelector('[id^="player-availability"]')
                    refresh_lineup_order()
                    player_order.classList.add('d-none')
                    player_available.classList.remove('d-none')
                }
            });

    </script>

{% endblock %}