@model ICollection<PayRollHCC.Models.tblUser>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>

 tr>th {
        font-weight:500 !important;
   }
   
    </style>

@if (ViewBag.Error != null)
{
    <div class="alert alert-danger" role="alert">
        @ViewBag.Error
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
}

@if (ViewBag.Success != null)
{
    <div class="alert alert-success" role="alert">
        @ViewBag.Success
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
}
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">

               
                <div class="card">
                    <div class="card-header card-header-primary card-header-icon">
                        <div class="card-icon">
                            <i class="material-icons">User</i>
                        </div>
                        <h4 class="card-title">Users List</h4>
                    </div>
                    <div class="card-body">
                        <div class="toolbar">
                            <!--        Here you can write extra buttons/actions for the toolbar              -->

                            <a href="/Account/AddUser/" class="btn btn-primary" >Add User</a>
                        </div>
                        <div class="material-datatables">
                            <table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
                                <thead>
                                    <tr>

                                        @*<th>Check Time In Out</th>*@
                                        <th>First Name</th>
                                        <th> Last Name</th>
                                        <th>Email</th>
                                        <th>Phone number</th>
                                        <th class="disabled-sorting text-right">Actions</th>
                                    </tr>
                                </thead>
                                @*<tfoot>
                                    <tr>
                                           
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Email</th>
                                        <th>Phone number</th>
                                            <th class="text-right">Actions</th>
                                        </tr>
                                </tfoot>*@
                                <tbody>

                                    @if (Model.Count > 0)
                                        {
                                            var data = Model;
                                            foreach (var item in data)
                                            {

                                                <tr>
                                                    <td>@item.FirstName</td>
                                                    <td>@item.LastName</td>
                                                    <td>@item.Email</td>
                                                    <td>@item.Phonenumber</td>
                                                    <td class="text-right">
                                                        <a href="/Account/AddUser/@item.UserId" class="btn btn-link btn-warning btn-just-icon edit"><i class="material-icons">dvr</i></a>
                                                        <a href="#" class="btn btn-link btn-danger btn-just-icon remove"><i class="material-icons">close</i></a>
                                                    </td>
                                                </tr>
                                            }
                                        }


                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- end content-->
                </div>
                <!--  end card  -->
            </div>
            <!-- end col-md-12 -->
        </div>
        <!-- end row -->
    </div>
</div>


@section scripts{
    <script src="~/Content/assets/js/plugins/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {

            loadData();
            altert_dissmiss();
        });
        function loadData() {

            $('#datatables').DataTable({
                "pagingType": "full_numbers",
                "lengthMenu": [
                  [10, 25, 50, -1],
                  [10, 25, 50, "All"]
                ],
                responsive: true,
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search records",
                }
            });

            var table = $('#datatable').DataTable();

            // Edit record
            table.on('click', '.edit', function () {
                $tr = $(this).closest('tr');
                var data = table.row($tr).data();
                alert('You press on Row: ' + data[0] + ' ' + data[1] + ' ' + data[2] + '\'s row.');
            });

            // Delete a record
            table.on('click', '.remove', function (e) {
                $tr = $(this).closest('tr');
                table.row($tr).remove().draw();
                e.preventDefault();
            });

            //Like record
            table.on('click', '.like', function () {
                alert('You clicked on Like button');
            });


        }
        function altert_dissmiss() {
            debugger;
            setTimeout(function () {
                $(".alert").fadeTo(2500, 0).slideUp(500, function () {
                    $(this).remove();
                });

            }, 200);

        }


      
    </script>
}