@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($member->trainings && $member->trainings->count() > 0)
<div class="edu-course-area course-area-1 edu-section-gap 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>
        </div>
        
        <div class="row">
            @foreach($member->trainings->take(8) as $training)
            <div class="col-xl-3 col-lg-4 col-md-6 mb-5" data-sal-delay="300" data-sal="slide-in" data-sal-duration="800" data-sal-once="true">
                <div class="training-card-custom" data-color="{{ $training->color ?? '#2196f3' }}">

                    <div class="card-normal-content">
                        @if($training->image)
                        <div class="card-image-area" style="background-image: url('{{ asset('storage/' . $training->image) }}');">
                        @else
                        <div class="card-image-area" style="background: linear-gradient(135deg, {{ $training->color ?? '#2196f3' }}20 0%, {{ $training->color ?? '#2196f3' }}40 100%);">
                        @endif

                            @if($training->nb_seminars)
                            <div class="duration-badge">
                                <i class="ri-time-line"></i>
                                {{ $training->nb_seminars }} {{ $training->nb_seminars > 1 ? __('trainings.days') : __('trainings.day') }}
                            </div>
                            @endif

                            @if(!$training->image)
                            <div class="card-initials">
                                {{ substr($training->title, 0, 2) }}
                            </div>
                            @endif
                        </div>

                        <div class="card-body-content">
                            <span class="level-badge">{{ $training->target_audience ?? __('trainings.beginner') }}</span>

                            <h3 class="card-title-custom">{{ $training->title }}</h3>

                            <div class="price-display">{{ number_format($training->price, 2, ',', ' ') }} €</div>

                            <p class="description-text">
                                {{ $training->accroche_first ?? Str::limit(strip_tags($training->content), 100) }}
                            </p>

                            <div class="card-footer-area">
                                <div class="meta-information">
                                    @if($training->ufc)
                                    <div class="meta-item">
                                        <i class="ri-calendar-line"></i> {{ $training->ufc }} {{ __('trainings.ufc') }}
                                    </div>
                                    @endif
                                    @if($training->registrations)
                                    <div class="meta-item">
                                        <i class="ri-user-line"></i>
                                        {{ $training->registrations->count() }} {{ __('trainings.participants_registered') }}
                                    </div>
                                    @endif
                                </div>

                                @if($training->student_price && $training->student_price < $training->price)
                                <div class="student-price-info">
                                    {{ __('trainings.student_price') }}: {{ number_format($training->student_price, 2, ',', ' ') }} €
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="card-hover-content">
                        <button class="favorite-btn-hover" onclick="toggleFavorite({{ $training->id }})">
                            <i class="ri-heart-line"></i>
                        </button>

                        <div class="hover-inner text-dark">
                            <div class="hover-header">
                                <h4 class="hover-title">{{ $training->title }}</h4>
                                <div class="hover-price">{{ number_format($training->price, 2, ',', ' ') }} €</div>
                            </div>

                            <div class="hover-details">
                                <div class="hover-stats">
                                    @if($training->ufc)
                                    <div class="hover-stat">
                                        <i class="ri-award-line"></i>
                                        <span>{{ __('trainings.year') }} {{ date('Y') }} • {{ $training->ufc }} {{ __('trainings.ufc') }}</span>
                                    </div>
                                    @endif
                                    @if($training->nb_seminars)
                                    <div class="hover-stat">
                                        <i class="ri-time-line"></i>
                                        <span>{{ $training->nb_seminars }} {{ $training->nb_seminars > 1 ? __('trainings.days') : __('trainings.day') }}</span>
                                    </div>
                                    @endif
                                    @if($training->registrations)
                                    <div class="hover-stat">
                                        <i class="ri-group-line"></i>
                                        <span>{{ $training->registrations->count() }} {{ __('trainings.registered') }}</span>
                                    </div>
                                    @endif
                                    @if($training->location)
                                    <div class="hover-stat">
                                        <i class="ri-map-pin-line"></i>
                                        <span>{{ $training->location->name }}</span>
                                    </div>
                                    @endif
                                </div>

                                @if($training->sessions && $training->sessions->count() > 0)
                                <div class="hover-sessions">
                                    <h6>{{ __('trainings.upcoming_sessions') }} :</h6>
                                    @foreach($training->sessions->take(1) as $session)
                                    <div class="session-item">
                                        <i class="ri-calendar-2-line"></i>
                                        <span>{{ $session->start_date ? $session->start_date->format('F Y') : 'Novembre 2025' }} - {{ $session->start_date ? $session->start_date->format('d/m/Y') : '15/11/2025' }}</span>
                                    </div>
                                    @endforeach
                                </div>
                                @endif
                            </div>

                            <div class="hover-actions">
                                <a href="{{ route('training.show', $training->slug) }}" class="action-btn action-btn-outline">
                                    <i class="ri-eye-line"></i>
                                    {{ __('trainings.view_details') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endif
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const cards = document.querySelectorAll('.training-card-custom');

            cards.forEach(card => {
                const color = card.dataset.color;

                card.addEventListener('mouseenter', function() {
                    this.style.background = color;
                });

                card.addEventListener('mouseleave', function() {
                    this.style.background = 'white';
                });
            });

        });
    </script>
@endpush