<div class="tab-container">
   <form  method="post" class="form-horizontal setting-profile-form" enctype="multipart/form-data">
      <fieldset>
         <!-- Form Name -->
         <legend><i class="fa fa-cog"></i> <?php echo $wo['lang']['profile_setting']; ?> <?php if(Wo_IsAdmin($wo['user']['user_id']) === true) { ?><small><a href="<?php echo Wo_SeoLink('index.php?tab1=timeline&u=' . $wo['setting']['username']);?>">(<?php echo $wo['setting']['name'];?>)</a></small><?php } ?></legend>
         <div class="setting-profile-alert setting-update-alert"></div>
         <!-- Text input-->
         <div class="form-group">
            <label class="col-md-2" for="first_name"><?php echo $wo['lang']['first_name']; ?></label>  
            <div class="col-md-6">
               <input id="first_name" name="first_name" type="text" class="form-control input-md" value="<?php echo $wo['setting']['first_name'];?>">
            </div>
         </div>
         <!-- Text input-->
         <div class="form-group">
            <label class="col-md-2" for="last_name"><?php echo $wo['lang']['last_name']; ?></label>  
            <div class="col-md-6">
               <input id="last_name" name="last_name" type="text" class="form-control input-md" value="<?php echo $wo['setting']['last_name'];?>">
            </div>
         </div>
         
         <!-- Textarea -->
         <div class="form-group">
            <label class="col-md-2" for="about"><?php echo $wo['lang']['about_me']; ?></label>
            <div class="col-md-6">             
               <textarea class="form-control" id="about" name="about" cols="20" rows="3"><?php echo $wo['setting']['about'];?></textarea>
            </div>
         </div>
         <!-- Text input-->
         <div class="form-group">
            <label class="col-md-2" for="address"><?php echo $wo['lang']['location']; ?></label>  
            <div class="col-md-6">
               <input id="address" name="address" type="text" class="form-control input-md" value="<?php echo $wo['setting']['address'];?>">
            </div>
         </div>
         <!-- Text input-->
         <div class="form-group">
            <label class="col-md-2" for="working"><?php echo $wo['lang']['working_at']; ?></label>  
            <div class="col-md-3">
               <input id="working" name="working" type="text" class="form-control input-md" value="<?php echo $wo['setting']['working'];?>">
               <span class="help-block">(e.g Apple)</span>
            </div>
            <div class="col-lg-3">
               <input id="working_link" name="working_link" type="text" class="form-control input-md" value="<?php echo $wo['setting']['working_link'];?>">
               <span class="help-block"><?php echo $wo['lang']['company_website']; ?></span>
            </div>
         </div>
         
         <!-- Select Basic -->
         <div class="form-group">
            <label class="col-md-2" for="relationship"><?php echo $wo['lang']['relationship']; ?></label>
            <div class="col-md-6">
               <select id="relationship" name="relationship" class="form-control">
                  <option value="0"><?php echo $wo['lang']['none']; ?></option>
                  <?php 
                  foreach ($wo['relationship'] as $relationship_ids => $relationship) { 
                    $relationship_id = $wo['setting']['relationship_id'];
                    $selected_relationship = ($relationship_ids == $relationship_id) ? ' selected' : '' ;
                  ?>
                  <option value="<?php echo $relationship_ids;?>" <?php echo $selected_relationship;?> ><?php echo $relationship;?></option>
                  <?php } ?>
               </select>
            </div>
         </div>
         <br>
          <!-- Text input-->
         <div class="form-group">
            <label class="col-md-2" for="avatar"><?php echo $wo['lang']['avatar']; ?></label>  
            <div class="col-md-6">
               <input id="avatar" name="avatar" type="file" accept="image/x-png, image/jpeg" class="form-control input-md btn  btn-file">  
            </div>
         </div>
         <!-- Text input-->
         <div class="form-group">
            <label class="col-md-2" for="cover"><?php echo $wo['lang']['cover']; ?></label>  
            <div class="col-md-6">
               <input id="cover" name="cover" type="file" accept="image/x-png, image/jpeg" class="form-control input-md btn  btn-file">  
            </div>
         </div>
          <!-- Text input-->
         <div class="form-group">
            <label class="col-md-2" for="background_image"><?php echo $wo['lang']['background']; ?></label>  
            <div class="col-md-6">
               <input id="background_image" name="background_image" type="file" accept="image/x-png, image/jpeg" class="form-control input-md btn  btn-file">
               
            </div>
         </div>
         <?php if (!empty($wo['setting']['background_image'])) { ?>
         <div class="form-group">
            <?php 
            $selected_my_background   = ($wo['setting']['background_image_status'] == '1')   ? ' checked' : '';
            $selected_defualt_background = ($wo['setting']['background_image_status'] == '0')   ? ' checked' : '';
            ?>
            <label class="col-md-2" for="background_image_status"><?php echo $wo['lang']['theme']; ?></label>
            <div class="col-md-5"> 
               <label class="radio-inline" for="background_image_status-0">
               <input type="radio" name="background_image_status" id="background_image_status-0" value="defualt" <?php echo $selected_defualt_background; ?>>
               <?php echo $wo['lang']['deafult']; ?>
               </label> 
               <label class="radio-inline" for="background_image_status-1">
               <input type="radio" name="background_image_status" id="background_image_status-1" value="my_background" <?php echo $selected_my_background; ?>>
               <?php echo $wo['lang']['my_background']; ?>
               </label>
            </div>
         </div>
         <?php }?>
         <br>
         <!-- Text input-->
         <div class="form-group">
            <label class="col-md-2" for="website"><?php echo $wo['lang']['website']; ?></label>  
            <div class="col-md-6">
               <input id="website" name="website" type="text" class="form-control input-md" value="<?php echo $wo['setting']['website'];?>">
               <span class="help-block"><?php echo $wo['lang']['site_eg'];?></span>
            </div>
         </div>
          <!-- Text input-->
         <div class="form-group">
            <label class="col-md-2" for="facebook"><i class="fa fa-facebook-official fa-2x" style="color:#395B9A"></i> </label>  
            <div class="col-md-6">
               <input id="facebook" name="facebook" type="text" class="form-control input-md" value="<?php echo $wo['setting']['facebook'];?>" placeholder="<?php echo $wo['lang']['username'];?>">
            </div>
         </div>
         <!-- Text input-->
         <div class="form-group">
            <label class="col-md-2" for="twitter"><i class="fa fa-twitter fa-2x" style="color:#659FCB"></i></label>  
            <div class="col-md-6">
               <input id="twitter" name="twitter" type="text" class="form-control input-md" value="<?php echo $wo['setting']['twitter'];?>" placeholder="<?php echo $wo['lang']['username'];?>">
            </div>
         </div>
         <!-- Text input-->
         <div class="form-group">
            <label class="col-md-2" for="google"><i class="fa fa-google-plus fa-2x" style="color:#DC493C"></i></label>
            <div class="col-md-6">
               <input id="google" name="google" type="text" class="form-control input-md" value="<?php echo $wo['setting']['google'];?>" placeholder="<?php echo $wo['lang']['username'];?>">
            </div>
         </div>
         <!-- Text input-->
         <div class="form-group">
            <label class="col-md-2" for="vk"><i class="fa fa-vk fa-2x" style="color:#4C75A3"></i></label>
            <div class="col-md-6">
               <input id="google" name="vk" type="text" class="form-control input-md" value="<?php echo $wo['setting']['vk'];?>" placeholder="<?php echo $wo['lang']['username'];?>">
            </div>
         </div>
         <!-- Text input-->
         <div class="form-group">
            <label class="col-md-2" for="linkedin"><i class="fa fa-linkedin fa-2x" style="color:#0177B5"></i></label>  
            <div class="col-md-6">
               <input id="linkedin" name="linkedin" type="text" class="form-control input-md" value="<?php echo $wo['setting']['linkedin'];?>" placeholder="<?php echo $wo['lang']['username'];?>"> 
            </div>
         </div>
         <div class="form-group">
            <label class="col-md-2"></label>  
            <div class="col-sm-4 text-left">
               <button type="submit" name="save_setting" id="save-setting" tabindex="4" value="Save" class="form-control btn-main-color btn-main">
               <i class="fa fa-floppy-o progress-icon" data-icon="floppy-o"></i> <?php echo $wo['lang']['save']; ?>
               </button>
            </div>
         </div>
         <input type="hidden" name="user_id" id="user-id" value="<?php echo $wo['setting']['user_id'];?>">
      </fieldset>
   </form>
</div>
<script type="text/javascript">
$(function() {
  $('form.setting-profile-form').ajaxForm({
    url: Wo_Ajax_Requests_File() + '?f=update_profile_setting',
    beforeSend: function() {
      Wo_progressIconLoader($('form.setting-profile-form').find('button'));
    },
    success: function(data) {
      if (data.status == 200) {
        <?php if($wo['user']['user_id'] == $wo['setting']['user_id']) { ?>
        if (data.first_name != '' || data.last_name != '') {
          $('[id^=user-full-name]').text(data.first_name + ' ' + data.last_name);
        }
        <?php } ?>
        scrollToTop();
        if (data.img) {
          var user_id = $('form.setting-profile-form').find('#user-id').val();
          $('[id^=updateImage-' + user_id + ']').attr("src", data.img);
        }
        if (data.cover) {
          $('[id^=cover-image]').attr("src", data.cover);
        }
        $('.setting-profile-alert').html('<div class="alert alert-success">' + data.message + '</div>');
        $('.alert-success').fadeIn('fast', function() {
          $(this).delay(2500).slideUp(500, function() {
            $(this).remove();
          });
        });
      } else if (data.errors) {
        var errors = data.errors.join("<br>");
        scrollToTop();
        $('.setting-profile-alert').html('<div class="alert alert-danger">' + errors + '</div>');
        $('.alert-danger').fadeIn(300);
      }
      Wo_progressIconLoader($('form.setting-profile-form').find('button'));
    }
  });
  $("#background_image").on('change', function() {
         $("#background_image_status-1").attr("checked", true);
  });
});
</script>