@{section header}
<style>
[class^="Hcol-"]{display: inline-block;}
.myrating-container {
      text-align: center;
    }

    .myrating-title {
      font-size: 20px;
      color: #444;
    }

    .myrating-stars {
      font-size: 20px;
      color: #dcdcdc;
      cursor: pointer;
      user-select: none;
      direction:ltr;
    }

    .myrating-stars span {
      margin: 0 5px;
      transition: all 0.2s;
      direction:ltr;
      display: inline-block;
    }

    .myrating-stars span.selected,
    .myrating-stars span.hovered {
      color: #f5b908;
      transform: scale(1.2);
    }

    
</style>

@{end}


<div class="Hrow HpaddB-40" style="margin-top:100px;">
    <small class="Hrow Htxt-center HpaddB-5" data-color="#838383">ثبت نظر</small>
    <form id="frm_message" class="Hcenter HpaddLR-15 HpaddTB-30 Hbg-white Hround-5" style="overflow:auto;margin:auto;display:block;box-shadow:0px 0px 5px #eee;max-width: 500px;" name="frm_message" action="" method="post" enctype="text/plain" >
        <div class="Hrow Hpadd-10">
            <label class="Hrow HpaddR-20 HpaddB-5" data-color="#777" style="direction:rtl"> شماره تماس</label>
            <input class="Hrow Hround-5 Hpadd-10 Htxt-center" data-color="#333" data-bgcolor="#F0F0F0" style="border:0;" value="" name="phone" id="phone" />
        </div>

        <div class="Hcol-xlg-6 Hcol-lg-6 Hcol-xmd-6 Hcol-md-6 Hcol-xsm-6 Hcol-sm-6 Hcol-xs-6 Hcol-xss-12 Hpadd-10" style="float: none;">
            <label class="Hrow HpaddR-20 HpaddB-5" data-color="#777" style="direction:rtl"> نام</label>
            <input class="Hrow Hround-5 Hpadd-10 Htxt-center" data-color="#333" data-bgcolor="#F0F0F0" style="border:0;" value="" name="name" id="name" />
        </div>
     
        <div class="Hcol-xlg-6 Hcol-lg-6 Hcol-xmd-6 Hcol-md-6 Hcol-xsm-6 Hcol-sm-6 Hcol-xs-6 Hcol-xss-12 Hpadd-10" style="float: none;">
            <label class="Hrow HpaddR-20 HpaddB-5" data-color="#777" style="direction:rtl"> نام خانوادگی</label>
            <input class="Hrow Hround-5 Hpadd-10 Htxt-center" data-color="#333" data-bgcolor="#F0F0F0" style="border:0;" value="" name="fam" id="fam" />
        </div>

        <div class="Hrow Hpadd-10">
            <label class="Hrow HpaddR-20 HpaddB-5" data-color="#777" style="direction:rtl"> پیام</label>
            <textarea class="Hrow Hround-5 Hpadd-10" data-color="#333" data-bgcolor="#F0F0F0" style="resize: none;border: 0;" rows="6" name="des" id="des"></textarea>
        </div>

        <div class="Hrow myrating-container">
            <div class="myrating-title"> امتیاز شما</div>
            <div class="myrating-stars">
              <span class="fas fa-star" data-value="1"></span>
              <span class="fas fa-star" data-value="2"></span>
              <span class="fas fa-star" data-value="3"></span>
              <span class="fas fa-star" data-value="4"></span>
              <span class="fas fa-star" data-value="5"></span>
            </div>
        </div>
        
        
        <div class="Hrow Hpadd-10 HmarT-20">
            <input type="hidden" value="" name="rate" id="rate" />
            <button id="sendMessage"  class="Hrow trans0_25  Hpadd-10 Hround-5 Hcursor-poi" data-bgcolor="var(--blue-v2)" style="border: 0;" data-color="#fff"  type="button">ارسال نظر</button>
        </div>
</form>
</div>





@{section footer}

<script type="text/javascript">



function show_res2(result){
        switch(result.status){
            case 43:
                window.location.reload(true);
                Hnotification({status:"success",Cstyle:[{color:"#ffffff"}],Ctext:result.data});
                break;
            default:
                Hnotification({status:"warning",Cstyle:[{color:"#000000"}],Ctext:result.data});
            break;
            }
    }

$(document).ready(function(){
 
        $("#sendMessage").click(async function(){
            $("#rate").val(selectedRating);
            var formdata=new FormData(frm_message);
            var result=await jqajax(`/sendMessage`,formdata,"post","loader");
            show_res2(result);
        });

        const $stars = $('.myrating-stars span');
      let selectedRating = 5;

      function updateStars(rating) {
        $stars.each(function () {
          const starVal = $(this).data('value');
          $(this).toggleClass('selected', starVal <= rating);
        });
      }

      updateStars(selectedRating); // پیش‌فرض ۵

      $stars.on('mouseenter', function () {
        const hoverVal = $(this).data('value');
        $stars.each(function () {
          const starVal = $(this).data('value');
          $(this).toggleClass('hovered', starVal <= hoverVal);
        });
      });

      $stars.on('mouseleave', function () {
        $stars.removeClass('hovered');
      });

      $stars.on('click', function () {
        selectedRating = $(this).data('value');
        updateStars(selectedRating);
      });
   
});

</script>

@{end}