@{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);
    }

    body{background:#fff !important;}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

@{end}



 <div class="Hrow HmarT-40" >
        <div class="Hcontainer Hcontainer-1200  HpaddLR-20 HpaddTB-40">
                <div class="Hhide-xlg Hhide-lg Hhide-xmd Hcol-md-12 Hcol-xsm-12 Hcol-sm-12 Hcol-xs-12 Hcol-xss-12 HpaddLR-3 HpaddB-20">
                        <h2 class="Hrow Htxt-center">تماس با فروشگاه اینترنتی <br/> محصولات سام‌راد </h2>
                        <div class="Hrow HpaddTB-5 Htxt-center"><span style="height:2px;width:120px;display: inline-block;" data-bgcolor="rgb(244,229,1)"></span></div>
                        <p class="Hrow HpaddB-10 font-vazirDigit Hltr Htxt-center"> @{!repository.contact.phone_1}</p>
                        <p class="Hrow HpaddB-10 font-vazirDigit Hsmall Hltr Htxt-center"> @{!repository.contact["address_"+repository.lang]}</p>
                        <p class="Hrow HpaddB-10 Hltr Htxt-center" style="font-family: Inter-Medium;"> www.samarianexir.com</p>
                        <p class="Hrow HpaddB-10 Hltr Htxt-center" style="font-family: Inter-Medium;"> www.samexir.com</p>
                        
                        <p class="Hrow Hltr Htxt-center" data-color="var(--blue-v3)">
                                <a class="fab fa-linkedin-in HmarR-10" href="@{!repository.contact.linkdin}"></a>
                                <a class="fab fa-instagram  HmarR-10" href="@{!repository.contact.instagram}"></a>
                                <a class="fas fa-envelope  HmarR-10" href="@{!repository.contact.email}"></a>
                                <a class="fab fa-whatsapp  HmarR-10" href="@{!repository.contact.whatsUp}"></a>
                                <a class="fab fa-telegram-plane" href="@{!repository.contact.telegram}"></a>
                        </p>
                        <div id="map2" class="HmarT-10 Hround-10" style="height: 250px;display:block;width:95%;right:2.5%;box-shadow: 0px 0px 5px -2px #000;"></div>

                </div>
                <div class="Hcol-xlg-6 Hcol-lg-6 Hcol-xmd-6 Hhide-md Hhide-xsm Hhide-sm Hhide-xs Hhide-xss Hfloat-L Hpadd-3">
                        <h2 class="Hrow Htxt-left">تماس با فروشگاه اینترنتی <br/> محصولات سام‌راد </h2>
                        <div class="Hrow HpaddTB-15 Hltr"><span style="height:2px;width:120px;display: block;" data-bgcolor="rgb(244,229,1)"></span></div>
                        <p class="Hrow HpaddB-10 font-vazirDigit Hltr Htxt-left"><i data-color="#aaa" class="HpaddR-10 fas fa-phone-alt"></i> @{!repository.contact.phone_1}</p>
                        <p class="Hrow HpaddB-10 font-vazirDigit Hltr Htxt-left"><i data-color="#aaa" class="HpaddR-10 fas fa-map-marker-alt"></i> @{!repository.contact["address_"+repository.lang]}</p>
                        <p class="Hrow HpaddB-10 Hltr Htxt-left" style="font-family: Inter-Medium;"><i data-color="#aaa" class="HpaddR-10 fas fa-globe"></i> www.samarianexir.com</p>
                        <p class="Hrow HpaddB-10 Hltr Htxt-left" style="font-family: Inter-Medium;"><i data-color="#aaa" class="HpaddR-10 fas fa-globe"></i> www.samexir.com</p>
                        
                        <p class="Hrow Hltr Htxt-left" data-color="var(--blue-v3)">
                                <a class="fab fa-linkedin-in HmarR-10" href="@{!repository.contact.linkdin}"></a>
                                <a class="fab fa-instagram  HmarR-10" href="@{!repository.contact.instagram}"></a>
                                <a class="fas fa-envelope  HmarR-10" href="@{!repository.contact.email}"></a>
                                <a class="fab fa-whatsapp  HmarR-10" href="@{!repository.contact.whatsUp}"></a>
                                <a class="fab fa-telegram-plane" href="@{!repository.contact.telegram}"></a>
                        </p>
                        <div id="map" class="HmarT-10 Hround-10" style="height: 250px;display:block;width:95%;right:2.5%;box-shadow: 0px 0px 5px -2px #000;"></div>
                </div>
                <div class="Hcol-xlg-6 Hcol-lg-6 Hcol-xmd-6 Hcol-md-12 Hcol-xsm-12 Hcol-sm-12 Hcol-xs-12 Hcol-xss-12  Hpadd-3">
                        <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-v3)" style="border: 0;" data-color="#fff"  type="button">ارسال</button>
                                </div>
                        </form>
                </div>
        </div>
</div>

<!-- --------------------------footer--------------- -->
@{section footer}
<script src="../../../js/jsResource.js"></script>
<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);
      });

      var marker={};
      var marker2={};
      var selectedLocation = { latitude: `@{if repository.contact.lat}@{!repository.contact.lat}@{else}0@{fi}`*1.0, longitude: `@{if repository.contact.lng}@{!repository.contact.lng}@{else}0@{fi}`*1.0 };
      var mymap = L.map('map', {
        scrollWheelZoom: false
      }).setView([selectedLocation.latitude, selectedLocation.longitude], 14);

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19
      }).addTo(mymap);
      marker = L.marker([selectedLocation.latitude, selectedLocation.longitude]).addTo(mymap);

      var mymap2 = L.map('map2', {
        scrollWheelZoom: false
      }).setView([selectedLocation.latitude, selectedLocation.longitude], 14);

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19
      }).addTo(mymap2);
      marker2 = L.marker([selectedLocation.latitude, selectedLocation.longitude]).addTo(mymap2);
});

</script>

@{end}