<?php
/* Template Name: Home Page */

get_header();
?>

<?php
$services = new WP_Query(
    [
        'post_type'      => 'services',
        'posts_per_page' => 4,
        'orderby'        => 'menu_order',
        'order'          => 'ASC',
    ]
);

if ( $services->have_posts() ) :
?>

    <!-- Banner Section Desktop -->
    <section class="services-section desktop-section">
        <div class="services-container">

            <?php while ( $services->have_posts() ) : $services->the_post(); ?>

                <?php
                $custom_bg = get_field('service_bg_image');
                $bg        = $custom_bg ? $custom_bg['url'] : get_the_post_thumbnail_url( get_the_ID(), 'full' );
                ?>

                <div class="service-card" style="background-image:url('<?php echo esc_url( $bg ); ?>')">
                    <div class="overlay">
                        <h3><?php the_title(); ?></h3>
                        <a href="<?php the_permalink(); ?>" class="service-btn">
                            <img src="<?php bloginfo('template_url'); ?>/assets/img/services_icon.webp">
                        </a>
                    </div>
                </div>

            <?php endwhile; ?>

        </div>
    </section>
    <!-- /Banner Section Desktop -->

    <!-- Banner Section Mobile -->
    <section class="services-section mobile-section">
        <div class="services-slider">

            <?php rewind_posts(); ?>

            <?php while ( $services->have_posts() ) : $services->the_post(); ?>

                <?php
                $custom_bg = get_field('service_bg_image');
                $bg        = $custom_bg ? $custom_bg['url'] : get_the_post_thumbnail_url( get_the_ID(), 'full' );
                ?>

                <div class="service-card" style="background-image:url('<?php echo esc_url( $bg ); ?>')">
                    <div class="overlay">
                        <h3><?php the_title(); ?></h3>
                        <a href="<?php the_permalink(); ?>" class="service-btn">
                            <img src="<?php bloginfo('template_url'); ?>/assets/img/services_icon.webp">
                        </a>
                    </div>
                </div>

            <?php endwhile; ?>

        </div>
    </section>
    <!-- /Banner Section Mobile -->

<?php
endif;
wp_reset_postdata();
?>

<!-- About Us Section -->
<section class="about_us_section custom-pad">
    <div class="container">
        <div class="row">

            <!-- Image -->
            <div class="col-lg-8 col-md-6 col-sm-12 about_section_image">
                <?php
                $about_img = get_field('about_image');
                if ( $about_img ) {
                    echo '<img src="' . esc_url( $about_img['url'] ) . '" alt="' . esc_attr( $about_img['alt'] ) . '">';
                }
                ?>
            </div>

            <!-- Content -->
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="section-header">

                    <?php
                    $small_title = get_field('about_small_title');
                    $main_title  = get_field('about_main_title');
                    ?>

                    <?php if ( $small_title ) : ?>
                        <h5><?php echo esc_html( $small_title ); ?></h5>
                    <?php endif; ?>

                    <?php if ( $main_title ) : ?>
                        <h2><?php echo esc_html( $main_title ); ?></h2>
                    <?php endif; ?>

                </div>

                <?php
                $about_content = get_field('about_content');
                if ( $about_content ) {
                    echo $about_content;
                }
                ?>

                <?php
                $btn_link = get_field('about_btn_link');

                if ( $btn_link ) :
                    $btn_url    = $btn_link['url'];
                    $btn_text   = $btn_link['title'];
                    $btn_target = $btn_link['target'] ? $btn_link['target'] : '_self';
                ?>
                    <div class="custom-btn">
                        <a href="<?php echo esc_url( $btn_url ); ?>" target="<?php echo esc_attr( $btn_target ); ?>">
                            <?php echo esc_html( $btn_text ); ?>
                        </a>
                    </div>
                <?php endif; ?>

            </div>
        </div>
    </div>
</section>
<!-- /About Us Section -->


<!-- Need Help -->
<section class="need-help custom-pad">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 width-100">
                <div class="need-help-content">

                    <?php $title = get_field('need_help_title'); ?>
                    <?php if ( $title ) : ?>
                        <h2><?php echo wp_kses_post( $title ); ?></h2>
                    <?php endif; ?>

                    <?php
                    $content = get_field('need_help_content');
                    if ( $content ) {
                        echo $content;
                    }
                    ?>

                    <div class="custom-btn">

                        <?php
                        $btn1   = get_field('need_help_btn_1');
                        $icon1  = get_field('need_help_btn_1_icon');

                        if ( $btn1 ) :
                            $url1    = $btn1['url'];
                            $text1   = $btn1['title'];
                            $target1 = $btn1['target'] ? $btn1['target'] : '_self';
                        ?>
                            <a href="<?php echo esc_url( $url1 ); ?>" target="<?php echo esc_attr( $target1 ); ?>">
                                <?php if ( $icon1 ) : ?>
                                    <span>
                                        <img src="<?php echo esc_url( $icon1['url'] ); ?>" alt="<?php echo esc_attr( $icon1['alt'] ); ?>">
                                    </span>
                                <?php endif; ?>
                                <?php echo esc_html( $text1 ); ?>
                            </a>
                        <?php endif; ?>

                        <?php
                        $btn2   = get_field('need_help_btn_2');
                        $icon2  = get_field('need_help_btn_2_icon');

                        if ( $btn2 ) :
                            $url2    = $btn2['url'];
                            $text2   = $btn2['title'];
                            $target2 = $btn2['target'] ? $btn2['target'] : '_self';
                        ?>
                            <a href="<?php echo esc_url( $url2 ); ?>" class="btn-dark" target="<?php echo esc_attr( $target2 ); ?>">
                                <?php if ( $icon2 ) : ?>
                                    <span>
                                        <img src="<?php echo esc_url( $icon2['url'] ); ?>" alt="<?php echo esc_attr( $icon2['alt'] ); ?>">
                                    </span>
                                <?php endif; ?>
                                <?php echo esc_html( $text2 ); ?>
                            </a>
                        <?php endif; ?>

                    </div>

                </div>
            </div>
        </div>
    </div>
</section>
<!-- /Need Help -->


<!-- Counter Section -->
<section class="facts-section">

    <div class="facts-bar">
        <div class="container">
            <div class="facts-container">

                <div class="section-header">
                    <h5><?php echo esc_html( get_field('our_statistics_title') ); ?></h5>
                    <h2><?php echo esc_html( get_field('some_facts_title') ); ?></h2>
                </div>

                <div class="facts-items">
                    <?php if ( have_rows('stats') ) : ?>
                        <?php while ( have_rows('stats') ) : the_row(); ?>
                            <div class="fact">
                                <h4 class="counter" data-target="<?php echo esc_attr( get_sub_field('stat_number') ); ?>">0</h4>
                                <p><?php echo esc_html( get_sub_field('stat_label') ); ?></p>
                            </div>
                        <?php endwhile; ?>
                    <?php endif; ?>
                </div>

            </div>
        </div>
    </div>

    <div class="facts-content">
        <div class="facts-left">
            <?php
/*
<div class="testimonial-slider">

    <?php if ( have_rows('testimonials') ) : ?>
        <?php while ( have_rows('testimonials') ) : the_row(); ?>

            <div class="testimonial-box">
                <div class="t-user">

                    <?php $user_img = get_sub_field('testimonial_user_image'); ?>

                    <img src="<?php bloginfo('template_url'); ?>/assets/img/quote_icon.webp" alt="" class="quote_icon">

                    <?php if ( $user_img ) : ?>
                        <img src="<?php echo esc_url( $user_img['url'] ); ?>" class="user_image" alt="<?php echo esc_attr( $user_img['alt'] ); ?>">
                    <?php endif; ?>

                </div>

                <div class="t-content">
                    <span class="t-role"><?php echo esc_html( get_sub_field('testimonial_role') ); ?></span>
                    <h2><?php echo esc_html( get_sub_field('testimonial_title') ); ?></h2>
                    <p class="t-text"><?php echo esc_html( get_sub_field('testimonial_text') ); ?></p>
                    <h4 class="t-name">—<?php echo esc_html( get_sub_field('testimonial_name') ); ?></h4>
                </div>
            </div>

        <?php endwhile; ?>
    <?php endif; ?>

</div>
*/
?>
<?php echo do_shortcode('[trustindex no-registration=google]') ?>
        </div>

        <div class="facts-right">

            <?php $counter_img = get_field('counter_image'); ?>
            <?php if ( $counter_img ) : ?>
                <img src="<?php echo esc_url( $counter_img['url'] ); ?>" alt="<?php echo esc_attr( $counter_img['alt'] ); ?>">
            <?php endif; ?>

            <div class="emergency-box">
                <small><?php echo esc_html( get_field('emergency_title') ); ?></small>
                <p><?php echo esc_html( get_field('emergency_text') ); ?></p>

                <?php
                $phone_text = get_field('emergency_phone');
                if ( $phone_text ) :
                    $phone_link = preg_replace( '/\s+/', '', $phone_text );
                ?>
                    <a href="tel:<?php echo esc_attr( $phone_link ); ?>">
                        <?php echo esc_html( $phone_text ); ?>
                    </a>
                <?php endif; ?>
            </div>

        </div>
    </div>

</section>
<!-- /Counter Section -->


<!-- Gallery Section -->
<section class="projects-section">
    <div class="container">

        <div class="section-header">
            <?php if ( get_field('gallery_sub_title') ) : ?>
                <h5><?php echo esc_html( get_field('gallery_sub_title') ); ?></h5>
            <?php endif; ?>

            <?php if ( get_field('gallery_main_title') ) : ?>
                <h2><?php echo esc_html( get_field('gallery_main_title') ); ?></h2>
            <?php endif; ?>
        </div>

        <?php if ( have_rows('gallery_tabs') ) : ?>

            <div class="projects-tabs">
                <?php
                $i = 0;
                while ( have_rows('gallery_tabs') ) :
                    the_row();
                    $slug = sanitize_title( get_sub_field('tab_slug') );
                ?>
                    <button class="tab-btn <?php echo $i === 0 ? 'active' : ''; ?>" data-tab="<?php echo esc_attr( $slug ); ?>">
                        <?php echo esc_html( get_sub_field('tab_title') ); ?>
                    </button>
                <?php
                    $i++;
                endwhile;
                ?>
            </div>

            <div class="projects-content">

                <?php
                $i = 0;
                while ( have_rows('gallery_tabs') ) :
                    the_row();
                    $slug    = sanitize_title( get_sub_field('tab_slug') );
                    $gallery = get_sub_field('tab_gallery');
                ?>
                    <div class="tab-content <?php echo $i === 0 ? 'active' : ''; ?>" id="<?php echo esc_attr( $slug ); ?>">
                        <div class="projects-grid">
                            <?php if ( $gallery ) : ?>
                                <?php foreach ( $gallery as $image ) : ?>
                                    <img src="<?php echo esc_url( $image['sizes']['large'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>">
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php
                    $i++;
                endwhile;
                ?>

            </div>

        <?php endif; ?>

    </div>
</section>
<!-- /Gallery Section -->

<?php get_footer(); ?>