@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 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)
                        @Html.Hidden("isMoreThan24Hrs", (double)@ViewBag.IsMoreThan24Hrs)

                        @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>
                                    <span id="spanRateValue_@counter"></span>
                                </td>
                            </tr>
                                counter++;
                            }
                        }
                        
                    </tbody>
                </table>
            </div>
            <div class="feedback_content">
                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="non_editable_feedback">
                    <tr>
                        <td class="bdright radiusleft">
                            <span>
                                @Html.LabelFor(model => model.SuggestionComplaint)
                            </span>
                        </td>
                        <td class="radiusright">
                            @Html.DisplayFor(model => model.SuggestionComplaint)
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="bdright radiusleft">
                            <span>
                                @Html.LabelFor(model => model.Complaint)
                            </span>
                        </td>
                        <td class="radiusright">
                            @Html.DisplayFor(model => model.Complaint)
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="bdright radiusleft">
                            <span>
                                @Html.LabelFor(model => model.CallStatus)
                            </span>
                        </td>
                        <td class="radiusright">
                            @Html.DisplayFor(model => model.CallStatus)
                        </td>

                    </tr>
                </table>
            </div>

            @if (ViewBag.FeedbackHistory.Count != 0 && ViewBag.FeedbackHistory != null)
            {
                <div class="feedback_rating DInv_Tbl_Wrapper">
                    @(Html.Kendo().Grid<GODATA.Models.Ticket.FeedbackHistoryList>((List<GODATA.Models.Ticket.FeedbackHistoryList>)ViewBag.FeedbackHistory)
                .Name("FeedbackHistory")
                .Columns(columns =>
                {
                    columns.Bound(column => column.TicketId).Title("Ticket Id").Hidden();
                    columns.Bound(column => column.CreatedBy).Title("Created By");
                    columns.Bound(column => column.CreationTime).Title("Creation Time").Filterable(false);
                    columns.Bound(column => column.CallStatus).Title("Call Status History");
                    columns.Bound(column => column.Remarks).Title("Remarks").Hidden();

                })
                .Pageable()
                .Scrollable()
                .Filterable()
                .Resizable(resize => resize.Columns(true))
               .Events(events => events
                   .ColumnResize("onColumnResize"))
                .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true).PageSize(5)
                .ServerOperation(false)
            )
)
                </div>
            }

            else
            {
            }

            <div class="Create_Wrp" style="background: #f5f5f5; border: 1px solid #dedede; margin-top: 5px; width: 100%; text-indent: 20px; position: relative; bottom: 0px; margin: auto; padding-top: 0px;">
                <input type="submit" value="Edit" class="button_blue" onclick="editFeedback();" style="width: auto; margin: 3px 0;" />
            </div>

        </div>

    }

    else
    {

        <div id="divFeedbackContainer" class="Feedback_wrapper">
            <img src="../../Content/css/images/feedback-label.png" alt="Feedback" title="Feedback" border="0" />
            <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>
                            <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>
                            <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.ValidationMessageFor(model => model.CallStatus)
                        </td>
                        <td>&nbsp;</td>
                        <td>Other</td>
                        <td>
                            <input id="txtOtherCallStatusData" type="text" name="callStatus" onblur="onBlurTextBox(id);" disabled /></td>
                    </tr>
                </table>
            </div>

            <div class="Create_Wrp" style="background: #f5f5f5; border: 1px solid #dedede; margin-top: 5px; width: 100%; text-indent: 20px; position: relative; bottom: 0px; margin: auto; padding-top: 0px;">
                <input type="submit" value="Submit" class="button_blue" onclick="addFeedbackDetails();" style="width: auto; margin: 3px 0;" />
            </div>
        </div>
        
    }
    @if (Convert.ToDouble(ViewBag.IsMoreThan24Hrs) >= Convert.ToDouble(24))
    {
        if (Model.ReasonMoreThan24Hrs != "" && Model.ReasonMoreThan24Hrs != null)
        {
            
        <div class="Clouser_wrapper">
            <div class="Feedback_wrapper" style="margin-top: 10px;">
                <img src="../../Content/css/images/24hrs-label.png" alt="24hrs" title="24hrs" border="0" />
                <div class="feedback_content">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="non_editable_feedback">
                        <tr>
                            <td class="bdright radiusleft">
                                <span>
                                    @Html.LabelFor(model => model.ReasonMoreThan24Hrs)</span>
                            </td>
                            <td class="radiusright">
                                @Html.DisplayFor(model => model.ReasonMoreThan24Hrs)
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
            
        }

        else
        {
            
        <div id="div24HrsReason" class="Clouser_wrapper">
            <div class="Feedback_wrapper">
                <img src="../../Content/css/images/24hrs-label.png" alt="24hrs" title="24hrs" border="0" />
                <div class="feedback_content">

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

                        <tr>
                            <td>
                                <div>
                                    <div class="fleft labelwidth">@Html.LabelFor(model => model.ReasonMoreThan24Hrs)</div>
                                    <div class="clear"></div>
                                </div>
                            </td>
                            <td>
                                @Html.DropDownListFor(model => model.ReasonMoreThan24Hrs, (IEnumerable<SelectListItem>)ViewBag.Reason24Hrs, "-Select-", new { @id = "ddReasonMoreThan24Hrs", @onchange = "onChangeDD(id)" })
                                @Html.ValidationMessageFor(model => model.ReasonMoreThan24Hrs)
                            </td>
                            <td>&nbsp;</td>
                            <td>Other</td>
                            <td>
                                <input id="txtOtherReason" type="text" name="Reason" onblur="onBlurTextBox(id);" disabled /></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        
        <div class="Create_Wrp" style="background: #f5f5f5; border: 1px solid #dedede; margin-top: 5px; width: 100%; text-indent: 20px; position: relative; bottom: 0px; margin: auto; padding-top: 0px;">
            <input type="submit" value="Submit" class="button_blue" onclick="addReasonDetails();" style="width: auto; margin: 3px 0;" />
        </div>
        }
    }
</div>
@Html.HiddenFor(model => model.SuggestionComplaint, new { @id = "hiddenSuggestion" })
@Html.HiddenFor(model => model.Complaint, new { @id = "hiddenComplaint" })

<script>

    $(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);
        }
        var onSliderSlide = function (slideEvt) {
            var slider = $("#slider").data("kendoSlider");
            slider.trigger("slide", { value: slider.value() });
           console.log("slider slid to " + slideEvt.value);
        };
        setTimeout(function () {

            $("#slider").data("kendoSlider").value(0);

        }, 1000);
        
        $("#slider").kendoSlider({
            increaseButtonTitle: "Right",
            decreaseButtonTitle: "Left",
            min: 0,
            max: 10,
            slide: onSliderSlide
        });
        $("#ddCallStatus").val('');
        $("#ddReasonMoreThan24Hrs").val('');
        /* show value of kendo sider in case of feedback already filled in each row */
        if (document.getElementById('divFilledFeedbackDetails')) {
            @*$("#spanRateValue_1").text('@ViewBag.EaseOfGettingCall');
            $("#spanRateValue_2").text('@ViewBag.ResponseOfCallCenter');
            $("#spanRateValue_3").text('@ViewBag.TimelyUpdationByDealer');
            $("#spanRateValue_4").text('@ViewBag.TotalRepairTime');
            $("#spanRateValue_5").text('@ViewBag.EosCharges');*@
            $("#spanRateValue_1").text('@ViewBag.OverAllExperience');
            for (var count = 1; count <= rowCount; count++) {
                
                addSlider("#slider_" + count, "#spanRate_" + count);
                //var slider = $("#slider_" + count).kendoSlider().data("kendoSlider");
            }
        }
    });

</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;
    }
</style>