{% extends "t_index.twig" %}
  
      

 {% block header_js %}
        <script src="js/bootstrap/bootstrap.js"></script>
        
     <script>
  $(document).ready(function () {
      $( ".dropdown-toggle").unbind( "click" );
   
    
     $("#feedbackSubmit").click(function () {
        
         if( $("#name").val().trim()!='' && $("#email").val().trim()!='' && $("#message").val().trim()!=''){
             
                $('#name_error').css("display","none");
                $('#email_error').css("display","none");
                $('#message_error').css("display","none");
				
				$('#waitSend').modal('show');
                  
                                     $.ajax({
                                             url: "?snhtl=content&page=insertContact",
                                             type: $('#feedback').attr('method'),
                                            
                                             data: $('#feedback').serialize(),
                                             success: function (data) 
                                            {
                                             //alert(data);
                                              if(data=="true"){
                                             $('#waitSend').modal('hide');
                                             $('#contactSuccess').modal('show');
                                             $('#feedback').find("input[type=text],input[type=email], textarea").val("");
                                           }
                                              else   {
											  $('#waitSend').modal('hide');
                                             $('#contactError').modal('show');
                                            }
                                            }
                                         });
                                       
                                  
                
            }
            
            else {
                if($("#name").val().trim()==''){
                 $('#name_error').css("display","block");
            }
            else{
                $('#name_error').css("display","none");
            }
            
              if($("#email").val().trim()==''){
                 $('#email_error').css("display","block");
            }
             else{
                $('#email_error').css("display","none");
            }
               if($("#message").val().trim()==''){
                 $('#message_error').css("display","block");
            }
            
             else{
                $('#message_error').css("display","none");
            }
              
        }
       
    });
    
    
 });
    </script>
 {% endblock %}

{% block right_side %}

<div class="col-sm-8 " style="padding-top:15px;">
                 
                    
                    <div class="row max_head" style="margin: 0;">
                     
                     <div class="head_title" style="font-weight: bold; padding: 10px;">
                        <p style="z-index: 10;">
اتّصل بنا

                        </p>
                     </div>
                    
                </div>
                    
                    
               
                    
                     <div  class="row col-sm-12 " style="margin-left: 15px; padding-left: 0px; padding-right: 30px; padding-top: 0px;">
                         
                         
                         
                         
                 <div  class="row p_container">
                     
          <form data-disable="false" data-toggle="validator" method="post" id="feedback" name="feedback"  role="form">
           <div class="row">
            <div class="form-group col-sm-7">
                <label for="name" class="control-label">الاسم: <span style="color:red;">*</span>  </label>
              <div class="input-group">
                <input type="text" required="" placeholder="أدخل اسمك" name="name" id="name" class="form-control">
                <span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span>
              </div>
              <span id="name_error" style="display: none;color: red;" class="help-block">أدخل اسمك من فضلك  </span>
            </div>
          </div>
           <div class="row">
            <div class="form-group col-sm-7">
              <label for="email" class="control-label">بريدك الإلكتروني: <span style="color:red;">*</span>  </label>
              <div class="input-group">
                <input type="email" required="" placeholder="أدخل بريدك الالكتروني" name="email" id="email" class="form-control">
                <span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span>
              </div>
              <span id="email_error" style="display: none;color: red;" class="help-block">أدخل بريدك الالكتروني من فضلك</span>
            </div>
            </div>
             <div class="form-group">
              <label for="subject" class="control-label">الموضوع</label>
              <!--div class="input-group">
                <input type="text" placeholder="الموضوع" name="subject" id="subject" class="form-control">
                <span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span>
              </div-->
			  
			  <div class="input-group"  >
                <select name="subject" id="subject" class="form-control" >
                    <option value="سؤال">سؤال</option>
                   <option value="طلب">طلب</option>
                   <option value="إستفسار">إستفسار</option>
                   <option value="إقتراح">إقتراح</option>
				   <option value="شكر">شكر</option>
               </select> 
              </div>
			  
              
            </div>
            
            
            <div class="form-group">
              <label for="message" class="control-label">رسالتك: <span style="color:red;">*</span>  </label>
              <div class="input-group">
                <textarea required="" placeholder="أدخل رسالتك" name="message" id="message" class="form-control" cols="100" rows="5"></textarea>
                <span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span>
              </div>
              <span id="message_error" style="display: none;color: red;" class="help-block">أدخل رسالتك من فضلك</span>
            </div>
            
            <!--div class="form-group">                             
                <img id="contact_captcha" alt="CAPTCHA Image" >
                <a id="reload_contact_captcha" class="btn btn-info btn-sm"  href="#">تجديد</a>
                <br>
                <div class="form-group has-feedback" style="margin-top: 10px;">
                    <label class="control-label" for="contact_captcha_code">ادخل الرمز الذي في الصورة : <span style="color:red;">*</span></label>
                    <input required="" name="contact_captcha_code" id="contact_captcha_code" class="form-control input-sm" type="text" placeholder="ادخل الرمز اللذي في الصورة" name="captcha_code">
                    <span id="code_error" style='color:red;display: none;' class="">الرمز الذي ادخلته خاطئ</span>
                     <span id="captcha_error" style="display: none;color: red;" class="help-block">أدخل الرمز الذي في الصورة من فضلك.</span>
                </div>
            </div-->
             <a style="width: 104px; height: 34px;" type="submit" id="feedbackSubmit" class="btn btn-primary" data-loading-text="ارسال..."><i class="fa fa-envelope"> </i>  إرسال</a>
             
         </form>
          
          
          
         <div class="modal fade" id="contactSuccess">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                                </div>
                                <div class="modal-body">
                                    <p><span style="color:lightgreen;font-size: 20px;" class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span> تمّ الإرسال</p>   <p>شكرا على التواصل</p>
                                </div>
                                   <div style="padding:15px;"> <button type="button" class=" btn btn-primary" data-dismiss="modal" aria-label="Close"><i class="fa fa-close"> </i> إغلاق</button> </div>
   
                            </div><!-- /.modal-content -->
							
						
                        </div><!-- /.modal-dialog -->
                    </div>
					
					
					 <div id="waitSend" class="modal fade">
                        <div class="modal-dialog">
                            <div class="modal-content" style="width: 316px;">
                               
                                <div class="modal-body" style="height: 144px; width: 256px; margin-right: 98px; padding-right: 20px;">
                                    <p>     جار الإرسال...   </p>
									
									<div style="height:80px;background-image: url(../images/wait.gif); 	background-size: 70px 70px;	background-repeat: no-repeat; " class="col-md-4">
									
									</div>
                                </div>

                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div>
					
                     
                     
                       <div class="modal fade" id="contactError">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                                </div>
                                <div class="modal-body">
                                    <p><span style="color:red;font-size: 20px;" class="glyphicon glyphicon-unchecked" aria-hidden="true"></span>    خطأ في الارسال, يرجى اعادة المحاولة</p>
                                </div>

                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div>
                     
                   
                  
              
                </div>
                     
                      
              
                
                    
                </div>
                    
              
                 
                   
                   
                    
                  
                    
                     
                    
                    
                </div>
    
{% endblock %}