@model HomeModel;
@{
    ViewData["Title"] = "TV7 Playlist";
}

<form method="post">
    
    @* <div class="row"> *@
    @*     <div class="col col-4"> *@
    @*         <button class="btn btn-warning" asp-action="DisableSelectedEntries" asp-controller="Home">Disable selected</button> *@
    @*         <button class="btn btn-info" asp-action="EnableSelectedEntries" asp-controller="Home">Enable selected</button> *@
    @*     </div> *@
    @* </div> *@

    <div class="row">
        <div class="col col-12">
            <table class="table table-hover table-striped" id="playlistTable">
                <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th>Single Action</th>
                    <th>Number Import</th>
                    <th>Number Export</th>
                    <th>Position</th>
                    <th>Name</th>
                    <th>EPG Name</th>
                    <th>Enabled</th>
                    <th>Available</th>
                    <th>URL Proxy</th>
                    <th>URL Original</th>
                    <th>Created</th>
                    <th>Modified</th>
                </tr>
                </thead>
                <tbody>
                @{
                    for (var i = 0; i < Model.PlaylistEntries.Count; i++)
                    {
                        <tr>
                            <td></td>
                            <td>@Model.PlaylistEntries[i].Id</td>
                            <td>
                                <a class="btn btn-secondary" asp-area="" asp-controller="PlaylistEntry" asp-action="Edit" asp-route-id="@Model.PlaylistEntries[i].Id">Edit</a>
                                <a class="btn btn-danger" asp-area="" asp-controller="PlaylistEntry" asp-action="Delete" asp-route-id="@Model.PlaylistEntries[i].Id">Delete</a>
                                @{
                                    if (Model.PlaylistEntries[i].Entry.IsEnabled)
                                    {
                                        <a class="btn btn-warning" asp-area="" asp-controller="PlaylistEntry" asp-action="ToggleEnabled" asp-route-id="@Model.PlaylistEntries[i].Id">Disable</a>
                                    }
                                    else
                                    {
                                        <a class="btn btn-info" asp-area="" asp-controller="PlaylistEntry" asp-action="ToggleEnabled" asp-route-id="@Model.PlaylistEntries[i].Id">Enable</a>
                                    }
                                }
                            </td>
                            <td>@Model.PlaylistEntries[i].Entry.ChannelNumberImport</td>
                            <td>@Model.PlaylistEntries[i].Entry.ChannelNumberExport</td>
                            <td>@Model.PlaylistEntries[i].Entry.Position</td>
                            <td>@Model.PlaylistEntries[i].Entry.Name</td>
                            <td>@Model.PlaylistEntries[i].Entry.EpgMatchName</td>
                            <td class="text-center">@Html.Raw(Model.PlaylistEntries[i].Entry.IsEnabled ? "<span class=\"text-primary\">Enabled</span>" : "<span class=\"text-danger\">Disabled</span>")</td>
                            <td class="text-center">@Html.Raw(Model.PlaylistEntries[i].Entry.IsAvailable ? "<span class=\"text-primary\">yes</span>" : "<span class=\"text-danger\">no</span>")</td>
                            <td>@Model.PlaylistEntries[i].Entry.UrlProxy</td>
                            <td>@Model.PlaylistEntries[i].Entry.UrlOriginal</td>
                            <td>@Model.PlaylistEntries[i].Entry.Created.ToString("g")</td>
                            <td>@Model.PlaylistEntries[i].Entry.Modified.ToString("g")</td>
                        </tr>
                    }
                }
                </tbody>
            </table>
        </div>
    </div>
<script>
$(document).ready(function() {
    const table = $('#playlistTable').DataTable({
        dom: 'Bfrtip',
        columnDefs: [
            {
                orderable: false,
                searchable: false,
                className: 'select-checkbox',
                targets:   [0]
            },
            {
                visible: false,
                targets:   [1]
            },
            {
                orderable: false,
                targets:   [2,10,11]
            },
            {
                searchable: false,
                targets:   [2,10,11,12,13]
            },
        ],
        select: {
            style:    'multi',
            selector: 'td:first-child'
        },
        buttons: [
            {
                text: 'Select all',
                action: function () {
                    table.rows().select();
                }
            },
            {
                text: 'Select none',
                action: function () {
                    table.rows().deselect();
                }
            },
            {
                text: 'Disable selected',
                action: function ( e, dt, node, config ) {
                    alert(
                        'Row data: '+
                        JSON.stringify( dt.row( { selected: true } ).data() )
                    );
                },
                enabled: false
            },
            {
                text: 'Enable selected',
                action: function ( e, dt, node, config ) {
                 const ids = $.map(table.rows('.selected').data(), function (item) {
                     return item[1]
                 });
                 alert(JSON.stringify( ids ));
                },
                enabled: false
            },
            {
             text: 'Delete selected',
             action: function ( e, dt, node, config ) {
                 const ids = $.map(table.rows('.selected').data(), function (item) {
                     return item[1]
                 });
                 alert(JSON.stringify( ids ));
             },
             enabled: false
            }
        ]
    });
    
    table.on( 'select deselect', function () {
            const selectedRows = table.rows( { selected: true } ).count();
            table.button( 2 ).enable( selectedRows > 0 );
            table.button( 3 ).enable( selectedRows > 0 );
            table.button( 4 ).enable( selectedRows > 0 );
        } );
});
</script>
</form>