@php
$id = 'muy-jobs-list' . $block['id'];
if (!empty($block['anchor'])) {
    $id = $block['anchor'];
}

$className = 'muy-' . $block['slug'];
if (!empty($block['className'])) {
    $className .= ' container ' . $block['className'];
}
if (!empty($block['align'])) {
    $className .= ' align' . $block['align'];
}


$select_type = get_field('jobs_select_type');

// Tutti i lavori
$taxonomy_filter = get_field('taxonomy_filter');
$results_filters = get_field('results_filters');

// Lavori singoli
$selected = get_field('selected_jobs');

// Categoria lavori
$category = get_field('jobs_print_category');

// $singular_name = get_field('jobs_singular_name', 'options') ?: 'job';
$jobs_per_row = get_field('jobs_per_row');

$muy_jobs_teaser_image_toggle = get_theme_mod('muy_jobs_teaser_image_toggle');
$muy_jobs_teaser_image_placeholder = get_theme_mod('muy_jobs_teaser_image_placeholder');


// Stile
$n = get_field('jobs_number');

// Box
$category_background = get_field('category_background');
$category_text = get_field('category_text');
$box_background = get_field('box_background');
$box_outline_color = get_field('box_outline_color');
$box_outline_width = get_field('box_outline_width');
$box_border_radius = get_field('box_border_radius');
$title_color = get_field('title_color');
$excerpt_color = get_field('excerpt_color');

// Cta
$cta_text = get_field('cta_text');
$cta_icon_job = get_field('cta_icon_job');
$cta_background = get_field('cta_background');
$cta_outline_color = get_field('cta_outline_color');
$cta_outline_width = get_field('cta_outline_width');
$cta_border_radius = get_field('cta_border_radius');
$cta_text_color = get_field('cta_text_color');

// Badge
$badge_text_color = get_field('badge_text_color');
$badge_border_radius = get_field('badge_border_radius');
$badge_outline_width = get_field('badge_outline_width');
$badge_inverted_colors = get_field('badge_inverted_colors');


switch ($jobs_per_row) {
    case '1':
        $column_class = "w-full teaser-single-column";
        break;

    case '2':
        $column_class = "w-full md__w-1/2 teaser-multi-column";
        break;

    case '4':
        $column_class = "w-full md__w-1/2 lg__w-1/4 teaser-multi-column";
        break;

    default:
        $column_class = "w-full md__w-1/2 lg__w-1/3 teaser-multi-column";
        break;
}



switch($select_type) {
    case "alljobs":
    if ($results_filters) {
      $args = array(
        'posts_per_page' => $n ? $n : -1,
        'post_type' => 'job',
        'tax_query' => array(
            array(
              'taxonomy' => 'category-job',
              'terms'    => $taxonomy_filter,
            ),
          ),
      );
      $jobs = get_posts($args);
    } else {
      $args = array(
        'posts_per_page' => $n ? $n : -1,
        'post_type' => 'job',
      );
      $jobs = get_posts($args);
    }
      break;
    case "select":
      if($selected) {
        $jobs = $selected;
      }else {
        _e('Select at least one ' . $singular_name,'muy-lindo'); 
      }
      break;
    case "category":
      if($category) {
        $args = array(
          'posts_per_page' => $n ? $n : -1,
          'post_type' => 'job',
          'tax_query' => array(
            array(
              'taxonomy' => 'category-job',
              'terms'    => $category,
            ),
          ),
        );
      $jobs = get_posts($args);
      }else {
        _e('Select a category','muy-lindo'); 
      }
      break;
    default:
      _e('Nothing to show','muy-lindo'); 
  }

  switch ($jobs_per_row) {
    case '1':
        $column_class = "w-full teaser-single-column";
        break;

    case '2':
        $column_class = "w-full md__w-1/2 teaser-multi-column";
        break;

    case '4':
        $column_class = "w-full md__w-1/2 lg__w-1/4 teaser-multi-column";
        break;

    default:
        $column_class = "w-full md__w-1/2 lg__w-1/3 teaser-multi-column";
        break;
}


$taxonomy = 'category-job';
$terms = get_terms(array(
    'taxonomy' => $taxonomy,
));
@endphp

{{-- <pre>
    @php
        var_dump($category_color);
    @endphp 
</pre> --}}
<style>
    /* .job-badge{
        background-color: <?php $tax_prova ?>;
    } */
</style>

<div id="{{ esc_attr($id) }}" class="{{ esc_attr($className) }}">
    <div class="mx-8">

        {{-- Filters --}}
        <div class="selector-container text-right mb-16">
            <form action="#" method="post">
                <label for="selectTerms">Seleziona un termine:</label>
                <select name="selectTerms" id="selectTerms">
                    <option value="all">Tutti</option>
                    @foreach ($terms as $term)
                        <option value="{!! $term->slug !!}"> {!! $term->name !!} </option>
                    @endforeach
                </select>
            </form>
        </div>

        {{-- Job list --}}
        <div class="jobs-list-container row -mx-8">
            @foreach($jobs as $job)
                @php
                    $term_list = get_the_terms($job->ID, 'category-job');
                    $info = get_field('info', $job->ID);
                    $job_typology = get_field('job_typology', $job->ID);
                    $contract_type = get_field('contract_type', $job->ID);
                    $term = 'category-job_' . $term_list[0]->term_taxonomy_id;
                    $category_color = get_field('muy_category_color', $term);
                @endphp
                <div 
                style="background-color: {!! $box_background !!};
                border-radius: {!! $box_border_radius !!}px;
                border: {!! $box_outline_width !!}px {!! $box_outline_color !!} solid;"

                class=" {{$column_class }} job-item"
                data-category="@if($term_list){{ $term_list[0]->slug }}@endif"
                >
                    <article>
                        @if($muy_jobs_teaser_image_toggle)
                        <figure>
                            <a href="{{ get_permalink($job->ID) }}" title="{!! get_the_title($job->ID) !!}">
                              @if (has_post_thumbnail($job->ID))
                                <img data-mh="teaser-post" class="lazy"
                                  src="{!! get_the_post_thumbnail_url($job->ID, 'medium') !!}" data-src="{!! get_the_post_thumbnail_url($job->ID, 'large') !!}" />
                              @elseif($muy_jobs_teaser_image_placeholder)
                                <img data-mh="teaser-post" class="lazy"
                                  src="{!! wp_get_attachment_url($muy_jobs_teaser_image_placeholder) !!}" data-src="{!! wp_get_attachment_url($muy_jobs_teaser_image_placeholder) !!}" />
                              @endif
                            </a>
                        </figure>
                        @endif
                        <div class="teaser-content">
                            @if($term_list)
                                <span style="@if($badge_inverted_colors) background-color: rgba(0,0,0,0)!important; color: {!! $category_color !!}; border: {!! $badge_outline_width !!}px solid {!! $category_color !!};@endif
                                @if($category_color) background-color: {!! $category_color !!}; @endif color: {!! $badge_text_color !!}; border-radius: {!! $badge_border_radius !!}px"
                                class="job-badge {!! $term_list[0]->slug !!} inline-block py-1 px-8 mb-8">
                                    {!! $term_list[0]->slug !!}
                                </span>
                            @endif
                            <a href="{!! get_permalink($job->ID) !!}">
                                <h2 style="color: {!! $title_color !!}" class="font-bold text-xl mb-2">{!! get_the_title($job) !!}</h2>
                            </a>
                            <div class="teaser-info teser-job-info">
                                @if ($info)
                                    <div style="color: {!! $excerpt_color !!}" class="teaser-detail">
                                        <p>{!! $info !!}</p>
                                    </div>
                                @endif
                            </div>
                            <a href="{!! get_permalink($job->ID) !!}">
                                <div
                                    style="
                                    background-color: {!! $cta_background !!};
                                    border: {!! $cta_outline_width !!}px {!! $cta_outline_color !!} solid;
                                    border-radius: {!! $cta_border_radius !!}px;
                                    
                                    " class="teaser-cta inline-block py-4 px-8 mt-16">
                                    <div class="flex align-middle">
                                        @if ($cta_icon_job)
                                            <img width="16" height="16" src="{!! $cta_icon_job !!}" alt="cta-icon" class="{!! $cta_text ? 'mr-2' : ''!!}">
                                        @endif
                                    <span style="color: {!! $cta_text_color !!}">{!! $cta_text !!}</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </article>
                </div>
            @endforeach
        </div>
    </div>
</div>
