<?php include ('header.php'); ?>


<style type="text/css">
 .modal-dialog
 {
  top: 0%;
 }
</style>

<section id="career"> 
     <div class="container-fluid pb-80">
            <div class="section-title text-center">
          <div class="row">
            <div class="text-center col-sm-8 col-sm-offset-2 wow fadeInUp" data-wow-duration="1200ms" data-wow-delay="300ms" style="visibility: visible; animation-duration: 1200ms; animation-delay: 300ms; animation-name: fadeInUp;">
              <h3 class="text-uppercase mt-0"> Career  <span class="text-theme-colored font-weight-400"></span> </h3>
              <div class="title-icon">
                <i class="flaticon-charity-hand-holding-a-heart"></i>
              </div>
              
            </div>
          </div>
        </div>
 
      <div class="container pb-50">

      <?php 

      if(!empty($careers)){
	$i=1;
        foreach ($careers as $row) {
          
       

      ?>
        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="col-xs-12 bx-shadow brdr no-padding">

                <h3 class="text-center btn-dark m0 btn-theme-colored fsize"><?php echo $row['position']; ?></h3>
                <div class="addminheight" style="height: 200px; overflow: auto;">
                <div class="col-md-12" style="padding: 0px; padding-left:1%; padding-right:1%;">
                <div class="col-md-5 col-sm-5 col-xs-5" style="padding: 0px;"><b>Position:  </b></div>
                <div class="col-md-7 col-sm-7 col-xs-7" style="padding: 0px;"><?php echo $row['position']; ?></div>
                </div>
                
                <div class="col-md-12" style="padding: 0px;  padding-left:1%; padding-right:1%;">
                <div class="col-md-5 col-sm-5 col-xs-5" style="padding: 0px;"><b>Vacancies: </b></div>
                 <div class="col-md-7 col-sm-7 col-xs-7" style="padding: 0px;"><?php echo $row['vacancy']; ?></div>
                 </div>
                
                <div class="col-md-12" style="padding: 0px;  padding-left:1%; padding-right:1%;">
                <div class="col-md-5 col-sm-5 col-xs-5" style="padding: 0px;"><b>Program Project: </b></div>
                <div class="col-md-7 col-sm-7 col-xs-7" style="padding: 0px;"><?php echo $row['project']; ?></div>
                </div>
                
                <div class="col-md-12" style="padding: 0px;  padding-left:1%; padding-right:1%;">
                <div class="col-md-5 col-sm-5 col-xs-5" style="padding: 0px;"><b>Location: </b></div>
                <div class="col-md-7 col-sm-7 col-xs-7" style="padding: 0px;"><?php echo $row['location']; ?></div>
                </div>
                
                <div class="col-md-12" style="padding: 0px;  padding-left:1%; padding-right:1%;">
                <div class="col-md-5 col-sm-5 col-xs-5" style="padding: 0px;"><b>Qualification: </b></div>
                <div class="col-md-7 col-sm-7 col-xs-7" style="padding: 0px;"><?php echo $row['qualification']; ?></div>
                </div>
                
          </div>         
      <div class="center"><button data-custom-value="<?php echo $row['c_id']; ?>" class="careers_form_open btn btn-block btn-dark btn-theme-colored  mt-20 pt-10 pb-10 btn btn-primary center-block fsize">Apply now</button></div>

       
                </div>

        </div>


       <?php 
	$i++;
        }
       } 

       ?>   

        
        <div class="col-md-6 col-sm-6 col-xs-12">
            
             
        </div>

              


      </div><!--end of container -->
      </div><!--end of container-fluid -->
      </section>


      <!-- line modal -->



<!-- line modal -->
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
      <h3 class="modal-title" id="lineModalLabel">Career form </h3>
    </div>
    <div class="modal-body">
      
            <!-- content goes here -->
      <form id="job_apply_form" class="bg-light p-30 pb-15" name="job_apply_form" action="<?php echo base_url()."career/apply" ?>" method="post" enctype="multipart/form-data" novalidate="novalidate">
      <input type="hidden" name="cid" id="carid">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label>Name <small>*</small></label>
                      <input name="c_name" id="c_name" type="text" placeholder="Enter Name" required="" class="form-control" aria-required="true">
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label>Email <small>*</small></label>
                      <input name="c_email" id="c_email" class="form-control required email" type="email" placeholder="Enter Email" aria-required="true">
                    </div>
                  </div>
                </div>
                <div class="row">               
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label for="form_sex">Gender <small>*</small></label>
                      <select id="c_sex" name="c_sex" class="form-control required valid" aria-required="true" aria-invalid="false">
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                      </select>
                    </div>
                  </div>
                  
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label>Mobile no. <small>*</small></label>
                      <input name="c_mobile" id="c_mobile" type="number" placeholder="Enter mobile" required="" class="form-control" aria-required="true">
                    </div>
                  </div>

                </div>
                <div class="form-group">
                  <label>Message <small>*</small></label>
                  <textarea id="c_message" name="c_message" class="form-control required" rows="5" placeholder="Your cover letter/message sent to the employer" aria-required="true"></textarea>
                </div>
              
                  <div class="form-group">
                  <label for="form_attachment">C/V Upload</label>
                  <input id="c_cv" name="c_cv" class="file" type="file" multiple="" data-show-upload="false" data-show-caption="true">
                  <small>Maximum upload file size: 12 MB</small>
                </div>
                <div class="form-group">
                  <input name="form_botcheck" class="form-control" type="hidden" value="">
                  <button type="button" id="career_btn" class=" text-center btn btn-block btn-dark btn-theme-colored  mt-20 pt-10 pb-10" data-loading-text="Please wait...">Apply Now</button>
                </div>
              </form>

    </div>
    
  </div>
  </div>
</div>


<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" style="text-align: center;">SVYM</h4>
      </div>
      <div class="modal-body">
        <p>We appreciate your interest in joining our team. Thank you for submitting your CV. We will get back to you shortly.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

<script>

$(document).ready(function(){

  <?php if ($send==1){?>
  
  $('#myModal').modal("show");  

  <?php } ?>

   $(document).on('click', '.careers_form_open', function() {
    
    var getid = $(this).data("custom-value");
    $('#carid').val(getid);
    $('#squarespaceModal').modal("show");
   
              
});



   $(document).on('click', '#career_btn', function() {
 
  
   var name=$("#c_name").val();
   var phone=$("#c_mobile").val();
   var mail=$("#c_email").val();
   var gender=$("#c_sex").val();
   var message=$("#c_message").val();

   var cv = $("#c_cv").val();

  if(name.length<5){
    alert("Enter valid name");
  }else   if(mail.length<15){
  alert("Enetr your valid email");
  }else if(!isValidEmailAddress(mail)){
  alert("Enetr your valid email");
  }else if(phone.length<10){

    alert("Enetr your valid mobile number");
  }else if(gender.length==0){

    alert("Select your gender");
  }else if(cv.length==0) {

  alert("Upload your CV");

  }else if(check_file("c_cv")==0){

 document.getElementById("job_apply_form").submit();

}
   
   
              
});

   function check_file(id) {
   
   var fileextesion = get_extension($('#'+id).val());
    if(!($('#'+id)[0].files[0].size <= (104858*12) && fileextesion == 'doc' || fileextesion == 'pdf' || fileextesion == 'docx' || fileextesion == 'DOC' || fileextesion == 'DOCX' )) { // 10 MB (this size is in bytes)
        //Prevent default and display error
        alert("Please make sure your file is in pdf or doc or docx format and less than 12 MB");
    }else{
      return 0;
    }
}


function get_extension(filename) {
    return filename.split('.').pop().toLowerCase();
}

function isValidEmailAddress(emailAddress) {
    var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
    return pattern.test(emailAddress);
}






});
</script>

<!-- modal box-->

<?php include('footer.php');?>