@extends('layouts.app')

@push('vendor-styles')
    <link rel="stylesheet" href="{{ asset('assets/css/vendor/magnifypopup.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/vendor/lightbox.min.css') }}">
@endpush

@push('vendor-scripts')
    <script src="{{ asset('assets/js/vendor/magnifypopup.min.js') }}" defer></script>
    <script src="{{ asset('assets/js/vendor/isotop.min.js') }}" defer></script>
    <script src="{{ asset('assets/js/vendor/imageloaded.min.js') }}" defer></script>
    <script src="{{ asset('assets/js/vendor/lightbox.min.js') }}" defer></script>
@endpush

@section('title', $training->title ?? __('trainings.training'))
@section('meta_description', Str::limit(strip_tags($training->accroche_first ?? $training->content ?? ''), 155))

@section('content')

@if(session('success'))
<div class="container pt-4">
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</div>
@endif
@if(session('error'))
<div class="container pt-4">
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</div>
@endif

<!--=       Breadcrumb Area Start      =-->
<div class="edu-breadcrumb-area breadcrumb-style-3">
    <div class="container">
        <div class="breadcrumb-inner">
            <ul class="edu-breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ LaravelLocalization::localizeUrl('/') }}">{{ __('navigation.home') }}</a>
                </li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item">
                    <a href="{{ route('trainings.index') }}">{{ __('navigation.trainings') }}</a>
                </li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $training->title }}</li>
            </ul>
            <div class="page-title">
                <h1 class="title">{{ $training->title }}</h1>
            </div>
            <ul class="course-meta1">
                @if($training->location)
                    <li>{{ $training->location->name }}</li>
                @endif
                @if($training->target_audience)
                    <li><i class="icon-58"></i> {{ $training->target_audience }}</li>
                @endif
                @php $sessionsCount = $training->futureSessions?->count() ?? 0; @endphp
                @if($sessionsCount > 0)
                    <li><i class="icon-61"></i> {{ $sessionsCount }} {{ $sessionsCount === 1 ? __('trainings.session_planned') : __('trainings.sessions_planned') }}</li>
                @endif
            </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>

<!--=     Courses Details Area Start    =-->
<section class="edu-section-gap course-details-area">
    <div class="container">
        <div class="row row--30">
            <div class="col-lg-8">
                <div class="course-details-content">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">{{ __('trainings.overview') }}</button>
                        </li>
                        @if($training->futureSessions && $training->futureSessions->count() > 0)
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="curriculum-tab" data-bs-toggle="tab" data-bs-target="#curriculum" type="button" role="tab" aria-controls="curriculum" aria-selected="false">{{ __('trainings.dates') }}</button>
                        </li>
                        @endif
                        @if($training->location)
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="location-tab" data-bs-toggle="tab" data-bs-target="#location" type="button" role="tab" aria-controls="location" aria-selected="false">{{ __('trainings.location') }}</button>
                        </li>
                        @endif
                        @if($training->teams && $training->teams->count() > 0)
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="teams-tab" data-bs-toggle="tab" data-bs-target="#teams" type="button" role="tab" aria-controls="teams" aria-selected="false">{{ __('trainings.trainers') }}</button>
                        </li>
                        @endif
                        @if($training->images && $training->images->count() > 0)
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="images-tab" data-bs-toggle="tab" data-bs-target="#images" type="button" role="tab" aria-controls="images" aria-selected="false">{{ __('trainings.images') }}</button>
                        </li>
                        @endif
                    </ul>

                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                            <div class="course-tab-content">
                                <div class="course-overview">
                                    <h3 class="heading-title">{{ __('trainings.training_description') }}</h3>
                                    
                                    @if($training->accroche_first)
                                        <p class="lead mb-4">{{ $training->accroche_first }}</p>
                                    @endif
                                    
                                    @if($training->accroche_second)
                                        <p class="mb-4">{{ $training->accroche_second }}</p>
                                    @endif
                                    
                                    @if($training->content)
                                        <div class="content">
                                            @sanitized($training->content)
                                        </div>
                                    @endif

                                    @if($training->remarks)
                                        <div class="mt-4">
                                            <h5 class="title">{{ __('trainings.important_remarks') }}</h5>
                                            <p>{{ $training->remarks }}</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        @if($training->futureSessions && $training->futureSessions->count() > 0)
                        <div class="tab-pane fade" id="curriculum" role="tabpanel" aria-labelledby="curriculum-tab">
                            <div class="course-tab-content">
                                <div class="course-curriculam">
                                    <h3 class="heading-title">{{ __('trainings.dates') }}</h3>
                                    <p>{{ __('trainings.sessions_description') }}</p>
                                    
                                    @foreach($training->futureSessions as $session)
                                    <div class="course-lesson">
                                        <h5 class="title">{{ $session->name }}</h5>
                                        <div class="row">
                                            <div class="col-md-6">
                                                @if($session->start_date)
                                                    <p><strong>{{ __('trainings.start_date') }} :</strong> {{ $session->start_date->format('d/m/Y') }}</p>
                                                @endif
                                                @if($session->end_date)
                                                    <p><strong>{{ __('trainings.end_date') }} :</strong> {{ $session->end_date->format('d/m/Y') }}</p>
                                                @endif
                                                @if($session->duration_days)
                                                    <p><strong>{{ __('trainings.session_duration') }} :</strong> {{ $session->duration_days }} {{ $session->duration_days > 1 ? __('trainings.days') : __('trainings.day') }}</p>
                                                @endif
                                                @if(count($session->planned_dates) > 0)
                                                    <p class="mb-0">
                                                        <a href="#session-dates-{{ $session->id }}" class="session-dates-toggle" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="session-dates-{{ $session->id }}">
                                                            {{ __('trainings.show_all_session_dates') }}
                                                        </a>
                                                    </p>
                                                @endif
                                            </div>
                                            <div class="col-md-6">
                                                <p>{{ __('trainings.session_schedule_hours') }}</p>
                                                @if($session->registrations && $session->registrations_occupying_seat_count > 0)
                                                    <p><strong>{{ __('trainings.registered') }} :</strong> {{ $session->registrations_occupying_seat_count }}</p>
                                                @endif
                                            </div>
                                        </div>
                                        @if(count($session->planned_dates) > 0)
                                            <div class="collapse session-dates-list mt-2" id="session-dates-{{ $session->id }}">
                                                <ul class="list-unstyled mb-0">
                                                    @foreach($session->planned_dates as $date)
                                                        <li>{{ \Carbon\Carbon::parse($date)->locale(app()->getLocale())->translatedFormat('l j F Y') }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif
                                        @if($session->description)
                                            <p>{{ $session->description }}</p>
                                        @endif
                                        
                                        @php
                                            $sessionAllowsRegistration = !$session->is_closed && (!$session->seats_available || $session->registrations_occupying_seat_count < $session->seats_available);
                                        @endphp
                                        @if($sessionAllowsRegistration)
                                        <div class="session-register-actions">
                                            <a href="{{ route('training.register', $training->slug) }}?session={{ $session->id }}" class="edu-btn btn-medium">
                                                {{ __('trainings.register_session') }} <i class="icon-4"></i>
                                            </a>
                                        </div>
                                        @endif
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        @endif

                        @if($training->location)
                        <div class="tab-pane fade" id="location" role="tabpanel" aria-labelledby="location-tab">
                            <div class="course-tab-content">
                                <div class="course-instructor1">
                                    <h3 class="heading-title">{{ __('trainings.training_location') }}</h3>
                                    <div class="location-info">
                                        <h5 class="title">{{ $training->location->name }}</h5>
                                        @if($training->location->full_address)
                                            <p class="mb-3">
                                                <i class="icon-59"></i>
                                                {{ $training->location->full_address }}
                                            </p>
                                        @endif
                                        @if($training->location->description)
                                            <p>{{ $training->location->description }}</p>
                                        @endif
                                    </div>
                                    
                                    {{-- Google Map --}}
                                    <div class="google-map-container mt-4">
                                        <h6 class="mb-3">{{ __('trainings.access_map') }}</h6>
                                        <div class="gmap_canvas">
                    <iframe id="gmap_canvas" src="https://maps.google.com/maps?q=Avenue du tir 77, 7000 Mons, Belgique&amp;t=&amp;z=15&amp;ie=UTF8&amp;iwloc=&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="width: 100%; height: 400px;"></iframe>
                </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif

                        @if($training->teams && $training->teams->count() > 0)
                        <div class="tab-pane fade" id="teams" role="tabpanel" aria-labelledby="teams-tab">
                            <div class="course-tab-content">
                                <div class="course-teams">
                                    <h3 class="heading-title">{{ __('trainings.training_trainers') }}</h3>
                                    <p class="mb-4">{{ __('trainings.trainers_description') }}</p>
                                    
                                    <div class="row g-4">
                                        @foreach($training->teams as $team)
                                        <div class="col-lg-4 col-md-6 col-12" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                                            <div class="card h-100 shadow-sm border-0 ">
                                                <div class="card-body text-center p-4">
                                                    <div class="team-avatar mb-3">
                                                        <a href="{{ route('team.show', ['slug' => $team->slug]) }}">
                                                            @if($team->image_url)
                                                            <img src="{{ $team->image_url }}" alt="{{ $team->full_name }}" class="rounded-circle" style="width: 80px; height: 80px; object-fit: cover;">
                                                            @else
                                                            <div class="avatar-placeholder rounded-circle mx-auto" style="width: 80px; height: 80px;">
                                                                {{ substr($team->firstname, 0, 1) }}{{ substr($team->lastname, 0, 1) }}
                                                            </div>
                                                            @endif
                                                        </a>
                                                    </div>
                                                    <h5 class="team-name mb-2">
                                                        <a href="{{ route('team.show', ['slug' => $team->slug]) }}">{{ $team->full_name }}</a>
                                                    </h5>
                                                    <p class="team-title text-muted mb-3">{{ $team->title }}</p>
                                                    <a class="edu-btn btn-small" href="{{ route('team.show', ['slug' => $team->slug]) }}">
                                                        {{ __('trainings.view_trainer_profile') }} <i class="icon-4"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif

                        @if($training->images && $training->images->count() > 0)
                        <div class="tab-pane fade" id="images" role="tabpanel" aria-labelledby="images-tab">
                            <div class="course-tab-content">
                                <div class="course-images">
                                    <h3 class="heading-title">{{ __('trainings.training_images') }}</h3>
                                    <div class="edu-gallery-area">
                                        <div id="masonry-gallery" class="gallery-grid-wrap">
                                            <div id="animated-thumbnials">
                                                @foreach($training->images as $image)
                                                <a href="{{ asset('storage/' . $image->image) }}" class="edu-popup-image edu-gallery-grid p-gallery-grid-wrap masonry-item">
                                                    <div class="thumbnail">
                                                        <img src="{{ asset('storage/' . $image->image) }}" alt="{{ $image->name ?? __('trainings.training_image') }}">
                                                    </div>
                                                    <div class="zoom-icon">
                                                        <i class="icon-69"></i>
                                                    </div>
                                                </a>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="course-sidebar-3 sidebar-top-position">
                    <div class="edu-course-widget widget-course-summery">
                        <div class="inner">
                            @if($training->image)
                            <div class="thumbnail">
                                <img src="{{ asset('storage/' . $training->image) }}" alt="{{ $training->title }}">
                            </div>
                            @endif
                            <div class="content">
                                <h4 class="widget-title">{{ __('trainings.informations') }}</h4>
                                <ul class="course-item">
                                    <li>
                                        <span class="label"><i class="icon-60"></i>{{ __('trainings.price') }} :</span>
                                        <span class="value price">{{ number_format($training->price, 2, ',', ' ') }} €</span>
                                    </li>
                                    @if($training->student_price && $training->student_price < $training->price)
                                    <li>
                                        <span class="label"><i class="icon-60"></i>{{ __('trainings.student_price') }} :</span>
                                        <span class="value price text-success">{{ number_format($training->student_price, 2, ',', ' ') }} €</span>
                                    </li>
                                    @endif
                                    @if($training->nb_seminars)
                                    <li>
                                        <span class="label"><i class="icon-61"></i>{{ __('trainings.duration') }} :</span>
                                        <span class="value">{{ $training->nb_seminars }} {{ $training->nb_seminars > 1 ? __('trainings.days') : __('trainings.day') }}</span>
                                    </li>
                                    @endif
                                    @if($training->nb_cheques)
                                    <li class="sfer-course-item-with-info">
                                        <span class="label"><i class="icon-62"></i>{{ __('trainings.nb_cheques') }} :</span>
                                        <span class="value">{{ $training->nb_cheques }}</span>
                                        <span class="text-primary sfer-course-info-icon" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="{{ __('trainings.nb_cheques_tooltip') }}"><i class="ri-information-line" style="cursor: help;padding-right:0;"></i></span>
                                    </li>
                                    @endif
                                    @if($training->ufc)
                                    <li class="sfer-course-item-with-info">
                                        <span class="label"><i class="icon-64"></i>{{ __('trainings.ufc') }} :</span>
                                        <span class="value">{{ $training->ufc }}</span>
                                        <span class="text-primary sfer-course-info-icon" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="{{ __('trainings.ufc_tooltip', ['value' => $training->ufc]) }}"><i class="ri-information-line" style="cursor: help;padding-right:0;"></i></span>
                                    </li>
                                    @endif
                                    <!-- @if($training->registrations)
                                    <li>
                                        <span class="label"><i class="icon-63"></i>{{ __('trainings.registered') }} :</span>
                                        <span class="value">{{ $training->registrations->count() }} {{ __('trainings.participants') }}</span>
                                    </li>
                                    @endif -->
                                    @if($training->location)
                                    @php
                                        $locationFullAddress = trim($training->location->full_address ?? '');
                                    @endphp
                                    <li @if($locationFullAddress !== '') class="sfer-course-item-with-info" @endif>
                                        <span class="label"><i class="icon-59"></i>{{ __('trainings.location') }} :</span>
                                        <span class="value">{{ $training->location->name }}</span>
                                        @if($locationFullAddress !== '')
                                        <span class="text-primary sfer-course-info-icon" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="{{ $locationFullAddress }}" ><i class="ri-information-line" style="cursor: help;padding-right:0;"></i></span>
                                        @endif
                                    </li>
                                    @endif
                                </ul>
                                @php
                                    $hasRegisterableSession = $training->futureSessions && $training->futureSessions->contains(fn($s) => !$s->is_closed && (!$s->seats_available || $s->registrations_occupying_seat_count < $s->seats_available));
                                @endphp
                                @if($hasRegisterableSession)
                                <div class="read-more-btn">
                                    @if($training->futureSessions->count() > 1)
                                        <button type="button" class="edu-btn" onclick="openSessionsTab()">
                                            {{ __('trainings.register_now') }} <i class="icon-4"></i>
                                        </button>
                                    @else
                                        <a href="{{ route('training.register', $training->slug) }}?session={{ $training->futureSessions->first()->id }}" class="edu-btn">
                                            {{ __('trainings.register_now') }} <i class="icon-4"></i>
                                        </a>
                                    @endif
                                </div>
                                @endif
                                <!-- <div class="share-area mt-2">
                                    <h4 class="title">{{ __('trainings.share') }} :</h4>
                                    <ul class="social-share">
                                        <li><a href="https://facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}" target="_blank"><i class="icon-facebook"></i></a></li>
                                        <li><a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($training->title) }}" target="_blank"><i class="icon-twitter"></i></a></li>
                                        <li><a href="https://linkedin.com/sharing/share-offsite/?url={{ urlencode(request()->url()) }}" target="_blank"><i class="icon-linkedin2"></i></a></li>
                                        <li><a href="mailto:?subject={{ urlencode($training->title) }}&body={{ urlencode(__('trainings.discover_training') . ' : ' . request()->url()) }}"><i class="icon-envelope"></i></a></li>
                                    </ul>
                                </div> -->
                            </div>
                        </div>
                    </div>

                    @if($training->target_audience)
                    <div class="edu-course-widget widget-course-summery mt-4">
                        <div class="inner">
                            <div class="content">
                                <h4 class="widget-title">{{ __('trainings.target_audience') }}</h4>
                                @php
                                    $targetAudiences = array_values(array_filter(array_map(
                                        'trim',
                                        preg_split('/\s*,\s*|\R/', $training->target_audience, -1, PREG_SPLIT_NO_EMPTY)
                                    )));
                                @endphp
                                <ul class="course-item sfer-course-audience-list">
                                    <li class="sfer-course-item-audience sfer-course-item-audience--standalone">
                                        <span class="value">
                                            @foreach($targetAudiences as $audienceItem)
                                            <span class="sfer-audience-item">{{ $audienceItem }}</span>
                                            @endforeach
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>


<script>
// Initialiser les tooltips Bootstrap (ex. icône UFC)
document.addEventListener('DOMContentLoaded', function() {
    const tooltipEls = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    tooltipEls.forEach(el => {
        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
            new bootstrap.Tooltip(el);
        }
    });
});

// Fonction pour ouvrir l'onglet Sessions
function openSessionsTab() {
    const sessionTab = document.getElementById('curriculum-tab');
    const sessionPane = document.getElementById('curriculum');
    
    if (sessionTab && sessionPane) {
        document.querySelectorAll('.nav-link').forEach(tab => {
            tab.classList.remove('active');
            tab.setAttribute('aria-selected', 'false');
        });
        
        document.querySelectorAll('.tab-pane').forEach(pane => {
            pane.classList.remove('show', 'active');
        });
        
        sessionTab.classList.add('active');
        sessionTab.setAttribute('aria-selected', 'true');
        sessionPane.classList.add('show', 'active');
        
        sessionTab.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
}
</script>

@endsection