@model IEnumerable<Models>

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

<!-- DataTables CSS -->
<link href="../../Datatable/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet" />
<script src="../../Datatable/DataTables/media/js/jquery.dataTables.min.js"></script>
<script src="../../Datatable/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<link href="../../Datatable/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet" />
<!-- DataTables Responsive CSS -->

<div class="row">
    <div class="col-lg-12">


        <table class="table table-striped table-bordered table-hover" id="tblSearch">
            <thead>
                <tr>
                    <th style="display: none;">
                        ArticleId
                    </th>
                    <th style="width: 20%;">
                        Member Name
                    </th>
                    <th style="width: 50%;">
                        Article Name
                    </th>
                    <th style="width: 10%;">
                        Status
                    </th>
                    <th style="width: 10%;"></th>
                    <th style="width: 10%;">
                        <div style="text-align:center">
                            View
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td style="display: none;">
                            @Html.DisplayFor(modelItem => item.ArticleId)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.User.FirstName) &nbsp; @Html.DisplayFor(modelItem => item.User.LastName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.ArticleName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Status.StatusName)
                        </td>
                        <td align="center">
                            @(Convert.ToBoolean(item.IsActive) ? Html.ActionLink("Active", "ActiveInActive", new { id = item.ArticleId }) : Html.ActionLink("InActive", "ActiveInActive", new { id = item.ArticleId }))
                        </td>
                        <td align="center">
                            @Html.ActionLink("View", "View", new { Id = item.ArticleId , Area = "admin"})
                            @*<a href="/Article/View?Id=@item.ArticleId">View</a>*@
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>


<!--Date Time Picker-->
<link href="~/Content/datetimepicker-master/jquery.datetimepicker.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Content/datetimepicker-master/jquery.datetimepicker.js"></script>
<!--Date Time Picker-->
<script type="text/javascript">

    $(document).ready(function () {
        $('#tblSearch').DataTable({
            "oLanguage": { "sSearch": "Search:" },
            "iDisplayLength": 10,
            "bPaginate": true,
            "bLengthChange": true,
            "bFilter": true,
            "bSort": true,
            "bInfo": true,
            "bAutoWidth": false,
            "aaSorting": [[0, "Desc"]],
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
        });


        $('#datepicker2').datetimepicker({
            format: 'd/m/Y',
            scrollinput: false,
            formatDate: 'd/m/Y',
            minDate: '-1970/01/02',
            closeOnDateSelect: true,
            onShow: function (ct) {
                this.setOptions({

                    maxDate: $('#datepicker1').val() ? $('#datepicker1').val() : false
                })
            },
            timepicker: false
        });

    });

</script>

  [Required(ErrorMessage = "Plaese Select Event Date")]
        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
        [Display(Name = "Event Date")]