<h2>CreateNewEmployee</h2>

<table class="table" style="width: 100%">
<tr>
    <td style="text-align: left; width: 20%;">
           <label class="labelsytle">
             First Name
        </label>
    </td>
    <td style="text-align: left;">
        <input class="form-control" name="search" ng- model="Empdet.FirstName" placeholder="Enter First Name" style="border-radius: 5px;" />
    </td>
</tr>
<tr>
    <td style="text-align: left;">
        <label class="labelsytle">
            Last Name
        </label>
    </td>
    <td style="text-align: left;">
        <input class="form-control" name="search" ng-model="Empdet.LastName"  placeholder="Enter Last Name" style="border-radius: 5px;" />
    </td>
</tr>
<tr>
    <td style="text-align: left;">
        <label class="labelsytle">
            Email
        </label>
    </td>
    <td style="text-align: left;">
        <input class="form-control" name="search" ng-model="Empdet.Email" placeholder="Enter Email" style="border-radius: 5px;" />
    </td>
</tr>
<tr>
    <td style="text-align: left;">
        <label class="labelsytle" for="file">
            PhotoFile
        </label>
    </td>
    <td style="text-align: left;">
        <form action="" method="post" enctype="multipart/form-data">
        <input class="form-control" name="file" type="file" ng-model="Empdet.PhotoFile" id="file" style="border-radius: 5px;"/>
        </form>
    </td>
</tr>
<tr>
    <td style="text-align: left;">
           <label class="labelsytle">
            PhotoText
        </label>
    </td>
    <td style="text-align: left;">
        <input class="form-control" name="search" ng-model="Empdet.PhotoText" placeholder="Enter PhotoText" style="border-radius: 5px;" />
    </td>
</tr>
<tr>
    <td style="text-align: left;">
           <label class="labelsytle">
            Age
        </label>
    </td>
    <td style="text-align: left;">
        <input class="form-control" name="search" ng-model="Empdet.Age" placeholder="Enter Age" style="border-radius: 5px;" />
    </td>
</tr>

<tr style="display: block; text-align: center; width: 5%; margin: 0 auto;">
    <td style="text-align: left; width: 25px;" colspan="4">
        <button class="btn btn-primary" type="button" ng-click="SaveEmpdet(Empdet)" style="border-radius: 5px; font-family: Consolas;">SAVE</button></td>

    <td style="text-align: left; width: 25px;">
        <button class="btn btn-primary" type="button" ng-click="Cancel()" style="border-radius: 5px; font-family: Consolas;">CANCEL</button></td>
</tr>


</table>

angular.module('MyEmployee.controllers', ['ngDialog', 'ui.bootstrap'])
.controller("EmployeeDetailController", function ($scope, EmployeeFactory,   ngDialog) {
$scope.Empdet = {}
$scope.Empdet.FirstName = '';
$scope.Empdet.LastName = '';
$scope.Empdet.Email = '';
$scope.Empdet.PhotoFile = '';
$scope.Empdet.PhotoText = '';
$scope.Empdet.Age = '';
$scope.Empdet.Id = 0;

$scope.EditEmployeeShow = true;
$scope.ShowDeletePopup = true;
$scope.ShowAlert = true;

$scope.SaveEmpdet = function (newEmpdet) {
    console.log('save clicked')
    EmployeeFactory.SaveNewEmployee(newEmpdet)
    $scope.Empdet={};
    $scope.ShowAlert = false;
    $scope.EditEmployeeShow = true;
    $scope.SelectEmployeeList();
};

$scope.closeAlert = function () {
    $scope.ShowAlert = true;
};

$scope.Cancel = function () {
    console.log('cancel clicked')
};

$scope.DeleteEmployee = function (Id) {
    console.log('Delete clicked')
    console.log(Id);
    EmployeeFactory.DeleteEmployee(Id);
    $scope.SelectEmployeeList();
};

$scope.init = function(){
    $scope.SelectEmployeeList();
}

$scope.SelectEmployeeList = function () {
    console.log('Select in controller')
    EmployeeFactory.SelectEmployeeList().success(function (response) {
        console.log('response.IsSuccessful');
        console.log(response.Data);

        $scope.IsSuccessful = response.IsSuccessful;
        if ($scope.IsSuccessful) {
            $scope.EmpdetList = response.Data;
            console.log('$scope.EmpdetList');
            console.log($scope.EmpdetList);
            $scope.CanClearMessage = true;
        } else {
            $scope.SuccessMessage = '';
            $scope.ErrorMessage = response.ReasonForFailure;
            $scope.CanClearMessage = true;
        }

        //$scope.tableParams = new ngTableParams({
        //    page: 1, // show first page
        //    count: 10, // count per page
        //    sorting: {
        //        //name: 'asc' // initial sorting
        //    },
        //    filter: {
        //        //name: 'asc' // initial sorting
        //    }

        //}, {
        //    total: $scope.GetLists.length, // length of data
        //    getData: function ($defer, params) {
        //        var filteredData = params.filter() ? $filter('filter')($scope.GetLists, params.filter()) : $scope.GetLists;
        //        var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : $scope.GetLists;
        //        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        //    }
        //});


    });
}
})

<h2>EmpdetList</h2>

<table class="table table-bordered table-hover table-striped" ng-table="tableParams" show-filter="true">
<tr ng-repeat="Empdet in EmpdetList">
    <td data-title="'Id'" filter="{ 'Id': 'text' }" sortable="'Id'">{{Empdet.Id}}</td>
    <td data-title="'FirstName'" sortable="'FirstName'" filter="{ 'FirstName': 'text' }">{{Empdet.FirstName}}</td>
    <td data-title="'LastName'" sortable="'LastName'" filter="{ 'LastName': 'text' }" >{{Empdet.LastName}}</td>
    <td data-title="'Email'" sortable="'Email'" filter="{ 'Email': 'text' }">{{Empdet.Email}}</td>
    <td data-title="'PhotoFile'" sortable="'PhotoFile'" filter="{ 'PhotoFile': 'text' }"><img src="{{Empdet.PhotoFile}}"/></td>
    <td data-title="'PhotoText'" sortable="'PhotoText'" filter="{ 'PhotoText': 'text' }">{{Empdet.PhotoText}}</td>
    <td data-title="'Age'" sortable="'Age'" filter="{ 'Age': 'text' }">{{Empdet.Age}}</td>

    <td data-title="'Action'">
        <div data-toggle="modal" data-id="{{Empdet.Id}}" data-index="{{$index}}" data-name="{{Empdet.Id}}" ng-click="DeleteEmployee(Empdet.Id)" title='Click to delete the Account' class="open-confirm-delete fa fa-trash-o deleterow" style="height: 24px!important;">
        </div>
    </td>

</tr>
</table>

@*<div class="modal fade" collapse ="ShowDeletePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title"  id="myModalLabel">Confirm Delete</h4>
                                </div>
                                <div class="modal-body">
                                    <input type="hidden" name="name" id="name" value="" />
                                    <p>
                                        Do you want to Delete
                                        <label id="name1"></label>
                                        ?
                                    </p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                    <button type="button" id="deletebutton" class="btn btn-danger danger" ng-click="DeleteEmployee(selected.Id)" data-dismiss="modal">Delete</button>
                                </div>
                            </div>
                        </div>
                    </div>*@


@*<div  id="confirmModal" aria-hidden="true">
 <div class="modal-dialog" >
 <div class="modal-header">
        <h3 class="modal-title">Confirm Delete</h3>
    </div>
    <div class="modal-body">
        Are you sure to delete the Account {{ selected.Empdet.Id }}
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="DeleteEmployee()">Delete</button>
        <button class="btn btn-warning" data-dismiss="modal">Cancel</button>
    </div>
</div>
</div>*@