{% extends 'base.html' %}

{% block content %}
<div style="display: flex; justify-content: center; align-items: center; height: 100vh; padding: 30px;">

    <div id="card-info-container" style="display: flex; width: 90%; max-width: 1500; padding: 30px; border: 1px solid #ccc; border-radius: 8px; background-color: #fff;">

        <!-- Left side for General Info -->
        <div id="left-side" style="flex: 1; padding-right: 30px; border-right: 1px solid #ccc;">
            <ul style="list-style-type: none; padding: 0;">
                <h2>{{ card_data.product_name }}</h2>
                <h4>{{ card_data.artist_name }}</h4><br/>
                <li>Geo: {{ card_data.geo_country }}</li>
                <li>Tadas Score: {{ card_data.tadas_score }}</li>
                <li>Days Trending: {{ card_data.days_trending }}</li>
                <li>Publish Year: {{ card_data.publish_year }}</li>
                <li>Product Family No: {{ card_data.product_family_no }}</li>
                <li>ISRC: {{ card_data.isrc_cd }}</li>
                <li>Rep Owner: {{ card_data.rep_owner_name }}</li>
                <li>
                    <a href="{{ 'https://apollo.stream/spotify/track/' + card_data.track_uri }}" target="_blank">View Apollo</a>
                </li>
                <li>
                    <a href="{{ 'https://insights.sonymusic.com/song/' + card_data.isrc_cd[0] + '?country=' + card_data.geo_country }}" target="_blank">View Insights</a>
                </li><br/>
            </ul>

            <!-- Trending Flags Section -->
            <p style="margin-bottom: 0;">Trending Flags</p>
            <div id="trending-flags" style="margin-top: 5px;"></div>
        </div>

        <!-- Right side for Stats -->
        <div id="right-side" style="flex: 2; padding-left: 20px;">
            <!-- Collapsible Stats Section -->
            <div id="card-container2" style="border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
                <!-- Summary Tables -->
                <div class="collapsable" onclick="toggleContent('summarycontent')">
                    <h4>Automated Summary ></h4>
                </div>
                <div class="summarycontent" id="summarycontent" style="display: none;">
                    {% set paragraphs = iago_info.summary.split("\n") if "\n" in iago_info.summary else [iago_info.summary] %}
                    {% for paragraph in paragraphs %}
                        <p>{{ paragraph }}</p>
                    {% endfor %}
                </div>


                <!-- Daily Gainers Tables -->
                <div class="collapsable" onclick="toggleContent('dgcontent')">
                    <h4>Daily Gainers ></h4>
                </div>
                <div class="dgcontent" id="dgcontent" style="display: none;">
                    <!-- Spotify Streaming -->
                    <p><u>Spotify Streaming</u></p>
                    <table id="cardminitable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>Streams</th><th>Streams Lift</th><th>Saves</th><th>Saves Lift</th>
                                <th>Lean Forward Streams</th><th>Lean Forward Lift</th><th>Search Streams</th><th>Search Lift</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ '{:,.0f}'.format(card_data.s_tw_streams) }}</td>
                                <td>{{ (card_data.s_stream_lift * 100) | round(0) | int }}%</td>
                                <td>{{ '{:,.0f}'.format(card_data.yesterday_saves) }}</td>
                                <td>{{ (card_data.s_Saves_lift_factor * 100) | round(0) | int }}%</td>
                                <td>{{ '{:,.0f}'.format(card_data.s_tw_lf_streams) }}</td>
                                <td>{{ (card_data.s_lf_stream_lift  * 100) | round(0) | int }}%</td>
                                <td>{{ '{:,.0f}'.format(card_data.s_tw_search_streams) }}</td>
                                <td>{{ (card_data.s_search_stream_lift * 100) | round(0) | int }}%</td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- Apple Streaming -->
                    <p><u>Apple Streaming</u></p>
                    <table id="cardminitable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>Streams</th><th>Streams Lift</th>
                                <th>Lean Forward Streams</th><th>Lean Forward Lift</th><th>Search Streams</th><th>Search Lift</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ '{:,.0f}'.format(card_data.a_tw_streams) }}</td>
                                <td>{{ (card_data.a_stream_lift * 100) | round(0) | int }}%</td>
                                <td>{{ '{:,.0f}'.format(card_data.a_tw_lf_streams) }}</td>
                                <td>{{ (card_data.a_lf_stream_lift  * 100) | round(0) | int }}%</td>
                                <td>{{ '{:,.0f}'.format(card_data.a_tw_search_streams) }}</td>
                                <td>{{ (card_data.a_search_stream_lift * 100) | round(0) | int }}%</td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- Vevo/Shazam/Downloads, etc. -->
                    <p><u>Vevo, Shazam, Downloads</u></p>
                    <table id="cardminitable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>Vevo Streams</th><th>Vevo Streams Lift</th><th>Tags</th><th>Tags Lift</th>
                                <th>Downloads</th><th>Downloads Lift</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ '{:,.0f}'.format(card_data.vevo_yesterday_streams) }}</td>
                                <td>{{ (card_data.vevo_lift * 100) | round(0) | int }}%</td>
                                <td>{{ '{:,.0f}'.format(card_data.this_week_shazams) }}</td>
                                <td>{{ (card_data.shaz_lift_factor * 100) | round(0) | int }}%</td>
                                <td>{{ '{:,.0f}'.format(card_data.a_yesterday_downloads) }}</td>
                                <td>{{ (card_data.downloads_lift  * 100) | round(0) | int }}%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="collapsable" onclick="toggleContent('trcontent')">
                    <!-- Track Risers Tables -->
                    <h4>Track Risers ></h4>
                </div>
                <div class="trcontent" id="trcontent" style="display: none;">
                    <table id="cardminitable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>WW This Week Change</th><th>WW This Week Streams</th>
                                <th>US This Week Change</th><th>US This Week Streams</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>+ {{ '{:,.0f}'.format(card_data.tr_streams_change) }}</td>
                                <td>{{ '{:,.0f}'.format(card_data.this_week_tr_streams) }}</td>
                                <td>+ {{ '{:,.0f}'.format(card_data.tr_streams_change_us) }}</td>
                                <td>{{ '{:,.0f}'.format(card_data.this_week_tr_streams_us) }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <table id="cardminitable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>Asia Change</th><th>Euro Change</th><th>Germany Change</th>
                                <th>France Change</th><th>GB Change</th><th>LATIB Change</th><th>Nordic Change</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>+ {{ '{:,.0f}'.format(card_data.tr_streams_change_asia) }}</td>
                                <td>+ {{ '{:,.0f}'.format(card_data.tr_streams_change_eu) }}</td>
                                <td>+ {{ '{:,.0f}'.format(card_data.tr_streams_change_de) }}</td>
                                <td>+ {{ '{:,.0f}'.format(card_data.tr_streams_change_fr) }}</td>
                                <td>+ {{ '{:,.0f}'.format(card_data.tr_streams_change_gb) }}</td>
                                <td>+ {{ '{:,.0f}'.format(card_data.tr_streams_change_latib) }}</td>
                                <td>+ {{ '{:,.0f}'.format(card_data.tr_streams_change_nord) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- ADD SHORTS TABLE -->
                <div class="collapsable" onclick="toggleContent('stcontent')">
                    <h4>Shorts ></h4>
                </div>
                <div class="stcontent" id="stcontent" style="display: none;">
                    <!-- Tiktok -->
                    <p><u>Tiktok</u></p>
                    <table id="cardminitable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>Creations</th><th>Creations DOD</th>
                                <th>Likes</th><th>Likes DOD</th>
                                <th>Views</th><th>Views DOD</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ 'Not Available' if not card_data.us_creations_today else '{:,.0f}'.format(card_data.us_creations_today) }}</td>
                                <td>{{ 'Not Available' if not card_data.t_us_creations_vYest_abs else '{:,.0f}'.format(card_data.t_us_creations_vYest_abs) }}</td>
                                <td>{{ 'Not Available' if not card_data.us_likes_today else '{:,.0f}'.format(card_data.us_likes_today) }}</td>
                                <td>{{ 'Not Available' if not card_data.t_us_likes_vYest_abs else '{:,.0f}'.format(card_data.t_us_likes_vYest_abs) }}</td>
                                <td>{{ 'Not Available' if not card_data.us_num_views_today else '{:,.0f}'.format(card_data.us_num_views_today) }}</td>
                                <td>{{ 'Not Available' if not card_data.t_us_num_views_vYest_abs else '{:,.0f}'.format(card_data.t_us_num_views_vYest_abs) }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <table id="cardminitable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>WW Creations</th><th>WW Creations DOD</th>
                                <th>WW Likes</th><th>WW Likes DOD</th>
                                <th>WW Views</th><th>WW Views DOD</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ 'Not Available' if not card_data.ww_creations_today else '{:,.0f}'.format(card_data.ww_creations_today) }}</td>
                                <td>{{ 'Not Available' if not card_data.t_creations_ww_vYest_abs else '{:,.0f}'.format(card_data.t_creations_ww_vYest_abs) }}</td>
                                <td>{{ 'Not Available' if not card_data.ww_likes_today else '{:,.0f}'.format(card_data.ww_likes_today) }}</td>
                                <td>{{ 'Not Available' if not card_data.t_likes_ww_vYest_abs else '{:,.0f}'.format(card_data.t_likes_ww_vYest_abs) }}</td>
                                <td>{{ 'Not Available' if not card_data.ww_num_views_today else '{:,.0f}'.format(card_data.ww_num_views_today) }}</td>
                                <td>{{ 'Not Available' if not card_data.t_num_views_ww_vYest_abs else '{:,.0f}'.format(card_data.t_num_views_ww_vYest_abs) }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <table id="cardminitable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>Indonesia Daily Creations</th><th>Philippines Daily Creations</th><th>Saudi Daily Creations</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ 'Not Available' if not card_data.ID_creations_tw else '{:,.0f}'.format(card_data.ID_creations_tw) }}</td>
                                <td>{{ 'Not Available' if not card_data.PH_creations_tw else '{:,.0f}'.format(card_data.PH_creations_tw) }}</td>
                                <td>{{ 'Not Available' if not card_data.SA_creations_tw else '{:,.0f}'.format(card_data.SA_creations_tw) }}</td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- Youtube Shorts -->
                    <p><u>Youtube Shorts</u></p>
                    <table id="cardminitable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>Creations</th><th>Creations DOD</th>
                                <th>Views</th><th>Views DOD</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ 'Not Available' if not card_data.y_us_creations_today else '{:,.0f}'.format(card_data.y_us_creations_today) }}</td>
                                <td>{{ 'Not Available' if not card_data.y_us_creations_vYest_abs else '{:,.0f}'.format(card_data.y_us_creations_vYest_abs) }}</td>
                                <td>{{ 'Not Available' if not card_data.y_us_views_today else '{:,.0f}'.format(card_data.y_us_views_today) }}</td>
                                <td>{{ 'Not Available' if not card_data.y_us_views_vYest_abs else '{:,.0f}'.format(card_data.y_us_views_vYest_abs) }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <table id="cardminitable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>WW Creations</th><th>WW Creations DOD</th>
                                <th>WW Views</th><th>WW Views DOD</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ 'Not Available' if not card_data.y_ww_creations_today else '{:,.0f}'.format(card_data.y_ww_creations_today) }}</td>
                                <td>{{ 'Not Available' if not card_data.y_ww_creations_vYest_abs else '{:,.0f}'.format(card_data.y_ww_creations_vYest_abs) }}</td>
                                <td>{{ 'Not Available' if not card_data.y_ww_views_today else '{:,.0f}'.format(card_data.y_ww_views_today) }}</td>
                                <td>{{ 'Not Available' if not card_data.y_ww_views_vYest_abs else '{:,.0f}'.format(card_data.y_ww_views_vYest_abs) }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- Insta Reels -->
                    <p><u>IG Reels</u></p>
                    <table id="cardminitable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>Creations</th><th>Creations DOD</th>
                                <th>Views</th><th>Views DOD</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ 'Not Available' if not card_data.ir_us_creations_today else '{:,.0f}'.format(card_data.ir_us_creations_today) }}</td>
                                <td>{{ 'Not Available' if not card_data.ir_us_creations_vYest_abs else '{:,.0f}'.format(card_data.ir_us_creations_vYest_abs) }}</td>
                                <td>{{ 'Not Available' if not card_data.ir_us_views_today else '{:,.0f}'.format(card_data.ir_us_views_today) }}</td>
                                <td>{{ 'Not Available' if not card_data.ir_us_views_vYest_abs else '{:,.0f}'.format(card_data.ir_us_views_vYest_abs) }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <table id="cardminitable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>WW Creations</th><th>WW Creations DOD</th>
                                <th>WW Views</th><th>WW Views DOD</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ 'Not Available' if not card_data.ir_ww_creations_today else '{:,.0f}'.format(card_data.ir_ww_creations_today) }}</td>
                                <td>{{ 'Not Available' if not card_data.ir_ww_creations_vYest_abs else '{:,.0f}'.format(card_data.ir_ww_creations_vYest_abs) }}</td>
                                <td>{{ 'Not Available' if not card_data.ir_ww_views_today else '{:,.0f}'.format(card_data.ir_ww_views_today) }}</td>
                                <td>{{ 'Not Available' if not card_data.ir_ww_views_vYest_abs else '{:,.0f}'.format(card_data.ir_ww_views_vYest_abs) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="collapsable" onclick="toggleContent('democontent')">
                    <!-- Demo Tables -->
                    <h4>Demographics ></h4>
                </div>
                <div class="democontent" id="democontent" style="display: none;">
                    <table id="cardminitable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>0-17 Streaming Lift</th><th>18-27 Streaming Lift</th><th>28-44 Streaming Lift</th><th>45+ Streaming Lift</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ 'Not Available' if not card_data['0-17_demo_lift_factor'] else (card_data['0-17_demo_lift_factor'] * 100) | round | int }}%</td>
                                <td>{{ 'Not Available' if not card_data['18-27_demo_lift_factor'] else (card_data['18-27_demo_lift_factor'] * 100) | round | int }}%</td>
                                <td>{{ 'Not Available' if not card_data['28-44_demo_lift_factor'] else (card_data['28-44_demo_lift_factor'] * 100) | round | int }}%</td>
                                <td>{{ 'Not Available' if not card_data['45 and above_demo_lift_factor'] else (card_data['45 and above_demo_lift_factor'] * 100) | round | int }}%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="collapsable" onclick="toggleContent('othercontent')">
                    <!-- Other Tables -->
                    <h4>Other ></h4>
                </div>
                <div class="othercontent" id="othercontent" style="display: none;">
                    <p><u>Pandora Streaming</u></p>
                    <table id="cardminitable" class="table table-striped">
                        <thead>
                            <tr>
                                <th>This Week Pandora Streams</th><th>Last Week Pandora Streams</th><th>Pandora Lift</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ 'Not Available' if not card_data.yesterday_pandora else '{:,.0f}'.format(card_data.yesterday_pandora) }}</td>
                                <td>{{ 'Not Available' if not card_data.last_week_pandora else '{:,.0f}'.format(card_data.last_week_pandora) }}</td>
                                <td>{{ 'Not Available' if not card_data.pandora_lift_factor else (card_data.pandora_lift_factor * 100) | round | int }}%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .green-check {
        color: green;
        font-size: 18px;
    }

    /* Styling for the collapsible sections */
    .collapsable {
        background-color: #c6eec6;
        padding: 10px;
        cursor: pointer;
        text-align: left;
        font-weight: bold;
        border: none;
        cursor: pointer;
        margin-top: 10px;
    }

    .collapsable:hover {
        background-color: #9ce19c;
    }

    .dgcontent, .trcontent, .ttcontent, .stcontent, .democontent, .othercontent {
        padding: 10px;
        margin-top: 10px;
        border-top: 1px solid white;
    }

    #cardminitable {
        width: 100%;
        border-collapse: collapse;
    }

    #cardminitable th, #cardminitable td {
        padding: 8px;
        border: 1px solid #ccc;
    }

    #cardminitable th {
        background-color: white;
    }

</style>

<script>
    // Array of the 'is_columns' and their names for the flags
    var is_columns = [
        ['is_s_all', 'Spotify Overall Streams'], ['is_s_lf', 'Spotify Lean Forward Streams'], ['is_s_search', 'Spotify Search Streams'], ['is_s_radio', 'Spotify Radio Streams'],
        ['is_a_all', 'Apple Overall Streams'], ['is_a_lf', 'Apple Lean Forward Streams'], ['is_a_search', 'Apple Search Streams'], 
        ['is_vevo', 'Vevo Streams'], ['is_download', 'Downloads'], ['is_s_Saves', 'Spotify Saves'], ['is_shazam', 'Shazams'],
        ['is_tr', 'Track Risers Overall'], ['is_tr_us', 'Track Risers USA'], ['is_tr_eu', 'Track Risers EU'], ['is_tr_latib', 'Track Risers LATIB'], 
        ['is_tr_asia', 'Track Risers Asia'], ['is_tr_nord', 'Track Risers NORD'], ['is_tr_gb', 'Track Risers GB'], ['is_tr_de', 'Track Risers DE'], ['is_tr_fr', 'Track Risers FR'],
        ['is_tiktok_creations_ww', 'Tiktok WW Creations DOD'], ['is_tiktok_likes_ww', 'Tiktok WW Likes DOD'], ['is_tiktok_num_views_ww', 'Tiktok WW Views DOD'], 
        ['is_tiktok_creations_us', 'Tiktok US Creations DOD'], ['is_tiktok_likes_us', 'Tiktok US Likes Top'], ['is_tiktok_num_views_us', 'Tiktok US Views WOW'],
        ['is_ttasia_ID', 'Tiktok Indonesia'], ['is_ttasia_PH', 'Tiktok Philippines'], ['is_ttasia_SA', 'Tiktok Saudi Arabia'],
        ['is_insta_creations_ww', 'Reels WW Creations DOD'], ['is_insta_views_ww', 'Reels WW Views DOD'],
        ['is_insta_creations_us', 'Reels US Creations DOD'], ['is_insta_views_us', 'Reels US Views WOW'],
        ['is_youtube_creations_ww', 'Shorts WW Creations DOD'], ['is_youtube_views_ww', 'Shorts WW Views DOD'],
        ['is_youtube_creations_us', 'Shorts US Creations DOD'], ['is_youtube_views_us', 'Shorts US Views WOW']
    ];

    // Iterate over is_columns and check for flags
    var TrackData = {{ card_data|tojson }}; // Convert the card_data to JSON
    
    var is_column_reporter = "";
    var is_column_num = 0;

    for (var i = 0; i < is_columns.length; i++) {
        var labelcombo = is_columns[i];
        var labelkey = labelcombo[0];
        var labeloutput = labelcombo[1];

        // Check if TrackData has the property and if its value is 1
        if (TrackData.hasOwnProperty(labelkey) && TrackData[labelkey] === 1) {
            is_column_reporter += "<span class='green-check'>&#10004;</span> " + labeloutput + '<br>';
            is_column_num += 1;
        }
    }

    // If no flags are found, display 'None'
    if (is_column_num === 0) {
        is_column_reporter += 'None';
    }

    // Insert the generated flag list into the HTML
    document.getElementById("trending-flags").innerHTML = is_column_reporter;

    // Function to toggle the collapsible sections
    function toggleContent(id) {
        var content = document.getElementById(id);
        if (content.style.display === "none") {
            content.style.display = "block";
        } else {
            content.style.display = "none";
        }
    }

</script>

{% endblock %}