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

@model PantheonRA.WebApi.Contracts.PaWoExRegOper

@{
    ViewBag.Title = Loc.WOEditOperation;

    PaWoExItemResources WoExItemResurce = Model.WoExItem != null ? Model.WoExItem.WoExItemResources.FirstOrDefault(x => x.ResursID.Trim() == Model.ResursID.Trim()) : null;
    int resourceQID = WoExItemResurce.QId;
    double Tn = WoExItemResurce != null ? WoExItemResurce.Qty1 : 0;
    double Tpf = WoExItemResurce != null ? WoExItemResurce.Qty2 : 0;
    double PlanQty = (Model.WoExItem != null) && (WoExItemResurce != null) ? (double)Model.WoExItem.WoEx.PlanQty * WoExItemResurce.ExecutionPerc / 100 : 0;
    double PlanTime = (Model.WoExItem != null) && (WoExItemResurce != null) ? (double)Model.WoExItem.WoEx.PlanQty * WoExItemResurce.Qty1 * WoExItemResurce.ExecutionPerc / 100 : 0;
    double DoneQty = (Model.WoExItem != null) && (Model.WoExItem.WoExItemWork != null) ? (double)Model.WoExItem.WoExItemWork.Where(x => x.ResursID.Trim() == Model.ResursID.Trim()).Sum(p => p.Qty) : 0;
    double DoneTime = (Model.WoExItem != null) && (Model.WoExItem.WoExItemWork != null) ? (double)Model.WoExItem.WoExItemWork.Where(x => x.ResursID.Trim() == Model.ResursID.Trim()).Sum(p => p.Time) : 0;
    double RestQty = PlanQty - DoneQty;

    TimeSpan _planTime = TimeSpan.FromHours(PlanTime);
    var PlanTimeStr = Math.Floor(_planTime.TotalHours).ToString("00") + ":" + _planTime.Minutes.ToString("00") + ":" + _planTime.Seconds.ToString("00");

    TimeSpan _doneTime = TimeSpan.FromHours(DoneTime);
    var DoneTimeStr = Math.Floor(_doneTime.TotalHours).ToString("00") + ":" + _doneTime.Minutes.ToString("00") + ":" + _planTime.Seconds.ToString("00");

    string ProductUM = Model.WoExItem != null ? Model.WoExItem.WoEx.UM : String.Empty;
    string timeUM = Model.WoExItem != null ? Model.WoExItem.UM : String.Empty;

    Model.EventTypeCaption = String.Empty;

    var _progressValue = _doneTime > _planTime ? 100 : ((_doneTime.TotalMilliseconds + Model.Milliseconds) / _planTime.TotalMilliseconds) * 100;
    var _progressPerc = _doneTime > _planTime ? "100%" : (((_doneTime.TotalMilliseconds + Model.Milliseconds) / _planTime.TotalMilliseconds) * 100).ToString("N0") + "%";

    var _class = _progressValue > 100 ? "bg-c-red" : "bg-c-green";

    if (Model.EventType == WorkRegEventType.OperationStart) { Model.EventTypeCaption = Loc.OperationStart; }
    if (Model.EventType == WorkRegEventType.OperationPause) { Model.EventTypeCaption = Loc.OperationPause; }
    if (Model.EventType == WorkRegEventType.OperationContinue) { Model.EventTypeCaption = Loc.OperationContinue; }
    if (Model.EventType == WorkRegEventType.OperationEnd) { Model.EventTypeCaption = Loc.OperationEnd; }

    var icon = String.Empty;
    var color = String.Empty;

    switch (Model.EventType)
    {
        case WorkRegEventType.OperationStart:
            icon = "fad fa-lg fa-play";
            color = "#7EAF3F";
            break;
        case WorkRegEventType.OperationPause:
            icon = "fad fa-lg fa-pause-circle";
            color = "goldenrod";
            break;
        case WorkRegEventType.OperationContinue:
            icon = "fad fa-lg fa-play-circle";
            color = "#7EAF3F";
            break;
        case WorkRegEventType.OperationEnd:
            icon = "fad fa-lg fa-stop-circle";
            color = "#BB5534";
            break;

        default:
            icon = "fa fa-clock-o";
            color = "#faaf14";
            break;
    }

}

@using (Html.BeginForm(null, null, FormMethod.Post, new { @id = "workOrderWorkReg", enctype = "multipart/form-data" }))
{

    <div class="wrapper wrapper-content">
        <div class="tabs-container">

            @Html.Partial("_ProcessingTabNavigation")

            <div class="tab-content">

                @Html.HiddenFor(model => model.AcKey)
                @Html.HiddenFor(model => model.AnNo)
                @Html.HiddenFor(model => model.Ident)
                @Html.HiddenFor(model => model.UM)
                @Html.HiddenFor(model => model.EventType)
                @Html.HiddenFor(model => model.EventTypeCaption)
                @Html.HiddenFor(model => model.EventTime)
                @Html.HiddenFor(model => model.Descr)
                @Html.HiddenFor(model => model.ResursID)
                @Html.HiddenFor(model => model.Worker)
                @Html.HiddenFor(model => model.ParentWorker)
                @Html.HiddenFor(model => model.Priority)
                @Html.HiddenFor(model => model.CalendarQId)
                @Html.HiddenFor(model => model.Shift)
                @Html.HiddenFor(model => model.QId)
                @Html.HiddenFor(model => model.WoExItem.QId)
                @Html.HiddenFor(model => model.WoExItem.WoEx.PlanQty)
                @Html.HiddenFor(model => model.UsedTime)

                <div class="divided-content">

                    <div class="divided-content-main divided-content-full">

                        <div class="row document-head d-head-m-b-10">

                            <div class="col-xs-3 document-head-disabled-input">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.ResursID, Loc.WOResource, new { @class = "control-label m-t-xs" })
                                    @Html.TextBoxFor(model => model.ResursID, new { @id = "resursId", @class = "form-control" })
                                </div>
                            </div>
                            <div class="col-xs-3 document-head-disabled-input">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Ident, Loc.Operation, new { @class = "control-label m-t-xs" })
                                    @Html.TextBoxFor(model => model.Ident, new { @id = "ident", @class = "form-control" })
                                </div>
                            </div>
                            <div class="col-xs-3 document-head-disabled-input">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.AnNo, Loc.Position, new { @class = "control-label m-t-xs" })
                                    @Html.TextBoxFor(model => model.AnNo, new { @id = "no", @class = "form-control" })
                                </div>
                            </div>
                            <div class="col-xs-3 document-head-disabled-input">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.AcKey, Loc.Number, new { @class = "control-label m-t-xs" })
                                    <input id="acKeyDisplay" class="form-control" type="text" value=" @Model.KeyView">
                                </div>
                            </div>
                        </div>

                        <div class="project-list">
                            <div class="row">

                                <div class="form-horizontal form-md">
                                    <div class="col-xs-12 card-work-reg-card hidden-sm hidden-lg">
                                        <div class="card progress-card card-work-reg">
                                            <div class="card-header">
                                                <h3 class="card-title"><i class="fas fa-clock text-primary fa-lg m-r-sm"></i>@Loc.UsedTime/@Loc.Planned</h3>
                                            </div>

                                            <div class="card-body text-center m-t-md">
                                                <h3 style="color: @color">
                                                    <i class="@icon fa-lg m-r-xs @(Model.EventType.IsEmpty()?"hidden":String.Empty)" style="color: @color;"></i>
                                                    <span id="element">
                                                        <span id="doneTime" style="font-size: 18px" class="@(!Model.EventType.IsEmpty()?"hidden":String.Empty)" onclick="editTime(this)">@DoneTimeStr</span>
                                                    </span>
                                                    <span id="stopwatch-div" class="@(Model.EventType.IsEmpty()?"hidden":String.Empty)">
                                                        <span style="font-size: 18px" id="stopwatch" class="stopwatch">00:00:00</span>
                                                    </span>
                                                    <span id="planTime" style="font-size: 18px">/@PlanTimeStr</span>
                                                </h3>
                                            </div>
                                            <div class="m-t-md">
                                                <div class="progress">
                                                    <div id="progress-bar" class="progress-bar @_class" style="width:@_progressPerc" aria-valuenow="@_progressValue" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-xs-12 card-work-reg-card">
                                        <div class="card card-work-reg">
                                            <div class="card-header">
                                                <h3 class="card-title"><i class="fas fa-thumbs-up text-primary fa-lg m-r-sm"></i>@Loc.WOOperationGoodPcs</h3>
                                            </div>

                                            <div class="card-body">
                                                <div class="input-group input-group-lg">
                                                    <span class="input-group-btn">
                                                        <button id="b_dGoodPcs" type="button" class="btn btn-plus-minus"><i class="fa fa-minus fa-lg  text-primary"></i></button>
                                                    </span>
                                                    <input type="number" id="GoodPcs" required class="form-control col-md-8 text-center input-lg" autocomplete="off" min="0" />
                                                    <span class="input-group-btn">
                                                        <button id="b_iGoodPcs" type="button" class="btn btn-plus-minus"><i class="fa fa-plus fa-lg text-primary"></i></button>
                                                    </span>
                                                </div>

                                                <div class="m-t-sm">
                                                    <span>@Loc.Missing: <span class="font-bold">@RestQty.ToString("n0")</span></span>
                                                    <span class="pull-right">@Loc.Planned: <span class="font-bold">@PlanQty.ToString("n0")</span> </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xs-12 card-work-reg-card">
                                        <div class="card card-work-reg">
                                            <div class="card-header">
                                                <h3 class="card-title"><i class="fas fa-wrench  text-primary fa-lg m-r-sm"></i>@Loc.WOOperationRepairPcs</h3>
                                            </div>

                                            <div class="card-body">
                                                <div class="input-group input-group-lg">
                                                    <span class="input-group-btn">
                                                        <button id="b_dRepairQty" type="button" class="btn btn-plus-minus"><i class="fa fa-minus fa-lg text-primary"></i></button>
                                                    </span>
                                                    <input type="number" id="RepairQty" required class="form-control col-md-8 text-center input-lg" autocomplete="off" min="0" />
                                                    <span class="input-group-btn">
                                                        <button id="b_iRepairQty" type="button" class="btn btn-plus-minus"><i class="fa fa-plus fa-lg text-primary"></i></button>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xs-12 card-work-reg-card">
                                        <div class="card card-work-reg">
                                            <div class="card-header">
                                                <h3 class="card-title"><i class="fas fa-times text-primary fa-lg m-r-sm"></i>@Loc.WOOperationScrapPcs</h3>
                                            </div>

                                            <div class="card-body">
                                                <div class="input-group input-group-lg">
                                                    <span class="input-group-btn">
                                                        <button id="b_dScrapPcs" type="button" class="btn btn-plus-minus"><i class="fa fa-minus fa-lg text-primary"></i></button>
                                                    </span>
                                                    <input type="number" id="ScrapPcs" required class="form-control col-md-8 text-center input-lg" autocomplete="off" min="0" />
                                                    <span class="input-group-btn">
                                                        <button id="b_iScrapPcs" type="button" class="btn btn-plus-minus"><i class="fa fa-plus fa-lg text-primary"></i></button>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xs-12 card-work-reg-card">
                                        <div class="card card-work-reg ">
                                            <div class="card-header">
                                                <h3 class="card-title"><i class="far fa-calendar-alt text-primary fa-lg m-r-sm"></i>@Loc.Date</h3>
                                            </div>

                                            <div class="card-body">
                                                <input id="Date" type="date" name="Date" class="input-lg text-center col-xs-12" value="@DateTime.Now.Date.ToString("yyyy-MM-dd")">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xs-12 card-work-reg-card">
                                        <div class="card card-work-reg ">
                                            <div class="card-body text-center">
                                                <img id="image" style='max-width:100%' src="@ImageHelper.GetImageThumbnail(Model.WoExItem.WoEx.Picture, 200) " />
                                                <i id="noImage" class='fal fa-image fa-3x text-muted hidden' style='opacity:0.5'></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </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">@Loc.AdditionalSettings</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 class="row border-bottom p-l-10" id="note">
                                        <a data-toggle="tab" href="#note-div">
                                            <h3 class="text-default" data-toggle="tab"><i class="fas fa-comment text-primary p-r-sm"></i>@Loc.Note</h3>
                                        </a>
                                    </div>

                                    <div class="row border-bottom p-l-10" id="operation-materials">
                                        <a data-toggle="tab" href="#materials-for-operations">
                                            <h3 class="text-default" data-toggle="tab"><i class='far fa-newspaper text-primary p-r-sm'></i>@Loc.MaterialsForOperation</h3>
                                        </a>
                                    </div>

                                    <div class="row border-bottom p-l-10" id="confirm-receiving">
                                        <a data-toggle="tab">
                                            <h3 class="text-default" data-toggle="tab">
                                                <i class="fa fa-dolly text-primary p-r-sm"></i>@Loc.WOReceiving_ConfirmReceive
                                                <span class="hw-switch-m-l pull-right">
                                                    <input type="checkbox" class="js-switch timeRecordsSwitch" id="confirmReceive" />
                                                </span>
                                            </h3>
                                        </a>
                                    </div>

                                    <div class="row border-bottom p-l-10" id="finish-task">
                                        <a data-toggle="tab">
                                            <h3 class="text-default" data-toggle="tab">
                                                <i class="fa fa-check text-primary p-r-sm"></i>@Loc.FinishTask
                                                <span class="hw-switch-m-l pull-right">
                                                    <input type="checkbox" class="js-switch timeRecordsSwitch" id="finishOperation" />
                                                </span>
                                            </h3>
                                        </a>
                                    </div>

                                </div>
                            </div>

                            <div id="work-reg-history" class="tab-pane m-l-n-sm m-r-n-sm">
                                <table id="woExRegOperExp" data-grid-id="WoExRegOperExp" data-url="@Url.Action("WoExItemWork", "Manufacturing")" class="table">
                                    <thead>
                                        <tr>
                                            <th>@Loc.Worker</th>
                                            <th>@Loc.TaBegin</th>
                                            <th class="dt-center">@Loc.Duration</th>
                                            <th>@Loc.StateOfPieces</th>
                                            <th>@Loc.Note</th>
                                            <th class="dt-center">@Loc.Status</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>

                            <div id="note-div" class="tab-pane">
                                <div class="form-horizontal m-t-lg">
                                    <textarea class="form-control col-xs-10 input-lg" name="Note" rows="6"></textarea>
                                </div>
                            </div>

                            <div id="materials-for-operations" class="tab-pane m-l-n-sm m-r-n-sm">
                                <table id="mainGridMaterials" data-grid-id="work-order-items" data-url="@Url.Action("WorkOrderItemList", "Manufacturing")" class="card">
                                    <thead style="display:none">
                                    </thead>
                                </table>
                            </div>

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

                        </div>
                    </div>

                </div>

            </div>


            <a href="@Url.Action("CompletWork", "Manufacturing", new { key = Model.AcKey, type = ViewBag.ProdType })" id="back" class="btn btn-light btn-rounded text-primary btn-back">
                <i class="fas fa-chevron-left"></i>
            </a>
            <div class="cont-right" style="right:0px;">

                <a id="stop" role="button"
                   class="btn pull-right stop-btn @(Model.EventType.IsEmpty() || Model.EventType == WorkRegEventType.OperationEnd ? "hidden" : string.Empty)"
                   data-event-type="@WorkRegEventType.OperationEnd"
                   data-end-caption="@Loc.TaEnd"
                   data-milliseconds="@Model.Milliseconds"
                   onclick="startWorkRecordingMobile(this, true)"
                   data-icon="far fa-stop-circle"
                   data-color="#BB5534">
                    <i class="far fa-stop-circle"></i>
                    <span>@Loc.TaEnd</span>
                </a>

                <a id="pause" role="button"
                   class="btn pull-right pause-btn @(Model.EventType.IsEmpty() || Model.EventType == WorkRegEventType.OperationPause || Model.EventType == WorkRegEventType.OperationEnd ? "hidden" : string.Empty)"
                   data-event-type="@WorkRegEventType.OperationPause"
                   data-pause-caption="@Loc.Pause"
                   data-milliseconds="@Model.Milliseconds"
                   onclick="startWorkRecordingMobile(this, true)"
                   data-icon="far fa-pause-circle"
                   data-color="goldenrod">
                    <i class="far fa-pause-circle"></i>
                    <span>@Loc.Pause</span>
                </a>

                <a id="continue" role="button"
                   class="btn pull-right continue-btn @(Model.EventType.IsEmpty() || Model.EventType == WorkRegEventType.OperationStart || 
                        Model.EventType == WorkRegEventType.OperationContinue || Model.EventType == WorkRegEventType.OperationEnd ? "hidden" : string.Empty)"
                   data-event-type="@WorkRegEventType.OperationContinue"
                   data-pause-caption="@Loc.Continue"
                   data-milliseconds="@Model.Milliseconds"
                   onclick="startWorkRecordingMobile(this, true)"
                   data-icon="far fa-play-circle"
                   data-color="#7EAF3F">
                    <i class="far fa-play-circle"></i>
                    <span>@Loc.Continue</span>
                </a>

                <a id="start" role="button"
                   class="btn pull-right start-btn @(!Model.EventType.IsEmpty() ? "hidden" : string.Empty)"
                   data-event-type="@WorkRegEventType.OperationStart"
                   data-start-caption="@Loc.TaBegin"
                   data-milliseconds="@Model.Milliseconds"
                   onclick="startWorkRecordingMobile(this, true)"
                   data-icon="far fa-stop-circle"
                    data-color="#7EAF3F">
                    <i class="fas fa-play"></i>
                    <span>@Loc.TaBegin</span>
                </a>

                <a id="confirmButton" role="button"
                   class="btn pull-right btn-primary btn-rounded m-l-sm @(!(Model.EventType == WorkRegEventType.OperationEnd) ? "hidden" : string.Empty)"
                   onclick="confirmOperationWork(true)">
                    <i class="fa fa-dolly"></i>
                    <span>@Loc.Confirm</span>
                </a>

                <div class="card card-receiving m-l-sm pull-right p-xs hidden-xs" style="width: 200px; height: 70px; background-color:#fff">
                    <div class="card-header" style="margin:auto">
                        <h4 class="card-title"> Planirano/Porabljen čas</h4>
                    </div>
                    <div class="card-body">
                        <h3 style="color: @color">
                            <i class="@icon" style="color: @color"></i>
                            <span id="planTime" >@PlanTimeStr/</span>
                            <span id="doneTime" class="@(!Model.EventType.IsEmpty()?"hidden":String.Empty)">@DoneTimeStr</span>
                            <span id="stopwatch-div" class="@(Model.EventType.IsEmpty()?"hidden":String.Empty)">
                                <span id="stopwatch" class="stopwatch" style="font-size: 16px" >00:00:00</span>
                            </span>
                        </h3>
                    </div>
                </div>

                <button id="options" type="button" class="btn pull-right btn-rounded">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>

        </div>

    </div>

}

<div class="modal inmodal fade" id="imageModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                @Html.Image(ImageHelper.GetImageThumbnail(Model.WoExItem.WoEx.Picture, 400), "", new { id = "image" })
                <i id="noImage" class='fal fa-image fa-3x text-muted hidden' style='opacity:0.5'></i>
            </div>
            <div class="modal-footer" style="text-align:center !important;">
                <button type="button" class="btn btn-primary btn-rounded" data-dismiss="modal">@Loc.Close</button>
            </div>
        </div>
    </div>
</div>


<input type="hidden" id="confirmOperWork" value="@Url.Action("ConfirmOperWork", "Manufacturing")" />
<input type="hidden" id="confirmOperation" value="@Url.Action("ConfirmOper", "Manufacturing")" />
<input type="hidden" id="backURL" value="" />
<input type="hidden" id="resourceQId" value="@resourceQID" />
<input type="hidden" id="activeEventType" value="@Model.EventType" />
<input type="hidden" id="buttonText" value="@Loc.OK" />
<input type="hidden" id="succesText" value="@Loc.SuccessWorkMsg" />
<input type="hidden" id="requiedQty" value="@Loc.RequiredInput @Loc.UsedTime" />
<input type="hidden" id="requiedWorker" value="@Loc.RequiredInput @Loc.Worker" />
<input type="hidden" id="WoExDecPlacesOper" value="@ViewBag.WoExDecPlacesOper" />
<input type="hidden" id="confirmed" value="@Loc.StatusConfirmed" />
<input type="hidden" id="unconfirmed" value="@Loc.StatusUnconfirmed" />
<input type="hidden" id="buttonYes" value="@Loc.Yes" />
<input type="hidden" id="buttonNo" value="@Loc.No" />
<input type="hidden" id="prodType" value="@ViewBag.ProdType" />
<input type="hidden" id="questionText" value="@Loc.FinishOperationTracking" />
<input type="hidden" id="notEmployeeText" value="@Loc.EmployeeWorkTracking" />
<input type="hidden" id="BeginTime"  value="@ViewBag.BeginTime" />

@section pageScripts{

    @Scripts.Render("~/bundles/manufacturing")

    <script src="~/Scripts/custom/global-helpers.js"></script>

    <script>

        $(document).ready(function () {
            initializeWorkRegistrationMobile();
        });


    </script>

}
