{% extends 'base.html' %}

{% block content %}
<h4 id="date-update"></h4>
{% if current_endpoint == 'main.sadat' %}
        Below you will find tracks that have been flagged as dropping via a variety of leading indicator tools. Those flags have been collected and an algorithm has been used to determine a recommendation as to which songs to market. The SADAT score below is that number. 
    {% elif current_endpoint == 'main.repowner_page' %}
        Below you will find tracks that have been flagged as trending via a variety of leading indicator tools. Those flags have been collected and run through a machine learning model that attempts to predict the staying power of the trend now that it has been discovered. The TADAS Score seen below is this prediction.
    {% else %}
        Below you will find tracks that have been flagged as trending via a variety of leading indicator tools. Those flags have been collected and run through a machine learning model that attempts to predict the staying power of the trend now that it has been discovered. The TADAS Score seen below is this prediction.
{% endif %}

<div id="card-container" {% if current_endpoint == 'main.repowner_page' %}style="display: none;"{% endif %}></div>
<div id="timeseriesGraph" {% if current_endpoint == 'main.repowner_page' %}style="display: none;"{% endif %}></div>


<form action="{% if current_endpoint == 'main.international' %}{{ url_for(current_endpoint, geo_code=tadas_version) }}{% else %}{{ url_for(current_endpoint, label_code=tadas_version) }}{% endif %}" method="post">
    
    <br>

    <div class="rep-owner-container" style="display: flex; align-items: center;">
        <label for="rep_owner" style="margin-right: 10px;">Rep Owner:</label>
        <select id="rep_owner" name="rep_owner[]" multiple="multiple" style="flex: 1;">
            {% set rep_owners = filter_status | selectattr('rep_owner', 'defined') | map(attribute='rep_owner') | first %}
            <option value="Legacy" {% if rep_owners and 'Legacy' in rep_owners %}selected{% endif %}>Legacy</option>
            <option value="Columbia" {% if rep_owners and 'Columbia' in rep_owners %}selected{% endif %}>Columbia</option>
            <option value="RCA" {% if rep_owners and 'RCA' in rep_owners %}selected{% endif %}>RCA</option>
            <option value="Epic" {% if rep_owners and 'Epic' in rep_owners %}selected{% endif %}>Epic</option>
            <option value="5020 Records" {% if rep_owners and '5020 Records' in rep_owners %}selected{% endif %}>5020 Records</option>
            <option value="Sony Nashville" {% if rep_owners and 'Sony Nashville' in rep_owners %}selected{% endif %}>Sony Nashville</option>
            <option value="Arista" {% if rep_owners and 'Arista' in rep_owners %}selected{% endif %}>Arista</option>
            <option value="Alamo" {% if rep_owners and 'Alamo' in rep_owners %}selected{% endif %}>Alamo</option>
            <option value="Provident" {% if rep_owners and 'Provident' in rep_owners %}selected{% endif %}>Provident</option>
            <option value="RECORDS" {% if rep_owners and 'RECORDS' in rep_owners %}selected{% endif %}>RECORDS</option>
            <option value="Ultra" {% if rep_owners and 'Ultra' in rep_owners %}selected{% endif %}>Ultra</option>
            <option value="Masterworks" {% if rep_owners and 'Masterworks' in rep_owners %}selected{% endif %}>Masterworks</option>
            <option value="Black Butter" {% if rep_owners and 'Black Butter' in rep_owners %}selected{% endif %}>Black Butter</option>
            <option value="Milan" {% if rep_owners and 'Milan' in rep_owners %}selected{% endif %}>Milan</option>
            <option value="Century Media" {% if rep_owners and 'Century Media' in rep_owners %}selected{% endif %}>Century Media</option>
            <option value="Sony International Network" {% if rep_owners and 'Sony International Network' in rep_owners %}selected{% endif %}>Sony International Network</option>
            <option value="SME UK" {% if rep_owners and 'SME UK' in rep_owners %}selected{% endif %}>SME UK</option>
            <option value="SME India" {% if rep_owners and 'SME India' in rep_owners %}selected{% endif %}>SME India</option>
            <option value="SME Germany" {% if rep_owners and 'SME Germany' in rep_owners %}selected{% endif %}>SME Germany</option>
            <option value="SME France" {% if rep_owners and 'SME France' in rep_owners %}selected{% endif %}>SME France</option>
            <option value="SME Italy" {% if rep_owners and 'SME Italy' in rep_owners %}selected{% endif %}>SME Italy</option>
            <option value="SME Sweden" {% if rep_owners and 'SME Sweden' in rep_owners %}selected{% endif %}>SME Sweden</option>
            <option value="SME Poland" {% if rep_owners and 'SME Poland' in rep_owners %}selected{% endif %}>SME Poland</option>
            <option value="US Latin" {% if rep_owners and 'US Latin' in rep_owners %}selected{% endif %}>US Latin</option>
            <option value="US Latin and Iberia" {% if rep_owners and 'US Latin and Iberia' in rep_owners %}selected{% endif %}>Latin Iberia</option>
        </select>
    </div>

    <label for="streamRange" style="margin-top: 20px;">Streams Yesterday</label><br>
    <div style="display: flex; align-items: center;">
        <input type="range" id="streamRange" name="filter_choice[]" min="0" max="100000" step="10000" value="{% if filter_status %}{{ filter_status[0] }}{% else %}0{% endif %}">
        <span id="sliderValue">{{ filter_status[0] }}</span>
    </div>

    <input type="checkbox" id="new_trends" name="filter_choice[]" value="new_trends" {% if 'new_trends' in filter_status %}checked{% endif %}>
    <label for="new_trends">New Trends Only</label><br>

    <br>
    <input type="submit" value="Apply Filter">
    <input type="submit" name="reset_filters" value="Reset Filters">
</form>


<br>
<h2>TRENDING TRACKS</h2>
<table id="data" class="table table-striped" {% if current_endpoint == 'main.repowner_page' %}style="display: table;"{% endif %}>
    <thead>
        <tr>
            <th>ID</th>
            <th>Artist</th>
            <th>Track</th>
            <th>Country</th>
            {% if current_endpoint == 'main.sadat' %}
                <th>Sadat Recommendation</th>
                <th>Avg Daily {{geo_country}} Streams</th>
                <th>7 Day {{geo_country}} Drop</th>
                <th>Days Falling</th>
            {% else %}
                <th>TADAS-30</th>
                <th>Avg Daily {{geo_country}} Streams</th>
                <th>7 Day {{geo_country}} Lift</th>
                <th>Days Trending</th>
            {% endif %}
            <th>Daily Gainers</th>
            <th>Track Risers</th>
            <th>TikTok WW</th>
            <th>TikTok {{ geo_country }}</th>
        </tr>
    </thead>
    <tbody>
        {% for row in new_df %}
        <tr>
            {% for value in row[0:8] %}
                {% if loop.index == 7 %}
                    {% if value.startswith('+') %}
                        <td><p style="color:#1368bd;">{{ value }}</p></td>
                    {% else %}
                        <td><p style="color:red;">{{ value }}</p></td>
                    {% endif %}
                {% else %}
                    <td>{{ value }}</td>
                {% endif %}
            {% endfor %}

            {% for value in row[8:] %}
                {% if loop.index in [3,4] %}
                    {% if value > 0 %}
                        <td><p style="color:#1368bd;">+{{ "{:,}".format(value | int) }}</p></td>
                    {% else %}
                        <td><p style="color:red;">{{ "{:,}".format(value | int) }}</p></td>
                    {% endif %}
                {% else %}
                    {% if value >= 1 and value <= 100 %}
                        <td><p style="color:#1368bd;">{{ value | int }}</p></td>
                    {% else %}
                        <td><p style="color:transparent;">{{ value | int }}</p></td>
                    {% endif %}
                {% endif %}
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}

{% block scripts %}
<script>
	const context = {
        current_endpoint: "{{ current_endpoint|safe }}",
        filter_status: {{ filter_status|tojson|safe }},
        date_updated: '{{ date_updated | safe }}',
        geo_country: '{{ geo_country }}',
        card_json_data: {{ card_json_data|safe }},
        comments: {{ comments|safe }},
		tadas_version: '{{ tadas_version }}'
    };

    document.addEventListener('DOMContentLoaded', function() {
        const repOwnerSelect = document.getElementById('rep_owner');
        const cardContainer = document.getElementById('card-container');
        const timeseriesGraph = document.getElementById('timeseriesGraph');
        const dataTable = document.getElementById('data');
        const form = document.querySelector('form');

        // Initially hide the card and graph if on repowner_page
        if (context.current_endpoint === 'main.repowner_page') {
            cardContainer.style.display = 'none';
            timeseriesGraph.style.display = 'none';
        }

        // Display card and graph when rep owner is selected
        repOwnerSelect.addEventListener('change', function() {
            const selectedOptions = Array.from(repOwnerSelect.selectedOptions);
            if (selectedOptions.length > 0) {
                cardContainer.style.display = 'block';
                timeseriesGraph.style.display = 'block';
                dataTable.style.display = 'table'; // Show table
            } else {
                cardContainer.style.display = 'none';
                timeseriesGraph.style.display = 'none';
                dataTable.style.display = 'none'; // Hide table
            }
        });

        // Display card and graph when form is submitted
        form.addEventListener('submit', function() {
            const selectedOptions = Array.from(repOwnerSelect.selectedOptions);
            if (selectedOptions.length > 0) {
                cardContainer.style.display = 'block';
                timeseriesGraph.style.display = 'block';
                dataTable.style.display = 'table'; // Show table
            }
        });

        // Add event listener to each row to display card and graph when a row is clicked
        const tableRows = dataTable.querySelectorAll('tbody tr');

        tableRows.forEach(function(row) {
            row.addEventListener('click', function() {
                const rowData = Array.from(row.cells).map(cell => cell.textContent); // Get the row data

                // Show the card and graph
                cardContainer.style.display = 'block';
                timeseriesGraph.style.display = 'block';

            });
        });

        // Functions to update the card and graph (to be implemented)
        function updateCard(rowData) {
            // Update card content based on the rowData
        }

        function updateGraph(rowData) {
            // Update graph content based on the rowData
        }
    });


</script>
{% endblock %}