<?php
/**
 * Skills section
 *
 * This is the template for the content of skills section
 *
 * @package Theme Palace
 * @subpackage Raise Charity Pro
 * @since Raise Charity Pro 1.0.0
 */
if ( ! function_exists( 'raise_charity_pro_add_skills_section' ) ) :
    /**
    * Add skills section
    *
    *@since Raise Charity Pro 1.0.0
    */
    function raise_charity_pro_add_skills_section() {
        $options = raise_charity_pro_get_theme_options();
        // Check if skills is enabled on frontpage
        $skills_enable = apply_filters( 'raise_charity_pro_section_status', true, 'skills_section_enable' );

        if ( true !== $skills_enable ) {
            return false;
        }

        // Render skills section now.
        raise_charity_pro_render_skills_section();
    }
endif;

if ( ! function_exists( 'raise_charity_pro_render_skills_section' ) ) :
  /**
   * Start skills section
   *
   * @return string skills content
   * @since Raise Charity Pro 1.0.0
   *
   */
   function raise_charity_pro_render_skills_section() {
        $options = raise_charity_pro_get_theme_options();
        $skills_title = ! empty( $options['skills_title'] ) ? $options['skills_title'] : '';
        $skills_sub_title = ! empty( $options['skills_sub_title'] ) ? $options['skills_sub_title'] : '';
        $skills_content = ! empty( $options['skills_content'] ) ? $options['skills_content'] : '';
        ?>
        <div id="raise_charity_pro_skills_section">
           <div id="skills-section" class="relative page-section">
              <div class="wrapper">
              <?php if ( is_customize_preview()):
                    raise_charity_pro_section_tooltip( 'skills-section' );
                    endif; ?>
                <div class="section-content col-2 clear">
                  <div class="section-container">
                    <div class="section-header">
                      <?php if( !empty( $skills_title ) ): ?>
                        <h2 class="section-title"><?php echo esc_html( $skills_title ); ?></h2>
                      <?php endif;
                      if( !empty( $skills_title ) ):
                        ?>
                      <p class="section-subtitle"><?php echo esc_html( $skills_sub_title ); ?></p>
                    <?php endif; ?>
                  </div><!-- .section-header -->

                  <?php if( !empty( $skills_title ) ): ?>
                    <div class="section-content">
                      <p><?php echo esc_html( $skills_content ); ?></p>
                    </div><!-- .section-content -->
                  <?php endif; ?>
                </div><!-- .section-container -->

                <div class="skills-wrapper">
                <?php for ( $i = 1; $i <= $options['skills_count']; $i++){

                    if( !empty( $options['skills_name_' . $i] ) && !empty( $options['skills_percentage_' . $i] ) ): ?>
                  <div class="skill-item">
                    <div class="skillbar-outer">
                     <div id="skill-1" class="skillbar-inner" style="width: <?php echo esc_html( $options['skills_percentage_' . $i] ); ?>%;"><span class="skill-percentage"><?php echo esc_html( $options['skills_percentage_' . $i] ); ?>%</span></div>
                   </div><!-- .skillbar-outer -->
                   <span class="skill-name"><?php echo esc_html( $options['skills_name_' . $i] ); ?></span>
                 </div><!-- .skill-item -->

                 <?php endif;

                } ?>

               </div><!-- .skills-wrapper -->
            </div><!-- .section-content -->
          </div><!-- .wrapper -->
        </div><!-- #skills-section -->
                
        </div>
       
    <?php }
endif;