@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')

<!-- Breadcrumb Area -->
  <div class="breadcrumb-area">
    <div class="container">
      <div class="breadcrumb-wrap text-center">
        <h2 class="page-title">{{ __('Funders and Supporters') }}</h2>
        <ul class="breadcrumb-pages">
          <li class="page-item"><a class="page-item-link" href="{{ route('front') }}">{{ __('Home') }}</a></li>
          <li class="page-item">{{ __('Funders and Supporters') }}</li>
        </ul>
      </div>
    </div>
  </div>

<!-- Work Area -->
  <div class="about-us-area section">
    <div class="container">
      <div class="row justify-content-center emzFunderTabsBox">
        <div class="col-auto">
          <ul class="nav emzFunderNav">
            <li class="nav-item emzNavItem">
              <a class="nav-link emzNavLink active" id="media-tab" data-bs-toggle="tab" data-bs-target="#media" href="#">{{ __('Media') }}</a>
            </li>
            <li class="nav-item emzNavItem">
              <a class="nav-link emzNavLink" id="partners-tab" data-bs-toggle="tab" data-bs-target="#partners" href="#">{{ __('International Partners') }}</a>
            </li>
            <li class="nav-item emzNavItem">
              <a class="nav-link emzNavLink" id="ministries-tab" data-bs-toggle="tab" data-bs-target="#ministries" href="#">{{ __('Jordanian Ministries and Institutions') }}</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="tab-content" id="tabContent">
        <div class="tab-pane fade show active" id="media" role="tabpanel" aria-labelledby="media-tab">
          <div class="row">
            @foreach (funders()->where('type','media') as $funder)
            <div class="col-lg-3 col-md-4 col-sm-6">
              <a href="{{ $funder->link }}" target="_blank" class="card border-0 emzFundCard">
                <img class="emzFundImg" src="{{asset($funder->image_small)}}">
              </a>
            </div>
            @endforeach
          </div>
        </div>
        <div class="tab-pane fade" id="partners" role="tabpanel" aria-labelledby="partners-tab">
          <div class="row">
            @foreach (funders()->where('type','international_partners') as $funder)
            <div class="col-lg-3 col-md-4 col-sm-6">
              <a href="{{ $funder->link }}" target="_blank"  class="card border-0 emzFundCard">
                <img class="emzFundImg" src="{{asset($funder->image_small)}}">
              </a>
            </div>
            @endforeach
          </div>
        </div>
        <div class="tab-pane fade" id="ministries" role="tabpanel" aria-labelledby="ministries-tab">
          <div class="row">
            @foreach (funders()->where('type','jordanian_ministries_and_institutions') as $funder)
            <div class="col-lg-3 col-md-4 col-sm-6">
              <a href="{{ $funder->link }}" target="_blank" class="card border-0 emzFundCard">
                <img class="emzFundImg" src="{{asset($funder->image_small)}}">
              </a>
            </div>
            @endforeach
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection