<div class="page-margin">
   <div class="row">
      <div class="col-md-8">
         <div class="wowonder-well">
            <h4><?php echo $wo['lang']['result'];?></h4>
            <hr>
            <div class="users-result-list">
               <?php
               $not_found = '<h4 class="search-filter-center-text"><i class="fa fa-exclamation-circle"></i> ' . $wo["lang"]["no_result"] . '</h4>';
               if (isset($_GET['query'])) {
                   $search_query = Wo_GetSearchFilter($_GET);
                   if (count($search_query) != 0) {
                       foreach ($search_query as $wo['result']) {
                           echo Wo_LoadPage('search/result');
                       }
                   } else {
                       echo $not_found;
                   }
               }
               ?>  
            </div>
            <div class="clear"></div>
         </div>
      </div>
      <div class="col-md-4">
         <form action="#" method="post" class="search-filter-form wowonder-well">
            <div class="form-group inner-addon <?php echo Wo_RightToLeft('left-addon');?> search-filter-progress-icon">
               <i class="glyphicon fa fa-search progress-icon" data-icon="fa-search"></i>
               <input type="text" name="query" id="query" class="form-control" placeholder="<?php echo $wo['lang']['search_for_users'];?>" value="<?php echo (isset($_GET['query'])) ? $_GET['query']: '';?>" autocomplete="off">
            </div>
            <hr>
            <h5><i class="fa fa-globe"></i> <?php echo $wo['lang']['country'];?></h5>
            <div class="form-group">
               <select name="country" id="country" class="form-control">
                  <option value="all" selected><?php echo $wo['lang']['all'];?></option>
                  <?php foreach ($wo['countries_name'] as $country_ids => $country) { ?>
                  <option value="<?php echo $country_ids;?>"><?php echo $country;?></option>
                  <?php } ?>
               </select>
            </div>
            <hr>
            <h5> <i class="fa fa-info-circle"></i> <?php echo $wo['lang']['status'];?></h5>
            <div class="form-group inner-addon  <?php echo Wo_RightToLeft('left-addon');?> ">
               <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-default active">
                  <input type="radio" name="status" value="all" checked/>
                  <i class="fa fa-eye"></i> <?php echo $wo['lang']['all'];?>
                  </label>
                  <label class="btn btn-default">
                  <input type="radio" name="status" value="on"/>
                  <i class="fa fa-eye"></i> <?php echo $wo['lang']['online'];?>
                  </label> 
                  <label class="btn btn-default">
                  <input type="radio" name="status" value="off" />
                  <i class="fa fa-eye-slash"></i> <?php echo $wo['lang']['offline'];?>
                  </label>
               </div>
            </div>
            <hr>
            <h5> <i class="fa fa-transgender"></i> <?php echo $wo['lang']['gender'];?></h5>
            <div class="form-group inner-addon <?php echo Wo_RightToLeft('left-addon');?> ">
               <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-default active">
                  <input type="radio" name="gender" value="all" checked />
                  <i class="fa fa-users"></i> <?php echo $wo['lang']['all'];?>
                  </label>
                  <label class="btn btn-default">
                  <input type="radio" name="gender" value="female"/>
                  <i class="fa fa-female"></i> <?php echo $wo['lang']['female'];?>
                  </label> 
                  <label class="btn btn-default">
                  <input type="radio" name="gender" value="male" />
                  <i class="fa fa-male"></i> <?php echo $wo['lang']['male'];?>
                  </label> 
               </div>
            </div>
            <hr>
            <h5> <i class="fa fa-picture-o"></i> <?php echo $wo['lang']['profile_picture'];?></h5>
            <div class="form-group inner-addon <?php echo Wo_RightToLeft('left-addon');?>">
               <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-default active">
                  <input type="radio" name="image" value="all" checked/>
                  <i class="fa fa-picture-o"></i> <?php echo $wo['lang']['all'];?>
                  </label>
                  <label class="btn btn-default ">
                  <input type="radio" name="image" value="yes"/>
                  <i class="fa fa-check"></i> <?php echo $wo['lang']['yes'];?>
                  </label> 
                  <label class="btn btn-default">
                  <input type="radio" name="image" value="no" />
                  <i class="fa fa-minus-circle"></i> <?php echo $wo['lang']['no'];?>
                  </label>
               </div>
            </div>
         </form>
      </div>
   </div>
</div>
<script type="text/javascript">
$(function () {
  var searchForm = $('form.search-filter-form');
  $('form.search-filter-form #query').keyup(function () {
    searchForm.submit();
  });
  $('input:radio').change(function () {
    searchForm.submit();
  });
  $('#country').change(function () {
    searchForm.submit();
  });

  searchForm.ajaxForm({
    url: Wo_Ajax_Requests_File() + '?f=get_search_filter',
    beforeSend: function () {
      Wo_progressIconLoader(searchForm.find('.search-filter-progress-icon'));
    },
    success: function (data) {
      if(data.status == 200) {
        if(data.html.length != 0) {
          $('.users-result-list').hide().html(data.html).fadeIn(200);
        } else {
          $('.users-result-list').hide().html('<?php echo $not_found;?>').fadeIn(200);
        }
      }
      Wo_progressIconLoader(searchForm.find('.search-filter-progress-icon'));
    }
  });
});
</script>