<?php
/**
 * Template Name: Policy Pages Layout
 * Description: Displays policy pages in a right sidebar with styled content
 */

get_header();
include get_template_directory() . '/inc/menus/menu.php';

// Query for policy category pages
$policy_args = array(
    'post_type'      => 'page',
    'posts_per_page' => -1,
    'orderby'        => 'menu_order',
    'order'          => 'ASC',
    'tax_query'      => array(
        array(
            'taxonomy' => 'page_category',
            'field'    => 'slug',
            'terms'    => 'policy',
        ),
    ),
);
$policy_query = new WP_Query($policy_args);
?>

<main role="main">
<?php 
if (has_post_thumbnail()) {
    $backgroundImg = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), 'full');
    $bg_url = $backgroundImg[0];
} else {
    $bg_url = get_template_directory_uri() . '/assets/images/default-hero.jpg';
}
?>

<!-- HERO SECTION -->
<section class="hero-section policy-hero" style="background-image: url('<?php echo esc_url($bg_url); ?>');">
    <div class="hero-overlay">
        <div class="hero-content">
            <h1 class="hero-title"><?php the_title(); ?></h1>
            <div class="hero-breadcrumb">
                <a href="<?php echo esc_url(home_url()); ?>">
                    <i class="fas fa-home"></i> 
                </a>
                <span class="separator"> > </span>
                <span><?php the_title(); ?></span>
            </div>
        </div>
    </div>
</section>

<!-- DUAL COLUMN LAYOUT WITH RIGHT SIDEBAR -->
<div class="policy-dual-layout">
    <div class="container">
        <div class="layout-grid-right">
            
            <!-- MAIN CONTENT AREA (LEFT) -->
            <div class="policy-main-content">
                <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                    <article id="post-<?php the_ID(); ?>" <?php post_class('policy-article'); ?>>
                        <div class="policy-article-content">
                            <?php the_content(); ?>
                        </div>
                    </article>
                <?php endwhile; endif; ?>
            </div>
            
            <!-- SIDEBAR WITH POLICIES (RIGHT) -->
            <aside class="policy-sidebar">
                <div class="policy-sidebar-inner">
                    <div class="sidebar-header">
                        <h3 class="sidebar-title"> Other Policies</h3>
                        <div class="sidebar-title-line"></div>
                    </div>
                    
                    <?php if ($policy_query->have_posts()) : ?>
                        <div class="policies-list">
                            <?php 
                            $current_id = get_the_ID();
                            while ($policy_query->have_posts()) : $policy_query->the_post(); 
                                $is_active = ($current_id == get_the_ID()) ? 'active' : '';
                            ?>
                                <div class="policy-item <?php echo esc_attr($is_active); ?>">
                                    <a href="<?php the_permalink(); ?>">
                                        <div class="policy-icon">
                                            <i class="fas fa-file-alt"></i>
                                        </div>
                                        <div class="policy-info">
                                            <h4 class="policy-name"><?php the_title(); ?></h4>
                                            <?php if (has_excerpt()) : ?>
                                                <p class="policy-excerpt"><?php echo wp_trim_words(get_the_excerpt(), 8); ?></p>
                                            <?php endif; ?>
                                        </div>
                                        <div class="policy-arrow">
                                            <i class="fas fa-arrow-right"></i>
                                        </div>
                                    </a>
                                </div>
                            <?php endwhile; ?>
                        </div>
                    <?php else : ?>
                        <div class="no-policies">
                            <p>No policy pages found. Please add pages with "policy" category.</p>
                        </div>
                    <?php endif; ?>
                    <?php wp_reset_postdata(); ?>
                </div>
            </aside>
            
        </div>
    </div>
</div>



<script>
document.addEventListener('DOMContentLoaded', function() {
    const currentUrl = window.location.href;
    const policyLinks = document.querySelectorAll('.policy-item a');
    policyLinks.forEach(link => {
        if (link.href === currentUrl) {
            link.closest('.policy-item').classList.add('active');
        }
    });
});
</script>

</main>

<?php get_footer(); ?>