<div id="cireview-graph">
  <div id="cireviewgraph" class="cireviewgraph{% if not reviewgraph %} hide{% endif %}">{{ cireviewgraph }}</div>
  {% if cireview_guest %}
    {% if not cireview_purchasefirst %}
      <button type="button" class="btn btn-primary button cireview-write data-modal" data-find_modal="#cireview-modal" data-target="#cimodal-cireview-modal">{{ button_write }}</button>
    {% else %}
      <div class="cireview-infomsg">{{ text_purchasefirst }}</div>
    {% endif %}
  {% else %}
    <div class="cireview-infomsg">{{ text_login }}</div>
  {% endif %}
  {#// 23 jan, 2024 reward poitns starts#}
  {% if reward_guest_alertmsg %}<div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ reward_guest_alertmsg }}</div>{% endif %}
  {#// 23 jan, 2024 reward poitns ends#}
  {#// 23 jan, 2024 transaction amount starts#}
  {% if transaction_guest_alertmsg %}<div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ transaction_guest_alertmsg }}</div>{% endif %}
  {#// 23 jan, 2024 transaction amount ends#}
</div>

<div id="cireview-aggerate">{{ aggeratereview }}</div>

<style type="text/css">
.ciname_fl {
  {% if reviewauthorfl_bgcolor %}
  background: {{ reviewauthorfl_bgcolor }};
  {% endif %}
  {% if reviewauthorfl_color %}
  color: {{ reviewauthorfl_color }};
  {% endif %}
  border-radius: {{ reviewauthorradius }}%;
  -webkit-border-radius: {{ reviewauthorradius }}%;
}
</style>

{% if reviewimggallery %}
  <div id="cireview-customerimages">
    <h3>{{ text_customer_image }}</h3>
    <ul class="list list-unstyled list-inline">
      {% for customerimage in customerimages %}
        <li class="cigallery cisingle-review" data-galleryid="{{ customerimage.galleryid }}" data-action="s"><img src="{{ customerimage.thumb }}"></li>
      {% endfor %}
    </ul>
    <a class="cigallery cicustomer-images cisee-all" data-galleryid="0" data-action="g">{{ text_customer_image_all }}</a>
  </div>
  <div id="cimodal-cireview-customerimages-{{ product_id }}" style="display: none;">
    <div id="cireview-customerimages-{{ product_id }}" class="modal fade {{ journal_class }}" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-label="{{ button_cancel }}"><span aria-hidden="true">&times;</span></button>
            <div class="cigallery_modal customerimages">
              <ul class="list list-unstyled list-inline">
              {% for galleryimage in galleryimages %}
                <li class="cigallery cisingle-review-gallery" data-action="s" data-galleryid="{{ galleryimage.galleryid }}"><label><img src="{{ galleryimage.thumb }}" /></label></li>
                {% endfor %}
              </ul>
            </div>
            <div class="cigallery_modal customerimage">
              <h4 class="cigallery-switch"><i class="fa fa-th-large"></i> {{ text_view_image_gallery }}</h4>
              <div class="row">
                <div class="col-sm-7 xl-70 xs-70 sm-100">
                  <div class="cigallery_btns">
                    <div class="nextButton" style="cursor: pointer;"><i class="fa fa-arrow-right"></i></div>
                    <div class="prevButton" style="cursor: pointer;"><i class="fa fa-arrow-left"></i></div>
                  </div>
                  <div class="cigalleryimg">
                    <img class="img-responsive cigallery_img" src="">
                  </div>
                </div>
                <div class="col-sm-5 xl-30 xs-30 sm-100">
                  <!-- max height equal to left side image height -->
                  <div style="max-height: 500px; overflow-x: hidden;">
                    <h4>{{ product_name }}</h4>
                    <div class="cigallery_review_content"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </div>
{% endif %}
{% if reviewtopposneg %}<div id="cireview-posnegreviews">{{ reviewposneg }}</div>{% endif %}
{% if reviewimp %}<div id="cireview-top">{{ topreviews }}</div><br/>{% endif %}
<!-- 11-01-2018 -->
{% if reviewfilters %}
  <div class="ci_multiplex row">
    {% if reviewfilterstype=='btns' %}
      {% if reviewfilterssearch %}
        <div id="cireviewsearch" class="form-group input-group input-group-sm" style="width: 50%;">
          <input type="text" name="cireviewsearch" value="" placeholder="{{ text_cisearch }}" class="form-control" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default btn-sm"><i data-class="fa fa-search" class="fa fa-search"></i></button>
          </span>
        </div>
      {% endif %}
      {% if sorts %}
        <div id="cireview_filters" class="ci-rfilters">
          {% for key,sort in sorts %}
            <button data-loading-text="{{ text_loading }}" class="btn btn-primary btn-sm button cireview_filter {{ sort.class }} {% if sort.selected %}active{% endif %}" data-value="{{ sort.value }}">{% if sort.icon %}<i data-class="fa {{ sort.icon }}" class="fa {{ sort.icon }}" aria-hidden="true"></i>{% endif %}<span>{{ sort.text }}</span></button>
          {% endfor %}
        </div>
      {% endif %}
      {% if reviewfiltersimage %}
        <div id="cireview_dofilters" class="cireview_dofilters ci-rfilters">
          <button data-loading-text="{{ text_loading }}" class="btn btn-primary btn-sm button cireview_dofilter pink" data-value="1"><span>{{ text_withimg }}</span></button>
          <button data-loading-text="{{ text_loading }}" class="btn btn-primary btn-sm button cireview_dofilter grey" data-value="0"><span>{{ text_withoutimg }}</span></button>
        </div>
      {% endif %}
      {% if reviewfilterssearch or reviewfiltersimage or  sorts %}
        <div class="ci-rfilters">
          <button class="btn btn-primary btn-sm button ci-clearfilters clearfilters red"><i data-class="fa fa-refresh" class="fa fa-refresh" aria-hidden="true"></i> {{ text_clear_filters }}</button>
        </div>
      {% endif %}
      <br/>
    {% endif %}
    {% if reviewfilterstype == 'dropdown' %}
      {% if reviewfilterssearch %}
        <div class="col-md-3 col-xs-12 xl-25 xs-100 cireviewsearch">
          <div class="form-group">
            <label class="control-label"><b>{{ text_cisearch }}</b></label>
            <div id="cireviewsearch" class="form-group input-group input-group-sm">
              <input type="text" name="cireviewsearch" value="" placeholder="{{ text_cisearch }}" class="form-control" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default btn-sm"><i data-class="fa fa-search" class="fa fa-search"></i></button>
              </span>
            </div>
          </div>
        </div>
      {% endif %}
      {% if sorts %}
        <div class="col-md-3 col-xs-12 xl-25 xs-100 sort">
          <div class="form-group">
            <label class="control-label" for="input-cireview_sortfilter"><b>{{ text_sort }}</b></label>
            <select id="input-cireview_sortfilter" class="form-control">
              {% for sort in sorts %}
                <option value="{{ sort.value }}" {% if sort.selected %}selected="selected"{% endif %}>{{ sort.text }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      {% endif %}
      {% if reviewfiltersimage %}
        <div class="col-md-3 col-xs-12 xl-25 xs-100 imagefilter">
          <div class="form-group">
            <label class="control-label" for="input-cireview_imagefilter"><b>{{ text_imagefilter }}</b></label>
            <select id="input-cireview_imagefilter" class="form-control">
              {% for imagefilter in imagefilters %}
                <option value="{{ imagefilter.value }}" {% if imagefilter.selected %}selected="selected"{% endif %}>{{ imagefilter.text }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      {% endif %}
      {% if reviewfilterssearch or reviewfiltersimage or sorts %}
        <div class="col-md-3 col-xs-12 xl-25 xs-100 ci-rfilters">
          <div class="form-group">
            <label class="control-label">&nbsp;</label><br/>
            <button class="btn btn-primary btn-sm button ci-clearfilters clearfilters red"><i data-class="fa fa-refresh" class="fa fa-refresh" aria-hidden="true"></i> {{ text_clear_filters }}</button>
          </div>
        </div>
      {% endif %}
    {% endif %}
  </div>
{% endif %}
<!-- 11-01-2018 -->
{% if customcss %}<style type="text/css">{{ customcss }}</style>{% endif %}
{% if reviewpolicypage and reviewpolicy %}
  <div id="cimodal-cireview-policy-modal" style="display: none;" class="{{ journal_class }}">
    <div id="cireview-policy-modal" class="modal fade {{ journal_class }}" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">{{ reviewpolicypage.title }}</h4>
          </div>
          <div class="modal-body">{{ reviewpolicypage.message }}</div>
        </div>
      </div>
    </div>
  </div>
{% endif %}
<form class="form-horizontal {{ journal_class }}" id="form-cireview">
  <div id="cireview"></div>
  {% if reviewviewsource %}
    {#show all review in view source only#}
    <div class="hide cireviewpro-allreviews" id="ciallreviews" style="display: none;">{{ review }}</div>
  {% endif %}
  <input type="hidden" name="cirating_filter" value="0">
  <input type="hidden" name="cirating_filters" value="">
  <input type="hidden" name="cirating_dofilters" value="">

  <div id="cimodal-cireview-modal" style="display: none;">
    <div id="cireview-modal" class="modal fade {{ journal_class }}" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"><span class="cireview-form-title">{{ text_write }} {% if reviewpolicypage and reviewpolicy %}&nbsp;&nbsp;<span class="cireview-policy data-modal" data-find_modal="#cireview-policy-modal" data-target="#cimodal-cireview-policy-modal"><i class="fa fa-info-circle"></i></span>{% endif %} </span><span class="cireview-successmsg-title" style="display: none;"></span></h4>
          </div>
          <div class="modal-body">
            <div class="cireview-form">
              {% if cireview_guest %}
                {% if not cireview_purchasefirst %}
                  <div class="form-horizontal">
                    {% if author %}
                      <div class="form-group {% if author_require %}required{% endif %}">
                        <label class="control-label col-sm-3 xl-20 xs-100" for="input-ciname">{{ entry_name }}</label>
                        <div class="col-sm-9 xl-80 xs-100">
                          <input type="text" name="ciname" value="{{ customer_name }}" id="input-ciname" class="form-control" />
                        </div>
                      </div>
                    {% endif %}
                    {% if email %}
                      <div class="form-group required">
                        <label class="control-label col-sm-3 xl-20 xs-100" for="input-ciemail">{{ entry_email }}</label>
                        <div class="col-sm-9 xl-80 xs-100">
                          <input type="text" name="ciemail" value="{{ customer_email }}" id="input-ciemail" class="form-control" />
                        </div>
                      </div>
                    {% endif %}
                    {% if title %}
                      <div class="form-group {% if title_require %}required{% endif %}">
                        <label class="control-label col-sm-3 xl-20 xs-100" for="input-cititle">{{ entry_reviewtitle }}</label>
                        <div class="col-sm-9 xl-80 xs-100">
                          <input type="text" name="cititle" value="" id="input-cititle" class="form-control" />
                        </div>
                      </div>
                    {% endif %}
                    {% if text %}
                      <div class="form-group {% if text_require %}required{% endif %}">
                        <label class="control-label col-sm-3 xl-20 xs-100" for="input-cireview">{{ entry_review }}</label>
                        <div class="col-sm-9 xl-80 xs-100">
                          <textarea name="cireview" rows="5" id="input-cireview" class="form-control"></textarea>
                          <div class="help-block">{{ text_note }}</div>
                        </div>
                      </div>
                    {% endif %}

                    {% if rating %}
                      {% if ratingtypes|length > 1 %}
                        <div class="">
                          {#<label class="control-label col-sm-3 xl-20 xs-100" for="input-cireview">{{ entry_rating }}</label>
                          <div class="col-sm-9 xl-80 xs-100">
                            <div class="form-group required">#}
                              {% for ratingtype in ratingtypes %}
                                <div class="form-group required ciratings clearfix" id="cirating-{{ ratingtype.ciratingtype_id }}">
                                  <label class="control-label col-sm-3 xl-20 xs-100">{{ ratingtype.name }}: </label>
                                  <div class="col-sm-9 xl-80 xs-100">
                                  <input type="number" name="cirating[{{ ratingtype.ciratingtype_id }}]" id="icirating-{{ ratingtype.ciratingtype_id }}" class="cirating-stars" value="" data-clearable="remove"/>
                                  {#
                                  {% for ($i=1; $i<=$ratingstars; $i++ %}
                                  <input type="radio" class="cirating" name="cirating[{{ ratingtype.ciratingtype_id }}]" value="{{ i }}" />
                                  &nbsp;
                                  {% endfor %} #}
                                  </div>
                                </div>
                              {% endfor %}
                            {#</div>
                          </div>#}
                        </div>
                      {% else %}
                        <div class="">
                          {% for ratingtype in ratingtypes %}
                            <div class="form-group required ciratings clearfix" id="cirating-{{ ratingtype.ciratingtype_id }}">
                              <label class="control-label col-sm-3 xl-20 xs-100" >{{ ratingtype.name }}: </label>
                              <div class="col-sm-9 xl-80 xs-100">
                                <input type="number" name="cirating[{{ ratingtype.ciratingtype_id }}]" id="icirating-{{ ratingtype.ciratingtype_id }}" class="cirating-stars" value="" data-clearable="remove"/>
                                {#
                                {% for ($i=1; $i<=$ratingstars; $i++ %}
                                <input type="radio" class="cirating" name="cirating[{{ ratingtype.ciratingtype_id }}]" value="{{ i }}" />
                                &nbsp;
                                {% endfor %} #}
                              </div>
                            </div>
                          {% endfor %}
                        </div>
                      {% endif %}
                    {% endif %}

                    {% if reviewimages %}
                      <div class="form-group ciattachupload">
                        <label class="control-label col-sm-3 xl-20 xs-100">{{ entry_attachimages }}</label>
                        <div class="col-sm-9 xl-80 xs-100">
                        <button type="button" id="button-ciattachupload" data-loading-text="{{ text_loading }}" class="btn btn-default button btn-block"><i class="fa fa-upload"></i> {{ button_upload }}</button>
                        <input type="hidden" name="cireview_image" value="{{ cireview_image }}" id="input-ciattachupload" />
                        </div>
                      </div>
                      <ul class="list list-inline ciattach_images" id="ciattach_images">
                        {% if attach_images %}
                          {% for attach_image in attach_images %}
                            <li id="ciattach_image-{{ attach_image.cireview_image_id }}">
                              <button data-id="{{ attach_image.cireview_image_id }}" type="button" class="attach_image_close close" data-dismiss="alert">&times;</button>
                              <a href="{{ attach_image.popup }}"> <img src="{{ attach_image.thumb }}" alt="{{ heading_title }}" /> </a>
                            </li>
                          {% endfor %}
                        {% endif %}
                      </ul>
                    {% endif %}
                    {# // 20-sep-2021: code starts #}
                    {% if location %}
                    <fieldset>
                      <legend>{{ entry_location }}</legend>
                      <div class="form-group {% if location_require %}required{% endif %}">
                        <label class="control-label col-sm-3 xl-20 xs-100" for="input-cicountry">{{ entry_country }}</label>
                        <div class="col-sm-9 xl-80 xs-100">
                          <select name="cicountry_id" id="input-cicountry" class="form-control">
                            <option value="">{{ text_select }}</option>
                            {% for country in countries %}
                              <option value="{{ country.country_id }}" {% if country.country_id == showlocationdefault_country_id %}selected="selected"{% endif %}>{{ country.name }}</option>
                            {% endfor %}
                          </select>
                        </div>
                      </div>
                      <div class="form-group {% if location_require %}required{% endif %}">
                        <label class="control-label col-sm-3 xl-20 xs-100" for="input-cizone">{{ entry_zone }}</label>
                        <div class="col-sm-9 xl-80 xs-100">
                          <select name="cizone_id" id="input-cizone" class="form-control">
                          </select>
                        </div>
                      </div>
                    </fieldset>
                    {% endif %}
                    {# // 20-sep-2021: code ends #}
                    <div id="cicaptcha">{{ captcha }}</div>
                    <div class="buttons text-right">
                      {% if text_reviewterm %}&nbsp;&nbsp;{{ text_reviewterm }} <input type="checkbox" name="reviewterm" value="1" />&nbsp;{% endif %}<button type="button" id="button-cireview" data-loading-text="{{ text_loading }}" class="btn btn-primary button">{{ button_continue }}</button>
                    </div>
                  </div>
                {% else %}
                  <div class="cireview-notmsg">{{ text_purchasefirst }}</div>
                {% endif %}
              {% else %}
                <div class="cireview-notmsg">{{ text_login }}</div>
              {% endif %}
            </div>
            <div class="cireview-successmsg" style="display: none;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

<div id="cimodal-cireview-abuse-{{ product_id }}" style="display: none;">
  <div id="cireview-abuse-{{ product_id }}" class="modal fade {{ journal_class }}" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="{{ button_cancel }}"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title"><i class="fa fa-ban"></i> {{ text_reviewreport }}</h4>
        </div>
        <div class="modal-body">
          <ul class="list list-unstyled ciabreason-list">
            {% for ciabreason in ciabreasons %}
              {# <li><label class="ciabreason"><input type="radio" data-details="{{ ciabreason.details }}" name="ciabreason" value="{{ ciabreason.ciabreason_id }}"> {{ ciabreason.name }}</label></li> #}
              {# // smash it starts #}
              {# add class="ciabreason" to li, so we can remove it via js when loading abuse reasons via ajax #}
              <li class="ciabreason"><label><input type="radio" data-details="{{ ciabreason.details }}" name="ciabreason" value="{{ ciabreason.ciabreason_id }}"> {{ ciabreason.name }}</label></li>
              {# // smash it ends #}
            {% endfor %}
            <li class="ciabreason"><label><input type="radio" data-details="1" name="ciabreason" value="OTHER"> {{ text_other }}</label></li>
            <li class="other_reason hide"><textarea name="ciabreason_other" class="form-control" rows="7" placeholder="{{ text_other_reason }}"></textarea></li>
          </ul>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">{{ button_cancel }}</button>
          <button data-loading-text="{{ text_loading }}" type="button" data-cireview_id="" data-product_id="" data-review_id="" class="btn btn-primary button cireview-abuse">{{ button_submit }}</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</div>

{% if rich %}<script type="application/ld+json">{{ rich }}</script>{% endif %}

<script type="text/javascript"><!--
$(document).ready(function() {

  function applyFilters(filters) {
    filters = filters || [];
    if ($('input[name="cirating_filter"]').val()) {
      filters.push('cirating_filter='+$('input[name="cirating_filter"]').val())
    }
    if ($('input[name="cirating_filters"]').val()) {
      var sort_order = $('input[name="cirating_filters"]').val().split('-');
      filters.push('sort='+sort_order[0]);
      filters.push('order='+sort_order[1]);
    }

    if ($('input[name="cirating_dofilters"]').val()!='') {
      filters.push('cirating_dofilter='+ $('input[name="cirating_dofilters"]').val());
    }
    // <!-- 11-01-2018 -->
    {% if reviewfilterssearch %}
      if ($('input[name="cireviewsearch"]').length > 0 && $('input[name="cireviewsearch"]').val() != ''&& $('input[name="cireviewsearch"]').val() != 'undefined') {
        filters.push('cirating_cireviewsearch='+ $('input[name="cireviewsearch"]').val());
      }
    {% endif %}
    // <!-- 11-01-2018 -->

    return filters;
  }

  {% if reviewimggallery %}

  {#
   // references {
   //  'cicig':'cicustomerimagegallery',
   //  'gi':'galleryimages',
   //  'gr':'galleryreviews',

   //  // pointer is galleryimages index, which helps to identify review id, and image with content
   //  'p':'pointer',
   //  'm_p':'max_pointer',
   //  }
   //  cici = '#cireview-customerimages-{{ product_id }}'
   //  cicit = '#cimodal-cireview-customerimages-{{ product_id }}'
    #}
    var cicig = {};
    cicig.reviews=[];
    cicig.gi = {{ galleryimages|json_encode() }};
    cicig.gr = {{ galleryreviews|json_encode() }};
    cicig.p = 0;
    cicig.m_p = $('.cisingle-review-gallery').length ? $('.cisingle-review-gallery').length : 1;

    var cici = '#cireview-customerimages-{{ product_id }}', cicit = '#cimodal-cireview-customerimages-{{ product_id }}';

    function galleryCustomerImage() {

      var gallery_image = cicig.gi[cicig.p];
      if (gallery_image) {
        // gallery_image['review_id']
        // gallery_image['cireview_image_id']
        // gallery_image['galleryid']
        cicig.p = gallery_image['galleryid'];
        var gallery_review = cicig.gr[gallery_image['review_id']];

        // set active attach image
        for (var i in gallery_review['attach_images']) {
          if (gallery_review['attach_images'][i]['cireview_image_id'] == gallery_image['cireview_image_id']) {
              gallery_review['attach_images'][i]['active'] = 1;
              gallery_review['attach_images']
              gallery_review['active_attachimage'] = gallery_review['attach_images'][i]['popup'];
          }
        }


        // '#cigallery_review_content-'+gallery_image['review_id'] + ' cireviegallerywattach_images'
        {#
        // update content
        // console.log("before insert")
        // console.log(gallery_image)
        // console.log(gallery_image['cireview_image_id'])
        #}
        // $(cici+' .cigallery_review_content').html('');
        $(cici+' .cigallery_review_content').html(gallery_review['gallery_html']);

        setTimeout(function(){
          {#
          // console.log("after insert")
          // console.log(gallery_image)
          // console.log(gallery_image['cireview_image_id'])
          // console.log('cireviegallerywattach_image-'+gallery_image['cireview_image_id'])
          // console.log(  $('#cireviegallerywattach_image-'+gallery_image['cireview_image_id']));
          #}
          $('#cireviegallerywattach_image-'+gallery_image['cireview_image_id']).addClass('active');

        },10);

        // update left image
        $(cici+' .cigallery_img').attr('src', gallery_review['active_attachimage']);
      }
    }

    $(cici).off('click', '.nextButton').on('click', '.nextButton', function(e) {
      var current = cicig.p;
      cicig.p++;

      if (cicig.p >= cicig.m_p) {
        cicig.p = cicig.m_p-1;
      }

      galleryCustomerImage();
    });
    $(cici).off('click', '.prevButton').on('click', '.prevButton', function(e) {
      var current = cicig.p;
      cicig.p--;
      if (cicig.p <=0) {
        cicig.p = 0;
      }
      galleryCustomerImage();
    });

    $(cici).off('click', '.cigallery-switch').on('click', '.cigallery-switch', function(e) {
      $(cici+' .cigallery_modal').addClass('hide');
      $(cici+' .customerimages').removeClass('hide');
    });


    $('#cireview-customerimages,'+cici).off('click', '.cigallery').on('click', '.cigallery', function(e) {

      var action = $(this).attr('data-action');
      var galleryid = parseInt($(this).attr('data-galleryid')) ;
      {#set gallery pointer #}
      cicig.p = galleryid;
      {#
        // console.log(action);
        // console.log("galleryid");
        // console.log(cicig.p);
        // console.log(cicig.gi);
      #}
      galleryCustomerImage();
      $(cici+' .cigallery_modal').addClass('hide');

      if (action == 'g') {
        // show gallery
        $(cici+' .customerimages').removeClass('hide');
      }
      if (action == 's') {
        $(cici+' .customerimage').removeClass('hide');
      }

      if ($(this).parents('.cigallery_modal').length==0) {
        var target = cicit, find_modal = cici;
        ciDataModal(target, find_modal, $(this));
        // $(cici).modal('show');
      }

      // $(this).find().removeClass('hide')
    });



    $(cici).on('show.bs.modal', function (e) {
      // console.log("cici show");
    });

    $(cici).on('hidden.bs.modal', function (e) {
      // console.log("cici hidden");
      $(cici+' .cigallery_review_content').html('');
      $(cici+' .cigallery_img').attr('src', '');

    });
  {% endif %}

  function clearFilters(defaults) {
    $('input[name="cirating_filter"]').val(0);
    $('input[name="cirating_filters"]').val('');
    $('input[name="cirating_dofilters"]').val('');

    {% if reviewfilterstype=='btns' %}
      {% if reviewfiltersimage %}$('#cireview_dofilters .cireview_dofilter').removeClass('active');{% endif %}
      {% if sorts %}$('#cireview_filters .cireview_filter').removeClass('active');{% endif %}
    {% endif %}
    // <!-- 11-01-2018 -->
    {% if reviewfilterssearch %}$('input[name="cireviewsearch"]').val('');{% endif %}
    {% if reviewfilterstype=='dropdown' %}
      {% if reviewfiltersimage %}$('#input-cireview_imagefilter').val('');{% endif %}
      {% if sorts %}
      var cireview_sortfilter = '';
      $('#input-cireview_sortfilter option').each(function() {
        if ($(this).val() == '{{ reviewsortdefault }}') {
          cireview_sortfilter = $(this).val();
        }
      });
      $('#input-cireview_sortfilter').val(cireview_sortfilter);
      {% endif %}
    {% endif %}

    refreshReviews(defaults);
  }

  var ajaxCiReviewSearch = null;
  function refreshReviews(defaults) {
    defaults = $.extend({
      before : function() {},
      callback : function() {},
      fadeInOut : true,
    },defaults);

    var filters = applyFilters();
    var filter = '';
    if (filters.length) {
      filter += '&' + filters.join('&');
    }

    defaults.before();
    // if (defaults.fadeInOut) { $('#cireview').fadeOut('slow'); }
    // $('#cireview').load('index.php?route=extension/cireviewpro/cireview/review&product_id={{ product_id }}&ajax=1'+filter, function() { if (defaults.fadeInOut) { $('#cireview').fadeIn('slow'); } defaults.callback(); });

    ajaxCiReviewSearch = $.ajax({
      url: 'index.php?route=extension/cireviewpro/cireview/review',
      type: 'get',
      data: 'product_id={{ product_id }}&ajax=1'+filter,
      dataType: 'html',
      beforeSend: function() {
        if (defaults.fadeInOut) { $('#cireview').fadeOut('slow'); }
      },
      complete: function() {

      },
      success: function(html) {
        $('#cireview').html(html);
        if (defaults.fadeInOut) { $('#cireview').fadeIn('slow'); } defaults.callback();
      },
      error: function(xhr, ajaxOptions, thrownError) {
        // alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
      }
    });
  }

  {% if reviewfilterstype=='dropdown' %}
    {% if sorts %}
      $('#input-cireview_sortfilter').on('change', function(e) {
        var $this = $(this);
        var value = $(this).val();

        $('input[name="cirating_filters"]').val(value);

        $('#cireview_filters .cireview_filter').removeClass('active');
        $this.addClass('active');


        var oldClass = $(this).find('i').attr('data-class');
        $(this).find('i').removeClass(oldClass).addClass('fa fa-spinner fa-spin');
        refreshReviews({
          before: function() {
            abortCiReviewSearch();
          },
          callback: function() {
            $this.find('i').removeClass('fa fa-spinner fa-spin').addClass(oldClass);
          }
        });
      });
    {% endif %}

    {% if reviewfiltersimage %}
      $('#input-cireview_imagefilter').on('change', function(e) {
        var $this = $(this);
        var value = $(this).val();

        $('input[name="cirating_dofilters"]').val(value);

        $('#cireview_dofilters .cireview_dofilter').removeClass('active');
        $this.addClass('active');


        var oldClass = $(this).find('i').attr('data-class');
        $(this).find('i').removeClass(oldClass).addClass('fa fa-spinner fa-spin');
        refreshReviews({
          before: function() {
            abortCiReviewSearch();
          },
          callback: function() {
            $this.find('i').removeClass('fa fa-spinner fa-spin').addClass(oldClass);
          }
        });
      });
    {% endif %}
  {% endif %}

  {% if reviewfilterstype=='btns' %}
    {% if reviewfiltersimage %}
      $('#cireview_dofilters').on('click', '.cireview_dofilter', function(e) {
        var $this = $(this);
        var value = $(this).attr('data-value');

        $('input[name="cirating_dofilters"]').val(value);

        $('#cireview_dofilters .cireview_dofilter').removeClass('active');
        $this.addClass('active');


        var oldClass = $(this).find('i').attr('data-class');
        $(this).find('i').removeClass(oldClass).addClass('fa fa-spinner fa-spin');
        refreshReviews({
          before: function() {
            abortCiReviewSearch();
          },
          callback: function() {
            $this.find('i').removeClass('fa fa-spinner fa-spin').addClass(oldClass);
          }
        });

      });
    {% endif %}
    {% if sorts %}
      $('#cireview_filters').on('click', '.cireview_filter', function(e) {
        var $this = $(this);
        var value = $(this).attr('data-value');

        $('input[name="cirating_filters"]').val(value);

        $('#cireview_filters .cireview_filter').removeClass('active');
        $this.addClass('active');


        var oldClass = $(this).find('i').attr('data-class');
        $(this).find('i').removeClass(oldClass).addClass('fa fa-spinner fa-spin');
        refreshReviews({
          before: function() {
            abortCiReviewSearch();
          },
          callback: function() {
            $this.find('i').removeClass('fa fa-spinner fa-spin').addClass(oldClass);
          }
        });

      });
    {% endif %}
  {% endif %}
  // <!-- 11-01-2018 -->

  function abortCiReviewSearch() {
    if (ajaxCiReviewSearch) {
      if (ajaxCiReviewSearch.readyState != 4){
        ajaxCiReviewSearch.abort();
        ajaxCiReviewSearch = null;
      }
    }
  }

  function ciReviewSearchResults() {

    var oldClass = $('#cireviewsearch').find('i').attr('data-class');
    $('#cireviewsearch').find('i').removeClass(oldClass).addClass('fa fa-spinner fa-spin');
    refreshReviews({
      before: function() {
        abortCiReviewSearch();
      },
      callback: function() {
        $('#cireviewsearch').find('i').removeClass('fa fa-spinner fa-spin').addClass(oldClass);
      }
    });

  }
  {% if reviewfilterssearch %}
    $('input[name="cireviewsearch"]').first().attr('autocomplete', 'off').bind('keyup', function(e) {
      if (e.which == 38 || e.which == 40) return;

      if ($(this).is(':focus')) {
        abortCiReviewSearch();
        keyTypeWatch(function () {
          ciReviewSearchResults();
        }, 300);

      }
    });
  {% endif %}
  var keyTypeWatch = (function(){
    var timer = 0;
    return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
    }
  })();
  // <!-- 11-01-2018 -->


  $('.clearfilters').on('click', function() {
    var $this = $(this);
    var oldClass = $(this).find('i').attr('data-class');
    $(this).find('i').removeClass(oldClass).addClass('fa fa-spinner fa-spin');
    clearFilters({
      before: function() {
        abortCiReviewSearch();
      },
      callback: function() {
       $this.find('i').removeClass('fa fa-spinner fa-spin').addClass(oldClass);
      }
    });
  });


  {% if rating %}
    $('input.cirating-stars[type=number]').each(function() {
      $(this).rating({
        'min' : 1,
        'max' : parseInt('{{ ratingstars > 0 ? ratingstars : 5 }}'),
        'icon-lib' : "cifa fa",
        'active-icon' : "fa-star",
        'inactive-icon' : "fa-star-o",
        'clearable' : false,
        'divclass' : 'cirating-input',
        'OC_VERSION' : '{{ constant('VERSION') }}',
        'PHP_VERSION' : '{{ php_version }}'
      });
    });
  {% endif %}

  $('#cireview-posnegreviews').on('click', '.cirating-posnegfilter', function(e) {
    var cirating = $(this).attr('data-cirating');
    $('input[name="cirating_filter"]').val(cirating);

    refreshReviews({
      callback : function() {
        var offset = $('#cireview').offset();
        $('html, body').animate({ scrollTop: (offset.top - 80) }, 'slow');

      }
    });
  });

  $('#cireviewgraph').on('click', '.cirating-filter', function(e) {
    var cirating = $(this).attr('data-cirating');
    $('input[name="cirating_filter"]').val(cirating);
    refreshReviews({
      before: function() {
        abortCiReviewSearch();
      },
      callback : function() {
        var offset = $('#cireview').offset();
        $('html, body').animate({ scrollTop: (offset.top - 80) }, 'slow');

      }
    });
  });

  var citabreview = 0;
  $('a[href="#tab-review"]').on('click', function() {
    if (citabreview==0) {
      refreshReviews({
        before: function() {
          abortCiReviewSearch();
        },
        fadeInOut : false,
      });
    }
    citabreview++;
  });


  $('#cireview').delegate('.pagination a', 'click', function(e) {
      e.preventDefault();
      $('#cireview').fadeOut('slow');
      $('#cireview').load(this.href, function() { $('#cireview').fadeIn('slow'); });
  });

  refreshReviews({
    before: function() {
      abortCiReviewSearch();
    },
    fadeInOut : false,
  });
  {#
    $('#cireview').load('index.php?route=extension/cireviewpro/cireview/review&product_id={{ product_id }}&ajax=1', function() { $('a[href="#tab-review"]').html(json['tab_review']);  if (json['cireviewgraph']) { $('#cireviewgraph').html(json['cireviewgraph']); }  });
  #}


  $('#button-cireview').on('click', function() {
    $('.alert').remove();
    $('.text-danger').remove();
    var $this = $(this);

    var data = $("#form-cireview").serialize();

    if (data) {
      data += '&';
    }
    // 20-sep-2021: code starts
    data += $('.cireview-form select, .cireview-form input, .cireview-form textarea').serialize();
    // 20-sep-2021: code ends
    $.ajax({
      url: 'index.php?route=extension/cireviewpro/cireview/write&product_id={{ product_id }}',
      type: 'post',
      dataType: 'json',
      data: data,
      beforeSend: function() {
        $('#button-cireview').button('loading');
      },
      complete: function() {
        $('#button-cireview').button('reset');
      },
      success: function(json) {
        $('.alert').remove();
        $('.text-danger').remove();

        $('.cireview-form .has-error').each(function() {
          $(this).removeClass('has-error');
        });

        if (json['error']) {
          $this.parent().after('<div class="alert alert-danger warning"><i class="fa fa-check-circle"></i> ' + json['error'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
        }

        if (json['name']) {
          $('input[name=\'ciname\']').after('<div class="text-danger"><i class="fa fa-exclamation-circle"></i> ' + json['name'] + '</div>');
        }

        if (json['email']) {
          $('input[name=\'ciemail\']').after('<div class="text-danger"><i class="fa fa-exclamation-circle"></i> ' + json['email'] + '</div>');
        }

        if (json['text']) {
          $('textarea[name=\'cireview\']').after('<div class="text-danger"><i class="fa fa-exclamation-circle"></i> ' + json['text'] + '</div>');
        }

        if (json['title']) {
          $('input[name=\'cititle\']').after('<div class="text-danger"><i class="fa fa-exclamation-circle"></i> ' + json['title'] + '</div>');
        }

        if (json['rating']) {
          for (var i in json['rating']) {
            $('#cirating-'+ i + ' > div').append('<div class="text-danger"><i class="fa fa-exclamation-circle"></i> ' + json['rating'][i] + '</div>');
          }
        }

        if (json['captcha']) {
          $('#cicaptcha').append('<div class="text-danger"><i class="fa fa-exclamation-circle"></i> ' + json['captcha'] + '</div>');
        }
        // 20-sep-2021: code starts
        if (json['location']) {
          $('select[name=\'cicountry_id\']').after('<div class="text-danger"><i class="fa fa-exclamation-circle"></i> ' + json['location'] + '</div>');
          $('select[name=\'cizone_id\']').after('<div class="text-danger"><i class="fa fa-exclamation-circle"></i> ' + json['location'] + '</div>');
        }
        // 20-sep-2021: code ends

        $('.cireview-form .text-danger').parents('.form-group').addClass('has-error');

        if (json['success']) {

          {% if rewardsuccessalert=='DEFAULT' %}
            $('#cireview-modal').find('.modal-header').before('<div class="alert alert-success success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
            $('#cireview-graph').before('<div class="alert alert-success success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
          {% elseif rewardsuccessalert=='POPUP' %}
            $('.cireview-successmsg').html(json['success']);
            $('.cireview-form').hide('slow');
            $('.cireview-successmsg').show('slow');
            $('.cireview-successmsg-title').html(json['reviewsuccessmsg_title']);
            $('.cireview-form-title').hide('slow');
            $('.cireview-successmsg-title').show('slow');
          {% endif %}


          $('input[name=\'ciname\']').val('{{ customer_name }}');
          $('input[name=\'cireview_image\']').val('');
          $('textarea[name=\'cireview\']').val('');
          $('input[name=\'cititle\']').val('');
          $('input[name=\'ciemail\']').val('{{ customer_email }}');
          // 20-sep-2021: code starts
          $('select[name=\'cicountry_id\']').val('{{ showlocationdefault_country_id }}').trigger('change');
          // 20-sep-2021: code ends
          $('.cirating:checked').prop('checked', false);
          $('input.cirating-stars[type=number]').each(function() {
            $(this).rating('clear');
          });
          $('#ciattach_images').html('');
          $('#cicaptcha input').val('');

          if (json['refresh']) {
            refreshReviews({
              before: function() {
                abortCiReviewSearch();
              },
              callback: function() {
                $('a[href="#tab-review"]').html(json['tab_review']);
                if (json['cireviewgraph']) { $('#cireviewgraph').html(json['cireviewgraph']); }
                if (json['aggeratereview']) { $('#cireview-aggerate').html(json['aggeratereview']); }
              }
            });
          }

          setTimeout(function(){
            var offset = $('.cireview-form').offset()
            var mypos = (Math.round(offset.top) - 10);
            if ($(window).scrollTop() > mypos) {
              $('html, body').animate({ scrollTop: mypos }, 'slow');
            }

            {% if rewardsuccessalert=='DEFAULT' %}
              $('#cireview-modal').find('.close').trigger('click');
            {% endif %}

          },500);

        }
      }
    });
  });

  $('.ciattach_images').each(function() {
    $(this).magnificPopup({
      type:'image',
      delegate: 'a',
      gallery: {
        enabled:true
      }
    });
  });

  $('#cireview-aggerate').on('click', '.addrating', function() {
    $('.cireview-write').trigger('click');
    // $('#cireview-modal').modal('show');
  });


  $('#ciattach_images').on('click', '.attach_image_close', function() {
    var $this = $(this);
    var id = $this.attr('data-id');
    if (id && confirm("Are you sure?")) {
      $.ajax({
        url: 'index.php?route=extension/cireviewpro/cireview/delete&product_id={{ product_id }}',
        type: 'post',
        data: 'id=' + id,
        dataType: 'json',
        beforeSend: function() {
        },
        complete: function() {
        },
        success: function(json) {
          if (json['success']) {

            $('input[name="cireview_image"]').val(json['code']);

            if (json['attach_images']) {
              var html = '';
              for (var i in json['attach_images']) {
                html += '<li id="ciattach_image-'+ json['attach_images'][i]['cireview_image_id'] +'"><button data-id="'+ json['attach_images'][i]['cireview_image_id'] +'" type="button" class="attach_image_close close" data-dismiss="alert">&times;</button><a href="'+ json['attach_images'][i]['popup'] +'"> <img src="'+ json['attach_images'][i]['thumb'] +'" alt="{{ heading_title }}" /> </a></li>';
              }
              $('#ciattach_images').html(html);
            }
          }

        },
        error: function(xhr, ajaxOptions, thrownError) {
          //alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
      });
    }
  });

  $('#button-ciattachupload').on('click', function() {
    var node = this;

    $('.ciattachupload .alert').remove();

    $('#form-ciattach-upload').remove();

    $('body').prepend('<form enctype="multipart/form-data" id="form-ciattach-upload" style="display: none;"><input type="file" name="ciattachfile" /><input type="hidden" name="cireview_images" value="'+ $('input[name="cireview_image"]').val() +'"></form>');

    $('#form-ciattach-upload input[name=\'ciattachfile\']').trigger('click');

    if (typeof timer != 'undefined') {
        clearInterval(timer);
    }

    timer = setInterval(function() {
      if ($('#form-ciattach-upload input[name=\'ciattachfile\']').val() != '') {
        clearInterval(timer);

        $.ajax({
          url: 'index.php?route=extension/cireviewpro/cireview/upload&product_id={{ product_id }}',
          type: 'post',
          dataType: 'json',
          data: new FormData($('#form-ciattach-upload')[0]),
          cache: false,
          contentType: false,
          processData: false,
          beforeSend: function() {
            $(node).button('loading');
          },
          complete: function() {
            $(node).button('reset');
          },
          success: function(json) {

            $('.ciattachupload .alert').remove();

            if (json['error']) {
              $(node).parent().append('<div class="alert alert-danger warning"><i class="fa fa-check-circle"></i> ' + json['error'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
            }

            if (json['success']) {
              $(node).parent().append('<div class="alert alert-success success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');

              $('input[name="cireview_image"]').val(json['code']);

              if (json['attach_images']) {
                var html = '';
                for (var i in json['attach_images']) {
                  html += '<li id="ciattach_image-'+ json['attach_images'][i]['cireview_image_id'] +'"><button data-id="'+ json['attach_images'][i]['cireview_image_id'] +'" type="button" class="attach_image_close close" data-dismiss="alert">&times;</button><a href="'+ json['attach_images'][i]['popup'] +'"> <img src="'+ json['attach_images'][i]['thumb'] +'" alt="{{ heading_title }}" /> </a></li>';
                }
                $('#ciattach_images').html(html);
              }
            }
          },
          error: function(xhr, ajaxOptions, thrownError) {
            // alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
          }
        });
      }
    }, 500);
  });
  // 20-sep-2021: code starts
  $('select[name=\'cicountry_id\']').on('change', function() {
    $.ajax({
      url: 'index.php?route=account/account/country&country_id=' + this.value,
      dataType: 'json',
      beforeSend: function() {
        $('select[name=\'cicountry_id\']').prop('disabled', true);
      },
      complete: function() {
        $('select[name=\'cicountry_id\']').prop('disabled', false);
      },
      success: function(json) {
        html = '<option value="">{{ text_select }}</option>';

        if (json['zone'] && json['zone'] != '') {
          for (i = 0; i < json['zone'].length; i++) {
            html += '<option value="' + json['zone'][i]['zone_id'] + '"';

            if (json['zone'][i]['zone_id'] == '{{ showlocationdefault_zone_id }}') {
              html += ' selected="selected"';
            }

            html += '>' + json['zone'][i]['name'] + '</option>';
          }
        } else {
          html += '<option value="0" selected="selected">{{ text_none }}</option>';
        }

        $('select[name=\'cizone_id\']').html(html);
      },
      error: function(xhr, ajaxOptions, thrownError) {
        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
      }
    });
  });

  $('select[name=\'cicountry_id\']').trigger('change');
  // 20-sep-2021: code ends
  $('.cireview-abuse').on('click', function() {
    var $this = $(this);
    var review_id = $this.attr('data-review_id');
    var product_id = $this.attr('data-product_id');
    var cireview_id = $this.attr('data-cireview_id');

    var modaldiv = $('#cireview-abuse-'+product_id);
    modaldiv.find('.alert').remove();
    if (review_id && product_id && cireview_id) {

      var data = $('#cireview-abuse-'+product_id+ ' input, #cireview-abuse-'+product_id+ ' textarea').serialize();

      if (data) {
        data += '&';
      }

      data += 'review_id='+review_id+'&product_id='+product_id+'&cireview_id='+cireview_id;

      $.ajax({
        url: 'index.php?route=extension/cireviewpro/cireview/cireviewAbuse&product_id='+product_id,
        type: 'post',
        data: data,
        dataType: 'json',
        beforeSend: function() {
           $this.button('loading');
        },
        complete: function() {
          $this.button('reset');
        },
        success: function(json) {
          modaldiv.find('.alert').remove();

          if (json['error']) {
            modaldiv.find('.modal-header').before('<div class="alert alert-danger warning"><i class="fa fa-check-circle"></i> ' + json['error'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>')
          }
          if (json['success']) {
            // update particular div text
            modaldiv.find('.modal-header').before('<div class="alert alert-success success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');

            setTimeout(function() {
              modaldiv.find('.close').trigger('click');
            }, 1000);

          }
        },
        error: function(xhr, ajaxOptions, thrownError) {
          // alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
      });
    }
  });

  function ciDataModal(target, find_modal, el) {

    $(target).find(find_modal).attr('data-back', target);
    var ev = $(target).find(find_modal).attr('id');


    $(find_modal).appendTo("body");

    $(find_modal).modal('show');

    $(find_modal).off('hidden.bs.modal.'+ev).on('hidden.bs.modal.'+ev, function(e) {

        $(find_modal).appendTo($(find_modal).attr('data-back'));

        $(find_modal).removeAttr('data-back');

    });
  }

  $('.data-modal').on('click', function() {
    var target = $(this).attr('data-target');
    var find_modal = $(this).attr('data-find_modal');
    ciDataModal(target, find_modal, $(this));
  });


  $('#cireview-policy-modal').on('shown.bs.modal', function (e) {
    var num_modals = $('.modal-backdrop').length;

    if (num_modals > 1) {
      var calc_zindex = 10;
      var use_nummodal = num_modals - 1;
      var zindex = parseFloat($(this).css('z-index'));
      $(this).css('z-index', (zindex+ (calc_zindex*use_nummodal) ));

      // access modal variables
      var $backdrop = $(this).data('bs.modal').$backdrop;

      $backdrop.addClass("cireviewpro-policy-backdrop");

      var zindex2 = parseFloat($('.modal-backdrop.cireviewpro-policy-backdrop').css('z-index'));

      $('.modal-backdrop.cireviewpro-policy-backdrop').css('z-index', ( (zindex > zindex2) ? zindex + ((calc_zindex-1) *use_nummodal) : zindex2 + (calc_zindex*use_nummodal) ) );
    }
  });

  $('#cireview-policy-modal').on('hidden.bs.modal', function (e) {
    $(this).css('z-index', '');
    // console.log("cireview-policy-modal hidden");
    if ($('.modal').hasClass('in')) {
      $('body').addClass('modal-open');
    }
  });

  $('#cireview-modal').on('hidden.bs.modal', function (e) {
    // console.log("cireview-modal hidden");

    var modal = $(this);
    modal.find('.alert').remove();

    $('.cireview-form .has-error').each(function() {
      $(this).removeClass('has-error');
    });

    $('.cireview-successmsg').hide().html('');
    $('.cireview-form').show();
    $('.cireview-successmsg-title').hide().html('');
    $('.cireview-form-title').show();

  });


  $('#cireview-abuse-{{ product_id }}').on('hidden.bs.modal', function (e) {
    // console.log("cireview-abuse- hidden");
    var modal = $(this);
    modal.find('input[name="ciabreason"]').prop("checked", false);
    modal.find('.other_reason').addClass('hide');
    modal.find('textarea').val('');
    modal.find('.alert').remove();
    modal.find('.cireview-abuse').attr({'data-product_id' : '','data-review_id' : '', 'data-cireview_id' : ''});
  });
{# // smash it starts #}
{# $('input[name="ciabreason"]').on('click', function() { #}
  $(document).delegate('#cireview-abuse-{{ product_id }} input[name="ciabreason"]', 'click', function() {
    if ($(this).val() == 'OTHER' {# || $(this).attr('data-details') == 1 #}) {
{# // smash it ends #}
      $('.other_reason').removeClass('hide');
    } else {
      $('.other_reason').addClass('hide');
      $('.other_reason textarea').val('');
    }
  });

  $('#cireview').off('click', '.abuse-button-action').on('click', '.abuse-button-action', function() {
    var $this = $(this);
    var review_id = $this.attr('data-review_id');
    var product_id = $this.attr('data-product_id');
    var cireview_id = $this.attr('data-cireview_id');
    if (review_id && product_id && cireview_id) {
      $('#cireview-abuse-'+product_id).find('.cireview-abuse').attr({'data-review_id' : review_id, 'data-product_id' : product_id, 'data-cireview_id' : cireview_id});

      //abuse-button-action

      var target = '#cimodal-cireview-abuse-'+product_id;
      var find_modal = '#cireview-abuse-'+product_id;

      // ciDataModal(target, find_modal, $(this));
      {# // smash it starts #}
      var data = 'review_id='+review_id+'&product_id='+product_id+'&cireview_id='+cireview_id;

      $.ajax({
        url: 'index.php?route=extension/cireviewpro/cireview/getReviewAbuse&product_id='+product_id,
        type: 'post',
        data: data,
        dataType: 'json',
        beforeSend: function() {
           // $this.button('loading');
        },
        complete: function() {
          // $this.button('reset');
        },
        success: function(json) {
          if (json['ciabreasons']) {
            // update particular div text
            $('#cireview-abuse-'+product_id+' .ciabreason-list').find('.ciabreason').remove();
            var html = '';
            for (var i in json['ciabreasons']) {
              // console.log("looping json.ciabreasons");
              html += '<li class="ciabreason"><label><input type="radio" data-details="'+ json['ciabreasons'][i]['details'] +'" name="ciabreason" value="'+ json['ciabreasons'][i]['ciabreason_id'] +'"> '+ json['ciabreasons'][i]['name'] +'</label></li>';
            }

            html += '<li class="ciabreason"><label><input type="radio" data-details="1" name="ciabreason" value="OTHER"> {{ text_other }}</label></li>';

            if (html) {
              // console.log("filled with abuse reaons");
              $(html).prependTo('#cireview-abuse-'+product_id+' .ciabreason-list');
            }
          }
        },
        error: function(xhr, ajaxOptions, thrownError) {
          // alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
      }).always(function(){
        // ciDataModal(target, find_modal, $(this));
        ciDataModal(target, find_modal, $this);
        // console.log("ajax.always() looking for this")
        // console.log($(this))
        // console.log($this)
      });
      {# // smash it ends #}

      // $('#cireview-abuse-'+product_id).modal('show');
    }

  });

  $('#cireview').off('click', '.vote-button-action').on('click', '.vote-button-action', function() {
    var $this = $(this);
    var review_id = $this.attr('data-review_id');
    var action = $this.attr('data-action');
    var product_id = $this.attr('data-product_id');
    var cireview_id = $this.attr('data-cireview_id');
    // $('.text-danger').remove();

    var oldClass = $(this).find('i').attr('data-class');

    if (review_id && product_id && cireview_id) {
      $.ajax({
        // 20-sep-2021: code starts
        url: 'index.php?route=extension/cireviewpro/cireview/cireviewVote&product_id=' + encodeURIComponent(product_id) + '',
        // 20-sep-2021: code ends
        type: 'post',
        data: 'review_id=' + encodeURIComponent(review_id) + '&action=' + encodeURIComponent(action) + '&product_id=' + encodeURIComponent(product_id) + '&cireview_id=' + encodeURIComponent(cireview_id),
        dataType: 'json',
        beforeSend: function() {
          $this.find('i').removeClass(oldClass).addClass('fa fa-spinner fa-spin');
        },
        complete: function() {
          $this.find('i').removeClass('fa fa-spinner fa-spin').addClass(oldClass);
        },
        success: function(json) {
          var $parent = $this.parents('.cireview-vote');
          $('.text-danger').remove();
          if (json['error']) {
            $parent.append('<div class="text-danger">'+ json['error'] +'</div>')
          }
          if (json['success']) {
            // update particular div text
            $parent.find('.vote-action').html(json['before_text']);
            $parent.find('.vote-result').html(json['after_text']);
            $parent.append('<div class="text-success">'+ json['success'] +'</div>')
          }
        },
        error: function(xhr, ajaxOptions, thrownError) {
          // alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
      });
    }
  });
  {#
  var hash = window.location.hash;
  var nhash = hash.replace('#','');

  if (nhash == 'cireview=1') {
    setTimeout(function() {
      $('a[href="#tab-review"]').trigger('click');
      $('.cireview-write').trigger('click');
    }, 500);
  }
  #}
  $(document).delegate('.ciscrolltoreviewtab', 'click', function() {
    ciScrollToReviewTab();
  });
  $(document).delegate('.ciopenreviewpopup', 'click', function() {
    ciOpenReviewPopup();
  });
});

function ciOpenReviewPopup() {

  var $review = $('#cireview-graph');

  $('a[href="#tab-review"]').trigger('click');

  $('a[href="#' + $review.closest('.module-item').attr('id') + '"]').trigger('click');
  $('a[href="#' + $review.closest('.tab-pane').attr('id') + '"]').trigger('click');
  $('a[href="#' + $review.closest('.panel-collapse').attr('id') + '"]').trigger('click');

  if ($('.cireview-write').length) {
    $('.cireview-write').trigger('click');
  } else {
    ciScrollToReviewTab();
  }
}

function ciScrollToReviewTab() {

  var $review = $('#cireview-graph');

  $('a[href="#tab-review"]').trigger('click');

  $('a[href="#' + $review.closest('.module-item').attr('id') + '"]').trigger('click');
  $('a[href="#' + $review.closest('.tab-pane').attr('id') + '"]').trigger('click');
  $('a[href="#' + $review.closest('.panel-collapse').attr('id') + '"]').trigger('click');

  $([document.documentElement, document.body]).animate({
    scrollTop: $review.offset().top - 100
  }, 200);
}
//--></script>