@extends('layouts.app')
@section('content')
    <div>
        <div
            class="relative h-[60vh] w-full bg-cover bg-center text-white"
            style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ asset('img/salle/hero.png') }}');"
        >
            <div class="flex items-center justify-center h-full text-center p-4">
                <div>
                    <h1 class="text-4xl font-semibold mb-2">Notre équipe technique</h1>
                </div>
            </div>
        </div>

        <section class="section">
            <div class="container">
                @forelse($teamMember as $role)
                    <h1 class="font-bold text-5xl mb-6 text-center">@if($role->first()->role === "volunteer")
                            Bénévoles
                        @elseif($role->first()->role === "employed")
                            Salariés
                        @else
                            Entraîneurs
                        @endif</h1>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        @foreach($role as $member)
                            <div>
                                <div class="flex items-center m-2 p-2">
                                    <img class="w-36 mr-8 rounded-full" src="{{ $member->image_url }}" alt="Photo de profil" />
                                    <div>
                                        <h3 class="text-[2rem] text-gray-900">{{ $member->name }}</h3>
                                        <a class="text-lg text-gray-700 modal-trigger cursor-pointer" data-target="{{ $member->id }}">Voir la fiche</a>
                                    </div>
                                </div>
                                <div class="modal" id="{{ $member->id }}">
                                    <div class="modal-background"></div>
                                    <div class="modal-card">
                                        <header class="modal-card-head">
                                            <p class="modal-card-title">{{ $member->name }}</p>
                                            <button class="delete" aria-label="close"></button>
                                        </header>
                                        <section class="modal-card-body content">
                                            @if($member->certification !== null)
                                                <h3 class="font-semibold text-[2rem] mb-3">Diplômes</h3>
                                                <ul>
                                                    @foreach (explode("\n", $member->certification) as $line)
                                                        <li>{{ $line }}</li>
                                                    @endforeach
                                                </ul>
                                            @endif
                                            @if($member->groups !== null)
                                                <h3 class="font-semibold text-[2rem] mb-3">S'occupe de...</h3>
                                                <ul>
                                                    @foreach (explode("\n", $member->groups) as $line)
                                                        <li>{{ $line }}</li>
                                                    @endforeach
                                                </ul>
                                            @endif
                                            @if($member->certification === null && $member->groups === null)
                                                <p>Cette fiche est vide !</p>
                                            @endif
                                        </section>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @empty
                    <p>Il n'y a rien à afficher ici !</p>
                @endforelse
            </div>
        </section>
    </div>
@endsection
@push('scripts')
    @vite('resources/js/modal.js')
@endpush