{% extends "layout.html" %}
{% block title %}{{title_pre}} {%if current_lang == "he" %}{{ activity.name_he }}{% else %} {{ activity.name_fr }} {% endif %}{% endblock %}
 {% block bread %}
   <!-- <div class="col-sm-4">
        <h2>Manage Users</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="index.php">Home</a>
            </li>
             <li class="breadcrumb-item active">
                <strong>All Users</strong>
            </li>
        </ol>
    </div>-->
 {% endblock %}
{% block content %}
<style>

     
</style>
<div class="page_content i18container">

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">  
<link href="templates/css/plugins/chosen/bootstrap-chosen.css" rel="stylesheet">
<link href="templates/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="templates/css/plugins/datapicker/datepicker3.css" rel="stylesheet">


<!--	SM	-->
<link rel="stylesheet" href="templates/css/intlTelInput.css">


<div class="row row animated fadeInDown">
        <div class="container text-right" >
                {% for row in _session.all_langs %}
                    <img class="set_es  set_lang change_lang mr-1"  data-id="{{ row.id }}"  data-id="{{ row.id }}" src="templates/img/flags/32/{{ row.icon}} " />
                {% endfor %}
            </div>
        <div id="carouselExampleIndicators" class="carousel slide  w-100" data-ride="carousel">
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img class="d-block w-100" src="templates/uploads/{{ activity.logo }}" alt="First slide">
                  </div>
                </div>
        </div>
              
</div>
<div class="row row animated fadeInDown">
    <div class="w-100 text-center hdr_txt" >"{% trans "title top" %}"</div>
</div>

        <!--<div class="row animated fadeInDown container-fuild">
            <div class="col-lg-12 banner text-center" >
                <img class="logo-banner " src="templates/img/logo_2.jpg" />
            </div>
        </div>-->
    <div class="container">
        <div class="row animated fadeInDown ">
            <div  class="col-lg-12 text-center  message-thanks"  >
                <h1 class="bold">{% trans "Thank you!" %}</h1>
                <h3>{% trans "Your review has been successfully sent." %}</h3>
            </div>
            <div class="col-lg-12 form-div " >
            
                <div class="form-section ">
                    <form class="form-control form-review" >
                        <input type="hidden" id="google_reviews_link" value="{{ activity.google_reviews_link }}" />
                        <h1 class="mb-3  bold"  >{% trans "Contact Details" %}</h1>
                       <div class="form-group row">
                         <!--       <input name="phone"    type="text" data-mask="(999) 999-999-999"   required="required" class="form-control " placeholder="{% trans "phone" %}"> -->
                <input  name="phone"  type="tel" id="phone" class="form-control" required="required" >
                <span id="valid-msg" class="hide"><!-- Valid--></span>
                <span id="error-msg" class="hide"></span>

				<!--<span class="input-group-text">{% trans "phone" %}</span>-->
                        </div>
                        <input type="hidden" id="id_activity" name="activity" value="{{ activity.id }}" />
                       
                     
                        <div class="form-group row">
                                <input name="first_name" id="first_name"  type="text" autocomplete="off"   required="required" class="form-control" placeholder="{% trans "first name" %} ">
                            </div>
                            <div class="form-group row">
                                <input name="last_name"  id="last_name" type="text"  autocomplete="off"  required="required" class="form-control" placeholder="{% trans "last name" %} ">
                            </div>
                        

                        <div class="form-group row">
                                {%if _session.rtl == "1" %}
                                <select data-placeholder="{% trans "country" %}"  class="chosen-select " id="country" name="country" tabindex="2">   
                                      <!--  <option  value="">{% trans "country" %}</option>-->
                                        {%for country in countries %}
                                        <option value="{{ country.code }}" {% if country.code == "IL" %} selected {% endif %}>{% if _session.lang == 2 %} {{ country.name_he }} {% else %} {{ country.name }} {% endif %}</option>
                                        {% endfor %}
                                </select>
                                <input name="city" autocomplete="off"  required="required" type="text"   class="form-control  city rtl-right" placeholder="{% trans "city" %}">


                                {% else %}

                                <input name="city" autocomplete="off" required="required" type="text"   class="form-control  city rtl-right" placeholder="{% trans "city" %}">

                                <select data-placeholder="{% trans "country" %}" autocomplete="off" class="chosen-select " id="country" name="country" tabindex="2">   
                                      <!--  <option  value="">{% trans "country" %}</option>-->
                                        {%for country in countries %}
                                        <option value="{{ country.code }}" {% if country.code == "IL" %} selected {% endif %}>{% if _session.lang == 2 %} {{ country.name_he }} {% else %} {{ country.name }} {% endif %}</option>
                                        {% endfor %}
                                </select>

                           
                               {% endif %}
                            </div>

                        
                      

                        <div class="form-group row">
                            <input name="email" id="email" type="email" autocomplete="off" required="required" class="form-control" placeholder="{% trans "email" %} ">
                        </div>
                        
                       

                        {%for input in form.1 %}
                        <div class="form-group row rtl">
                            {% if input.type == 'text' or input.type == 'email' or input.type == 'phone' %}
                                {% if input.primary == 1  %}
                                    <input {% if input.type == 'phone' %} autocomplete="off"  data-mask="(999) 999-9999"  {% endif %} name="main[{{ input.id_question }}]" type="{{ input.type }}" {% if input.required %} required="required" {% endif %} class="form-control" placeholder="{{ input.value }} {% if input.required %} {% endif %}">
                                {% else %}
                                    <input  name="ans[{{ input.id_question }}]" autocomplete="off" type="{{ input.type }}" {% if input.required %} required="required" {% endif %} class="form-control" placeholder="{{ input.value }} {% if input.required %} {% endif %}">
                                {% endif %}
                            {% elseif input.type == 'textarea' %}
                                <textarea maxlength="1000" rows="5" class="form-control" placeholder="{{ input.value }} {% if input.required %} {% endif %}" name="ans_trns[{{ input.id_question }}]" {% if input.required %} required="required" {% endif %}  ></textarea>
                                <h6 class="pull-right count_message text-right w-100" ></h6>
                            {% elseif input.type == 'switch' %}
                            <label " class="col-9 col-form-label mt-1 p-0">{{ input.value }}</label>
                            <div class="col-3" >
                                <input  type="checkbox" checked data-toggle="toggle"   data-on="{% trans "yes" %}" data-off="{% trans "no" %}" data-offstyle="info" ></div>

                                
                                {% elseif input.type == 'rating' %}
                                    <label class="col-6 col-form-label mt-1 p-0">{{ input.value }}</label>
                                    <div class="col-6 text-right">
                                            <div id="starrating_{{ input.id_question }}" class="starrating  risingstar d-flex justify-content-right flex-row-reverse">
                                                <input type="hidden" name="ans[{{ input.id_question }}]" value="3" />
                                                <input type="radio" id="star5_{{ input.id_question }}" name="ans[{{ input.id_question }}]" value="5" /><label for="star5_{{ input.id_question }}"   class="def-str"  title="5 star"></label>
                                                <input type="radio" id="star4_{{ input.id_question }}" name="ans[{{ input.id_question }}]" value="4" /><label for="star4_{{ input.id_question }}"   class="def-str" title="4 star"></label>
                                                <input type="radio"  id="star3_{{ input.id_question }}" name="ans[{{ input.id_question }}]" value="3" /><label for="star3_{{ input.id_question }}"  class="def-str" title="3 star"></label>
                                                <input type="radio" id="star2_{{ input.id_question }}" name="ans[{{ input.id_question }}]" value="2" /><label for="star2_{{ input.id_question }}"   class="def-str" title="2 star"></label>
                                                <input type="radio" checked="checked" id="star1_{{ input.id_question }}" name="ans[{{ input.id_question }}]" value="1" /><label for="star1_{{ input.id_question }}"   class="def-str" title="1 star"></label>
                                            </div>
                                        </div>	
                                {% endif %}

                        </div>
                     

                        {% endfor %}  
                        
                        <div class="form-group row rtl club ">
                            <div class="i-checks "><label> <input type="checkbox" name="register"  id="club"  > <i></i> {% trans "register to club" %}</label></div>

                        </div>
						
                        <div class="form-group row club_details mb-2 rtl">
                            <span id="phone-out" class="error-msg ">{% trans "phone out" %}</span>
                            <span id="err-club-exist" class="error-msg d-none" class="d-none">{% trans "error club exist" %}</span>
                            <div class="form-group col-6 p-0   {%if _session.rtl == "0" %}pr-2 {% endif %}" id="data_1">
                                    <label class="font-normal">{% trans "Birth day" %}</label>
                                    <div class="input-group date">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                        <input type="text"   name="birth_date" id="birth_date" data-mask="99/99/9999"  placeholder="dd/mm/yyyy"  autocomplete="off"  class="form-control" value="">
                                    </div>
                            </div>
							<div class="form-group col-6 p-0">
								<div class="i-checks "><label> <input type="checkbox" name="married"  id="married"  > <i></i> {% trans "I'm married" %}</label></div>

							</div>
							
                            <div class="form-group col-6 p-0   {%if _session.rtl == "1" %}pr-2 {% endif %} " id="data_2">
                                <label class="font-normal">{% trans "Wedding date" %}</label>
                                <div class="input-group date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text"  name="wedding_date"   id="wedding_date" data-mask="99/99/9999" placeholder="dd/mm/yyyy"  autocomplete="off"     class="form-control" value="">
                                </div><!--readonly="true" onkeydown="return false" -->
                            </div>



                        </div>

                         <!--   
                     

                        <h2  class="mb-3  bold mb-3">{% trans "Questionnaire" %}</h2>
                        {%for input in form.0 %}
                        <div class="form-group row rtl">
                            {% if input.type == 'text' or input.type == 'email' or input.type == 'phone' %}
                                {% if input.primary == 1  %}
                                    <input name="main[{{ input.id_question }}]"  autocomplete="off" type="{{ input.type }}" {% if input.required %} required="required" {% endif %} class="form-control" placeholder="{{ input.value }} {% if input.required %} {% endif %}">
                                {% else %}
                                    <input name="ans[{{ input.id_question }}]" autocomplete="off" type="{{ input.type }}" {% if input.required %} required="required" {% endif %} class="form-control" placeholder="{{ input.value }} {% if input.required %} {% endif %}">
                                {% endif %}
                            {% elseif input.type == 'textarea' %}
                                    <textarea maxlength="1000"  rows="5" class="form-control" placeholder="{{ input.value }} {% if input.required %} {% endif %}" name="ans_trns[{{ input.id_question }}]" {% if input.required %} required="required" {% endif %}  ></textarea>
                                    <h6 class="pull-right count_message text-right w-100" id=""></h6>
                            {% elseif input.type == 'paragraph' %}
                            {{ input.value|raw }}
                            {% elseif input.type == 'switch' %}
                            <label  class="col-9 col-form-label mt-1 p-0">{{ input.value }}</label>
                            <div class="col-3" >
                                <input type='hidden' value='0' name='ans[{{ input.id_question }}]'>
                                <input  type="checkbox"  checked data-toggle="toggle" data-on="{% trans "yes" %}" data-off="{% trans "no" %}"  data-offstyle="info" value="1"    name="ans[{{ input.id_question }}]" ></div>
                                
                                {% elseif input.type == 'rating' %}
                                    <label class="col-6 col-form-label mt-1 p-0">{{ input.value }}</label>
                                    <div class="col-6 text-right">
                                        <div id="starrating_{{ input.id_question }}" class="starrating risingstar d-flex justify-content-right flex-row-reverse">
                                            <input type="hidden" name="ans[{{ input.id_question }}]" value="3" />

                                            <input type="radio"  id="star5_{{ input.id_question }}" name="ans[{{ input.id_question }}]" value="5" /><label for="star5_{{ input.id_question }}" title="5 star"></label>
                                            <input type="radio"  id="star4_{{ input.id_question }}" name="ans[{{ input.id_question }}]" value="4" /><label for="star4_{{ input.id_question }}"  title="4 star"></label>
                                            <input type="radio"  id="star3_{{ input.id_question }}" name="ans[{{ input.id_question }}]" value="3" /><label for="star3_{{ input.id_question }}"  class="def-str" title="3 star"></label>
                                            <input type="radio"  id="star2_{{ input.id_question }}" name="ans[{{ input.id_question }}]" value="2" /><label for="star2_{{ input.id_question }}"  class="def-str" title="2 star"></label>
                                            <input type="radio"  id="star1_{{ input.id_question }}" name="ans[{{ input.id_question }}]" value="1" /><label for="star1_{{ input.id_question }}"  class="def-str"  title="1 star"></label>
                                        </div>
                                    </div>	
                        
                                {% endif %}


                                {% if input.type == 'select' %}
                                <label  class="col-9 col-form-label mt-1 p-0 pb-2">{{ input.value }}</label>
                                <select id="type"  class="form-control"   name="ans[{{ input.id_question }}]"  {% if input.required %} required="required" {% endif %} placeholder="{{ input.value }} {% if input.required %} {% endif %}"  >
                                        {% if input.required == 0 %}  <option value="no selected">{% trans "Select Option" %}</option> {% endif %}
                                    {%for key, opt in input.options %}
                                        <option value="{{key}}">{{ opt }} </option>
                                        {% endfor %}
                                </select>
                                {% endif %}
                        </div>
                        {% endfor %}    
                  -->     
                        <button type="submit"   class="btn btn-primary btn-lg btn-block mt-5 mb-5">{% trans "Submit" %}</button>
                    </form>
                </div>
                          
            </div>
        </div>
    </div>

 </div>
 


 <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<script src="templates/js/plugins/toastr/toastr.min.js"></script>

<!-- Input Mask-->
<script src="templates/js/plugins/jasny/jasny-bootstrap.min.js"></script>

<!-- Chosen -->
<script src="templates/js/plugins/chosen/chosen.jquery.js"></script>
<script src="templates/js/intlTelInput.js"></script>
<!--    SM 	--> 
<script src="templates/js/intlTelInput.js"></script>
<script src="templates/js/isValidNumber.js"></script>
<script src="templates/js/jquery.ba-throttle-debounce.js"></script>
<script src="templates/js/plugins/iCheck/icheck.min.js"></script>

   <!-- Data picker -->
   <script src="templates/js/plugins/datapicker/bootstrap-datepicker.js"></script>
   {% if  _session.all_langs[_session.lang].value != "EN"  %}  <script src="templates/js/plugins/datapicker/bootstrap-datepicker.{{ _session.all_langs[_session.lang].value|lower  }}.min.js" charset="UTF-8"></script>
{% endif %}


<script class="iti-load-utils" async src="templates/js/utils.js"></script>

<script>

var mem = $('#birth_date, #wedding_date').datepicker({
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true,
                endDate: "today",
                maxDate: "today",
                format: "dd/mm/yyyy",
                startView: 2,
             {% if  _session.all_langs[_session.lang].value != "EN"  %}  language:'{{ _session.all_langs[_session.lang].value|lower }}',/*'{{ _session.all_langs[_session.lang].code }}',*/ {% endif %}
                
            });


            $("#birth_date, #wedding_date").prop('disabled', true);
			
			

	
	$("#club").change(function() {
		if(this.checked) {
			$("#data_2").hide();
		}
	});
	
	$("#married").change(function() {
		if(this.checked) {
			$("#data_2").show();
		}
		else
			$("#data_2").hide();
	});



      //$(document).off('#data_1 .input-group.date');

    var textPhone =  "{% trans "phone out" %}";
    $( ".club_details" ).hide();
        $(document).ready(function(){

            $(".def-str").hover(function(){
               // $(this).parent().parent().find(".starrating > .def-str ").removeClass("def-str");
             //   $(this).parent().parent().find(".radio ").removeAttr("checked");
           //    var val =  $(this).parent().parent().find(".starrating").attr("id");
             //   var res = val.replace("starrating_","");
                //alert(res);
             //  $("#starrating_"+ res +" #star1_"+res +" ").attr("checked", "checked");
                

          //      $(this).parent().find('.starrating > .def-str').removeClass("def-str");

            });
     
            $(".def-str").click(function(){
                $(this).parent().parent().find(".starrating > .def-str ").removeClass("def-str");
                $(this).parent().parent().find(".radio ").removeAttr("checked");

            });

         $('.chosen-select').chosen({width: "49%"}); 
     
         var text_max = 1000;
         $('.count_message').html( '{% trans "remaining" %} 0/'+text_max);
         
         $('textarea').keyup(function() {
             var text_length = $(this).val().length;
             var text_remaining = text_max - text_length;
             // console.log( $(this).find('h6'));
             $(this).next().html(' {% trans "remaining" %} '+text_length+'/'+text_max );
         });
     
     
     
      $('textarea').bind('input propertychange', function() {
         var text_length = $(this).val().length;
             var text_remaining = text_max - text_length;
             // console.log( $(this).find('h6'));
             $(this).next().html(' {% trans "remaining" %} '+text_length+'/'+text_max);});
     
             $('.i-checks').iCheck({
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green',
                });

     
     });
     $('input').on('ifChanged', function (event) {
     $(event.target).trigger('change'); 
    });

     
   // $('input').on('ifChanged', function (event) { $(event.target).trigger('change'); });

         
     //	SM init
     /*  var input = document.querySelector("#phone");
       window.intlTelInput(input);*/
     
         //	SM to pick your local phone flag
         var input = document.querySelector("#phone"),
         errorMsg = document.querySelector("#error-msg"),
         validMsg = document.querySelector("#valid-msg");

      /*   var iti = window. (input, {
         initialCountry: "auto",
         geoIpLookup: function(callback) {
             $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
             var countryCode = (resp && resp.country) ? resp.country : "";
             callback(countryCode);
             });
         },
         utilsScript: "../../build/js/utils.js" // just for formatting/placeholders etc
     });*/
     
     
     
    var countryData = window.intlTelInputGlobals.getCountryData(),
    input = document.querySelector("#phone");
   //  var iti = countryData;
    for (var i = 0; i < countryData.length; i++) {
    var country = countryData[i];
    country.name = country.name.replace(/.+\((.+)\)/,"$1");
    }

    var iti =  window.intlTelInput(input, {
        utilsScript: "../../build/js/utils.js" // just for formatting/placeholders etc
    });

    iti.setCountry("il");
    iti.setPlaceholderNumberType("FIXED_LINE");
    $("#phone").attr("placeholder","052-123-4567");

    input.addEventListener("countrychange", function() {
        countryData =  iti.getSelectedCountryData();

        if(countryData.dialCode != "972")
        {
            disableClub();
        }
        else{
           enableClub();
        }
  });


  

    

     var input = document.querySelector("#phone"),
       errorMsg = document.querySelector("#error-msg"),
       validMsg = document.querySelector("#valid-msg");
     
     // here, the index maps to the error code returned from getValidationError - see readme
     var errorMap = [ "{% trans "Invalid number" %}", "{% trans "Invalid country code" %}", "{% trans "Too short" %}", "{% trans "Too long" %}", "{% trans "Invalid number" %}"] ;
     
     // initialise plugin
     //var iti = window.intlTelInput(input, {
      // utilsScript: "../../build/js/utils.js?1537727621611"
     //});
     
     var reset = function() {
       input.classList.remove("error");
       errorMsg.innerHTML = "";
       errorMsg.classList.add("hide");
       validMsg.classList.add("hide");
     };
     /*
     // on blur: validate
     input.addEventListener('blur', function() {
       reset();
       if (input.value.trim()) {
         if (iti.isValidNumber()) {
             validMsg.classList.remove("d-none");
         } else {
           input.classList.add("error");
           var errorCode = iti.getValidationError();
           errorMsg.innerHTML = errorMap[errorCode];
           errorMsg.classList.remove("d-none");
         }
       }
     });
     */
     // on keyup / change flag: reset
     input.addEventListener('change', reset);
     input.addEventListener('keyup', reset);
     
     </script>
     



 <style>
    .starrating > input:checked ~label:before{ color: {{ activity.color }} ;}
    .starrating > input:hover  ~label:before{ color: {{ activity.color }}; }
    .form-control:focus, .single-line:focus {border-color:  {{ activity.color }};}
    .btn-primary {color: #fff;background-color: {{ activity.color }};border-color: {{ activity.color }};}
    .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle ,.btn-primary:hover, .btn-primary:focus, .btn-primary.focus{color: #fff;    background-color: {{ activity.color }};    border-color: {{ activity.color }};}
    .pace .pace-progress{ background: {{ activity.color }} !important; }
    .starrating > .def-str:before { content: "\f005" ;    color: {{ activity.color }}  ;} 
    .starrating {cursor: pointer;}
 </style>

<!-- Page-Level Scripts -->


{% endblock %}