@model  IEnumerable<PG.Admin.Models.TimeSheetHeaders.TimeSheetHeaderViewModel>

@{
   ViewBag.Title = "";
   Layout = "~/Views/Shared/_Layout.cshtml";
}

@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")

<div id="unobtrusive">
    @Html.Partial("_TimeSheetList", Model)
</div>

@model PagedList.IPagedList<PG.Admin.Models.TimeSheetHeaders.TimeSheetHeaderViewModel>
@using PagedList.Mvc;

        <table class="table table-striped">
        <tbody>

            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.First().Date)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.First().PGId)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.First().OutletID)
                </th>
                <th></th>
            </tr>

            @foreach (var group in Model)
            {
                <tr>
                    <td>@Html.DisplayFor(model => group.Date)</td>
                    <td>@Html.DisplayFor(model => group.PGId)</td>
                    <td>@Html.DisplayFor(model => group.OutletID)</td>
                    <td>
                        @Html.ActionLink("Delete", "DeleteTimeSheetConfirmed", new { id = group.Id }, new { @id = group.Id, @class = "delete-timesheet" })
                    </td>
                </tr>
            }
        </tbody>
    </table>

    <div class="dataTable-paging">
        <div class="row">
            <div class="col-xs-6">
                <div class="paging-info">
                    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
                </div>
            </div>
            <div class="col-xs-6">
                <div class="paging-content">
                    @Html.PagedListPager(Model, page => Url.Action("GroupListTimeSheet",
                         new { page, key = ViewBag.CurrentFilterKey, currentFilter = ViewBag.CurrentFilter }),
                                   PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "unobtrusive" }))
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">

    $('.delete-timesheet').on("click", function (e) {
        var flag = confirm('delete ?');
        if (flag) {
            e.preventDefault();
            var id = e.target.id;
            $.ajax({
                url: '@Url.Action("DeleteTimeSheetConfirmed", "TimeSheet")',
                type: 'POST',
                data: { id: id },
                dataType: "json",
                cache: false,
                success: function () {
                    $("#" + id).closest('tr').remove();
                },
                error: function () {
                    alert('Error!');
                }
            });
        }
        return false;
    });
</script>

[HttpPost]
        public ActionResult DeleteTimeSheetConfirmed(Int64 id)
        {
            var timeSheetHeader = _timeSheetService.GetTimeSheetHeaderById(id);

            if (timeSheetHeader == null)
                return RedirectToAction("Index");

            _timeSheetService.DeleteTimeSheet(timeSheetHeader);

            return Json(true, JsonRequestBehavior.AllowGet);
        }