<?php
/**
 * Action social button view
 *
 * @package wp-viral-click
 * @author InstaProduct
 * @link http://insta-product.com/
 */

$setting = $this->setting;
$current    = $setting->getSetting( 'action_type', 'form' );
$dspSection = ' style="display:none";';
if ( $current == 'social' ) {
  $dspSection = '';
}
?>

<!-- start: .ipjck-section-select-content -->
<div id="ipjck-section-social" class="ipjck-section-select-content"<?php echo $dspSection; ?>>
  <h4 class="ipjck-field-title mb0 py10">
    <?php _e( 'Social URL', IPJCK_SLUG ); ?>
  </h4>

  <?php
  /*
   * Facebook URL
   */
  ?>
  <!-- start: .ipjck-field-row -->
  <div class="ipjck-field-row ipjck-field-x ipjck-help-abs">
    <div class="ipjck-form-label col-lg-3 col-md-4 col-sm-12">
      <label for="input-social-facebook-url"><?php _e( 'Facebook URL', IPJCK_SLUG ); ?></label>
    </div>

    <!-- start: .ipjck-field -->
    <div class="ipjck-field col-lg-9 col-md-8 col-sm-12">
      <?php
      $url = stripslashes( $setting->getSetting( 'social_facebook_url' ) );
      ?>
      <input type="text" id="input-social-facebook-url" class="ipjck-input ipjck-input-full" name="social_facebook_url" value="<?php echo $url; ?>">

      <div class="ipjck-help">
        <a class="ipjck-btn-help ipjck-btn ipjck-btn-default" href="#"><i class="ipjck-fa ipjck-fa-question"></i></a>
        <div class="ipjck-help-content ipjck-hide"><?php _e( 'The url of the facebook profile page.', IPJCK_SLUG ); ?>
        </div>
      </div>
    </div>
    <!-- end: .ipjck-field -->
  </div>
  <!-- end: .ipjck-field-row -->

  <?php
  /*
   * Twitter URL
   */
  ?>
  <!-- start: .ipjck-field-row -->
  <div class="ipjck-field-row ipjck-field-x ipjck-help-abs">
    <div class="ipjck-form-label col-lg-3 col-md-4 col-sm-12">
      <label for="input-social-twitter-url"><?php _e( 'Twitter URL', IPJCK_SLUG ); ?></label>
    </div>

    <!-- start: .ipjck-field -->
    <div class="ipjck-field col-lg-9 col-md-8 col-sm-12">
      <?php
      $url = stripslashes( $setting->getSetting( 'social_twitter_url' ) );
      ?>
      <input type="text" id="input-social-twitter-url" class="ipjck-input ipjck-input-full" name="social_twitter_url" value="<?php echo $url; ?>">

      <div class="ipjck-help">
        <a class="ipjck-btn-help ipjck-btn ipjck-btn-default" href="#"><i class="ipjck-fa ipjck-fa-question"></i></a>
        <div class="ipjck-help-content ipjck-hide"><?php _e( 'The url of the twitter profile page.', IPJCK_SLUG ); ?>
        </div>
      </div>
    </div>
    <!-- end: .ipjck-field -->
  </div>
  <!-- end: .ipjck-field-row -->

  <?php
  /*
   * Google Plus URL
   */
  ?>
  <!-- start: .ipjck-field-row -->
  <div class="ipjck-field-row ipjck-field-x ipjck-help-abs">
    <div class="ipjck-form-label col-lg-3 col-md-4 col-sm-12">
      <label for="input-social-googleplus-url"><?php _e( 'Google Plus URL', IPJCK_SLUG ); ?></label>
    </div>

    <!-- start: .ipjck-field -->
    <div class="ipjck-field col-lg-9 col-md-8 col-sm-12">
      <?php
      $url = stripslashes( $setting->getSetting( 'social_googleplus_url' ) );
      ?>
      <input type="text" id="input-social-googleplus-url" class="ipjck-input ipjck-input-full" name="social_googleplus_url" value="<?php echo $url; ?>">

      <div class="ipjck-help">
        <a class="ipjck-btn-help ipjck-btn ipjck-btn-default" href="#"><i class="ipjck-fa ipjck-fa-question"></i></a>
        <div class="ipjck-help-content ipjck-hide"><?php _e( 'The url of the google plus profile page.', IPJCK_SLUG ); ?>
        </div>
      </div>
    </div>
    <!-- end: .ipjck-field -->
  </div>
  <!-- end: .ipjck-field-row -->

  <?php
  /*
   * Linkedin URL
   */
  ?>
  <!-- start: .ipjck-field-row -->
  <div class="ipjck-field-row ipjck-field-x ipjck-help-abs">
    <div class="ipjck-form-label col-lg-3 col-md-4 col-sm-12">
      <label for="input-social-linkedin-url"><?php _e( 'Linkedin URL', IPJCK_SLUG ); ?></label>
    </div>

    <!-- start: .ipjck-field -->
    <div class="ipjck-field col-lg-9 col-md-8 col-sm-12">
      <?php
      $url = stripslashes( $setting->getSetting( 'social_linkedin_url' ) );
      ?>
      <input type="text" id="input-social-linkedin-url" class="ipjck-input ipjck-input-full" name="social_linkedin_url" value="<?php echo $url; ?>">

      <div class="ipjck-help">
        <a class="ipjck-btn-help ipjck-btn ipjck-btn-default" href="#"><i class="ipjck-fa ipjck-fa-question"></i></a>
        <div class="ipjck-help-content ipjck-hide"><?php _e( 'The url of the linkedin profile page.', IPJCK_SLUG ); ?>
        </div>
      </div>
    </div>
    <!-- end: .ipjck-field -->
  </div>
  <!-- end: .ipjck-field-row -->

  <?php
  /*
   * Pinterest URL
   */
  ?>
  <!-- start: .ipjck-field-row -->
  <div class="ipjck-field-row ipjck-field-x ipjck-help-abs">
    <div class="ipjck-form-label col-lg-3 col-md-4 col-sm-12">
      <label for="input-social-pinterest-url"><?php _e( 'Pinterest URL', IPJCK_SLUG ); ?></label>
    </div>

    <!-- start: .ipjck-field -->
    <div class="ipjck-field col-lg-9 col-md-8 col-sm-12">
      <?php
      $url = stripslashes( $setting->getSetting( 'social_pinterest_url' ) );
      ?>
      <input type="text" id="input-social-pinterest-url" class="ipjck-input ipjck-input-full" name="social_pinterest_url" value="<?php echo $url; ?>">

      <div class="ipjck-help">
        <a class="ipjck-btn-help ipjck-btn ipjck-btn-default" href="#"><i class="ipjck-fa ipjck-fa-question"></i></a>
        <div class="ipjck-help-content ipjck-hide"><?php _e( 'The url of the pinterest profile page.', IPJCK_SLUG ); ?>
        </div>
      </div>
    </div>
    <!-- end: .ipjck-field -->
  </div>
  <!-- end: .ipjck-field-row -->

  <?php
  /*
   * Instagram URL
   */
  ?>
  <!-- start: .ipjck-field-row -->
  <div class="ipjck-field-row ipjck-field-x ipjck-help-abs">
    <div class="ipjck-form-label col-lg-3 col-md-4 col-sm-12">
      <label for="input-social-instagram-url"><?php _e( 'Instagram URL', IPJCK_SLUG ); ?></label>
    </div>

    <!-- start: .ipjck-field -->
    <div class="ipjck-field col-lg-9 col-md-8 col-sm-12">
      <?php
      $url = stripslashes( $setting->getSetting( 'social_instagram_url' ) );
      ?>
      <input type="text" id="input-social-instagram-url" class="ipjck-input ipjck-input-full" name="social_instagram_url" value="<?php echo $url; ?>">

      <div class="ipjck-help">
        <a class="ipjck-btn-help ipjck-btn ipjck-btn-default" href="#"><i class="ipjck-fa ipjck-fa-question"></i></a>
        <div class="ipjck-help-content ipjck-hide"><?php _e( 'The url of the instagram profile page.', IPJCK_SLUG ); ?>
        </div>
      </div>
    </div>
    <!-- end: .ipjck-field -->
  </div>
  <!-- end: .ipjck-field-row -->

  <?php
  /*
   * Youtube URL
   */
  ?>
  <!-- start: .ipjck-field-row -->
  <div class="ipjck-field-row ipjck-field-x ipjck-help-abs">
    <div class="ipjck-form-label col-lg-3 col-md-4 col-sm-12">
      <label for="input-social-youtube-url"><?php _e( 'Youtube URL', IPJCK_SLUG ); ?></label>
    </div>

    <!-- start: .ipjck-field -->
    <div class="ipjck-field col-lg-9 col-md-8 col-sm-12">
      <?php
      $url = stripslashes( $setting->getSetting( 'social_youtube_url' ) );
      ?>
      <input type="text" id="input-social-youtube-url" class="ipjck-input ipjck-input-full" name="social_youtube_url" value="<?php echo $url; ?>">

      <div class="ipjck-help">
        <a class="ipjck-btn-help ipjck-btn ipjck-btn-default" href="#"><i class="ipjck-fa ipjck-fa-question"></i></a>
        <div class="ipjck-help-content ipjck-hide"><?php _e( 'The url of the youtube profile page.', IPJCK_SLUG ); ?>
        </div>
      </div>
    </div>
    <!-- end: .ipjck-field -->
  </div>
  <!-- end: .ipjck-field-row -->

  <?php
  /*
   * Tumblr URL
   */
  ?>
  <!-- start: .ipjck-field-row -->
  <div class="ipjck-field-row ipjck-field-x ipjck-help-abs">
    <div class="ipjck-form-label col-lg-3 col-md-4 col-sm-12">
      <label for="input-social-tumblr-url"><?php _e( 'Tumblr URL', IPJCK_SLUG ); ?></label>
    </div>

    <!-- start: .ipjck-field -->
    <div class="ipjck-field col-lg-9 col-md-8 col-sm-12">
      <?php
      $url = stripslashes( $setting->getSetting( 'social_tumblr_url' ) );
      ?>
      <input type="text" id="input-social-tumblr-url" class="ipjck-input ipjck-input-full" name="social_tumblr_url" value="<?php echo $url; ?>">

      <div class="ipjck-help">
        <a class="ipjck-btn-help ipjck-btn ipjck-btn-default" href="#"><i class="ipjck-fa ipjck-fa-question"></i></a>
        <div class="ipjck-help-content ipjck-hide"><?php _e( 'The url of the tumblr.', IPJCK_SLUG ); ?>
        </div>
      </div>
    </div>
    <!-- end: .ipjck-field -->
  </div>
  <!-- end: .ipjck-field-row -->

  <h4 class="ipjck-field-title mb0 py10">
    <?php _e( 'Button Style', IPJCK_SLUG ); ?>
  </h4>

	<?php
  /*
   * Style
   */
  ?>
  <!-- start: .ipjck-field-row -->
  <div class="ipjck-field-row ipjck-field-y ipjck-help-abs ipjck-social-option">
    <div class="ipjck-form-label">
      <label for="input-social-button-style"><?php _e( 'Button Style', IPJCK_SLUG ); ?></label>
    </div>

    <!-- start: .ipjck-field -->
    <div class="ipjck-field">

      <select name="social_button_style" id="input-social-button-style">
        <?php
        $style   = $this->setting->getSetting( 'social_button_style', 'square_flat' );
        $options = array(
          'square_flat'   => __( 'Square Flat', IPJCK_SLUG ),
          'square_grad'   => __( 'Square Gradient', IPJCK_SLUG ),
          'square_3d'     => __( 'Square 3D', IPJCK_SLUG ),
          'square_shadow' => __( 'Square Shadow', IPJCK_SLUG ),
          'round_flat'    => __( 'Round Flat', IPJCK_SLUG ),
          'round_grad'    => __( 'Round Gradient', IPJCK_SLUG ),
          'round_3d'      => __( 'Round 3D', IPJCK_SLUG ),
          'round_shadow'  => __( 'Round Shadow', IPJCK_SLUG )
        );
        foreach( $options as $no => $label ) {
          $sltd = '';
          if ( $no == $style ) {
              $sltd = ' selected="selected"';
          }
          echo '<option value="' . $no . '"' . $sltd . '>' . $label . '</option>';
        }
        ?>
      </select>
      <h4 class="mb15"><?php _e( 'Preview', IPJCK_SLUG ); ?></h4>
      <div class="ipjck-icon-preview ipjck-clear">
        <?php
        $socials = array(
          'facebook',
          'twitter',
          'linkedin',
          'pinterest',
          'googleplus',
          'tumblr',
          'instagram',
          'youtube'
        );
        foreach( $socials as $name ) {
          $src = IPJCK_BASE_URL . 'assets/img/icon/'.$style.'/'.$name.'.png';
          echo '<span class="ipjck-icon"><img src="'.$src.'" alt="'.$name.'"></span>';
        }
        ?>
      </div>

      <div class="ipjck-help">
        <a class="ipjck-btn-help ipjck-btn ipjck-btn-default" href="#"><i class="ipjck-fa ipjck-fa-question"></i></a>
        <div class="ipjck-help-content ipjck-hide">
          <?php _e( 'The style of the social button.', IPJCK_SLUG ); ?>
        </div>
      </div>
    </div>
    <!-- end: .ipjck-field -->
  </div>
  <!-- end: .ipjck-field-row -->

</div>
<!-- end: .ipjck-section-select-content -->