@extends('website.layout')

@section('title', $title)
@section('meta', $meta)

@section('content')

<section class="team-wrap" style="background: #ffffff;padding-bottom:0;">
    <div class="container">
        <div class="row">
            <div class="section-title style1 text-center mb-40">
                <h2>The Faces Behind the Vision</h2>
                <div class="d-flex justify-content-center">
                    <p class="text-center">
                       We’re here to inspire, guide, and transform. Get to know the people making it happen.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

@php
    $sections = [
        'director' => 'Directors',
        'advisory' => 'Advisory Team',
        'team'     => 'Team Members'
    ];
@endphp

@foreach($sections as $type => $heading)
    @php
        $filtered = $teams->where('type', $type);
    @endphp

    @if($filtered->isNotEmpty())
    <section class="labs-home" style="padding-top:0;">
        <div class="container">
            <div class="row">
                <div class="section-title style1 text-center mb-40">
                    <h2>{{ $heading }}</h2>
                </div>
            </div>
            <div class="row d-flex justify-content-center">
                @foreach($filtered as $t)
                <div class="col-xl-3 col-lg-3 col-md-6">
                    <div class="acic-mentor-card">
                        <div class="d-flex justify-content-center">
                            <img src="{{ asset('storage/' . $t->image) }}" class="mentor-img" alt="{{ $t->name }}">
                        </div>
                        <div class="team-info">
                            <h3 class="text-center">{{ $t->name }}</h3>
                            <p class="text-center mb-2 mentor-sector">{{ $t->designaation }}</p>
                            <p class="text-center desig mb-3">{{ $t->organization }}</p>
                            <div class="d-flex justify-content-center linked-btn-box mb-2">
                                <a href="{{ $t->linkedin }}" class="linked-btn" target="_blank">Linkedin</a>
                            </div>
                            <p class="text-center">
                                <a href="javascript:void(0)"
                                   style="font-size:14px;font-weight:600;color:#7d1217;text-decoration: underline;"
                                   data-id="{{ $t->id }}"
                                   data-bs-toggle="modal"
                                   data-bs-target="#teamModal{{ $t->id }}">
                                    View Details
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif
@endforeach

{{-- Modals --}}
@foreach($teams as $t)
<div class="modal fade" id="teamModal{{ $t->id }}" tabindex="-1" aria-labelledby="teamModalLabel{{ $t->id }}" aria-hidden="true">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="teamModalLabel{{ $t->id }}">{{ $t->name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {!! nl2br(e($t->summary)) !!}
            </div>
        </div>
    </div>
</div>
@endforeach

@endsection