@extends('front.layouts.app')
@section('content')
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "{!! $og_url ?? '' !!}"
      },
      "headline": "{{ $meta_title ?? \Config::get('settings.meta_title') }}",
      "image": "{{ asset('assets/images/indiabloomslogo.gif') }}",
      "datePublished": "{{ date('Y-m-d H:i:s') }}",
      "dateModified": "{{ date('Y-m-d H:i:s') }}",
      "author": {
        "@type": "Person",
        "name": "Indiablooms"
      },
      "publisher": {
        "@type": "Organization",
        "name": "Indiablooms",
        "logo": {
          "@type": "ImageObject",
          "url": "{{ asset('assets/images/indiabloomslogo.gif') }}"
        }
      },
      "description": "{!! $meta_desc ?? '' !!}"
    }
</script>
@push('page_css')
<style>
  .sub-heading{text-transform: uppercase; text-align:center; display: block; width: 100%; line-height: 20px;}
  .profile-card {
    background: #fff;
    padding: 22px 14px 18px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.07);
    margin-bottom: 32px;
    height: 450px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  .profile-avatar {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    margin-bottom: 10px;
  }
  .font-size-small{
    font-size:12px;
    height: 150px;
  }
  .profile-icons a {
    margin: 0 7px;
    font-size: 1.35rem;
    color: #444;
    transition: color .2s;
  }
  .profile-icons a:hover {
    color: #0a66c2;
  }
  @media (max-width: 767px) {
    .profile-card { min-height: unset; }
  }
  .font-size-16{font-size: 16px;  line-height: 20px;}
  .justify-content-center{display: flex !important; flex-wrap: wrap; justify-content: center;}
  .text-muted{color: rgba(33, 37, 41, 0.75);}
  
  h4 {
    text-align: center; /* Ensures the text within the h1 is centered */
    position: relative; /* Needed for positioning the pseudo-element */
    display: inline-block; /* Allows the h1 to shrink to the content's width */
  }

  .half-underline {
    position: relative;
    padding-bottom: 5px; /* Adjust as needed for spacing between text and underline */
  }

  .half-underline::after {
    content: '';
    position: absolute;
    left: 25%; /* Starts the underline at 25% of the text width */
    bottom: 0;
    width: 50%; /* Makes the underline half the width of the text */
    height: 2px; /* Adjust for underline thickness */
    background-color: red; /* Underline color */
  }
</style>
@endpush
<div class="details-page">
  <div class="container py-5">
    <div class="news-slide-text" style="margin-bottom: 25px;">
      <ul class="tabs"> 
        <li class="active page-name"><a href="#tab1">Meet The Team</a></li>
      </ul>
    </div>
    
    <div class="row g-4 justify-content-center">
        {{--<p><h2 style="text-align:center" class="">Meet The Team</h2></p>--}}
        @php($type = '')
        @foreach($data as $key => $val)
          @if($type != $val->type)
            @php($type = $val->type)
            <div class="col-lg-12 text-center">
              <h4>
                <span class="sub-heading half-underline">{{ $val->types[$val->type]['name'] }}</span>
              </h4>
            </div>
          @endif

          <div class="col-12 col-sm-6 col-md-4 d-flex">
            <div class="profile-card flex-fill text-center">
              <img class="profile-avatar rounded-circle" src="" alt="{{ $val->full_name }}" title="{{ $val->full_name }}">
              <h6 class="mb-1 font-size-16">{{ $val->full_name }}, [{!! $val->designation !!}]</i></h6>
              <p class="small font-size-small text-muted mb-2">{!! nl2br($val->description) !!}</p>
              {{--<div class="profile-icons">
                <a href="#" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
                <a href="#" title="X">
                  <i class="fab fa-x-twitter"></i>
                </a>
                <a href="#" title="Instagram"><i class="fab fa-instagram"></i></a>
              </div>--}}
            </div>
          </div>
        @endforeach

        @include('admin.components.pagination')
            
    </div>
  </div>
</div>
@endsection