@model GODATA.Models.Ticket.FeedBackModel

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




<div id="FeedbackContainer">
  @*//added for read only mode*@
    @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" />
             @*to bind not satisfied questions dropdown *@
            <div class="feedback_content">
                
           @*//added for read only mode*@
           @if (ViewBag.FeedbackHistory.Count != 0 && ViewBag.FeedbackHistory != null)
           {
                <div class="feedback_rating DInv_Tbl_Wrapper"  width="20%" >

                
                        @if (ViewBag.FeedbackQuestions.Count > 0)
                        {
                            foreach (var item in (List<GODATA.Models.Ticket.FeedbackSuggestionComplaintModel>)ViewBag.FeedbackQuestions)
                            {
                                        @Html.DisplayFor(model => item.ReasonName, new { style = "width:200px;height:70px" })
                               
                            }

                            foreach (var item in (List<GODATA.Models.Ticket.FeedbackHistoryList>)ViewBag.FeedbackHistory)
                            {
                                if (item.IsSatisfied != "True")
                                {
                                   <div class="feedback_rating DInv_Tbl_Wrapper">
                                <span>Yes @Html.RadioButtonFor(model => model.FeedbackCustomerSatisfaction, "Yes", new { style = "width:50px;height:20px", @disabled = "disabled" })  </span> 
                                <span> No @Html.RadioButtonFor(model => model.FeedbackCustomerSatisfaction, "No", new { style = "width:50px;height:20px", @checked = "checked" })  </span>
                              
                              </div>
                             <div class="ddlSelectedOptionValue">
                               <label for="SelectedOption" style="padding-right:40px;">Selected Option : </label>
                                @Html.Label((string)ViewBag.SelectedOption + '?')
                             </div>
                            
                            
                            
                                foreach (var item2 in (List<GODATA.Models.Ticket.FeedbackHistoryList>)ViewBag.FeedbackHistory)
                        {
                                  <div id="ddlSelectedReasonValue"  class="row display-flex" >
                                  <label for="lblReason" style="padding-right:90px;">Reason :</label> 
                                  @Html.TextAreaFor(model =>  item2.SelectedReason, new { @id = "textBoxDescription",  @disabled ="disabled", style = "width:auto;min-height : 65px" })
                                   </div>
                              
                        }     
                        
                                }

                                else
                                {
                                 <div class="feedback_content" id="feedback">for hiding div</div>
                                    <div class="feedback_rating DInv_Tbl_Wrapper">
                                  <span>  Yes  @Html.RadioButtonFor(model => model.FeedbackCustomerSatisfaction, "Yes", new { style = "width:50px;height:30px", @checked = "checked" }) </span>    
                                  <span> No   @Html.RadioButtonFor(model => model.FeedbackCustomerSatisfaction, "No", new { style = "width:50px;height:30px", @disabled = "disabled" }) </span>
                               </div>
                                         
                        }

                            }

                        }       

                </div>
               
           }

            </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="customerFeedback_rating">
                <table id="tableCustomerFeedback" width="70%" border="0" cellspacing="20" cellpadding="0">
                    <tbody>
                        @Html.Hidden("ticketId", (object)@ViewBag.TicketId)
                        @Html.Hidden("creationTime", (string)@ViewBag.CreationTime)

                        @if (ViewBag.FeedbackQuestions.Count > 0)
                        {
                            foreach (var item in (List<GODATA.Models.Ticket.FeedbackSuggestionComplaintModel>)ViewBag.FeedbackQuestions)
                            {
                            <tr>
                                <td>
                                    <span>
                                        @Html.DisplayFor(model => item.ReasonName)
                                    </span>
                                </td>

                                <td>Yes  
                                   @Html.RadioButtonFor(model => model.FeedbackCustomerSatisfaction, "Yes", new { @checked = "checked", style = "width:50px;height:30px" })
                                    No  
                                   @Html.RadioButtonFor(model => model.FeedbackCustomerSatisfaction, "No", new { style = "width:50px;height:30px" })
                                </td>
                            </tr>
                             
                            }
                        }
                    </tbody>
                </table>
            </div>

            @*to bind not satisfied questions dropdown *@
            <div class="feedback_content" id="feedback">
                <table width="80%" border="0" cellspacing="0" cellpadding="0">

                    @Html.LabelFor(model => model.CustomerNotSatisfiedOptions, new { style = "width:160px;height:80px" })
                    @Html.DropDownList("CustomerNotSatisfiedQuestionsList", new SelectList(ViewBag.NotSatisfiedQuestions, "Value", "Text"), "--select--", new { @id = "ddlCustomerNotSatisfiedQuestionsList", style = "width:150px;height:50px" })
                    @Html.ValidationMessageFor(model => model.CustomerNotSatisfiedOptions)
                </table>
                <table width="80%" border="0" cellspacing="0" cellpadding="0">
                    <td>@Html.LabelFor(model => model.CustomerNotSatisfiedComment, new { style = "width:160px;height:70px" })  </td>
                    <td colspan="1" style="padding-right: 30px;">
                        @Html.TextAreaFor(model => model.CustomerNotSatisfiedComment, new { @id = "textBoxReason", style = "width:auto;min-height :75px" })
                        @Html.ValidationMessageFor(model => model.CustomerNotSatisfiedComment)

                    </td>
                </table>


            </div>



            <div>
                <input type="submit" value="Submit" class="button_blue" onclick="addCustomerFeedbackDetails();" style="width: auto; margin: 20px;" />
            </div>
        </div>
        
    }

</div>
@Html.HiddenFor(model => model.SuggestionComplaint, new { @id = "hiddenSuggestion" })
@Html.HiddenFor(model => model.Complaint, new { @id = "hiddenComplaint" })

<script>

    $(document).ready(function () {
        var div = document.getElementById('feedback');

        //$("#ddlCustomerNotSatisfiedQuestionsList").prop("disabled", true)
        //$("#textBoxReason").prop("disabled", true)
        // div.style.display = 'none';
        
        if ($("input[name='FeedbackCustomerSatisfaction']:checked").val() == 'Yes') {
            div.style.display = 'none';
        }

        $('input[type=radio][name=FeedbackCustomerSatisfaction]').on('change', function () {
            if ($("input[name='FeedbackCustomerSatisfaction']:checked").val() == 'Yes') {
                div.style.display = 'none';
                //$("#ddlCustomerNotSatisfiedQuestionsList").prop("disabled", true)
                //$("#textBoxReason").prop("disabled", true)
                $('#ddlCustomerNotSatisfiedQuestionsList').val(0);
                $("#textBoxReason").val("");
            }
            else {
                div.style.display = 'block';

                //$("#ddlCustomerNotSatisfiedQuestionsList").prop("disabled", false)
                //$("#textBoxReason").prop("disabled", false)



            }
        });


        $("#ddCallStatus").val('');
        $("#ddReasonMoreThan24Hrs").val('');

    });

</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;
       padding-right:10px;
        margin: 20px 14px;

        
    }

    .ddlSelectedOptionValue {

        padding-right:40px;
         margin: 20px 14px;
    }
    .ddlSelectedReasonValue {
          padding-right:30px;
          vertical-align: top;

    }
    .display-flex {
        display: flex !important;
       border-radius: 4px;
       padding-left:15px;

    }
    div.balSlider {
        width: 240px;
    }

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

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

 

    .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>