<!DOCTYPE html>
<html>
    {% load static %}
    {% load qr_code %}

    <head>
        {% include 'tournaments/broadcast/base_head.html' %}

        <script src="{% static 'tournaments/js/alpine.min.js' %}"></script>

        <title>Broadcast</title>

        <!-- Matomo -->
        <script>
          var _paq = window._paq = window._paq || [];
          /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
          _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
          _paq.push(["setDoNotTrack", true]);
          _paq.push(['trackPageView']);
          _paq.push(['enableLinkTracking']);
          (function() {
            var u="//matomo.padelclub.app/";
            _paq.push(['setTrackerUrl', u+'matomo.php']);
            _paq.push(['setSiteId', '1']);
            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
            g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
          })();
        </script>
        <!-- End Matomo Code -->

    </head>

    <body>

        <div x-data="{
            paginatedMatches: null,
            paginatedGroupStages: null,
            paginatedSummons: null,
            paginatedRankings: null,
            active: 1,
            hide_weight: {{ tournament.hide_weight|lower }},
            prefixTitle: '',
            retrieveData() {
                fetch('/tournament/{{ tournament.id }}/broadcast/json/')
                    .then(res => res.json())
                    .then((data) => {
                        this.paginatedMatches = this.paginate(data.matches, 8)
                        this.paginatedGroupStages = this.paginate(data.group_stages, 4)
                        this.paginatedSummons = this.paginateSummons(data.summons)
                        this.paginatedRankings = this.paginateRankings(data.rankings)
                        this.setPrefixTitle()

                        // Adjust active if it exceeds the new page count
                        if (this.active > this.pageCount()) {
                            this.active = 1;  // Reset to the first page
                        }
                    })
            },
            paginateSummons(array) {
                let pageSize = 16
                pages = this.paginate(array, pageSize)

                const splitGroups = []
                pages.forEach(group => {
                    const firstHalf = group.slice(0, pageSize / 2)
                    const secondHalf = group.slice(pageSize / 2)
                    if (secondHalf.length > 0) {
                        splitGroups.push([firstHalf, secondHalf])
                    } else {
                        splitGroups.push([firstHalf])
                    }
                });
                return splitGroups
            },
            paginateRankings(array) {
                let pageSize = 16
                pages = this.paginate(array, pageSize)

                const splitGroups = []
                pages.forEach(group => {
                    const firstHalf = group.slice(0, pageSize / 2)
                    const secondHalf = group.slice(pageSize / 2)
                    if (secondHalf.length > 0) {
                        splitGroups.push([firstHalf, secondHalf])
                    } else {
                        splitGroups.push([firstHalf])
                    }
                });
                return splitGroups
            },
            paginate(array, pageSize) {
                let paginatedArray = [];
                for (let i = 0; i < array.length; i += pageSize) {
                    paginatedArray.push(array.slice(i, i + pageSize))
                }
                return paginatedArray;
            },
            loop() {
                this.retrieveData()
                setInterval(() => {
                    this.retrieveData()
                    this.active = this.active === this.pageCount() ? 1 : this.active+1
                    this.setPrefixTitle()
                }, 15000)
            },
            pageCount() {
                return this.paginatedMatches.length + this.paginatedGroupStages.length + this.paginatedSummons.length + this.paginatedRankings.length
            },
            setPrefixTitle() {
                if (this.active < 1 + this.paginatedSummons.length) {
                    this.prefixTitle = 'Convocations'
                } else if (this.active < 1 + this.paginatedSummons.length + this.paginatedMatches.length) {
                    this.prefixTitle = 'Matchs'
                } else if (this.active < 1 + this.paginatedSummons.length + this.paginatedMatches.length + this.paginatedGroupStages.length) {
                    this.prefixTitle = 'Poules'
                } else {
                    this.prefixTitle = 'Classement'
                }
            }

        }" x-init="loop()">
            <header>
                <div id="header">
                    <div class="left-content bubble">
                        <img src="{% static 'tournaments/images/PadelClub_logo_512.png' %}" alt="logo" class="logo">
                        <div class="left-margin">
                            <h1 class="club">{{ tournament.broadcast_event_display_name }}</h1>
                            <h1 class="event"><span x-text="prefixTitle"></span> {{ tournament.broadcast_display_name }}</h1>
                        </div >
                    </div>
                    {% if qr_code_options %}
                    <div class="right-content">{% qr_from_text qr_code_url options=qr_code_options %}</div>
                    {% endif %}
                </div>
            </header>


            <div class="wrapper">
                <main>
                    <div class="grid-x">

                        <template x-for="i in paginatedSummons.length">
                            <template x-for="column in paginatedSummons[i-1]">
                                <div class="cell medium-6 large-6 topblock my-block" x-show="active === i">
                                    {% include 'tournaments/broadcast/broadcasted_summon.html' %}
                                </div>
                            </template>
                        </template>

                        <template x-for="i in paginatedMatches.length" >
                            <template x-for="match in paginatedMatches[i-1]" >
                                <div class="cell medium-6 large-3 my-block" x-show="active === i + paginatedSummons.length">
                                    {% include 'tournaments/broadcast/broadcasted_match.html' %}
                                </div>
                            </template>
                        </template>

                        <template x-for="i in paginatedGroupStages.length">
                            <template x-for="group_stage in paginatedGroupStages[i-1]">
                                <div class="cell medium-6 large-3 my-block" x-show="active === i + paginatedSummons.length + paginatedMatches.length">
                                    {% include 'tournaments/broadcast/broadcasted_group_stage.html' %}
                                </div>
                            </template>
                        </template>

                        <template x-for="i in paginatedRankings.length">
                            <template x-for="column in paginatedRankings[i-1]">
                                <div class="cell medium-6 large-6 topblock my-block" x-show="active === i + paginatedSummons.length + paginatedMatches.length + paginatedGroupStages.length">
                                    {% include 'tournaments/broadcast/broadcasted_ranking.html' %}
                                </div>
                            </template>
                        </template>
                    </div>

                </main>
            </div>

        </div>
    </body>
</html>
