@model Fab2ApprovalSystem.Models.LotDisposition

@{
    ViewBag.Title = "Create";
    var val = Json.Encode(Model);
}

<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.arctic.css" type="text/css" />
<link rel="stylesheet" href="/Content/kendo/kendo.blueopal.min.css" />
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxtree.js"></script>

@*<button class="btn btn-primary btn-lg" data-toggle="modal" id="lotAddFormButton">
    Launch demo modal
</button>*@



@using (Html.BeginForm(new { id = "formCreate" }))
{    
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-horizontal col-sm-6">
                <div class="form-group">
                    <label class="control-label col-sm-4">Title:</label>
                    <div class="col-sm-4 col-md-6">
                        @Html.TextBoxFor(model => model.Title, new { id = "txtTitle", @class = "k-textbox" })
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4">Originator:</label>
                    <div class="col-sm-8 col-md-4">

                        @(Html.Kendo().DropDownList()
                        .Name("OriginatorID")
                        .BindTo(new SelectList(ViewBag.OriginatorList, "OriginatorID", "OriginatorName"))
                        .Value(@GlobalVars.GetUserIdValue(Session))

                        )
                        @*@Html.TextBoxFor(model => model.OriginatorID, new { id = @GlobalVars.USER_ID, Value = @GlobalVars.GetUserName(Session);, @class = "k-textbox" })*@
                    </div>
                </div>

            </div>



            <div class="form-horizontal col-sm-4">
                <fieldset disabled>
                    <div class="form-group">

                        <label class="control-label col-sm-4">Issue Date</label>
                        <div class="col-sm-4">
                            @Html.TextBoxFor(model => model.IssueDate, new { @class = "form-control" })                           
                        </div>

                    </div>
                </fieldset>
                <fieldset disabled>
                    <div class="form-group">

                        <label class="control-label col-sm-4">Issue #</label>
                        <div class="col-sm-4">                           
                            @Html.TextBoxFor(model => model.IssueID, new { @class = "form-control" })
                            
                        </div>

                    </div>
                </fieldset>

                <div class="form-group">
                    <label class="control-label col-sm-4">PE Required</label>
                    <div class="col-sm-4">
                        @Html.RadioButtonFor(model => model.PERequired, 1) Yes
                        @Html.RadioButtonFor(model => model.PERequired, 0) No
                    </div>
                </div>
</div>
        </div>
    </div>



    <div class="panel panel-default">

        <div class="panel-body">

            <div class="form-horizontal col-sm-6">
                <div class="form-group">
                    <label class="control-label col-sm-4">Affected Department:</label>
                    <div class="col-sm-8 col-md-6">


                        @(Html.Kendo().MultiSelect()
                        .Name("DepartmentIDs")
                        .BindTo(new SelectList(ViewBag.deps, "DepartmentID", "DepartmentName"))
        //.Value(ViewBag.selectedDeps)
                        )


                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4">Responsibility:</label>
                    <div class="col-sm-8 col-sm-6">

                        @(Html.Kendo().DropDownList()
                                .Name("Responsibility")
                            .BindTo(new SelectList(ViewBag.ResponsibilityList, "ResponsibilityID", "ResponsibilityName"))
                            .Value("Model.ResponsibilityID")
                        )


                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4">Issue:</label>
                    <div class="col-sm-8 col-sm-4">

                        @(Html.Kendo().DropDownList()
                            .Name("Issue")
                            .BindTo(new SelectList(ViewBag.ResponsibilityIssueList, "ResponsibilityIssueID", "Issue"))
                            .Value("Model.ResponsibilityIssueID")

                        )

                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4" >SPN Scrap Code:</label>
                    <div class="col-sm-8 col-md-6">
                        @Html.TextBoxFor(model => model.SPNScrapCode, new { id = "txtSPNScrapCode", @class = "k-textbox" })
                        

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

    </div>
        </div>
    
        <div class="panel panel-default">

        <div class="panel-body">
            
            <div class="col-md-6">
                <label class="control-label">Issue Description:</label>
                @Html.TextAreaFor(model => model.IssueDescription, 3, 15, new { id = "txtIssueDescription", @class = "form-control" })
            </div>
            
            <div class="col-md-6">
                    <label class=" control-label">Reason For Disposition:</label>
                     @Html.TextAreaFor(model => model.ReasonForDisposition, 3, 15, new { id = "txtReasonForDisposition", @class = "form-control" })
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <button class="btn btn-default btn-sm" data-toggle="modal" id="showLotSearchFormButton">
            Search Lots
            </button>

            <button class="btn btn-default btn-sm" data-toggle="modal" id="lotAddFormButton">
                Add Lot
            </button>

        </div>
        <div class="panel-body">
            <div class="col-md-offset-0">
                @(Html.Kendo().Grid<Fab2ApprovalSystem.Models.Lot>()
                    .Name("Lots")
                    .Columns(columns =>
                    {                        
                        columns.Bound(l => l.LotID).Visible(false);
                        columns.Bound(l => l.LotStatusOptionID).Visible(false);
                        columns.Bound(l => l.LotNumber).Width("8%");
                        columns.Bound(l => l.WipPartNo).Width("12%");
                        columns.Bound(l => l.LotStatusOption).ClientTemplate("#=LotStatusOption.LotStatusOption#").Width("10%");
                        //columns.Bound(l => l.LotStatusOptionName).Width("10%");
                        columns.Bound(l => l.WaferCount);
                        columns.Bound(l => l.DiePartNo);
                        columns.Bound(l => l.DieCount);
                        columns.Bound(l => l.NewPartNo);
                        columns.Bound(l => l.TotalCost);
                        columns.Bound(l => l.ProductFamily);
                        columns.Bound(l => l.Gen);
                        columns.Bound(l => l.Hexsize);
                        columns.Bound(l => l.Voltage);
                        columns.Bound(l => l.Location);
                        //columns.Command(command => command.Custom("Lot Hstory").Click("showDetails"));
                        columns.Command(command => command.Destroy()).Width(90);
                    })

                    
                    .Editable(editable => editable.Mode(GridEditMode.InLine))
                    .Pageable()
                    .Sortable()
                    .Scrollable()
        //.Filterable()
                    .HtmlAttributes(new { style = "height:250px; width:100%; font-size: 11px" })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        //.Batch(true)
                        .ServerOperation(false)
                        .Events(events => events.Error("error_handler"))


                        .Model(model =>
                        {
                            model.Id(p => p.LotID);
                            model.Field(p => p.LotID).Editable(false);
                            model.Field(p => p.TotalCost).Editable(false);
                            //model.Field(p => p.LotStatusOption).DefaultValue(
                            //     ViewData["DefaultLotStatusOptions"] as Fab2ApprovalSystem.Models.LotStatusOptionViewModel);
                        })
                        .PageSize(20)
                    .Read(read => read.Action("EditingCustom_Read", "LotDisposition", new { issueID = -1 }))
                    .Create(create => create.Action("EditingCustom_Create", "LotDisposition"))
                    .Update(update => update.Action("EditingCustom_Update", "LotDisposition"))
                    .Destroy(destroy => destroy.Action("EditingCustom_Destroy", "LotDisposition"))

                )
                )


            </div>
        </div>


    </div>

    <div class="panel panel-default">
        <div class="panel-body">
            <div class="col-md-offset-0">
                <input type="submit" value="Save" class="btn btn-primary btn-sm" />
            </div>
        </div>
    </div>



}
<!-- Button trigger modal -->
<!-- Modal -->

<div class="modal fade" id="LotSearchForm" tabindex="0" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog custom-class">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Lot Search</h4>
            </div>

            <div class="modal-body">

                <table cellpadding="10" cellspacing="2">

                    <tr>
                        <td valign="top" colspan="2">
                            <div class="row-fluid">
                                <div class="controls span4">
                                    @Html.Label("By Lot")
                                    @Html.RadioButton("Category", "Lot", false)
                                    @Html.Label("By Location")
                                    @Html.RadioButton("Category", "Lot", false)

                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>

                        <td valign="top" colspan="2">
                            <div class="row-fluid">
                                <div class="controls span4">
                                    @Html.TextBox("txtSearch", null, new { @class = "k-textbox" })
                                    <input style="margin-top: 20px;" type="button" id='jqxButtonSearchLots' value="Search Lots" />
                                </div>

                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">

                            <div id='content'>
                                <div id='lstSearchedLots'>
                                </div>
                                <div>
                                    <input style="margin-top: 20px;" type="button" id='jqxButtonAddLots' value="Add Lots" />
                                </div>

                            </div>
                        </td>
                        <td valign="top">

                            <div id='content1'>
                                <div id='lstSelectedLots'>

                                </div>
                                <div>
                                    <input style="margin-top: 20px;" type="button" id='jqxButtonRemoveLots' value="Remove Lots" />
                                </div>
                            </div>
                        </td>

                    </tr>

                </table>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="submit">Save changes</button>
            </div>

           


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

<div class="modal fade" id="LotAddForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Enter Lot Information:</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="control-group">
                            <label for="LotNumber">Lot Number:</label>
                            <div class="controls">
                                <input type="text" class="form-control" id="LotNumber" placeholder="LotNumber">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="control-group">
                            <label for="LotDescription">Lot Description:</label>
                            <div class="controls">
                                <input type="text" class="form-control" id="LotDescription" placeholder="LotDescription">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="control-group">
                            <label for="NewPartNo">New Part#:</label>
                            <div class="controls">
                                <input type="text" class="form-control" id="NewPartNo" placeholder="NewPartNo">
                            </div>
                        </div>
                    </div>
                </div>
                <br />
                <div class="row">

                    <div class="col-md-4">
                        <div class="control-group">
                            <label for="WipPartNo">WIP Part No:</label>
                            <div class="controls">
                                <input type="text" class="form-control" id="WipPartNo" placeholder="WipPartNo">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="control-group">
                            <label for="DiePartNo">DiePart#:</label>
                            <div class="controls">
                                <input type="text" class="form-control" id="DiePartNo" placeholder="DiePartNo">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="control-group">
                            <label for="ProductFamily">Product Family:</label>
                            <div class="controls">
                                <input type="text" class="form-control" id="ProductFamily" placeholder="ProductFamily">
                            </div>
                        </div>
                    </div>
                </div>
                <br />
                <div class="row">
                    <div class="col-md-4">
                        <div class="control-group">
                            <label for="Gen">Gen:</label>
                            <div class="controls">
                                <input type="number" class="form-control" id="Gen" placeholder="Gen">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="control-group">
                            <label for="Channel">Channel:</label>
                            <div class="controls">
                                <input type="text" class="form-control" id="Channel" placeholder="Channel">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="control-group">
                            <label for="Hexsize">Hexsize:</label>
                            <div class="controls">
                                <input type="number" class="form-control" id="Hexsize" placeholder="Hexsize">
                            </div>
                        </div>
                    </div>
                    
                </div>
                <br />
                <div class="row">

                    <div class="col-md-4">
                        <div class="control-group">
                            <label for="Location">Location:</label>
                            <div class="controls">
                                <input type="text" class="form-control" id="Location" placeholder="Location">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="control-group">
                            <label for="WaferCount">Wafer Count:</label>
                            <div class="controls">
                                <input type="number" class="form-control" id="DieCount" placeholder="DieCount">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="control-group">
                            <label for="DieCount">Die Count:</label>
                            <div class="controls">
                                <input type="number" class="form-control" id="DieCount" placeholder="DieCount">
                            </div>
                        </div>
                    </div>
                </div>

                <br />
                <div class="row">
                    <div class="col-md-3">
                        <div class="control-group">
                            <label for="Voltage">Voltage:</label>
                            <div class="controls">
                                <input type="number" class="form-control" id="Voltage" placeholder="Voltage">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="control-group">
                            <label for="TotalCost">Total Cost:</label>
                            <div class="controls">
                                <input type="number" class="form-control" id="TotalCost" placeholder="TotalCost">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label>Lot Staus Options:</label>
                        <br />
                        <label class="radio-inline">
                            <input type="radio" class="radioBtnClass" name="LotStatusOptionID" id="LotStatusOptionID" value="1~Release" checked>
                            Release
                        </label>
                        <label class="radio-inline">
                            <input type="radio" class="radioBtnClass" name="LotStatusOptionID" id="LotStatusOptionID" value="2~Scrap">
                            Scrap
                        </label>
                        <label class="radio-inline">
                            <input type="radio" class="radioBtnClass" name="LotStatusOptionID" id="LotStatusOptionID" value="3~M_Suffix">
                            M_Suffix
                        </label>

                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="submitLotAdd">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript">


    $(document).ready(function () {


        //$("#Lots").kendoGrid({
        //    dataSource: {
        //        transport: {
        //            read: { url: "/Api/Home", type: "GET" },
        //            destroy: { url: "/Api/Home", type: "DELETE" }
        //        },
        //        schema: {
        //            model: {
        //                id: "LotID",
        //                fields: {
        //                    LotID: { editable: false },
        //                    LotNumber: { editable: false },
        //                    WipPartNo: { editable: true },
        //                    LotStatusOption: { editable: true },
        //                    WaferCount: { editable: false }
        //                }
        //            }
        //        },
        //        sort: [{ field: "Title", dir: "asc" }],
        //        serverPaging: true,
        //        serverFiltering: true,
        //        serverSorting: true,
        //        pageSize: 15
        //    },
        //    columns: [
        //        { field: "LotID", title: "LotID#", width: "45px" },
        //        { field: "LotNumber", title: "Lot#", width: "70px" },
        //        { field: "WipPartNo", title: "Title", width: "170px" },
        //        { field: "WipPartNo", title: "WipPart#", width: "65px" },
        //        { field: "LotStatusOption", title: "LotStatus", width: "70px" },
        //        { field: "WaferCount", title: "WaferCount", width: "130px" },
        //   { command: ["edit", "destroy"], title: "&nbsp;", width: "172px" }],

        //    pageable: true,
        //    sortable: true,
        //    scrollable: true,
        //    filterable: false
        //});

       
            $("#showLotSearchFormButton").on('click', function () {
                $("#LotSearchForm").modal('show');
                return false;
            })

            $("#lotAddFormButton").on('click', function () {
                $("#LotAddForm").modal('show');
                return false;
            })

            $("#submitLotAdd").on('click', function () {
                var lotStatusOptionData = $('input:radio[name=LotStatusOptionID]:checked').val().split('~');
                var lotStatusOptionID = lotStatusOptionData[0];
                var lotStatusOptionName = lotStatusOptionData[1];

                    $.ajax({
                        url: '/LotDisposition/AddLot',
                        type: "Post",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(
                                            {
                                                IssueID: $("#txtIssueID").val(),
                                                LotNumber: $("#LotNumber").val(),
                                                IssueID: $("#IssueID").val(),
                                                Description: $("#Description").val(),
                                                NewPartNo: $("#NewPartNo").val(),
                                                WipPartNo: $("#WipPartNo").val(),
                                                DiePartNo: $("#DiePartNo").val(),
                                                ProductFamily: $("#ProductFamily").val(),
                                                Gen: $("#Gen").val(),
                                                Channel: $("#Channel").val(),
                                                Hexsize: $("#Hexsize").val(),
                                                Voltage: $("#Voltage").val(),
                                                WaferCount: $("#WaferCount").val(),
                                                DieCount: $("#DieCount").val(),
                                                Location: $("#Location").val(),
                                                TotalCost: $("#TotalCost").val(),
                                                LotStatusOptionID: lotStatusOptionID,
                                                LotStatusOptionName: lotStatusOptionName

                                            }),
                        success: function (result) {

                            //alert("success " + result.LotNumber);

                            var vgrid = $("#Lots").data("kendoGrid");
                            //Selecting dataSource
                            var datasource = vgrid.dataSource;
                            var newRecord = result;
                            //Inserting new row
                            datasource.insert(newRecord);
                            $("#LotAddForm").modal('hide');

                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert("Failed " + errorThrown);

                        }
                        

                    });

                
                return false;
            })
            


        });


        //
        displayEmptySelectedLotsList();
        //
        displayEmptySearchedLotsList();

            function error_handler(e) {
                if (e.errors) {
                    var message = "Errors:\n";
                    $.each(e.errors, function (key, value) {
                        if ('errors' in value) {
                            $.each(value.errors, function () {
                                message += this + "\n";
                            });
                        }
                    });
                    alert(message);
                }

            }


            $("#jqxButtonSearchLots").jqxButton({
                theme: 'energyblue'
            });

            $("#jqxButtonAddLots").jqxButton({
                theme: 'energyblue'
            });

            $("#jqxButtonRemoveLots").jqxButton({
                theme: 'energyblue'
            });

        // REGION SERACH LOTS MODAL DIALOG

            $("#jqxButtonSearchLots").on('click', function displayLots() {
                var searchText = ($("#txtSearch").val());
                var url = "/LotDisposition/SearchLots?searchText=" + searchText + "&searchBy=LotNo";
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'LotNumber' }
                    ],
                    id: 'id',
                    url: url,
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // Create a jqxListBox
                $("#lstSearchedLots").jqxListBox({
                    multipleextended: true, theme: "arctic", source: dataAdapter, displayMember: "LotNumber", valueMember: "LotNumber", width: 200, height: 250
                });
                $("#lstSearchedLots").on('select', function (event) {
                    if (event.args) {
                        var item = event.args.item;
                        if (item) {
                            var valueelement = $("<div></div>");
                            valueelement.text("Value: " + item.value);
                            var labelelement = $("<div></div>");
                            labelelement.text("Label: " + item.label);

                        }
                    }
                });

            });


            $('#jqxButtonAddLots').on('click', function () {
                // get selected items.
                var bfound = false;
                var lots;
                var itemsToAdd = $('#lstSearchedLots').jqxListBox('getSelectedItems');
                if (itemsToAdd.length > 0) {

                    for (var i = 0; i < itemsToAdd.length; i++) {

                        if (itemsToAdd[i].label != undefined) {

                            var tempvalue = itemsToAdd[i].value;
                            var templabel = itemsToAdd[i].label;

                            //if (i < itemsToAdd.length - 1)
                            //{
                            // check if the item exists in the seleced lots list
                            var itemsAdded = $("#lstSelectedLots").jqxListBox('getItems');
                            if (itemsAdded != undefined) {
                                for (var x = 0; x < itemsAdded.length; x++) {
                                    if (itemsAdded[x].label == templabel) {
                                        bfound = true;
                                        break;
                                    };
                                };

                                if (!bfound) {
                                    $("#lstSelectedLots").jqxListBox('addItem', { label: templabel, value: tempvalue });
                                    if (lots == null)
                                        lots = tempvalue;
                                    else
                                        lots += "~" + tempvalue;
                                }

                                bfound = false;
                            }
                            else {
                                alert(templabel)
                                $("#lstSelectedLots").jqxListBox('addItem', { label: templabel, value: tempvalue });
                            }

                        }
                    };


                }

                // unselect all the selected items
                $("#lstSearchedLots").jqxListBox({ selectedIndex: -1 });

            });


            $('#jqxButtonRemoveLots').on('click', function () {
                // get  items.
                var userids;
                var items = $("#lstSelectedLots").jqxListBox('getSelectedItems');
                if (items != undefined) {
                    for (var i = items.length - 1; i >= 0; i--) {
                        $("#lstSelectedLots").jqxListBox('removeItem', items[i].value);
                    };

                }

            });

            function displayEmptySelectedLotsList() {
                //var url = "/LotDisposition/SearchLots?searchText=" + searchText + "&searchBy=LotNo";
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'LotNo' }
                    ],
                    id: 'id'
                    //url: url
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // Create a jqxListBox
                $("#lstSelectedLots").jqxListBox({
                    multipleextended: true, theme: "arctic", source: dataAdapter, displayMember: "LotNo", valueMember: "LotNo", width: 200, height: 250
                });

            }

            function displayEmptySearchedLotsList() {
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'LotNo' }
                    ],
                    id: 'id'
                    //url: url
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // Create a jqxListBox
                $("#lstSearchedLots").jqxListBox({
                    multipleextended: true, theme: "arctic", source: dataAdapter, displayMember: "LotNo", valueMember: "LotNo", width: 200, height: 250
                });

            }



            function showDetails(e) {

                alert('hello');
                //e.preventDefault();
                //var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

            }


</script>