<?php
/**
 * Template part for displaying the about section
 *
 * @package Interior Design Studio
 * @subpackage interior_design_studio
 */

$interior_design_studio_static_image = get_stylesheet_directory_uri() . '/assets/images/header_img.png';

// Check if the about section is enabled
if ( get_theme_mod( 'interior_design_studio_about_enable', true)) : ?>
<section id="about" class="my-5 px-md-0 px-3">
    <div class="container">
        <?php
        // Fetch about page ID from customizer
        $interior_design_studio_about_page_id = absint( get_theme_mod( 'interior_design_studio_about_page' ) );
        
        // Check if a valid page is set for about section
        if ( $interior_design_studio_about_page_id ) : 
            $interior_design_studio_args = array(
                'post_type' => 'page',
                'p'         => $interior_design_studio_about_page_id
            );
            $interior_design_studio_query = new WP_Query( $interior_design_studio_args );
            
            // Check if the query has posts
            if ( $interior_design_studio_query->have_posts() ) :
                while ( $interior_design_studio_query->have_posts() ) : $interior_design_studio_query->the_post(); ?>
                    <div class="row">
                        <div class="col-lg-2 col-md-2 align-self-center abt-bg-img mb-3">
                            <?php 
                            $interior_design_studio_image1 = esc_url( get_theme_mod( 'interior_design_studio_abt_banner_image1', '' ) );
                            if ( $interior_design_studio_image1 ) : ?>
                                <img src="<?php echo $interior_design_studio_image1; ?>" alt="<?php esc_attr_e( 'About Banner', 'interior-design-studio' ); ?>" />
                            <?php endif; ?>
                        </div>
                        <div class="col-lg-4 col-md-4 align-self-center image-abt mb-3">
                            <div class="about-block position-relative">
                                <div class="about-image1">
                                    <div class="thumbnail position-relative">
                                        <?php if ( has_post_thumbnail() ) : ?>
                                            <?php the_post_thumbnail( 'full', array( 'alt' => esc_attr( get_the_title() ) ) ); ?>
                                        <?php else : ?>
                                            <img src="<?php echo esc_url( $interior_design_studio_static_image ); ?>" alt="<?php esc_attr_e( 'Placeholder', 'interior-design-studio' ); ?>" />
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 align-self-center">
                            <div class="match-heading">
                                <?php if ( get_theme_mod( 'interior_design_studio_service_sub_heading' ) ) : ?>
                                    <p class="mb-md-3 mb-2 abt-title text-capitalize"><?php echo esc_html( get_theme_mod( 'interior_design_studio_service_sub_heading' ) ); ?></p>
                                <?php endif; ?>
                                <h2 class="mb-2 text-capitalize">
                                    <a href="<?php echo esc_url( get_permalink() ); ?>"><?php echo esc_html( get_the_title() ); ?></a>
                                </h2>
                            </div>
                            <p class="mb-4 abt-content"><?php echo esc_html( wp_trim_words( get_the_content(), 78 ) ); ?></p>

                            <div class="row">
                                <div class="col-lg-9 col-md-6 align-self-center">
                                    <?php if ( get_theme_mod( 'interior_design_studio_tab_heading1' ) || get_theme_mod( 'interior_design_studio_tab_heading2' ) ) : ?>
                                        <div class="row">
                                            <?php for ( $interior_design_studio_i = 1; $interior_design_studio_i <= 4; $interior_design_studio_i++ ) : ?>
                                                <?php 
                                                $interior_design_studio_tab_heading = get_theme_mod( 'interior_design_studio_tab_heading' . $interior_design_studio_i );
                                                $interior_design_studio_tab_icon = esc_attr( get_theme_mod( 'interior_design_studio_tab_icon' . $interior_design_studio_i, 'fas fa-home' ) );
                                                ?>
                                                <?php if ( $interior_design_studio_tab_heading ) : ?>
                                                    <div class="col-lg-6 col-md-12 col-6 align-self-center"> <!-- Column -->
                                                        <div class="tab-details d-flex align-items-center">
                                                            <?php if ( $interior_design_studio_tab_icon ) : ?>
                                                                <i class="me-lg-3 me-2 <?php echo $interior_design_studio_tab_icon; ?>"></i>
                                                            <?php endif; ?>
                                                            <h3><?php echo esc_html( $interior_design_studio_tab_heading ); ?></h3>
                                                        </div>
                                                    </div>
                                                <?php endif; ?>
                                            <?php endfor; ?>
                                        </div>
                                    <?php endif; ?>
                                </div>
                                <div class="col-lg-3 col-md-6 start-yr-box align-self-center p-0 my-2">
                                    <?php 
                                    $interior_design_studio_start_year_img = esc_url( get_theme_mod( 'interior_design_studio_start_year_img', '' ) );
                                    $interior_design_studio_started_year = esc_html( get_theme_mod( 'interior_design_studio_started_yr', '' ) );
                                    ?>
                                    <?php if ( $interior_design_studio_start_year_img ) : ?>
                                        <img src="<?php echo $interior_design_studio_start_year_img; ?>" alt="<?php esc_attr_e( 'Start Year Image', 'interior-design-studio' ); ?>" />
                                    <?php endif; ?>
                                    <?php if ( $interior_design_studio_started_year ) : ?>
                                        <div class="start-yr-content">
                                            <div class="year-text"><?php esc_html_e( 'Started In', 'interior-design-studio' ); ?></div>
                                            <div class="start-yr"><?php echo $interior_design_studio_started_year; ?></div>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>

                            <div class="about-button text-md-start text-center mt-3">
                                <a class="know-more" href="<?php the_permalink(); ?>" target="_blank">
                                    <span class="abt-btn text-capitalize"><?php esc_html_e( 'Know More', 'interior-design-studio' ); ?></span>
                                </a>
                            </div>

                        </div>
                    </div>
                <?php endwhile;
                wp_reset_postdata();
            endif;
        endif; ?>
    </div>
</section>
<?php endif; ?>