@using PantheonRA.WebApi.Contracts

@model PaWoExItemTools

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

@Html.Hidden("acKey", Model.AcKey)

<div class="wrapper wrapper-content">
    <div class="tabs-container">
        @Html.Partial("Service/_ProcessingTabNavigation")

        @if (!_isMobile)
        {
            <div class="row buttons-tabbed">
                <button onclick="openModal('add-tool-modal')" class="btn btn-primary btn-outline" title="@Loc.NewTool">
                    <i class="fa fa-plus"></i><span class="bold hidden-xs m-l-xs">@Loc.NewTool</span>
                </button>
            </div>
        }

        <div class="tab-content">
            <div class="divided-content">
                <div class="divided-content-main divided-content-full no-padding">
                    <div class="row document-head @(_isMobile ? "d-head-m-b-0" : "")" style="margin-left:0px !important; margin-right:0px !important;">

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

                    </div>
                    <div class="document-list-no-footer">

                        <div class="form-horizontal form-md @(_isMobile ? "col-lg-6 col-md-8" : string.Empty)">
                            @foreach (var tool in Model.Items.Tools)
                            {
                                <div class="@(_isMobile ? "col-xs-12" : "col-xs-3") col-xs-12 card-work-reg-card">
                                    <div class="card card-work-reg" style="height: unset">
                                        <div class="card-header">
                                            @if (tool.AbIcon != null && tool.AbIcon.Length > 0)
                                            {
                                                <div class="tools-image-container">
                                                    <img style="max-width:100%; max-height:150px;" src="data:image/jpeg;base64,@Convert.ToBase64String(tool.AbIcon)" />
                                                </div>
                                            }
                                            <h3 class="card-title">@tool.AcName</h3>
                                            <div class="mb-8" hidden>
                                                <i class="fa fa-hashtag"></i> <span>@tool.AnSubNo</span>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="input-group input-group-lg">
                                                <span class="input-group-btn">
                                                    <button type="button" class="btn btn-plus-minus" onclick="decrementQuantity(@tool.AnSubNo, @tool.AnResursQId)"><i class="fa fa-minus fa-lg text-primary"></i></button>
                                                </span>
                                                <input type="number" required id="@tool.AnSubNo-@tool.AnResursQId-quantity" class="form-control col-md-8 text-center input-lg" autocomplete="off" min="0" value="@tool.AnQty" onchange="updateQuantity(@tool.AnSubNo, @tool.AnResursQId)" />
                                                <span class="input-group-btn">
                                                    <button type="button" class="btn btn-plus-minus" onclick="incrementQuantity(@tool.AnSubNo, @tool.AnResursQId)"><i class="fa fa-plus fa-lg text-primary"></i></button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            }

                            @foreach (var tool in Model.Items.ToolsSml)
                            {
                                <div class="@(_isMobile ? "col-xs-12" : "col-xs-3") col-xs-12 card-work-reg-card">
                                    <div class="card card-work-reg" style="height: unset">
                                        <div class="card-header">
                                            @if (tool.AcPicture != null && tool.AcPicture.Length > 0)
                                            {
                                                <div class="tools-image-container">
                                                    <img style="max-width:100%; max-height:150px;" src="data:image/jpeg;base64,@Convert.ToBase64String(tool.AcPicture)" />
                                                </div>
                                            }
                                            <h3 class="card-title">@tool.AcToolSmlName</h3>
                                            <div class="mb-8" hidden>
                                                <i class="fa fa-hashtag"></i> <span>@tool.AnSubNo</span>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="input-group input-group-lg">
                                                <span class="input-group-btn">
                                                    <button type="button" class="btn btn-plus-minus" onclick="decrementQuantity(@tool.AnSubNo, @tool.AnResursQid, true)"><i class="fa fa-minus fa-lg text-primary"></i></button>
                                                </span>
                                                <input type="number" required id="@tool.AnSubNo-@tool.AnResursQid-quantity-sml" class="form-control col-md-8 text-center input-lg" autocomplete="off" min="0" value="@tool.AnQty" onchange="updateQuantity(@tool.AnSubNo, @tool.AnResursQid)" />
                                                <span class="input-group-btn">
                                                    <button type="button" class="btn btn-plus-minus" onclick="incrementQuantity(@tool.AnSubNo, @tool.AnResursQid, true)"><i class="fa fa-plus fa-lg text-primary"></i></button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            }
                        </div>

                    </div>
                </div>
            </div>
            <div class="divided-content-side">

                @* Back button *@
                <div class="@(_isMobile ? string.Empty : "hidden")">
                    <a href="@Url.Action("Index", "Manufacturing", new { type = ViewBag.ProdType })" id="back" class="btn btn-light btn-rounded btn-back">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                </div>

                @if (_isMobile)
                {
                    <button onclick="openModal('add-tool-modal')" class="btn btn-light btn-rounded btn-plus">
                        <i class="fa fa-plus"></i>
                    </button>
                }

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

@Html.Hidden("UpdateToolQuantityURL", Url.Action("UpdateToolQuantity", "Manufacturing"));
@Html.Partial("~/Views/Manufacturing/Service/_AddToolModal.cshtml")

@section pageScripts{
    @Scripts.Render("~/bundles/services")
}
