@extends('layouts.app')

@section('title', $member->full_name . ' - ' . __('team.member_detail_title'))
@section('meta_description', __('team.member_detail_description', ['name' => $member->full_name, 'position' => $member->position]))

@section('content')
<div class="edu-breadcrumb-area">
    <div class="container">
        <div class="breadcrumb-inner">
            <div class="page-title">
                <h1 class="title">{{ __('team.member_detail_title') }}</h1>
            </div>
            <ul class="edu-breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('home') }}">{{ __('team.breadcrumb_home') }}</a>
                </li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item">
                    <a href="{{ route('team.index') }}">{{ __('team.breadcrumb_team') }}</a>
                </li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $member->full_name }}</li>
            </ul>
        </div>
    </div>
    <ul class="shape-group">
        <li class="shape-1"><span></span></li>
        <li class="shape-2 scene"><img data-depth="2" src="{{ asset('assets/images/about/shape-13.png') }}" alt="shape"></li>
        <li class="shape-3 scene"><img data-depth="-2" src="{{ asset('assets/images/about/shape-15.png') }}" alt="shape"></li>
        <li class="shape-4"><span></span></li>
        <li class="shape-5 scene"><img data-depth="2" src="{{ asset('assets/images/about/shape-07.png') }}" alt="shape"></li>
    </ul>
</div>

<div class="edu-team-details-area section-gap-equal">
    <div class="container">
        <div class="row row--40">
            <div class="col-lg-4">
                <div class="team-details-thumb">
                    <div class="thumbnail">
                        @if($member->image_url)
                        <img src="{{ $member->image_url }}" alt="{{ $member->full_name }}">
                        @else
                        <img src="{{ asset('assets/images/team/team-01.webp') }}" alt="{{ $member->full_name }}">
                        @endif
                    </div>
                    @if($member->facebook || $member->twitter || $member->linkedin)
                    <ul class="social-share">
                        <li><a href="#"><i class="icon-share-alt"></i></a></li>
                        @if($member->facebook)
                        <li><a href="{{ $member->facebook }}" target="_blank" rel="noopener"><i class="icon-facebook"></i></a></li>
                        @endif
                        @if($member->twitter)
                        <li><a href="{{ $member->twitter }}" target="_blank" rel="noopener"><i class="icon-twitter"></i></a></li>
                        @endif
                        @if($member->linkedin)
                            <li><a href="{{ $member->linkedin }}" target="_blank" rel="noopener"><i class="icon-linkedin2"></i></a></li>
                        @endif
                    </ul>
                    @endif
                </div>
            </div>
            <div class="col-lg-8">
                <div class="team-details-content">
                    <div class="main-info">
                        <span class="subtitle">{{ __('team.label_instructor') }}</span>
                        <h3 class="title">{{ $member->full_name }}</h3>
                        <span class="designation">{{ $member->title }}</span>
                        
                    </div>
                    
                    @if($member->bio)
                    <div class="bio-describe">
                        <h4 class="title">{{ __('team.label_about_me') }}</h4>
                        @sanitized($member->bio)
                    </div>
                    @endif
                    
                    @if($member->email || $member->phone || $member->addresses)
                    <div class="contact-info">
                        <h4 class="title">{{ __('team.label_contact_me') }}</h4>
                        <ul>
                            @if($member->addresses)
                            <li><span>{{ __('team.label_address') }}:</span>{{ $member->addresses->address }}</li>
                            @endif
                            @if($member->email)
                            <li><span>{{ __('team.label_email') }}:</span><a href="mailto:{{ $member->email }}" target="_blank">{{ $member->email }}</a></li>
                            @endif
                            @if($member->phone)
                            <li><span>{{ __('team.label_phone') }}:</span><a href="tel:{{ $member->phone }}">{{ $member->phone }}</a></li>
                            @endif
                        </ul>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@if($trainings && $trainings->count() > 0)
<div class="home-online-art-course edu-course-area section-gap-equal bg-lighten01">
    <div class="container">
        <div class="section-title section-center" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
            <h2 class="title">{{ __('team.section_courses_title') }}</h2>
            <span class="shape-line"><i class="icon-19"></i></span>
        </div>

        <div class="row g-5">
            @foreach($trainings->take(8) as $index => $training)
            @php
                $nextSession = $training->futureSessions->first();
                $sessionDate = $nextSession?->start_date;
                $badgeMonth = $sessionDate
                    ? ucfirst(rtrim($sessionDate->locale(app()->getLocale())->translatedFormat('M'), '.'))
                    : null;
                $delay = (($index % 3) + 1) * 100;
                $trainingUrl = $training->url;
            @endphp
            <div class="col-lg-4 col-md-6" data-sal-delay="{{ $delay }}" data-sal="slide-up" data-sal-duration="800">
                <div class="edu-event event-style-1">
                    <div class="inner">
                        <div class="thumbnail">
                            <a href="{{ $trainingUrl }}">
                                @if($training->image_url)
                                <img src="{{ $training->thumbnail_url ?? $training->image_url }}" alt="{{ $training->title }}" loading="lazy" width="370" height="250">
                                @else
                                <img src="{{ asset('assets/images/event/event-01.jpg') }}" alt="{{ $training->title }}" loading="lazy" width="370" height="250">
                                @endif
                            </a>
                            <div class="event-time">
                                <span>
                                    <i class="icon-33"></i>
                                    @if($nextSession?->duration_badge_label)
                                        {{ $nextSession->duration_badge_label }}
                                    @elseif($sessionDate)
                                        {{ $sessionDate->locale(app()->getLocale())->translatedFormat('d M Y') }}
                                    @else
                                        {{ __('trainings.date_to_be_defined') }}
                                    @endif
                                </span>
                            </div>
                        </div>
                        <div class="content">
                            @if($sessionDate)
                            <div class="event-date sfer-event-date-session" title="{{ $badgeMonth }} {{ $sessionDate->format('Y') }}">
                                <span class="day">{{ $badgeMonth }}</span>
                                <span class="month">{{ $sessionDate->format('Y') }}</span>
                            </div>
                            @endif
                            <h5 class="title"><a href="{{ $trainingUrl }}">{{ $training->title }}</a></h5>
                            @if($training->accroche_first || $training->accroche_second)
                            <p>{{ Str::limit($training->accroche_first ?: $training->accroche_second, 100) }}</p>
                            @endif
                            <div class="read-more-btn">
                                <a class="edu-btn btn-small" href="{{ $trainingUrl }}">{{ __('home.learn_more') }} <i class="icon-4"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endif
@endsection