<?php get_header(); ?>
    
    <?php
        $homePageID = get_id_by_slug('home-page');
        $intro = get_field("introduction_txt", $homePageID)
    ?>
        <!-- Intro -->
        <div class="row no-margin">
            <div class="container margin_T_80 theme-padding"> 
                <p class="txt_al_j">
                    <?php echo $intro; ?>
                </p>
            </div>
        </div>
        <!-- /Intro -->



        <!-- Services : Begin -->
        <div class="row no-margin"> 
            <div class="container theme-padding">
                <div class="row margin_RL_30m">
                
                <?php

                    $args = array(
                        'category_name' =>'services-and-departments',
                        'post_type' =>  'post',
                        'posts_per_page' => 10,
                        'orderby' => 'post_date',
                        'order' => 'ASC'
                    );
                    $services = get_posts( $args );

                    //var_dump($services);

                    for($i=0; $i<count($services); $i++){
                        if(get_field('excerpt_txt', $services[$i]->ID)) $excerpt = get_field('excerpt_txt', $services[$i]->ID);
                        if(get_field('colorid_txt', $services[$i]->ID)) $colorID = get_field('colorid_txt', $services[$i]->ID);
                        if(get_field('icon_service', $services[$i]->ID)) $icon = get_field('icon_service', $services[$i]->ID);

                        //Break The title to 2 lines
                        $title = $services[$i]->post_title;
                        $word_array = explode(" ", $title);
                        $first_part = $word_array[0];
                        $second_part = substr($title, strlen($first_part) + 1);                        
                ?>                
                
                
                <div class="col-sm-6 default-department-item clr-<?php echo $colorID; ?> padding_RL_30">
                    <div class="image-div">
                            <a href="<?php echo post_permalink($services[$i]->ID); ?>"><img class="img-responsive center-block" alt="<?php echo $services[$i]->post_title; ?>" src="<?php the_img_url('large' , $services[$i]->ID); ?>"/></a>
                            <span><img src="<?php echo $icon; ?>" alt="<?php echo $services[$i]->post_title; ?>"/></span>
                            <div>
                                <a href="<?php echo post_permalink($services[$i]->ID); ?>">
                                    EXPLORE DEPARTMENT <span></span>
                                </a>
                            </div>
                    </div>
                    <div class="text-div">
                        <h3><a href="<?php echo post_permalink($services[$i]->ID); ?>"><?php echo $first_part . '<br />' . $second_part; ?></a></h3>
                        <p><?php echo $excerpt?></p>
                        <a href="<?php echo post_permalink($services[$i]->ID); ?>">Learn More</a>
                    </div>
                </div>
                <?php if(($i+1)%2 == 0){ ?>
                </div>
                <div class="row margin_RL_30m">
                <?php } ?>
                <?php } ?>

            </div>
                
                                
                
        </div>
    </div>
    <!-- Services : End -->

<?php get_footer(); ?>