<?php $this->layout('main', ['title' => __('Song Listener Impact'), 'manual' => true]) ?>

<?php
/** @var \App\Assets $assets */
$assets
    ->load('bootgrid');
?>

<div class="card">
    <div class="card-header ch-alt">
        <h2><?=__('Song Listener Impact') ?></h2>

        <ul class="actions">
            <li>
                <a href="<?=$router->fromHere(null, ['format' => 'csv']) ?>" title="<?=__('Download CSV') ?>">
                    <i class="zmdi zmdi-download"></i>
                </a>
            </li>
        </ul>
    </div>
    <!--
    <div class="card-body card-padding">
        <a class="btn btn-default" href="#" id="btn-toggle-unplayed">Toggle Unplayed Songs</a>
    </div>
    -->

    <div class="table-responsive">
        <table id="tbl-report" class="data-table table table-striped">
            <thead>
                <tr>
                    <th data-column-id="title"><?=__('Title') ?></th>
                    <th data-column-id="artist"><?=__('Artist') ?></th>
                    <th data-column-id="path"><?=__('Filename') ?></th>
                    <th data-column-id="length_raw" data-formatter="length" data-type="numeric"><?=__('Length') ?></th>
                    <th data-column-id="length" data-visible="false" data-visible-in-selection="false"><?=__('Length Text') ?></th>
                    <th data-column-id="playlists"><?=__('Playlist(s)') ?></th>
                    <th data-column-id="delta_positive" data-type="numeric">&delta; <?=__('Joins') ?></th>
                    <th data-column-id="delta_negative" data-type="numeric">&delta; <?=__('Losses') ?></th>
                    <th data-column-id="delta_total" data-type="numeric">&delta; <?=__('Total') ?></th>
                    <th data-column-id="num_plays" data-type="numeric"><?=__('Plays') ?></th>
                    <th data-column-id="percent_plays"><?=__('Play %') ?></th>
                    <th data-column-id="ratio" data-type="numeric"><?=__('Ratio') ?></th>
                </tr>
            </thead>
            <tbody>
            <?php foreach($report_data as $row): ?>
                <tr class="input">
                    <td><?=$row['title'] ?></td>
                    <td><?=$row['artist'] ?></td>
                    <td><?=$row['path'] ?></td>
                    <td><?=$row['length_raw'] ?></td>
                    <td><?=$row['length'] ?></td>
                    <td><?=implode(', ', $row['playlists']) ?></td>
                    <td class="text-success"><?=$row['delta_positive'] ?></td>
                    <td class="text-danger"><?=$row['delta_negative'] ?></td>
                    <td><?=$row['delta_total'] ?></td>
                    <td class="num_plays"><?=$row['num_plays'] ?></td>
                    <td><?=$row['percent_plays'] ?>%</td>
                    <td><?=$row['ratio'] ?></td>
                </tr>
            <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript" nonce="<?=$assets->getCspNonce() ?>">
$(function() {
    $.expr[':'].textEquals = $.expr.createPseudo(function(arg) {
        return function( elem ) {
            return $(elem).text().match("^" + arg + "$");
        };
    });

    $('#btn-toggle-unplayed').on('click', function(e) {
        e.preventDefault();

        $("#tbl-report").find("td.num_plays:textEquals('0')").closest('tr').toggle();
        return false;
    });

    $(".data-table").bootgrid({
        caseSensitive: false,
        css: {
            icon: 'zmdi icon',
            iconColumns: 'zmdi-view-module',
            iconDown: 'zmdi-sort-amount-desc',
            iconRefresh: 'zmdi-refresh',
            iconUp: 'zmdi-sort-amount-asc'
        },
        formatters: {
            "length": function (column, row) {
                return row.length;
            }
        }
    });
});
</script>
