<?php
use Entity\StationPlaylist;

$this->layout('main', ['title' => __('Reorder Playlist'), 'manual' => true]);

/** @var \App\Assets $assets */
$assets->load('jquery-sortable');
?>

<div class="card">
    <div class="card-header ch-alt">
        <h2><?=__('Reorder Playlist: %s', $this->e($playlist->getName())) ?></h2>
    </div>
    <div class="table-responsive">
        <table class="table table-striped sortable">
            <colgroup>
                <col width="40%">
                <col width="30%">
                <col width="30%">
            </colgroup>
            <thead>
            <tr>
                <th><?=__('Title') ?></th>
                <th><?=__('Artist') ?></th>
                <th><?=__('Album') ?></th>
            </tr>
            </thead>
            <tbody>
            <?php foreach($media_items as $row): ?>
                <?php /** @var App\Entity\StationMount $row */ ?>
                <tr class="vertical-align-middle" data-id="<?=$row['media_id'] ?>">
                    <td><big><?=$this->e($row['media']['title']) ?></big></td>
                    <td><?=$this->e($row['media']['artist']) ?></td>
                    <td><?=$this->e($row['media']['album']) ?></td>
                </tr>
            <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript" nonce="<?=$assets->getCspNonce() ?>">
$(function() {
    var CSRF = '<?=$csrf ?>';
    var group = $('.sortable').sortable({
        containerSelector: 'table',
        itemPath: '> tbody',
        itemSelector: 'tr',
        placeholder: '<tr class="placeholder"></tr>',
        onDrop: function ($item, container, _super) {
            var data = group.sortable("serialize").get();
            var jsonString = JSON.stringify(data[0], null, ' ');

            $.post('',{
                csrf: CSRF,
                order: jsonString
            },function(data){},'json');

            _super($item, container);
        }
    });
});
</script>
