{{#data}}
<div class="customer-review" data-caturl="{{caturl}}" data-skuurl="{{skuurl}}" id="reviewsection" data-reviewlength="{{reviewlength}}">
    <input type="hidden" id="Reviewskuid" value="{{skuId}}" />
    <table class="table table-striped table-bordered">
        <tbody>
            {{#review}}
            <tr>
                <td>
                    <strong>{{CustomerName}}</strong><span data-action-renderStar data-val=" {{Rating}}"> <i class=""></i></span>
                </td>
                <td class="text-right">{{CreatedOn}}</td>
            </tr>
            <tr>
                <td colspan="2">
                    <p>{{Description}}</p>
                </td>
            </tr>
            {{/review}}
            {{^review}}
            <tr>
                <td colspan="2">
                    <div class="col-md-12" style="padding:1%">
                        <center><span class="text text-danger">No Reviews</span></center>

                    </div>
                </td>
            </tr>
            {{/review}}
        </tbody>
    </table>
</div>
{{#isAllowToAddReview}}
<div id="ReviewForm">
</div>
{{/isAllowToAddReview}}

{{^isAllowToAddReview}}

{{#noOrderPlaced}}
<center><span class="text text-danger">please place the order first </span></center>
{{/noOrderPlaced}}

{{^noOrderPlaced}}
<center><span class="text text-danger">To write a review kindly <a href="/login?ReturnUrl=/product/{{caturl}}/{{skuurl}}">Login</a></span></center>
{{/noOrderPlaced}}


{{/isAllowToAddReview}}
{{/data}}

<script type="text/javascript">
    $("#countreview").html("(" + $("#reviewsection").attr("data-reviewlength") + ")");
   
    $.ajax({
    
        url: "/Product/ReviewForm",
        contentType: "application/json; charset=utf-8",
        //data: JSON.stringify({ skuId: $("#Reviewskuid").val() }),
        data: { skuId: $("#Reviewskuid").val() },
        dataType: "html",
        success: function (result, status, xhr) {

            $("#ReviewForm").html(result);
            BindSubmitEventReviewForm();

        },
        error: function (xhr, status, error) {
            //$("#ReviewForm").html("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
        }
    });

    function BindSubmitEventReviewForm() {
        $("#username").on('change', function () {
            if ($("#username").val() == "") {
                $("#username_error").html("Please enter name");
            }
            else if (!(/^[a-zA-Z]+$/.test($("#username").val()))) { $("#username_error").html("Please enter valid name"); }
            else { $("#username_error").html(""); }
        });
        $("#des_review").on('change', function () {
            if ($("#des_review").val() == "") {
                $("#descriptionerror").html("this field is required");
            }
            else { $("#descriptionerror").html(""); }
        });
  
       
        $("#frm_custReview").submit(function (e) {
            debugger
            e.preventDefault();
            var form_data = $("#frm_custReview").serializeArray();
            var error_title = true;
            var error_description = true;
            for (var input in form_data) {
                if (form_data[input].name === 'Title') {
                    if (form_data[input].value == "") {
                        error_title = false; $("#username_error").html("Please enter name");
                    }
                    else if (!(/^[a-zA-Z]+$/.test(form_data[input].value))) { error_title = false;$("#username_error").html("Please enter valid name"); }
                    else { $("#username_error").html("");}
                }
                if (form_data[input].name === 'Description') {
                    if (form_data[input].value == "") {
                        error_description = false; $("#descriptionerror").html("Please enter your review");
                    }
                    else { $("#descriptionerror").html(""); }
                }
              
            }
            if (error_title==false || error_description==false) {
                event.preventDefault();
                return false;
             }
            else {
                
                $("#descriptionerror").html("");
                 $("#username_error").html("");
                $.post($(this).attr("action"), $(this).serializeArray(), function (result) {
                    if (result == "Review Updated" || result == "Review Posted") {
                        LoadProductReview($("#reviewsection").attr("data-skuurl"));
                        ShowMessage("Your review is submitted successfully", 1);
                    }
                    else {
                        ShowMessage("Please check your input details!", 0);

                    }
                });
            }



           
              
           
           
        })
    }

</script>