@extends('frontend.layouts.app')

@section('title')
CAREERS | Philippine Green Building Initiative (PGBI)
@endsection

@section('seo')
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="CAREERS | Philippine Green Building Initiative (PGBI)" />
<meta property="og:url" content="{{ url('careers') }}" />
<meta property="og:site_name" content="GREEEN | Philippine Green Building Initiative (PGBI)" />
<meta property="og:image" content="{{ asset('images/meta-thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('images/meta-thumbnail.jpg') }}" />
@endsection

@section('content')
{{-- BANNER --}}
<div class="container-fluid px-0 mb-5 text-center">
  <img src="{{ asset('images/banner-careers.jpg') }}" class="img-fluid" alt="">
</div>
<div class="container mb-5">
  <h2 class="fw-bold mb-3">Career Opportunities</h2>

  <div class="row mb-5">
    <div class="col-12 col-md-3 col-xl-2">
      <form action="{{ url('filter-career') }}" id="filterForm" method="GET">
        <select class="form-select rounded-0" name="query" aria-label="Default select example" onchange="submitForm()">
          <option disabled hidden selected>Filter by location</option>
          @foreach ($locations as $items)
            <option>{{ $items }}</option>                    
          @endforeach
        </select>
      </form>
    </div>
    @if (!request()->is('careers'))
      <div class="col-md-3 d-flex align-items-center">
        <a href="{{ url('careers') }}" class="link-danger text-decoration-none"><i class="fa-solid fa-trash"></i> Clear Filter</a>
      </div>
    @endif
  </div>

  <div class="row gy-4">
    @foreach ($careers as $items)
      <div class="col-12 col-md-6 col-xl-4">
        <div class="d-flex">
          <div class="green-label">
          </div>
          <div class="py-3 px-4 border border-2 w-100">
            <h5 class="fw-semibold">{{ Str::limit(strip_tags($items->name), 30, '...') }}</h5>

            <div class="d-flex align-items-center gap-2 mb-3">
              <i class="fa-solid fa-location-dot text-muted"></i>
              <span class="text-muted">{{ Str::limit(strip_tags($items->location), 40, '...') }}</span>
            </div>

            <a href="{{ url('career-single/' . $items->name) }}" class="link-career">Full Details <i class="fa-solid fa-arrow-right"></i></a>
          </div>
        </div>
      </div>
    @endforeach
  </div>
</div>
@endsection

@section('js')
<script>
  function submitForm() {
      $('#filterForm').submit();
  }
</script>
@endsection