@using NzbDrone.Services.Service.Helpers
@model string
@{ViewBag.Title = "Pending";}

@section HeaderContent{
    @Html.IncludeCss("Grid.css")
    <style>
        .buttonContainer {
            margin-bottom: 15px;
        }
    </style>
}

<div class="grid-container">
    <div class="buttonContainer">
        <button id="btnAddNewRow">Add</button>
        <button id="btnPromoteAll">Promote All</button>
    </div>
    <table id="mappingsGrid" class="dataTablesGrid hidden-grid no-details">
        <thead>
            <tr>
                <th>Clean Title</th>
                <th>TvDb ID</th>
                <th>Title</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<form id="formAddNewRow" action="#">
    <label for="cleanTitle">Clean Title</label> <input type="text" name="cleanTitle" id="cleanTitle" class="required" rel="0" />
    <br />
    <label for="id">TvDb ID</label> <input type="text" name="id" id="id" class="required" rel="1" />
    <br />
    <label for="title">Title</label> <input type="text" name="title" id="title" class="required" rel="2" />
    <br />
    <input type="hidden" name="commands" id="commands" rel="3" />
</form>

@section Scripts{
    <script type="text/javascript">
        addUrl = '../SceneMapping/AddPending';
        updateUrl = '../SceneMapping/UpdatePending';
        promoteUrl = '../SceneMapping/Promote';
        promoteAllUrl = '../SceneMapping/PromoteAll';
        deleteUrl = '../SceneMapping/Delete';

        $(document).ready(function() {
            $('#mappingsGrid').removeClass('hidden-grid');

            $('#btnPromoteAll').button({
                icons: {
                    primary: "ui-icon-arrowthick-1-n"
                }
            });

            oTable = $('.dataTablesGrid').dataTable({
                "bShowAll": true,
                "aaData": @Html.Raw(Model),
                "bPaginate": true,
                "bLengthChange": false,
                "bFilter": false,
                "bSort": true,
                "bInfo": true,
                "bAutoWidth": false,
                "iDisplayLength": 20,
                "sPaginationType": "four_button",
                "aoColumns": [
                    { sWidth: 'auto', "mDataProp": "CleanTitle", "bSortable": false }, //CleanTitle
                    { sWidth: 'auto', "mDataProp": "Id", "bSortable": false }, //ID
                    { sWidth: 'auto', "mDataProp": "Title", "bSortable": false }, //Title
                    { sWidth: '40px', "mDataProp": "Commands", "bSortable": false, "fnRender": function (row) {
                            var promoteImage = "<img src=\"../../Content/Images/Promote.png\" alt=\"Promote\" title=\Promote to Active\" class=\"gridAction\" onclick=\"promoteMapping(this.parentNode.parentNode, " + row.aData["MappingId"] + ")\">";
                            var deleteImage = "<img src=\"../../Content/Images/close.png\" alt=\"Delete\" title=\"Delete\" class=\"gridAction\" onclick=\"deleteMapping(this.parentNode.parentNode, " + row.aData["MappingId"] + ")\">";
                            
                            return promoteImage + deleteImage;
                        }
                    } //Commands
                ],  
                "aaSorting": [[0, 'asc']],
                "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    fnRowCallback(nRow, aData);
                }
                }).makeEditable({
                    sAddURL: addUrl,
                    sUpdateURL: updateUrl,
                    oAddNewRowButtonOptions: {	label: "Add",
                        icons: {primary:'ui-icon-plus'} 
                    },
                    oDeleteRowButtonOptions: {	label: "Remove", 
                        icons: {primary:'ui-icon-trash'}
                    },

                    oAddNewRowFormOptions: { 	
                        title: 'Add new value',
                        show: "blind",
                        hide: "explode",
                        modal: true
                    }	
                });
            });
        
            function fnRowCallback(nRow, aData) {
                var id = aData["MappingId"];
                $(nRow).attr("id",id);
            }
        
            $('#formAddNewRow').live('keyup', function(e){
  	            if (e.keyCode == 13) {
  	                $('#btnAddNewRowOk').click();
  	        }
  	    });
        
        function promoteMapping(row, mappingId) {
            $.ajax({
                type: "GET",
                url: promoteUrl,
                data: { mappingId: mappingId },
                success: function() {
                    oTable.fnDeleteRow(oTable.fnGetPosition(row));
                }
            });
        }

        $(document).on('click', '#btnPromoteAll', function() {
            $.ajax({
                type: "GET",
                url: promoteAllUrl,
                success: function() {
                    oTable.fnClearTable();
                }
            });
        });

        function deleteMapping(row, mappingId) {
            $.ajax({
                type: "GET",
                url: deleteUrl,
                data: { mappingId: mappingId },
                success: function() {
                    oTable.fnDeleteRow(oTable.fnGetPosition(row));
                }
            });
        }
    </script>
}