<!doctype html>
<html>


<head>

<meta charset="UTF-8">
<title>CIB - Complaint Form EN</title>

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link href="css/main.css" rel="stylesheet" type="text/css" >
<link href="css/dd.css" rel="stylesheet" type="text/css" >

<script src="js/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="js/jquery.dd.js"></script>
<script src="../js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../css/validationEngine.jquery.css" type="text/css"/>
<style>
@import url(css/font/en/helveticaneue.css);
@import url(css/font/ar/hb/helveticaneueltarabic-bold.css);
@import url(css/font/ar/hl/helveticaneueltarabic-light.css);
body{font-family:'HelveticaNeueRegular';direction:rtl;}

</style>



    <script type="text/javascript">
	
	$(document).ready(function(e) {
	$( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "fadeIn",
        duration: 200
      },
      hide: {
        effect: "fadeOut",
        duration: 200
      }
    });
	$("#tech").msDropdown({childWidth:"250px", enableCheckbox:true});
	$("#tech2").msDropdown({childWidth:"250px", enableCheckbox:true});
	$("#formEn").validationEngine('attach', {promptPosition : "bottomLeft", scroll: false});
	$('#submitBtn').click(function(e){
         e.preventDefault();

         //if invalid do nothing
         if(!$("#formEn").validationEngine('validate')){
         	return false;
          }

         
	      var dataString = $("#formEn").serialize();
	      
	     
$.ajax({
	        type: "POST",
	        url: "sendmail_ar.php",
	        data: dataString,
	        success: function (msg) {
	          	if(msg == 1){
		          	$( "#dialog" ).dialog( "open" );
	          	}
	          }
	      });

	      return false;
	    })
$(".checkbox2-span").click(function(){
			 $(".checkbox2-span").addClass("checked");
			 $(".checkbox2-span").css({"color" : "#f58220","font-size" : "24px"});
			 $(".checkbox3-span").css({"color" : "#fcfcfc","font-size" : "14px"});
			 $("#check_2").prop("checked", true);
			 $('.account_number').hide();
			
			})
			
			
			$(".checkbox3-span").click(function(){
			 $(".checkbox3-span").addClass("checked");
			 $(".checkbox3-span").css({"color" : "#f58220","font-size" : "24px"});
			$(".checkbox2-span").css({"color" : "#fcfcfc","font-size" : "14px"});
			$("#check_1").prop("checked", true);
			$('.account_number').show();
			})
	
	});

    </script>

</head>

<body>

<div class="container">

      <div class="form-cont">
        <div class="header">
         <h1>دعنا نسمع صوتك !</h1>
         <p><span class="orange">*</span>هذة الخانات مطلوبة</p>
         
        </div>
        <div class="lang"><a href="../">English</a></div>
        <div class="clearfix"></div>
        <form id="formEn">
        
        <div class="elements">
        <div class="label-cont"> <label>الاسم<span class="orange">*</span></label></div><input type="text" name="name" class="single validate[required]" required="required" data-errormessage-value-missing="رجاء إدخال البيانات">
        </div>
        
        <div class="elements">
        <div class="label-cont"> <label>رقم المحمول<span class="orange">*</span></label></div><input type="text" class="single validate[required,custom[phone]]" name="mobile" required="required" data-errormessage-value-missing="رجاء إدخال البيانات" data-errormessage-custom-error="رقم التليفون غير سليم">        </div>
        
        
        <div class="elements">
         <div class="label-cont"> <label>البريد الإلكترونى<span class="orange">*</span></label></div><input type="text" class="single validate[required,custom[email]]" name="email" required="required" data-errormessage-value-missing="رجاء إدخال البيانات" data-errormessage-custom-error="البريد الإلكتروني غير سليم">
        </div>
        
        <div class="elements">
         <div class="label-cont odd"> <label>عميل حالى<span class="orange">*</span></label></div>
         
         <div class="checkbox-cont">
         <div class="check-cont">
         <input type="radio" class="checkbox3" id="check_1" name="client" value="نعم"/>
         <label for="check_1"><span class="checkbox3-span">✓</span> <p class="light">نعم</p></label>
         </div>
         
          <div class="check-cont check-last">
         <input type="radio" class="checkbox2" id="check_2" name="client" value="لا" checked="checked"/>
         <label for="check_2"><span class="checkbox2-span">✓</span> <p class="light">لا</p></label>
         </div>
        <div class="clearfix"></div>
      </div>
      
      <div class="clearfix"></div>
         <div class="elements account_number" style="display: none;">
         <div class="label-cont" style="width: 150px"> <label>رقم الحساب</label></div><input type="text" class="single validate[required,custom[onlyNumberSp]]" name="account" style="width: 287px;">
        </div>
        </div>
        <div class="clearfix"></div>
        <div class="radio-cont">
        <div class="radio-btn">
        <input type="radio" name="feedbackType"  checked="checked" value="استفسار">
        <label><span class="light-label">استفسار</span></label>
       </div>
       <div class="radio-btn">
        <input type="radio" name="feedbackType" value="اقتراح">
        <label><span class="light-label">اقتراح</span></label>
       </div>
       <div class="radio-btn">
        <input type="radio" name="feedbackType" value="شكوى">
        <label><span class="light-label">شكوى</span></label>
       </div>
       <div class="clearfix"></div>
        </div>
       <div class="dropdown-cont">
           <label><h2>المنتج / الخدمة</h2><span class="italic"><p>يمكنك اختيار اكثر من خيار</p></span></label>
           <div class="short-select">
      
      
       <select style="width:220px" class="tech2" name="product" id="tech2" data-enablecheckbox="true">
      <option value="">الخيارات</option>
      <option value="حسابات">حسابات</option>
      <option value="ودائع">ودائع</option>
      <option value="بطاقات ائتمان">بطاقات ائتمان</option>
      <option value="بطاقات صراف آلي (مدينة)">بطاقات صراف آلي (مدينة)</option>
      <option value="البطاقات المدفوعة مقدمًا">البطاقات المدفوعة مقدمًا</option>
      <option value="قرض شخصي">قرض شخصي</option>
      <option value="قرض سيارة">قرض سيارة</option>
      <option value="تمويل عقاري">تمويل عقاري</option>
      <option value="سحب على المكشوف">سحب على المكشوف</option>
      <option value="صناديق الاستثمار">صناديق الاستثمار </option>
      <option value="خدمات التأمين">خدمات التأمين </option>
      <option value="تحويلات مالية">تحويلات مالية </option>
      <option value="تحويل عملة">تحويل عملة </option>
      <option value="خدمة Wealth">خدمة Wealth</option>
      <option value="خدمة Plus">خدمة Plus </option>
      <option value="خدمة Business Banking">خدمة Business Banking</option>
      <option value="خدمة تحويل المرتبات"> خدمة تحويل المرتبات </option>
      <option value="شيكات">شيكات </option>
      <option value="شيكات مقبولة الدفع">شيكات مقبولة الدفع </option>
      <option value="خدمة التبرع">خدمة التبرع </option>
      <option value="خدمة دفع الفواتير">خدمة دفع الفواتير </option>
      <option value="خدمات الدفع الإلكتروني للضرائب والجمارك">خدمات الدفع الإلكتروني للضرائب والجمارك </option>
      <option value="كشوفات الحساب">كشوفات الحساب </option>
      <option value="الخزنة الحديدية"> الخزنة الحديدية </option>
      <option value="أخرى">أخرى </option>
     
      
    </select>
           </div>
           
           
           
           
           
           
           
          
    
    
        <div class="clearfix"></div>
       </div>
        
        
        
        
        
               <div class="dropdown-cont2">
           <label><h2>القناة</h2><span class="italic"><p>يمكنك اختيار اكثر من خيار</p></span></label>
           <div class="short-select">
       <select style="width:220px" class="tech" name="channel" id="tech" data-enablecheckbox="true">
      <option value="">الخيارات</option>
      <option value="الحسابات">الحسابات</option>
      <option value="فروع">فروع</option>
      <option value="مركز خدمة العملاء">مركز خدمة العملاء</option>
      <option value="فريق البيع عبر الهاتف" >فريق البيع عبر الهاتف</option>
      <option value="ماكينات الصراف الآلي">ماكينات الصراف الآلي</option>
      <option value="خدمة الإنترنت البنكية">خدمة الإنترنت البنكية</option>
      <option value="الخدمة الهاتفية البنكية">الخدمة الهاتفية البنكية</option>
      <option value="نقاط البيع الإلكترونية">نقاط البيع الإلكترونية</option>
      <option value="صفحات التواصل الاجتماعي">صفحات التواصل الاجتماعي</option>
      <option value="أخرى">أخرى</option>
      
    </select>
           </div>
           
           
           
           
           
           
           
          
    
    
        <div class="clearfix"></div>
       </div>
       <div class="text-input">
           <label>
           تفاصيل<span class="orange">*</span><br/>
           <span class="italic"><p>الرجاء عدم ذكر أي من البيانات الخاصة بحساباتك البنكية مثل رقم الحساب في هذه الاستمارة</p></span>
           </label>
           <div class="textarea-cont">
          <textarea name="details" required="required" class="validate[required]"  data-errormessage-value-missing="رجاء إدخال البيانات"></textarea>
          </div>
          <div class="clearfix"></div>
       </div>
       
       
       <div class="btn-container"><a href="#" id="submitBtn">إرسال</a></div>
        </form>
      
      
        
      </div><!--end of form cont-->


     <div class="image"><img src="img/girl_03.png"></div>
</div><!--container-->
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId  : '631675573547987',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });
    
    FB.Canvas.setSize({ width: 810, height: 1300 });
  };

  (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());
  
  $(document).ready(function(e) {
            
  });
</script>
<div id="dialog" title="تم إرسال الرسالة">
  <p>عميلنا العزيز، تم استلام رسالتك وسنعمل على الاتصال بك خلال ال24 ساعة القادمة</p>
</div>
</body>
</html>

<?php 

?>