@using PantheonRA.BackOffice
@using PantheonRA.WebApi.Contracts.Enums

@model PantheonRA.BackOffice.Models.WorkOrdersGridFilterModel

@{
    var googleApiKey = ViewBag.GoogleApiKey;
    var languageCode = CurrentUser.Localizationi18n;
    var _isMobile = Request.Browser.IsMobileDevice;
}
@Html.Hidden("ProdType", ((string)ViewBag.ProdType))

<div class="wrapper wrapper-content">
    <div class="tabs-container">
        @Html.Partial("_ManufacturingTabNavigation")
        <div class="tab-content">
            <input id="localStorageFiltersFor" value="workOrderListSVC" hidden />

            @* Mobile search *@
            <div class="row buttons-tabbed @(!_isMobile ? "hidden" : "")">
                <div style="padding-top:5px;">
                    <input class="form-control search-input" name="Keywords" type="text" placeholder="@Loc.Search" autocomplete="off">
                </div>
            </div>

            @Html.Partial("Service/_FilterForm")
            <div class="divided-content">
                <div class="divided-content-main @(_isMobile ? "divided-content-full no-padding" : string.Empty)">

                    @* Table *@
                    <div class="@(_isMobile ? "document-list-no-footer" : "services-table")">
                        <table id="mainGrid" data-url="@Url.Action("WorkOrderList", "Manufacturing")" class="card">
                        </table>
                    </div>

                    <div class="row document-footer document-footer-sm @(_isMobile ? "hidden" : string.Empty)">
                        <div>
                            <div class="btn-toolbar btn-status-bar m-t-xs" role="toolbar">
                                @foreach (var item in ViewBag.StatusLookup)
                                {
                                    <button class="btn" id="@(String.IsNullOrEmpty(@item.Id)? "X" : item.Id)" style="color: @item.Display">
                                        <span>@item.Name</span>
                                        <span class="pull-right fa-lg"></span>
                                    </button>
                                }
                            </div>
                        </div>
                    </div>

                </div>
                <div class="divided-content-side">
                    <div class="tabs-container">
                        <ul class="nav nav-tabs horizontal-menu">
                            <li id="filter-tab" class="divided-tab-1 @(_isMobile ? "active" : "hidden")"><a data-toggle="tab" href="#filter-container" class="local-tab">@Loc.SearchFilter</a></li>
                            <li id="map-tab" class="divided-tab-1 @(_isMobile ? string.Empty : "active")"><a data-toggle="tab" href="#map-container" class="local-tab">@Loc.Map</a></li>
                        </ul>
                    </div>
                    <div class="tab-content" id="filtersTabs">

                        @if (_isMobile)
                        {
                            @* Filters *@
                            <div id="filter-container" class="tab-pane fade in active" style="margin-bottom:100px">
                                <div class="form-horizontal m-t-sm">

                                    @* DocTypes *@
                                    <div class="col-xs-12 p-xxs">
                                        <a data-toggle="tab" href="#doc-types">
                                            <div class="card card-filter">
                                                <div class="card-header">
                                                    <h4 class="card-title text-default">@Loc.DocumentType</h4>
                                                </div>
                                                <div class="card-body p-l-10">
                                                    <div class="input-group">
                                                        <span id="doc-type-list" class="text-default h4">@Loc.All</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>

                                    @* Statuses *@
                                    <div class="col-xs-12 p-xxs">
                                        <a data-toggle="tab" href="#status">
                                            <div class="card card-filter">
                                                <div class="card-header">
                                                    <h4 class="card-title text-default">@Loc.WorkOrderStatus</h4>
                                                </div>
                                                <div class="card-body p-l-10">
                                                    <div class="input-group">
                                                        <span id="status-list" class="text-default h4">@Loc.All</span>
                                                    </div>

                                                </div>
                                            </div>
                                        </a>
                                    </div>

                                    @* Date from *@
                                    <div class="col-xs-6 p-xxs">
                                        <div class="card card-filter">
                                            <div class="card-header">
                                                <h3 class="card-title">@Loc.DateFrom</h3>
                                            </div>
                                            <div class="card-body">
                                                <input class="form-control text-center col-xs-12 localStorageFilter" id="mDateFrom" type="date" value="@DateTime.Now.Date.AddMonths(-8).ToString("yyyy-MM-dd")">
                                            </div>
                                        </div>
                                    </div>

                                    @* Date to *@
                                    <div class="col-xs-6 p-xxs">
                                        <div class="card card-filter">
                                            <div class="card-header">
                                                <h3 class="card-title">@Loc.DateTo</h3>
                                            </div>
                                            <div class="card-body">
                                                <input class="form-control text-center col-xs-12 localStorageFilter" id="mDateTo" type="date" value="@DateTime.Now.Date.ToString("yyyy-MM-dd")">
                                            </div>
                                        </div>
                                    </div>

                                    @* Data from daily plan *@
                                <div class="col-xs-6  p-xxs @(!CurrentUser.CanAccess(Permissions.PRODUCTION) ? "hidden" : String.Empty)">
                                        <div class="card card-filter">
                                            <div class="card-header">
                                                <h3 class="card-title">@Loc.DataFromDailyPlan</h3>
                                            </div>
                                            <div class="card-body">
                                                <div class="text-center">
                                                    <input type="checkbox" class="js-switch timeRecordsSwitch localStorageFilter" id="data-from-daily-plan" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    @* Show completed *@
                                    <div class="col-xs-6  p-xxs">
                                        <div class="card card-filter">
                                            <div class="card-header">
                                                <h3 class="card-title">@Loc.ShowCompleted</h3>
                                            </div>
                                            <div class="card-body">
                                                <div class="text-center">
                                                    <input type="checkbox" class="js-switch timeRecordsSwitch localStorageFilter" id="show-completed" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            @* DocTypes List *@
                            <div id="doc-types" class="tab-pane additonal-options m-l-n-sm m-r-n-sm" data-control="#DocTypes">
                                @foreach (var item in ViewBag.DocumentTypes)
                                {
                                    <div class="border-bottom p-l-10 filter-list-item" data-value="@item.Id" data-display="@item.Value">
                                        <a data-toggle="tab">
                                            <h3 class="text-default" data-toggle="tab">
                                                @item.Value
                                                <i class="fa text-primary p-r-sm pull-right active"></i>
                                            </h3>
                                        </a>
                                    </div>
                                }
                            </div>

                            @* Statuses List *@
                            <div id="status" class="tab-pane additonal-options m-l-n-sm m-r-n-sm" data-control="#Status">
                                @foreach (var item in ViewBag.StatusLookup)
                                {
                                    if (!String.IsNullOrEmpty(item.Id))
                                    {
                                        <div class="border-bottom p-l-10 filter-list-item" data-value="@item.Id" data-display="@item.Name">
                                            <a data-toggle="tab">
                                                <h3 class="text-default" data-toggle="tab">
                                                    @item.Name
                                                    <i class="fa text-primary p-r-sm pull-right"></i>
                                                </h3>
                                            </a>
                                        </div>
                                    }
                                }
                            </div>

                            @* Tab buttons *@
                            <div class="tab-buttons">
                                <a id="back" role="button" class="btn btn-rounded btn-light btn-back">
                                    <i class="fas fa-chevron-left"></i>
                                </a>
                                <div class="cont-right">
                                    <button id="apply" type="button" class="btn btn-success pull-right btn-rounded margin-left-10">
                                        <i class="fas fa-check"></i><span class="m-l-xs">@Loc.Confirm</span>
                                    </button>
                                    <button id="clear-filters" type="button" class="btn pull-right btn-rounded localStorageFilter">
                                        <i class="fas fa-broom"></i>
                                    </button>
                                </div>
                            </div>
                        }

                        @* Map *@
                        <div id="map-container">
                            <div id="services-map"></div>
                            <div class="cont-right">
                                <button id="close-map" class="btn btn-rounded @(_isMobile ? string.Empty : "hidden")">
                                    <i class="fas fa-th-large"></i>
                                </button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        @* Buttons *@
        <div class="cont-right @(!_isMobile ? "hidden" : string.Empty)">
            <button id="filter" type="button" class="btn btn-success pull-right btn-rounded margin-left-10">
                <i class="fas fa-filter"></i><span class="m-l-xs">@Loc.SearchFilter</span>
            </button>
            <button id="map" type="button" class="btn pull-right btn-rounded margin-left-10">
                <i class="far fa-map-marked-alt"></i>
            </button>
        </div>

    </div>
</div>

<div id="operPopover">
    <table id="popoverTable" class="table">
    </table>
</div>

@Html.Partial("~/Views/Manufacturing/_AddWorkersModal.cshtml")

@section pageScripts{
    @Scripts.Render("~/bundles/services")
<script>
        $(document).ready(function () {
            initWorkOrdersSvc({
                identFilterItem: '@Loc.Item',
                identFilterName: '@Loc.Name',
                operationStart: '@Loc.OperationStart',
                operationPause: '@Loc.OperationPause',
                operationContinue: '@Loc.OperationContinue',
                operationEnd: '@Loc.OperationEnd',
                workRegistration: '@Loc.WorkRegistration',
                materialsForOperation: '@Loc.MaterialsForOperation',
                opened: '@Loc.WOStatus_Opened',
                finished: '@Loc.WOStatus_Finished',
                addNew: '@Loc.AddNew'
                },
                {
                    operRegURL: '@Url.Action("GetActiveWoExRegOper", "Manufacturing")',
                    getDailyPlanWorkersURL: '@Url.Action("GetDailyPlanWorkers", "Manufacturing")'
                },
                {
                    isMobile: '@_isMobile',
                    workersList: '@Html.Raw(Json.Encode(ViewBag.Workers))'
                }
            );
        });
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?language=@languageCode&key=@googleApiKey&loading=async&callback=initializeServicesMap"></script>
}
