@using EnVisage.Code.HtmlHelpers
@using Microsoft.AspNet.Identity
@using EnVisage.Code
@{
    ViewBag.Title = "Projects";
}
@section stylesheets
{
    <link href="~/Content/stylesheets/xeditable.css" rel="stylesheet" type="text/css">
}
@section scripts
{
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
    <script src="~/Scripts/Angular/angular.min.js"></script>
    <script src="~/Scripts/Angular/angular-route.min.js"></script>
    <script src="~/Scripts/Angular/xeditable.min.js"></script>
    <script src="~/Scripts/Angular/app.js"></script>
    <script src="~/Scripts/Angular/controllers.js"></script>

    <script type="text/javascript">
        
    	var ctr = 0;
    	var _evdttbl = null;
    	var _pagePreferences;
    	var _savePrefUrl = '@Url.Action("SavePagePreferences", "User")';
        var _pageKey = '@ViewBag.Source';
        var _getPrefUrl = '@Url.Action("GetPagePreferences", "User")';
        var _scenDetailsUrl = '@Url.Action("Details", "Scenarios", new {@id = "_rplcmnt_", @ref= "/", @back="projects"})';
        var _getInactiveScenariosUrl = '@Url.Action("Inactive", "ForecastDashboard", new { @id = "_rplcmnt_" })';
        var _loadingGifUrl = '@Url.Content("~/Content/images/load.gif")';

        function initDataTable() {
            var allColumns = [];
            allColumns["ProjectName"] = {
                "sTitle": "Project Name",
                "sClass": "",
                "mData": "ProjectName",
                "sName": "ProjectName",
                "mRender": function (data, type, full) {
                	var ret = ('<a id="lnkEdit_' + full.Id + '" onclick="return CheckLock(this.id, \'Project\', \'_rplcmnt_\')" data-toggle="popover" data-placement="right" class="popover-warning popover-dark" href="@Url.Action("Edit", "Project", new { @id = "_rplcmnt_" })">' + data + '</a> ').replace(/_rplcmnt_/g, full.Id);
                	if (full.ProjectParts.length > 0)
                		ret = '<a data-id="id_' + full.Id + '" class="rowexpander" href="javascript:;"><i class="fa fa-big-caret-right" title="Expand"></i></a> ' + ret;
                	return ret;
                }
            };
            allColumns["ActiveScenario"] = {
                "sTitle": "Active Scenario",
            	/*"sClass": "",*/
				"sWidth": "300px",
                "mData": "ActiveScenario",
                "sName": "ActiveScenario",
                "mRender": function (data, type, full) {
                    if (full.ProjectParts != null && full.ProjectParts.length > 0) return "";
                    
                    var dropdownlist = "";
                    if (full.InactiveScenarios.length > 0) {
                        dropdownlist = '<div class="btn-group"><button type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button><ul class="dropdown-menu">';
                        full.InactiveScenarios.forEach(function (element, index, array) {
                            var strT = '<li><a id="aN__rplcmnt_" onclick="return CheckLock(this.id, \'Scenario\', \'_rplcmnt_\')" class="popover-warning popover-dark" href="' + _scenDetailsUrl + '">' + element.split("//")[1] + '</a></li>';
                            dropdownlist += strT.replace(/_rplcmnt_/g, element.split("//")[0]);
                        });
                        dropdownlist += '</ul></div>';
                    
                    }
                    if (!data) {
                        if (!full.HasChildren)
                            return dropdownlist + '<a id="btnAddScenario' + full.Id + '" onclick="loadScenario(\'' + full.Id + '\');" data-toggle="popover" data-placement="right" class="btn btn-xs btn-success popover-warning popover-dark pull-right" href="#" title="Add Scenario"><i class="fa fa-plus"></i></a>';
                        else
                            return '';
                    }

                    var strA = dropdownlist + ' <a style="margin-left:' + (dropdownlist.length == 0 ? '25px' : '0px') + ';" id="aN__rplcmnt_" onclick="return CheckLock(this.id, \'Scenario\', \'_rplcmnt_\')" class="popover-warning popover-dark" href="' + _scenDetailsUrl + '">' + data.split("//")[1] + '</a>' +
                        ' <a id="btnAddScenario' + full.Id + '" onclick="loadScenario(\'' + full.Id + '\');" data-toggle="popover" data-placement="right" class="btn btn-xs btn-success popover-warning popover-dark pull-right" href="#" title="Add Scenario"><i class="fa fa-plus"></i></a>';
                    return strA.replace(/_rplcmnt_/g, data.split("//")[0]);
                }
            };
            allColumns["ProjectNumber"] = {
                "sTitle": "Number",
                "mData": "ProjectNumber",
                "sName": "ProjectNumber",
                "mRender": function (data, type, full) {
                    if (full.ProjectParts != null && full.ProjectParts.length > 0) return "";
                    return data;
                }

            };
            allColumns["Status"] = {
                "sTitle": "Status",
                "sClass": "",
                "mData": "Status",
                "sName": "Status",
                "mRender": function (data, type, full) {
                    if (full.ProjectParts != null && full.ProjectParts.length > 0) return "";
                    return data;
                }

            };
            allColumns["Priority"] = {
                "sTitle": "Priority",
                "sClass": "",
                "mData": "Priority",
                "sName": "Priority",
                "mRender": function (data, type, full) {
                    if (full.ProjectParts != null && full.ProjectParts.length > 0) return "";
                    return data;
                }
            };
            allColumns["Classification"] = {
                "sTitle": "Classification",
                "sClass": "",
                "mData": "Classification",
                "sName": "Classification",
                "mRender": function (data, type, full) {
                    if (full.ProjectParts != null && full.ProjectParts.length > 0) return "";
                    return data;
                }
            };
            allColumns["Teams"] = {
                "sTitle": "Teams",
                "sClass": "",
                "mData": "Teams",
                "sName": "Teams",
                "mRender": function (data, type, full) {
                	if (full.ProjectParts != null && full.ProjectParts.length > 0) return "";
                	var ret = "";
                	for (var i = 0; i < data.length; i++) {
                		ret += data[i];
                		if (i != data.length - 1)
                			ret += ", ";
                	}
                    return ret;
                }
            };
            allColumns["Actions"] = {
                "sTitle": "",
                "sClass": "nowrap ",
                "mData": "Id",
                "sName": "Id",
                "mRender": function (data, type, full) {
                @if (Html.CheckSecurityObjectPermission(Areas.Projects, AccessLevel.Write))
                {
					<text>
                	ctr++;
						
					var ret = '<a id="btnEdit' + ctr + '" onclick="return CheckLock(this.id, \'Project\', \'_rplcmnt_\')" data-toggle="popover" data-placement="left" ' + 'class="btn btn-xs btn-primary popover-warning popover-dark" href="@Url.Action("Edit", "Project", new { @id = "_rplcmnt_" })" title="Edit"><i class="fa fa-edit"></i></a> ' + 
                		'<a id="btnDelete' + ctr + '" onclick="return CheckLock(this.id, \'Project\', \'_rplcmnt_\')" data-toggle="popover" data-placement="left" class="btn btn-xs btn-danger popover-warning popover-dark" href="@Url.Action("Delete", "Project", new { @id = "_rplcmnt_" })" title="Delete"><i class="fa fa-trash-o"></i></a> ' + 
                		'<a id="btnCopy' + ctr + '" onclick="return CheckLock(this.id, \'Project\', \'_rplcmnt_\')" data-toggle="popover" data-placement="left" class="btn btn-xs popover-warning popover-dark" href="@Url.Action("Copy", "Project", new { @id = "_rplcmnt_" })" title="Copy"><i class="fa fa-copy"></i></a> ';

                	if (full.HasChildren) {
                		ret += '<a id="btnAddPart' + ctr + '" onclick="return CheckLock(this.id, \'Project\', \'_rplcmnt_\')" data-toggle="popover" data-placement="left" class="btn btn-xs btn-success popover-warning popover-dark" href="@Url.Action("Edit", "Project", new { @id = "_rplcmnt_", @ptab="addpart" })" title="Add Part"><i class="fa fa-plus"></i></a> ';
                	}

                	return ret.replace(/_rplcmnt_/g, data);
					</text>
                }
                else
                {
					<text>
					return "";
					</text>
                }
                }
            };
            
            var sortedColumns = [];

            $.each(_pagePreferences, function (i, obj) {
                if (obj.key === 'tblColOrder') {
                    $.each(obj.val, function (colIndex, colKey) {
                        var col = allColumns[colKey];
                        if (col)
                            sortedColumns.push(col);
                    });
                }
            });
            
            if (sortedColumns.indexOf(allColumns["ProjectName"]) == -1) sortedColumns.push(allColumns["ProjectName"]);
            if (sortedColumns.indexOf(allColumns["ActiveScenario"]) == -1) sortedColumns.push(allColumns["ActiveScenario"]);
            if (sortedColumns.indexOf(allColumns["ProjectNumber"]) == -1) sortedColumns.push(allColumns["ProjectNumber"]);
            if (sortedColumns.indexOf(allColumns["Status"]) == -1) sortedColumns.push(allColumns["Status"]);
            if (sortedColumns.indexOf(allColumns["Priority"]) == -1) sortedColumns.push(allColumns["Priority"]);
            if (sortedColumns.indexOf(allColumns["Classification"]) == -1) sortedColumns.push(allColumns["Classification"]);
            if (sortedColumns.indexOf(allColumns["Teams"]) == -1) sortedColumns.push(allColumns["Teams"]);
            if (sortedColumns.indexOf(allColumns["Actions"]) == -1) sortedColumns.push(allColumns["Actions"]);
            //var settings = evdttbl.dataTable().fnSettings();
        

            _evdttbl = $('#prjcts').dataTable({
                "bPaginate": true,
                "dom": 'Rlfrtip',
                //"sDom": 'R<\"clear\">lfrtip',
                "colReorder": {/*do not allow to reorder first column*/
                    "fixedColumnsLeft": 1,
                    "fixedColumnsRight": 0,
                    "reorderCallback": function () {
                        //also hide all expanded rows
                        $(_evdttbl.DataTable().rows()[0]).each(function (i, e) {
                            var row = _evdttbl.DataTable().row(e);
                            if (row.child.isShown()) {
                                row.child.hide();
                                $("tr[id*='additionalTR" + row.data().Id + "_']").remove();
                                $("#prjcts").find("a[data-id='id_" + row.data().Id + "']").children("i.fa").removeClass("fa-big-caret-down").addClass("fa-big-caret-right");
                            }
                        });
                        onPreferencesItemClick();
                    }
                },
                "bSort": true,
                "bFilter": true,
                "bInfo": true,
                "sScrollY": "",
                "sScrollX": "",
                "bScrollCollapse": true,
                "bProcessing": true,
                "bServerSide": true,
                "bAutoWidth": false,
                "sAjaxSource": document.URL,
                "sServerMethod": "POST",
                "lengthMenu": [[25, 50, 100], [25, 50, 100]],
                "drawCallback": function (settings) {
                	$('.rowexpander').click(expandRow);
                	$("#btnExpandAll").click();
                },
                "aoColumns": sortedColumns
            });

			var headingHtml = "<div class=\"table-header clearfix\">"+
				"	<div class=\"table-caption\" id=\"prjcts_header_button\"></div>"+
				"	<div class=\"DT-lf-right\"><div class=\"DT-per-page\"><div><label id=\"prjcts_header_collapse\"></label></div></div><div class=\"DT-per-page\" id=\"prjcts_header_length\"></div><div class=\"DT-search\" style=\"vertical-align: middle\" id=\"prjcts_header_filter\"></div></div>" +
				"	<div id=\"prjcts_processing\" class=\"dataTables_processing table-caption\" style=\"visibility: hidden;\"></div>"+
				"</div>"

			$('#prjcts_wrapper').prepend(headingHtml);
            @if (Html.CheckSecurityObjectPermission(Areas.Projects, AccessLevel.Write))
            {
			<text>
        	$('#prjcts_header_button').html('<a id="btnAddProject" class="btn btn-primary" href="@Url.Action("Edit", "Project")"><i class="fa fa-plus"></i> Add Project</a>');
			</text>
            }
        	$('#prjcts_wrapper .dataTables_length').appendTo("#prjcts_header_length");
        	$('#prjcts_wrapper .dataTables_filter').appendTo("#prjcts_header_filter");
        	$('#prjcts_wrapper .dataTables_processing').appendTo("#prjcts_wrapper .table-header");
        	$('#prjcts_wrapper .dataTables_filter input').attr('placeholder', 'Search...');
        	$('#prjcts_wrapper .dataTables_processing').addClass("table-caption");
        	$('#prjcts_wrapper .dataTables_processing').html('<span class="h3"><img class="valign-middle" src="../Content/images/loadFA.gif"/></span>');
        	$("#prjcts_header_collapse").append('<a href="javascript:;" id="btnExpandAll" class="btn btn-sm"><i class="fa fa-plus-square-o"></i> Expand all</a> <a href="javascript:;" id="btnCollapseAll" class="btn btn-sm"><i class="fa fa-minus-square-o"></i> Collapse all</a>');

        	$("#btnExpandAll").click(function () {
        		$(".rowexpander").each(function (i, e) {
        			$(this).trigger('click', true);
        		});
        	});
        	$("#btnCollapseAll").click(function () {
        		$(".rowexpander").each(function (i, e) {
        			$(this).trigger('click', false);
        		});
        	});

        	$('#prjcts_wrapper').append("<div class=\"table-footer clearfix\"><div id=\"prjcts_footer_label\" class=\"DT-label\"></div><div id=\"prjcts_footer_paging\"  class=\"DT-pagination\"></div></div>");
        	$('#prjcts_wrapper .dataTables_info').appendTo('#prjcts_footer_label');
        	$('#prjcts_wrapper .dataTables_paginate').appendTo('#prjcts_footer_paging');
			
        }

        function onPreferencesItemClick(menuItem) {
            var postData = { pageKey: _pageKey };
            var items = [];
            //_menu.children('li').each(function (index, li) {
            //    var key = $(li).data('key');
            //    if (!!key) {
            //        var item = $(li).find('input[type=checkbox]');
            //        var val = item.prop('checked');
            //        if (!!val)
            //            items.push({ key: key, val: val });
            //        else
            //            items.push({ key: key, val: false });
            //    }
            //});
            var colOrder = [];
            $.each(_evdttbl.dataTable().fnSettings().aoColumns, function (i, obj) {
                colOrder.push(obj.mData);
            });
            items.push({ key: 'tblColOrder', val: colOrder });
            postData.data = JSON.stringify(items);
            $.post(_savePrefUrl, postData, function (data) {
                console.log('save: ' + data);
            }).error(function (h, e) {
                console.log("save. h = " + h);
                console.log("save. e = " + e);
            });
        }

        function expandRow(evt, bExpand) {
            var a = $(this).closest('a');
            var projectTr = $("#prjcts").find("a[data-id='" + a.attr("data-id") + "']").closest("tr");
            var row = _evdttbl.DataTable().row(projectTr);
            var thisA = projectTr.find(".rowexpander");
            if (bExpand != null) {
            	if (bExpand == true && row.child.isShown())
            		return;
            	if (bExpand == false && !row.child.isShown())
            		return;
            }

            if (row.child.isShown()) {
                $(thisA).children("i.fa").removeClass("fa-big-caret-down").addClass("fa-big-caret-right");
                row.child.hide();
                $("tr[id*='additionalTR" + row.data().ProjectId + "_']").remove();
            }
            else {
                $(thisA).children("i.fa").removeClass("fa-big-caret-right").addClass("fa-big-caret-down");
                row.child("<div id='infoPanel" + row.data().ParentId + "'></div>").show();
                var tr = $('#infoPanel' + row.data().ParentId).closest('tr');
                var dtColumns = _evdttbl.dataTable().fnSettings().aoColumns;
                $(row.data().ProjectParts).each(function (responseRowIndex, responseRow) {
                    var htmlToAppend = "";
                    $(dtColumns).each(function (dtColumnIndex, dtColumn) {
                        htmlToAppend += '<td';
                        //styles
                        htmlToAppend += ' style="';
                        htmlToAppend += 'background-color:#f0f0f0;';
                        if (dtColumn.bVisible == false)
                            htmlToAppend += 'display:none;';
                        htmlToAppend += '"';
                        //CSS classes
                        htmlToAppend += ' class="';
                        //column identifier 
                        htmlToAppend += 'inactv-' + dtColumn.sName + ' ';
                        if (dtColumn.sName == "Id" || dtColumn.sName == "ActiveScenario")
                            htmlToAppend += 'nowrap bigCol ';
                        if (dtColumn.sName == "ProjectName")
                            htmlToAppend += 'bigCol ';
                        else
                            htmlToAppend += 'smallCol ';
                        htmlToAppend += '"';
                        htmlToAppend += '>';
                        //debugger;
                        if (dtColumn.sName == "ProjectName") {
                            htmlToAppend += "<span style='margin-left:15px;'>" + responseRow.ProjectName + "</span>";
                        }
                        else if (dtColumn.sName == "ActiveScenario") {
                            //debugger;
                            //htmlToAppend += responseRow[dtColumn.sName];
                            var dropdownlist = "";
                            if (responseRow.InactiveScenarios.length > 0) {
                                dropdownlist = '<div class="btn-group"><button type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button><ul class="dropdown-menu">';
                                responseRow.InactiveScenarios.forEach(function (element, index, array) {
                                    var strT = '<li><a id="aN__rplcmnt_" onclick="return CheckLock(this.id, \'Scenario\', \'_rplcmnt_\')" class="popover-warning popover-dark" href="' + _scenDetailsUrl + '">' + element.split("//")[1] + '</a></li>';
                                    dropdownlist += strT.replace(/_rplcmnt_/g, element.split("//")[0]);
                                });
                                dropdownlist += '</ul></div>';
                            }

                            var data = responseRow[dtColumn.sName];

                            if (data != null) {
                                var strA = dropdownlist + ' <a style="margin-left:' + (dropdownlist.length == 0 ? '25px' : '0px') + '" id="aN__rplcmnt_" onclick="return CheckLock(this.id, \'Scenario\', \'_rplcmnt_\')" class="popover-warning popover-dark" href="' + _scenDetailsUrl + '">' + data.split("//")[1] + '</a>' +
                                    ' <a id="btnAddScenario' + responseRow.Id + '" onclick="loadScenario(\'' + responseRow.Id + '\');" data-toggle="popover" data-placement="left" class="btn btn-xs btn-success popover-warning popover-dark  pull-right" href="#" title="Add Scenario"><i class="fa fa-plus"></i></a>';
                                htmlToAppend += strA.replace(/_rplcmnt_/g, data.split("//")[0]);
                            } else {
                                htmlToAppend += dropdownlist + '<a id="btnAddScenario' + responseRow.Id + '" onclick="loadScenario(\'' + responseRow.Id + '\');" data-toggle="popover" data-placement="left" class="btn btn-xs btn-success popover-warning popover-dark  pull-right" href="#" title="Add Scenario"><i class="fa fa-plus"></i></a>';
                            }
                        }
                        //else if (dtColumn.sName == "ProjectNumber") {
                        //    //ExpectedGrossMargin
                        //    htmlToAppend += ((responseRow.UseLMMargin != 0) ? Math.round(responseRow.ExpectedGrossMargin_LM * 1000) / 10 + ' % (L&M)' : Math.round(responseRow.ExpectedGrossMargin * 1000) / 10 + ' %');
                        //}
                        //else if (dtColumn.sName == "Status" {
                        //    //other percents
                        //    htmlToAppend += ((!responseRow[dtColumn.sName]) ? "0%" : Math.round(responseRow[dtColumn.sName] * 1000) / 10 + ' %');
                        //}
                        //else if (dtColumn.sName == "Priority") {
                        //    //CGSplit
                        //    htmlToAppend += ((!responseRow.CGSplit) ? "0%" : responseRow.CGSplit * 100 + ' %') + " / " + ((!responseRow.EFXSplit) ? "0%" : responseRow.EFXSplit * 100 + ' %');
                        //}
                        //else if (dtColumn.sName == "Classification") {
                        //    //dates
                        //    htmlToAppend += ((!responseRow[dtColumn.sName]) ? "0" : formatFDDate(responseRow[dtColumn.sName]));
                        //}
                        else if (dtColumn.sName == "Teams") {
                        	var data = ((!responseRow[dtColumn.sName]) ? [] : responseRow[dtColumn.sName]);
                        	var ret = "";
                        	for (var i = 0; i < data.length; i++) {
                        		ret += data[i];
                        		if (i != data.length - 1)
                        			ret += ", ";
                        	}
                        	htmlToAppend += ret;

                        }
                        else if (dtColumn.sName == "Id") {

                        }
                        else {
                            //"regular" columns: Priority, 
                            htmlToAppend += responseRow[dtColumn.sName];
                        }
                        htmlToAppend += "</td>";
                    });
                    if (responseRowIndex == 0) {
                        $(tr).html(htmlToAppend);
                    }
                    else {
                        $(tr).after('<tr id="additionalTR' + responseRow.ProjectId + '_' + responseRowIndex + '">' + htmlToAppend + '</tr>');
                    }
                });
			}
        }

        function loadScenario(projectId) {

            //var partsCount = 0;
            //if (projectId.length > 0)
            //    StartEdit('Trainings', trainingId, null, null, 'erorMsgPlaceholder');
            var url = "?Id=" + projectId;
            $('#reloadForm').load('@Url.Action("LoadScenario", "Scenarios")' + url, function () {
                //partsCount++;
                //if (partsCount == 2) {
                initScenario();
                $('#createScenario').on('hidden.bs.modal', function () {
                    //if (trainingId.length > 0) {
                    //    StopEdit();
                    //    RemoveLock('Trainings', trainingId);

                }).modal('show');
                //}
            });
            @*$('#scenarioReload1').load('@Url.Action("LoadScenario1", "Scenarios")' + url, function () {
                partsCount++;
                if (partsCount == 2) {
                    initScenario();
                    $('#createScenario').on('hidden.bs.modal', function () {
        
                    }).modal('show');
                }
            });*@
        }

    	function onFailure(xhr) {
    		//debugger;
    		$('#reloadForm').html(xhr.responseText);
    		initScenario();
    		moveNext();
    		if ($('#CostSavingsPanelExpanded').val().toLowerCase() == "true")
    			$("#btnAddCostSavings").click();
    		unblockUI();
    	}
    	function onSuccess(data) {
    		//debugger;
    		$('#createScenario').modal('hide');
    		unblockUI();
    		var href = document.location.href;
    		if (href.substr(href.length - 1) == '#')
    			href = href.substr(0, href.length - 1);
    		document.location.href = href;
    	}

    	function isMSIE() {

            var ua = window.navigator.userAgent;
            var msie = ua.indexOf("MSIE ");

            if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer, return version number
                return true;

            return false;
        }

        init.push(function () {
            $.post(_getPrefUrl, { key: _pageKey }, function (response) {
                if (response.Data == null || response.Data == '')
                    _pagePreferences = [];
                else
                    _pagePreferences = JSON.parse(response.Data);

                initDataTable();
                $('#prjcts').on('mouseenter', 'td,th', function () {
                	var $this = $(this);
                	if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
                		$this.attr('title', $this.text());
                	}
                });
            });
        });
        
    </script>
}

<div class="table-light table-responsive">
	<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered dataTable-tightXXX" id="prjcts">
		<thead>
			<tr>
				<th>
					Project Name
				</th>
				<th>
					Active Scenario
				</th>
				<th>
					Number
				</th>
				<th>
					Status
				</th>
				<th>
					Priority
				</th>
				<th>
					Classification
				</th>
				<th>
					Teams
				</th>
				<th>
					Actions
				</th>
			</tr>
		</thead>
	</table>
</div>
<!-- Modal -->    
<div id="createScenario" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-lg">
		<div class="modal-content" id="reloadForm">
		</div> <!-- / .modal-content -->
	</div> <!-- / .modal-dialog -->  
</div> <!-- /.modal -->    
<!-- / Modal -->