@using PantheonRA.BackOffice.Enums
@using PantheonRA.BackOffice.Models
@model PantheonRA.BackOffice.Models.BaseGridFilterModel

@{
    ViewBag.Title = Loc.Tasks;
}

<div class="wrapper wrapper-content">
    <div class="tabs-container">
        @Html.Partial("~/Views/Documents/_DocumentsTabNavigation.cshtml")
        <div class="tab-content">
            @Html.HiddenFor(model => model.DefaultDecimalPlacesPrice)
            @Html.HiddenFor(model => model.DefaultDecimalPlacesQuantity)
            @Html.HiddenFor(model => model.DefaultDecimalPlacesValue)
            <div class="row document-head">
                <div class="col-md-2 col-xs-6">
                    <div class="form-group">
                        <label class="control-label">@Loc.SearchFilter</label>
                        @Html.TextBoxFor(model => model.Keywords, new { @id = "Keywords", @class = "form-control search-input", @placeholder = Loc.TaskSearch, autocomplete = "off" })
                    </div>
                </div>

                <div class="col-lg-2 col-md-3 col-xs-6">
                    <div class="form-group">
                        <label class="control-label">@Loc.Type</label>
                        <select id="TasksFilter" class="form-control custom-select">
                            <option value="@TaskFilterType.UnfinishedUserTasks" selected="selected">@Loc.MyUnfinishedTasks</option>
                            <option value="@TaskFilterType.UserTasks">@Loc.AllMyTasks</option>
                            <option value="@TaskFilterType.AllUnfinishedTasks">@Loc.AllUnfinishedTasks</option>
                            <option value="@TaskFilterType.AllTasks">@Loc.AllTasks</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-2 col-xs-6">
                    <div class="form-group">
                        <label class="control-label">@Loc.DateFrom</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                            <input class="form-control datepicker" id="Filter_DateFrom" name="Filter.DateFrom" type="text" value="@DateTime.Now.Date.AddMonths(-1).ToString(Loc.DateFormat)">
                        </div>
                    </div>
                </div>
                <div class="col-md-2 col-xs-6">
                    <div class="form-group">
                        <label class="control-label">@Loc.DateTo</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                            <input class="form-control datepicker" id="Filter_DateTo" name="Filter.DateTo" type="text" value="@DateTime.Now.Date.AddDays(1).ToString(Loc.DateFormat)">
                        </div>
                    </div>
                </div>
            </div>

            <div class="project-list">
                <div class="document-list">
                    <table id="mainGrid" data-grid-id="task" data-url="@Url.Action("TaskList", "Task")" class="list-table">
                        <thead>
                            <tr>
                                <th data-url="@Url.Action("Edit", "Task")?id=">@Loc.Task</th>
                                <th>@Loc.User</th>
                                <th>@Loc.ForPayment</th>
                                <th>@Loc.Key</th>
                                @*<th>@Loc.TaskOwner</th>*@
                                <th class="dt-head-center">@Loc.TaskCompleted</th>
                                <th>@Loc.Date</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@section pageScripts{
    <script>
        $(document).ready(function () {
            $('.datepicker').datepicker()
                .on('click', function (e) {
                    $(this).select();
                }).on('changeDate', function () {
                    $(this).datepicker('hide');
                    $.fn.dataTable.reload($dataTable);
                });

            $dataTable = $('#mainGrid');
            $dataTable.DataTable({
                ajax: {
                    url: $dataTable.attr('data-url'),
                    data: function (d) {
                        d.Keywords = $("#Keywords").val();
                        d.DateFrom = reformatDate($("#Filter_DateFrom").val());
                        d.DateTo = reformatDate($("#Filter_DateTo").val());
                        d.TasksFilter = $("#TasksFilter").val()
                    }
                },
                order: [[5, 'desc']],
                columns: [
                    { data: "Name", name: "acTaskInstName", filtertype: "text", render: $.fn.dataTable.render.link("Id") },
                    { data: "User", name: "acTaskInstContact", filtertype: "text" },
                    { data: "Value", name: "AnForPay", filtertype: "text", render: $.fn.dataTable.render.number('.', ',', $("#DefaultDecimalPlacesPrice").val()) },
                    { data: "DocumentKeyView", name: "AcKey", filtertype: "text", render: function (data, type, row, meta) { return "<a href='" + row.DocTypeUrl + "'>" + data + "</a>" } },
                    //{ data: "TaskOwner", name: "acTaskOwner", filtertype: "text" },
                    { data: "IsTaskCompleted", name: "acTaskInstCompleted", render: $.fn.dataTable.render.toggle(true, true), className: 'dt-body-center' },
                    { data: "InsertDate", name: "adTaskInstTimeIns", filtertype: "dateTime" }
                ]
            });

            $("select").off("change");
            $("select").on("change", function () {
                $.fn.dataTable.reload($dataTable);
            });

            var typingTimer;
            var doneTypingInterval = 600;
            $('#Keywords').off('keyup');
            $('#Keywords').on('keyup', function () {
                clearTimeout(typingTimer);
                typingTimer = setTimeout(function () { $.fn.dataTable.reload($dataTable); }, doneTypingInterval);
            });

            $("#DocumentsFilter").on("change", function () {
                $.fn.dataTable.reload($dataTable);
            });
        });
    </script>
}
