<?php
/**
 * Template for displaying single Job Listings (WP Job Manager)
 * Dynamic hero image based on Job Category (via ACF)
 *
 * @package HelloElementor
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

get_header();

while ( have_posts() ) :
	the_post();

	// 🟦 Get the first job category
	$terms = get_the_terms( get_the_ID(), 'job_listing_category' );
	$hero_bg = '';
	$term = null;

	if ( $terms && ! is_wp_error( $terms ) ) {
		$term = $terms[0]; // Use the first category
		$hero_image = get_field( 'hero_img', 'job_listing_category_' . $term->term_id );

		if ( $hero_image && isset( $hero_image['url'] ) ) {
			$hero_bg = 'url(' . esc_url( $hero_image['url'] ) . ')';
		} else {
			// 🟨 Fallback image if no hero image set
			$hero_bg = 'url(' . esc_url( get_stylesheet_directory_uri() . '/images/hero-default.jpg' ) . ')';
		}
	} else {
		// 🟨 Fallback if job has no category
		$hero_bg = 'url(' . esc_url( get_stylesheet_directory_uri() . '/images/hero-default.jpg' ) . ')';
	}
	?>

	<!-- 🟦 Dynamic Hero Section -->
	<section class="job-hero" style="background-image: <?php echo esc_attr( $hero_bg ); ?>;">
		<div class="job-hero-overlay">
			<div class="job-hero-content">
				<h1 class="job-title"><?php the_title(); ?></h1>
			</div>
		</div>
	</section>

	<!-- 🟩 Job Content (Two Column Layout) -->
	<main id="content" <?php post_class( 'site-main job-single' ); ?>>
		<div class="job-layout-container">

			<!-- 🅰️ Main Content Column -->
			<div class="job-main-column">
				<div class="page-content">
					<?php the_content(); ?>
					<?php wp_link_pages(); ?>

					<?php if ( has_tag() ) : ?>
						<div class="post-tags">
							<?php the_tags( '<span class="tag-links">' . esc_html__( 'Tagged ', 'hello-elementor' ), ', ', '</span>' ); ?>
						</div>
					<?php endif; ?>
				</div>

				<?php comments_template(); ?>
			</div>

			<!-- 🅱️ Sidebar Column -->
			<aside class="job-sidebar">
				<div class="job-sidebar-inner">
					<h3>Ready to apply?</h3>
					
					<!-- Custom Apply Button that triggers Elementor Popup -->
					<a href="#" class="job-apply-button" data-elementor-open-lightbox="yes" data-elementor-lightbox-id="YOUR_POPUP_ID">
						Apply Now
					</a>
					
					<?php
					// Optional: You can keep the default WP Job Manager application below
					// or remove these lines if you only want the popup button
					// do_action( 'job_application_start', get_the_ID() );
					// get_job_manager_template( 'job-application.php' );
					// do_action( 'job_application_end', get_the_ID() );
					?>
				</div>
			</aside>

		</div>
	</main>

<?php endwhile;

get_footer();