<?php
if (function_exists('render_block_preview_image') && render_block_preview_image($block, 'Open Positions Block')) {
    return;
}
$anchor = '';

if ( ! empty( $block['anchor'] ) ) {
    $anchor = 'id="' . esc_attr( $block['anchor'] ) . '" ';
}
$className = 'open_positions_block sk-section-spacing ' . ($block['className'] ?? '');
?>

<section <?php echo $anchor; ?> class="<?php echo esc_attr(trim($className)); ?>">
  <div class="container">
    <h2>Open Positions</h2>

    <?php
    if (function_exists('success_greenhouse_jobs')) {
        $jobs = json_decode(success_greenhouse_jobs(), true);
    }

    if (!empty($jobs['jobs'])) :

        // Collect unique locations & departments
        $locations = [];
        $departments = [];

        foreach ($jobs['jobs'] as $single_job) {
            if (!empty($single_job['offices'])) {
                foreach ($single_job['offices'] as $office) {
                    $locations[] = $office['location'];
                }
            }
            if (!empty($single_job['departments'])) {
                foreach ($single_job['departments'] as $dept) {
                    $departments[] = $dept['name'];
                }
            }
        }

        $locations = array_unique($locations);
        $departments = array_unique($departments);
    ?>

    <!-- Search & Filter -->
    <div class="search-and-filter">
      <div class="search-wrapper">
        <label class="search-box">
            <svg width="24" height="24" viewBox="0 0 24 24"
               fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M22.9831 21.663L22.9825 21.6624L17.0387 15.7662C18.3601 14.1592 19.0995 12.149 19.0995 9.9375C19.0995 4.90076 14.9443 0.75 9.90323 0.75C4.8168 0.75 0.75 4.90312 0.75 9.9375C0.75 15.0164 4.86138 19.125 9.90323 19.125C12.076 19.125 14.0866 18.386 15.6946 17.0661L21.5969 23.0044L21.6097 23.0173L21.6243 23.0282C21.8491 23.1966 22.0775 23.25 22.3333 23.25C22.5439 23.25 22.7907 23.1973 22.9831 23.005C23.339 22.6495 23.339 22.0184 22.9831 21.663ZM9.94624 17.25C5.86995 17.25 2.62634 13.9681 2.62634 9.9375C2.62634 5.90691 5.86995 2.625 9.94624 2.625C13.9804 2.625 17.2661 5.90783 17.2661 9.9375C17.2661 14.0092 13.9814 17.25 9.94624 17.25Z" fill="#234CC6" stroke="#234CC6" stroke-width="0.5"/>
          </svg>
          <input class="headline-5 search" type="search" placeholder="Search"/>
        </label>
      </div>

      <div class="select-holder">

        <!-- Location -->
        <div class="locations">
          <select class="select-control" data-placeholder="Location">
            <option value="">All Locations</option>
            <?php foreach ($locations as $loc): ?>
              <option value="<?php echo esc_attr($loc); ?>">
                <?php echo esc_html($loc); ?>
              </option>
            <?php endforeach; ?>
          </select>
        </div>

        <!-- Department -->
        <div class="department">
          <select class="select-control" data-placeholder="Department">
            <option value="">All Departments</option>
            <?php foreach ($departments as $dept): ?>
              <option value="<?php echo esc_attr($dept); ?>">
                <?php echo esc_html($dept); ?>
              </option>
            <?php endforeach; ?>
          </select>
        </div>

      </div>
    </div>

    <!-- Jobs Listing -->
    <div class="faqs-content-wrapper">

      <?php foreach ($jobs['jobs'] as $single_job): 

        // Prepare location & department for data attributes
        $location = '';
        $department = '';

        if (!empty($single_job['offices'])) {
            $locs = array_column($single_job['offices'], 'location');
            $location = implode(', ', $locs);
        }

        if (!empty($single_job['departments'])) {
            $depts = array_column($single_job['departments'], 'name');
            $department = implode(', ', $depts);
        }
      ?>

      <div class="faq-wrapper iv-st-from-bottom"
           data-location="<?php echo esc_attr($location); ?>"
           data-department="<?php echo esc_attr($department); ?>">

        <div class="faq-question-title">
          <h4 class="headline-4 has-question">
            <?php echo esc_html($single_job['title']); ?>
          </h4>

          <svg class="toggle-open minus-plus" viewBox="0 0 13.6 13.6">
            <line x1="0.8" y1="6.8" x2="12.8" y2="6.8" stroke="#032169" stroke-width="1.6"/>
            <line class="remove-to-close" x1="6.8" y1="12.8" x2="6.8" y2="0.8" stroke="#032169" stroke-width="1.6"/>
          </svg>
        </div>

        <div class="have-answer">
          <div class="faq-spacer" aria-hidden="true"></div>

          <div class="paragraph faq-answer">

            <!-- Optional visible meta -->
            <p class="job-meta">
              <?php echo esc_html($location); ?> | <?php echo esc_html($department); ?>
            </p>

            <?php
            if (!empty($single_job['content'])) {
                echo html_entity_decode($single_job['content']);
            }
            ?>

            <a class="cta-button"
               href="<?php echo esc_url($single_job['absolute_url']); ?>"
               target="_blank"
               style="margin: 2rem 0;">
              <?php echo __('Apply Now', 'bb-theme-child'); ?>
            </a>

          </div>
        </div>

      </div>

      <?php endforeach; ?>

    </div>

    <?php else: ?>

      <p>There are no current openings.</p>

    <?php endif; ?>

  </div>
</section>