<?php
if ( ! get_theme_mod( 'tamal_portfolio_enable_project_section', false ) ) {
    return;
}

$section_content = array();
$section_content['section_project_headline'] = get_theme_mod( 'tamal_portfolio_project_section_headline', __( 'My Project', 'tamal-portfolio' ) );
$section_content['section_project_headline_sub'] = get_theme_mod( 'tamal_portfolio_project_section_headline_sub', __( 'Projects that I have done', 'tamal-portfolio' ) );
$section_content['section_project_background'] = get_theme_mod( 'tamal_portfolio_project_section_background_grey', '--bg-section' );
$section_content['section_show_button_all'] = get_theme_mod( 'tamal_portfolio_show_hide_all' );
$section_content['section_project_list'] = json_to_array(get_theme_mod( 'tamal_portfolio_resume_section_project_list' ));
$section_content = apply_filters( 'tamal_portfolio_project_section_content', $section_content );
tamal_portfolio_render_project_section( $section_content );

/**
 * Render Project Section
 */
function tamal_portfolio_render_project_section( $section_content ) {
    $list_project = $section_content['section_project_list'];
    $bg = $section_content['section_project_background'] ? '--bg-grey':'--bg-section';
?>
<section id="my-project" class="my-project px-50 w-75 offset-0 offset-lg-3" style="background-color: var(<?php echo esc_attr($bg) ?>)">
    <?php
    if ( is_customize_preview() ) :
        tamal_portfolio_section_link( 'tamal_portfolio_project_section' );
    endif;
    ?>
    <div class="container-xl">
        <div class="row">
            <div class="col-12">
                <div class="my-project__inner">
                    <h2 class="heading-default" data-viewport="custom"><?php echo esc_html($section_content['section_project_headline']); ?><span><?php echo esc_html($section_content['section_project_headline_sub']); ?></span></h2>
                    <?php if(!empty($list_project)) { ?>
                    <div class="row">
                        <div class="col-12 pb-3 pb-lg-2">
                            <ul class="my-project__nav nav d-flex justify-content-center" data-viewport="opacity">
                                <?php if(!$section_content['section_show_button_all']): ?>
                                    <li class="nav-item" role="presentation">
                                        <button class="active" id="all-tab" data-bs-toggle="tab" data-bs-target="#all" type="button" role="tab" aria-controls="all" aria-selected="true"><?php echo esc_html__( 'All', 'tamal-portfolio' ) ?></button>
                                    </li>
                                <?php endif; ?>
                                <?php
                                    $attr_class_active = '';
                                    if($section_content['section_show_button_all']) {
                                        $attr_class_active = ' active';
                                    }
                                    $c = 0;
                                    foreach ($list_project as $nav) { $c++; ?>
                                    <li class="nav-item" role="presentation">
                                        <button class="<?php echo esc_attr($c == 1 ? $attr_class_active:''); ?>" id="<?php echo esc_attr(sanitize_title($nav['title'])); ?>-tab" data-bs-toggle="tab" data-bs-target="#<?php echo esc_attr(sanitize_title($nav['title'])); ?>" type="button" role="tab" aria-controls="<?php echo esc_attr(sanitize_title($nav['title'])); ?>" aria-selected="false"><?php echo esc_html($nav['title']); ?></button>
                                    </li>
                                <?php } ?>
                            </ul>
                        </div>
                        <div class="col-12 py-1">
                            <div class="tab-content" data-viewport="opacity">
                                <!-- start all project -->
                                <?php if(!$section_content['section_show_button_all']): ?>
                                <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
                                    <div class="project__list">
                                        <?php foreach ($list_project as $items) {
                                            foreach ($items['field_repeater'] as $item) { ?>
                                                <div class="product__item">
                                                    <figure class="ratio ratio-4x3 lazy" data-src="<?php echo esc_attr($item['project_image']); ?>">
                                                        <div class="product__content">
                                                            <h4 class="product__name mt-0 mb-2"><?php echo esc_html($item['project_name']); ?></h4>
                                                            <p class="product__score mb-2"><?php echo esc_html($item['project_category']); ?></p>
                                                            <div class="product__view">
                                                                <a class="<?php echo esc_attr(empty($item['project_url']) ? 'button-image':'') ?>" href="<?php echo esc_attr(!empty($item['project_url']) ? $item['project_url']:$item['project_image']); ?>">View Detail</a>
                                                            </div>
                                                        </div>
                                                    </figure>
                                                </div>
                                            <?php } ?>
                                        <?php } ?>
                                    </div>
                                </div>
                                <!-- end all project -->
                                <?php endif; ?>
                                <!-- start project item -->
                                <?php
                                $attr_class_active = '';
                                if($section_content['section_show_button_all']) {
                                    $attr_class_active = ' show active';
                                }
                                $c = 0;
                                foreach ($list_project as $items) { $c++; ?>
                                <div class="tab-pane fade <?php echo esc_attr($c == 1 ? $attr_class_active:''); ?>" id="<?php echo esc_attr(sanitize_title($items['title'])); ?>" role="tabpanel" aria-labelledby="<?php echo esc_attr(sanitize_title($items['title'])); ?>-tab">
                                    <div class="project__list">
                                        <?php foreach ($items['field_repeater'] as $item) { ?>
                                            <div class="product__item">
                                                <figure class="ratio ratio-4x3 lazy" data-src="<?php echo esc_attr($item['project_image']); ?>">
                                                    <div class="product__content">
                                                        <h4 class="product__name mt-0 mb-2"><?php echo esc_html($item['project_name']); ?></h4>
                                                        <p class="product__score mb-2"><?php echo esc_html($item['project_category']); ?></p>
                                                        <div class="product__view">
                                                            <a class="<?php echo esc_attr(empty($item['project_url']) ? 'button-image':'') ?>" href="<?php echo esc_attr(!empty($item['project_url']) ? $item['project_url']:$item['project_image']); ?>">View Detail</a>
                                                        </div>
                                                    </div>
                                                </figure>
                                            </div>
                                        <?php } ?>
                                    </div>
                                </div>
                                <!-- end project item -->
                                <?php } ?>
                            </div>
                        </div>
                    </div>
                <?php } ?>
                </div>
            </div>
        </div>
    </div>
</section>
<?php }

