@model GODATA.Models.Ticket.FeedBackModel

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<div id="FeedbackContainer">

    @if (Model.FeedBackagent != "" && Model.FeedBackagent != null)
    {

        <div id="divFilledFeedbackDetails" class="Feedback_wrapper">
            <img src="../../Content/css/images/feedback-label.png" alt="Feedback" title="Feedback" border="0" />

            <div style="height: 400px; overflow: auto;">
                <div class="feedback_rating">

                    <table id="tableFeedback" width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tbody>
                            @Html.Hidden("ticketId", (object)@ViewBag.TicketId)
                            @Html.Hidden("creationTime", (string)@ViewBag.CreationTime)

                            @if (ViewBag.FeedbackQuestions.Count > 0)
                            {
                                int counter = 1;
                                foreach (var item in (List<GODATA.Models.Ticket.FeedbackSuggestionComplaintModel>)ViewBag.FeedbackQuestions)
                                {

                                <tr>
                                    <td>
                                        <span>
                                            @Html.DisplayFor(model => item.ReasonName)
                                        </span>
                                    </td>
                                    <td id="@counter">
                                        <div>
                                            <input id="slider_@counter"/>
                                            <span id="spanRate_@counter"></span>
                                        </div>

                                    </td>
                                </tr>
                                    counter++;
                                }
                            }


                        </tbody>
                    </table>
                </div>
                <div class="feedback_content">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <span>
                                    @Html.LabelFor(model => model.SuggestionComplaint)</span>
                            </td>
                            <td>
                                @(Html.Kendo().MultiSelectFor(model => model.SuggestionComplaintList)
                        .Name("SuggestionComplaintList").Placeholder("-Select-")
                        .BindTo(new SelectList(ViewBag.Suggestions, "Value", "Text"))
                        .Events(e =>
                        {
                            e.Select("onSelectSuggestion").Close("onCloseSuggestion").Change("onChangeSuggestion");
                        })
                        )

                                @Html.ValidationMessageFor(model => model.SuggestionComplaint)
                            </td>

                            <td>&nbsp;</td>
                            <td>Other</td>
                            <td>
                                @if (Model.otherSuggestion != null && Model.otherSuggestion != "")
                                {

                                    <input id="txtOtherSuggestionData" type="text" name="Suggestion" onblur="onBlurTextBox(id);" value="@Model.otherSuggestion" />
                                }
                                else
                                {

                                    <input id="txtOtherSuggestionData" type="text" name="Suggestion" onblur="onBlurTextBox(id);" disabled />
                                }

                            </td>
                        </tr>
                        <tr>
                            <td colspan="5">&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                <span>
                                    @Html.LabelFor(model => model.ComplaintList)</span>
                            </td>
                            <td>
                                @(Html.Kendo().MultiSelectFor(model => model.ComplaintList)
                        .Name("ComplaintList").Placeholder("-Select-")
                        .BindTo(new SelectList(ViewBag.Complaint, "Value", "Text"))
                        .Events(e =>
                        {
                            e.Select("onSelectComplaint").Close("onCloseComplaint").Change("onChangeComplaint");
                        })
                        )

                                @Html.ValidationMessageFor(model => model.ComplaintList)
                            </td>

                            <td>&nbsp;</td>
                            <td>Other</td>
                            <td>
                                @if (Model.otherComplaint != null && Model.otherComplaint != "")
                                {

                                    <input id="txtOtherComplaintData" type="text" name="Complaint" onblur="onBlurTextBox(id);" value="@Model.otherComplaint"  />
                                }
                                else
                                {

                                    <input id="txtOtherComplaintData" type="text" name="Complaint" onblur="onBlurTextBox(id);" disabled />
                                }
                            </td>
                        </tr>
                        <tr>
                            <td colspan="5">&nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                <span>
                                    @Html.LabelFor(model => model.CallStatus)</span>
                            </td>
                            <td>

                                @Html.DropDownListFor(model => model.CallStatus, (IEnumerable<SelectListItem>)ViewBag.CallStatus, "-Select-", new { @id = "ddCallStatus", @onchange = "onChangeDD(id)" })
                                @*@Html.DropDownList("CallStatus", new SelectList(ViewBag.CallStatus, "Value", "Text", Model.CallStatus), new { @id = "ddCallStatus", @onchange = "onChangeDD(id)" })*@
                                @*@Html.DropDownList("CallStatus", new SelectList(,(IEnumerable<SelectListItem>)ViewBag.CallStatus, "ModuleID", "Ordre", Model.CallStatus)
)*@
                                @Html.ValidationMessageFor(model => model.CallStatus)
                            </td>
                            <td>&nbsp;</td>
                            <td>Other</td>
                            <td>
                                @if (Model.otherCallStatus != null && Model.otherCallStatus != "")
                                {

                                    <input id="txtOtherCallStatusData" type="text" name="callStatus" onblur="onBlurTextBox(id);" value="@Model.otherCallStatus" />
                                }
                                else
                                {

                                    <input id="txtOtherCallStatusData" type="text" name="callStatus" onblur="onBlurTextBox(id);" disabled />
                                }
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- containt -->
            </div>

            <div class="Create_Wrp" style="background: #f5f5f5; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; margin: 5px 0 10px 0; width: 100%; text-indent: 20px; position: relative; bottom: -16px;">
                <input type="submit" value="Update" class="button_blue" onclick="addFeedbackDetails('#divUpdateFeedback');" style="width: auto; margin: 3px 0; padding-top: 0px; padding-bottom: 0px" />
                <input type="submit" value="Cancel" class="button_blue" onclick="closeWindow('#divUpdateFeedback');" style="background: #ee2e22 !important; width: auto; margin: 3px 0; padding-top: 0px; padding-bottom: 0px" />
                @*<input type="submit" value="Edit" class="button_blue" onclick="" style="width: auto; margin: 3px 0;" />*@
            </div>
        </div>
    }
</div>
<script>
    $("#ddCallStatus").val('@ViewBag.CallStatusValue');
    $(document).ready(function () {

        /* Dynamically add slider on each row */
        var rowCount = document.getElementById("tableFeedback").getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;
        for (var count = 1; count <= rowCount; count++) {

            addSlider("#slider_" + count, "#spanRate_" + count);
        }

        @*$("#spanRate_1").text('@ViewBag.EaseOfGettingCall');
        $("#slider_1").data("kendoSlider").value('@ViewBag.EaseOfGettingCall');

        $("#spanRate_2").text('@ViewBag.ResponseOfCallCenter');
        $("#slider_2").data("kendoSlider").value('@ViewBag.ResponseOfCallCenter');

        $("#spanRate_3").text('@ViewBag.TimelyUpdationByDealer');
        $("#slider_3").data("kendoSlider").value('@ViewBag.TimelyUpdationByDealer');

        $("#spanRate_4").text('@ViewBag.TotalRepairTime');
        $("#slider_4").data("kendoSlider").value('@ViewBag.TotalRepairTime');

        $("#spanRate_5").text('@ViewBag.EosCharges');
        $("#slider_5").data("kendoSlider").value('@ViewBag.EosCharges');*@

        $("#spanRate_1").text('@ViewBag.OverAllExperience');
        $("#slider_1").data("kendoSlider").value('@ViewBag.OverAllExperience');


        // var selected = $('#SuggestionComplaintList').kendoMultiSelect().data("kendoMultiSelect").value();
        // var res = $.merge($.merge([], selected), a);

        // $('#SuggestionComplaintList').kendoMultiSelect().data("kendoMultiSelect").value(res);


    });

    var arrSuggestion = [@Html.Raw("'" + string.Join("', '", (string[])ViewBag.SuggestionArray) + "'")]

    var multiselectSuggestion = $('#SuggestionComplaintList').data("kendoMultiSelect");
    var selectedSuggestion = multiselectSuggestion.value();
    var multiSuggestionValue = $.merge($.merge([], selectedSuggestion), arrSuggestion);
    multiselectSuggestion.value(multiSuggestionValue);




    var arrComplaint = [@Html.Raw("'" + string.Join("', '", (string[])ViewBag.ComplaintArray) + "'")]
    console.log(arrComplaint[0]);
    if (arrComplaint[0] != " ") {
        var multiselectComplaint = $('#ComplaintList').data("kendoMultiSelect");
        var selectedComplaint = multiselectComplaint.value();
        var multiComplaintValue = $.merge($.merge([], selectedComplaint), arrComplaint);
        multiselectComplaint.value(multiComplaintValue);
    }
</script>

<style type="text/css">
    input, select, textarea, button {
        color: #222;
        overflow: auto;
        outline: none;
        resize: none;
        border: 1px solid #bebdbd;
        /*text-indent: 7px;*/
        border-radius: 4px;
    }

    #FeedbackContainer {
        margin: 20px 0;
        width: 794px;
        width: 100%;
    }

    .Feedback_wrapper {
        /*margin-bottom: 45px;*/
    }

    .feedback_content {
        background: #f7f7f7;
        border-radius: 4px;
        border: 1px solid #e9e9e9;
        box-shadow: 0px 3px 0px 0 #d9d9d9;
        padding: 22px 30px;
        margin: 15px 23px;
    }

        .feedback_content select {
            width: 171px;
            height: 34px;
        }

    .red {
        color: red;
    }

    .feedback_rating {
        text-align: left;
        margin: 20px 24px;
    }

    div.balSlider {
        width: 240px;
    }

        div.balSlider .k-slider-selection {
            display: none;
        }

    .k-button-decrease, .k-button-increase {
        display: none !important;
    }

    /*#divFilledFeedbackDetails #spanRate_1, #divFilledFeedbackDetails #spanRate_2, #divFilledFeedbackDetails #spanRate_3, #divFilledFeedbackDetails #spanRate_4, #divFilledFeedbackDetails #spanRate_5, #divFilledFeedbackDetails #spanRate_6 {
        vertical-align: top;
        line-height: 24px;
    }*/

    .k-slider-selection {
        background-color: #ee2e22;
    }

    .feedback_content label {
        /*font-size: 13px;*/
    }

    .k-slider-horizontal .k-slider-buttons .k-slider-track {
        /*width:200px !important;*/
    }

    .requiredField {
        border-color: red;
        border-style: groove;
        border-width: 1px;
    }

    .k-slider-horizontal .k-tick {
        background-image: none;
    }


    .k-window-titlebar {
        border-radius: 0px !important;
    }

    .k-i-close {
        background-color: #fff;
        border-radius: 2px;
        width: inherit !important;
    }

    .k-window-titlebar.k-header {
        background: url("/Content/css/images/infowindow_head-bg.png") repeat-x left top;
        height: 18px !important;
        background-color: transparent !important;
        line-height: 16px;
    }
    /*.k-multiselect ul li.k-icon {
    
    }*/
</style>