@model GarageBandz.Domain.Playlist
<!-- Page Heading -->
<div class="row">
    <div class="col-lg-12">
        <h2 class="page-header">
            Gestione Evento <small>@Model.Title</small>
        </h2>
        <ol class="breadcrumb">
            <li><a href="@Url.Action("Index", "Home")"><i class="fa fa-building-o"></i> Dashboard</a></li>
            <li><a href="@Url.Action("Index", "Playlist")"><i class="fa fa-th-list"></i> Playlist</a></li>
            <li class="active"><i class="fa fa-edit"></i> Aggiungi/Modifica</li>
        </ol>
    </div>
</div>
<!-- /.row -->
<div class="row">
    <div class="col-lg-12">
        <div class="alert alert-info alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <i class="fa fa-info-circle"></i>  Da questa pagina puoi creare o modificare <strong>i tuoi playlist</strong>
        </div>
    </div>
</div>
<!-- /.row -->
<div class="row">
    <div class="col-lg-12">
        @using (Html.BeginForm("Save", "Playlist", FormMethod.Post))
        {
            <div class="row">
                <div class="form-group col-md-12">
                    <label>Titolo</label>
                    <input class="form-control" placeholder="Playlist title" name="Title" value="@Model.Title" required>
                </div>
            </div>
            
            <div class="row">
                <div class="form-group col-md-4">
                    <label>Genre</label>
                    
                    @Html.DropDownListFor(x => x.Genre.Id, GarageBandz.Web.Helpers.Metadata.Genres(), "Seleziona...", new { @class = "form-control" })
                </div>
                
             </div>

    <div class="row">
        <div class="form-group col-md-4">
            <label>Select Songs</label>

            @Html.DropDownList("ChooseSong", GarageBandz.Web.Helpers.Metadata.Songs(), "Seleziona...", new { @class = "form-control" })
        </div>
        <div class="form-group col-xs-1 ">
            <label>&nbsp</label>
            <a onclick="javascript:AddSong()" class="btn pull-left"><span class="label label-primary fa-lg">+</span></a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-success" style="margin-top: 10px">
                <div class="panel-heading">Songs in the playlist</div>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover table-striped tablesorter grid" id="SongsTable">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Title <i class="fa fa-sort"></i></th>
                                <th>Author <i class="fa fa-sort"></i></th>
                                <th>Position in playlist <i class="fa fa-sort"></i></th>
                                <th>Azioni</th>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach (var song in Model.Songs.OrderBy(x => x.Position).Select((x, i) => new { Value = x, Index = i }))
                            {

                                <tr data-row="@song.Index">

                                    <td>
                                        <input type="hidden" name="Songs[@song.Index].Song.Id" value="@song.Value.Song.Id" />
                                        <input type="hidden" myname="@song.Value.Song.Id" name="Songs[@song.Index].Id" value="@song.Value.Id" id="Songs_@(song.Index)__Id" />
                                        <input type="hidden" value="@song.Value.Position" name="Songs[@song.Index].Position" />
                                        
                                    </td>
                                    <td>@song.Value.Song.Title</td>
                                    <td>@song.Value.Song.Author</td>
                                    <td class="index">@song.Value.Position</td>
                                    <td><a class="btn btn-danger btn-xs" data-title="Confermi la rimozione del musicisti?" onclick="window.location.href='@Url.Action("Delete","Playlist", new {id = song.Value.Id })'"> <i class="fa fa-times fa-lg"></i></a></td>
                                </tr>
                            }



                        </tbody>

                    </table>
                </div>
            </div>
        </div>

    </div>



            <input type="hidden" value="@Model.Id" name="Id" id="Id" />
            <button type="submit" class="btn btn-primary">Salva modifiche</button>
        }
    </div>


</div>

@section Script {
    <script>
    var songsCount = @Model.Songs.Count();

        function AddSong() {

            var combo = $("#ChooseSong");
            $('#SongsTable tbody').append($("<tr data-row='"+songsCount+"' id='song-id-" + combo.val() + "'></tr>").load("/Band/Playlist/Assign/" + combo.val() + "?count="+songsCount ));
            songsCount++;
        }

        function RemoveSong(id) {
            debugger;
            songsCount = songsCount - 1;
            var selectedRow = $("#song-id-" + id);
            var HiddenRequestZone = $('#RequestZoneId_' + id);
            switch(HiddenRequestZone.val()) {
                case "0":
                    selectedRow.remove();

                    break;
                default:
                    debugger;
                    $("[myname='" + id + "']").val(-1);

                    selectedRow.hide();

                    break;
                    /*default:
                        HiddenRequestZone.val("-" + (HiddenRequestZone.val()))
                        selectedRow.css("display", "none");*/
            }

        }
        </script>   
    <script>
        var fixHelperModified = function(e, tr) {
            var $originals = tr.children();
            var $helper = tr.clone();
            $helper.children().each(function(index) {
                $(this).width($originals.eq(index).width())
            });
            return $helper;
        };
        var updateIndex = function(e, ui) {
            debugger;
            $('td.index', ui.item.parent()).each(function (i) {
                debugger;
                var elementArray = $(this).parent().attr("data-row");
                
                $("[name='Songs[" + elementArray + "].Position']", $(this).siblings()).val(i+1);
                $(this).html(i + 1);
                
            });
        };

        $("#SongsTable tbody").sortable({
            helper: fixHelperModified,
            stop: updateIndex
        }).disableSelection();

    </script>
}