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

@model PaWoEx
@{
    var _isMobile = Request.Browser.IsMobileDevice;
}

<div class="tabs-container">
    @Html.Partial("Service/_ProcessingTabNavigation")
    <div class="tab-content">
        <input id="localStorageFiltersFor" value="workOrderList" hidden />
        @Html.HiddenFor(model => model.AcKey)
        @Html.HiddenFor(model => model.WoExDecPlacesProd)

    <div class="row document-head @(_isMobile ? "d-head-m-b-0" : "")" style="margin-bottom:5px !important">

        @* AcKey *@
        <div class="col-xs-4 document-head-disabled-input">
            <div class="form-group">
                @Html.LabelFor(model => model.AcKey, Loc.Key, new { @class = "control-label m-t-xs" })
                <input class="form-control" id="acKeyDisplay" disabled="disabled" type="text" value="@Model.KeyView">
            </div>
        </div>

        @* Product *@
        <div class="col-xs-4 document-head-disabled-input">
            <div class="form-group">
                @Html.Label(Loc.Product, new { @class = "control-label" })
                                <input type="text" disabled="disabled" class="form-control" style="overflow:hidden;text-overflow:ellipsis" id="ident" value="@Model.Ident - @Model.Name" />
            </div>
        </div>

        @* Location *@
        <div class="col-xs-4 document-head-disabled-input">
            <div class="form-group">
                @Html.Label(Loc.Location, new { @class = "control-label" })
                <input type="text" disabled="disabled" class="form-control" style="overflow:hidden;text-overflow:ellipsis" id="location" value="@Model.Address" />
            </div>
        </div>

    </div>

    <div class="divided-content">

        @* Table *@
        <div class="divided-content-main divided-content-full no-padding">
            <div class="document-list-no-footer">
                <table id="mainGridProcessing" data-grid-id="work-order-items" data-url="@ViewBag.DataTableURL" class="card">
                    <thead style="display:none">
                    </thead>
                </table>
            </div>
        </div>

        <div class="divided-content-side">
            <div class="tabs-container">
                <ul class="nav nav-tabs horizontal-menu" id="tabNav">
                    <li class="active divided-tab-1" id="homeTab">
                        <a id="tabCaption" data-toggle="tab" href="#item-options" class="local-tab">
                            <span>@Loc.AdditionalSettings</span>
                            <i class="far fa-times pull-right fa-lg text-muted btn-close-side-panel"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="tab-content" id="sideNavBar">
                <div id="item-options" class="tab-pane">
                    <div class="form-horizontal additonal-options">
                        <div class="row border-bottom p-l-10" id="work-history">
                            <a data-toggle="tab" href="#work-reg-history">
                                <h3 class="text-default"><i class="fas fa-history text-primary p-r-sm"></i>@Loc.WorkHistory</h3>
                            </a>
                        </div>
                    </div>
                </div>

                @* Table *@
                <div id="work-reg-history" class="tab-pane m-l-n-sm m-r-n-sm">
                    <table id="woExOperWork" data-grid-id="WoExOperWork" data-url="@Url.Action("WoExOperWork", "Manufacturing")" class="list-table">
                        <thead>
                            <tr>
                                <th>@Loc.Worker</th>
                                <th>@Loc.Key</th>
                                <th>@Loc.Product/@Loc.Operation</th>
                                <th>@Loc.Planned</th>
                                <th>@Loc.Status</th>
                            </tr>
                        </thead>
                    </table>
                </div>

                <button type="button" class="btn btn-rounded btn-back btn-close-side-panel">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button type="button" class="btn btn-rounded btn-back btn-back-to-menu hidden">
                    <i class="fas fa-chevron-left"></i>
                </button>
            </div>
        </div>
    </div>
</div>

    <a href="@Url.Action("Index", "Manufacturing")" id="back" class="btn btn-light btn-rounded btn-back @(!_isMobile ? "hidden" : string.Empty) ">
        <i class="fas fa-chevron-left"></i>
    </a>

    <div class="cont-right @(!_isMobile ? "hidden" : string.Empty)" style="right:0px;">
        <button id="options" type="button" class="btn pull-right btn-rounded @(ViewBag.ItemType == "S" ? string.Empty : "hidden")">
            <i class="fas fa-ellipsis-h"></i>
        </button>
    </div>
</div>

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

@section pageScripts{
    @Scripts.Render("~/bundles/services")
    <script>
        $(document).ready(function () {
            initializeProcessingSvc({
                itemType: '@ViewBag.ItemType',
                prodType: '@ViewBag.ProdType'

            }, {
                operationCaption: '@Loc.Operation',
                materialCaption: '@Loc.MaterialEnum',
                operationStart: '@Loc.OperationStart',
                operationPause: '@Loc.OperationPause',
                operationContinue: '@Loc.OperationContinue',
                operationEnd: '@Loc.OperationEnd',
                workRegistration: '@Loc.WorkRegistration',
                materialsForOperation: '@Loc.MaterialsForOperation'
            }, {
                operMatURL: '@Url.Action("MaterialsForOperationList", "Manufacturing")',
                operRegURL: '@Url.Action("GetActiveWoExRegOper", "Manufacturing")'

            }, {
                canInputCompletedWork: '@PantheonRA.BackOffice.CurrentUser.CanAccess(Permissions.PRODUCTION)'
            });
        });
    </script>
}
