@model PantheonRA.BackOffice.Models.FiscalizationStatusViewModel
@{
    ViewBag.Title = Loc.FiscalizationStatus;
}

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <a class="navbar-minimalize btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
        <h2>@ViewBag.Title</h2>
        <span class="breadcrumb-divider">&bull;</span>
        <ol class="breadcrumb">
            <li><a href="@Url.Action("Index", "FiscalizationStatus")">Home</a></li>
            <li>@Loc.AdministrationPanel</li>
            <li class="active"><strong>@ViewBag.Title</strong></li>
        </ol>
    </div>
    <div class="col-lg-2">
    </div>
</div>

<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">

        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>@ViewBag.Title</h5>
                </div>
                <div class="ibox-content">
                    <div class="row m-b-sm m-t-sm">
                        <div class="col-md-2">
                            <div class="form-group">
                                @Html.LabelFor(model => model.FilterData.From, Loc.From)
                                @Html.TextBoxFor(m => m.FilterData.From, "{0:dd.MM.yyyy.}", new { @class = "form-control datepicker" })
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                @Html.LabelFor(model => model.FilterData.To, Loc.To)
                                @Html.TextBoxFor(m => m.FilterData.To, "{0:dd.MM.yyyy.}", new { @class = "form-control datepicker" })
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                @Html.LabelFor(model => model.FilterData.SelectedDocType, Loc.DocType)
                                @Html.DropDownListFor(model => model.FilterData.SelectedDocType, Model.FilterData.DocTypes, @Loc.ChooseDocType, new { @class = "form-control" })
                                @*<select id="@Html.IdFor(m => m.Filter.AcDocType)" class="form-control">
                                        <option></option>
                                        @foreach (var option in Model.AcDocTypes)
                                        {
                                            <option value="@option.Value">@option.Text</option>
                                        }
                                    </select>*@
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                @Html.LabelFor(model => model.FilterData.SelectedFiscalizationStatus, Loc.FiscalizationStatus)
                                @Html.DropDownListFor(model => model.FilterData.SelectedFiscalizationStatus, Model.FilterData.FiscalizationStatuses, @Loc.ChooseStatus, new { @class = "form-control" })
                                @*@Html.LabelFor(model => model.Filter.ProductId, Loc.Product)
                                    <select id="@Html.IdFor(m => m.Filter.ProductId)" class="form-control" data-url="@Url.Action("ProductsPicker", "Reports")">
                                        <option></option>
                                    </select>*@
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>&nbsp;</label>
                                <button type="button" id="searchBills" class="btn btn-block btn-outline btn-primary">@Loc.Search</button>
                            </div>
                        </div>
                    </div>

                    <div class="project-list">
                        <div class="document-list">
                            <table id="grid-data" class="list-table">
                                <thead>
                                    <tr>
                                        <th data-column-id="InvoiceId" data-type="numeric" data-sortable="false" data-visible="false" data-identifier="true">Id</th>
                                        <th data-column-id="InvoiceRef" data-sortable="false">#</th>
                                        <th data-column-id="InvoiceUtsString" data-sortable="false">@Loc.InvoiceDate</th>
                                        <th data-column-id="DeviceNumber" data-sortable="false" data-type="numeric" data-headeralign="right" data-align="right" data-width="10%">@Loc.DeviceNumber</th>
                                        <th data-column-id="InvoiceType" data-sortable="false" data-width="10%">@Loc.Type</th>
                                        <th data-column-id="Jir" data-sortable="false">@Loc.Identifier</th>
                                        <th data-column-id="UserName" data-sortable="false">@Loc.UserName</th>
                                        <th data-column-id="DeviceTypeName" data-sortable="false">@Loc.DeviceType</th>
                                        <th data-column-id="FiscalizationStatus" data-sortable="false">@Loc.Status</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section pageCss{
    <link href="~/Content/jquery.bootgrid.css" rel="stylesheet" />
    <link href="~/Content/plugins/select2/select2.css" rel="stylesheet" />
    <link href="~/Content/plugins/datapicker/datepicker3.css" rel="stylesheet" />
    <link href="~/Content/plugins/select2/select2-bootstrap.css" rel="stylesheet" />
}

@section pageScripts{
    <script type="text/javascript" src="~/Scripts/jquery.bootgrid.js"></script>
    <script type="text/javascript" src="~/Scripts/plugins/select2/select2.js"></script>
    <script type="text/javascript" src="~/Scripts/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="@Url.Content(string.Format("~/Scripts/plugins/select2/i18n/{0}.js", PantheonRA.BackOffice.CurrentUser.Localizationi18n.ToLower()))"></script>
    <script type="text/javascript" src="@Url.Content(string.Format("~/Scripts/plugins/datapicker/locales/bootstrap-datepicker.{0}.min.js", PantheonRA.BackOffice.CurrentUser.LocalizationDate.ToLower()))"></script>

    <script>

        $(function () {
            var language = '@PantheonRA.BackOffice.CurrentUser.Localization';

            function format(item) {
                return item.Text;
            };

            // dd.MM.yyyy. -> yyyy-MM-dd
            function reformatDate(dateString) {
                var dateElements = dateString.split('.');
                return dateElements[2] + '-' + dateElements[1] + '-' + dateElements[0]
            }

            var getSearchData = function () {
                return {
                    From: reformatDate($("#FilterData_From").val()),
                    To: reformatDate($("#FilterData_To").val()),
                    SelectedDocType: $("#FilterData_SelectedDocType").val(),
                    SelectedFiscalizationStatus: $("#FilterData_SelectedFiscalizationStatus").val()
                };
            };

            //var select2DocType = $("#FilterData_SelectedDocType").select2({
            //    allowClear: true,
            //    theme: "bootstrap",
            //    placeholder: "",
            //    language: language
            //});

            //var select2FiscalizationStatus = $("#FilterData_SelectedFiscalizationStatus").select2({
            //    allowClear: true,
            //    theme: "bootstrap",
            //    placeholder: "",
            //    language: language
            //});

            //var select2Partner = $("#Filter_ProductId").select2({
            //    ajax: {
            //        url: $("#Filter_ProductId").data("url"),
            //        dataType: 'json',
            //        type: "POST",
            //        delay: 250,
            //        data: function (params) {
            //            return {
            //                filter: params.term, // search term
            //                page: params.page
            //            };
            //        },
            //        id: function (data) {
            //            return data.Value;
            //        },
            //        processResults: function (data, params) {
            //            // parse the results into the format expected by Select2
            //            // since we are using custom formatting functions we do not need to
            //            // alter the remote JSON data, except to indicate that infinite
            //            // scrolling can be used
            //            params.page = params.page || 1;

            //            var select2Data = $.map(data.Items, function (obj) {
            //                obj.id = obj.Value,
            //                obj.text = obj.Text;

            //                return obj;
            //            });

            //            return {
            //                results: select2Data,
            //                pagination: {
            //                    more: (params.page * 10) < data.TotalItems
            //                }
            //            };
            //        },
            //        cache: true
            //    },
            //    allowClear: true,
            //    placeholder: "",
            //    theme: "bootstrap",
            //    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
            //    minimumInputLength: 1,
            //    templateResult: format, // omitted for brevity, see the source of this page
            //    templateSelection: format, // omitted for brevity, see the source of this page
            //    language: language
            //});

            var grid = $("#grid-data").bootgrid({
                ajax: true,
                type:'POST',
                url: "@Url.Action("_InvoiceFiscalizationStatusList", "FiscalizationStatus")",
                formatters: {
                    "fiscStatusFormatter": function (column, row) {
                        var cellValue = row[column.id];
                        var statusCssClass = "";
                        return "<span class=\"" + statusCssClass + "\">" + cellValue + "</span>";
                    }
                },
                templates: {
                    search: "",
                    header: ""
                },
                labels: {
                    noResults: "@Loc.NoResultFound",
                    infos: "@Loc.Showing {{ctx.start}} @Loc.To.ToLower() {{ctx.end}} ({{ctx.total}})",
                    loading: "@Loc.Loading..."

                },
                post: function () {
                    /* To accumulate custom parameter with the request object */
                    return getSearchData();
                },
            });

            $("#searchBills").on("click", function () {
                $('#grid-data').bootgrid('reload');
            });


            $('.datepicker').datepicker()
                .on('click', function (e) {
                    $(this).select();
                });
        });
    </script>
}