@extends('layouts.frontend.app')
@section('title', $category->title ?? 'Board of Directors')

@section('content')
@include('inner.breadcrumb',['pageName' => $category->title ?? 'Board of Directors'])

<section id="inner-contanier">
    <img class="service-shape1 animate-y" src="{{asset('images/shape1.png')}}" alt="">
    <img class="about-shape1 animate-y" src="{{asset('images/shape2.png')}}" alt="">
    <div class="container">
        @if (!empty($chairman))

        <div class="row justify-content-center">
            <h1>{{$category->title}}</h1>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
                <div class="board-directors">
                    <div class="management-team">
                        <img src="{{ asset('storage/' . $chairman->photo) }}" alt="Photo of {{ $chairman->full_name }}">
                    </div>
                    <div class="card-body">
                        <ul class="mang-list">
                            <li class="mang-title">
                                {{ $chairman->full_name }}
                            </li>
                            <li class="mang-designation">
                                {{ $chairman->designation }}
                            </li>
                            <li>
                                {!! $chairman->excerpt !!}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        @endif
        <div class="row justify-content-center">
            @foreach ($team as $index => $item)
            @if ($index == 2)
            @break;
            @endif

            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-6 col-xl-6">
                <div class="board-directors">
                    <div class="management-team card">
                        <img src="{{ asset('storage/' . $item->photo) }}" alt="Management team, photo of {{ $item->full_name }}">
                    </div>
                    <div class="card-body">
                        <ul class="mang-list">
                            <li class="mang-title">
                                {{$item->full_name}}
                            </li>
                            <li class="mang-designation">
                                {{$item->designation}}
                            </li>
                            <li>
                                {!! $item->excerpt !!}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <div class="row justify-content-center">
            @foreach ($team as $index => $item)
            @if ($index < 2) @continue; @endif <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
                <div class="board-directors">
                    <div class="management-team card">
                        <img src="{{ asset('storage/' . $item->photo) }}" alt="Management team, photo of {{ $item->full_name }}">
                    </div>
                    <div class="card-body">
                        <ul class="mang-list">
                            <li class="mang-title">
                                {{$item->full_name}}
                            </li>
                            <li class="mang-designation">
                                {{$item->designation}}
                            </li>
                            <li>
                                {!! $item->excerpt !!}
                            </li>
                        </ul>
                    </div>
                </div>
        </div>
        @endforeach

    </div>


    </div>

</section>


@endsection