@extends('layouts.app')

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

@section('content')

<!--=       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
            </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">Aperçu</button>
                        </li>
                        @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">Formateurs</button>
                        </li>
                        @endif                        
                        @if($training->sessions && $training->sessions->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">Sessions</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">Lieu</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">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">Description de la formation</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->target_audience)
                                        <div class="mt-5">
                                            <h5 class="title">Public cible</h5>
                                            <p>{{ $training->target_audience }}</p>
                                        </div>
                                    @endif

                                    @if($training->remarks)
                                        <div class="mt-4">
                                            <h5 class="title">Remarques importantes</h5>
                                            <p>{{ $training->remarks }}</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        
                        @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">Formateurs de la formation</h3>
                                    <p class="mb-4">Voici les formateurs qui animeront cette formation.</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">
                                                        @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
                                                    </div>
                                                    <h5 class="team-name mb-2">{{ $team->firstname }} {{ $team->lastname }}</h5>
                                                    <p class="team-title text-muted mb-3">{{ $team->title }}</p>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                        
                        @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">Sessions de formation</h3>
                                    <p>Voici les différentes sessions programmées pour cette formation.</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>Date de début :</strong> {{ $session->start_date->format('d/m/Y') }}</p>
                                                @endif
                                                @if($session->end_date)
                                                    <p><strong>Date de fin :</strong> {{ $session->end_date->format('d/m/Y') }}</p>
                                                @endif
                                            </div>
                                            <div class="col-md-6">
                                                @if($session->seats_available)
                                                    <p><strong>Places disponibles :</strong> {{ $session->seats_available }}</p>
                                                @endif
                                                @if($session->registrations && $session->registrations->count() > 0)
                                                    <p><strong>Inscrits :</strong> {{ $session->registrations->count() }}</p>
                                                @endif
                                            </div>
                                        </div>
                                        @if($session->description)
                                            <p>{{ $session->description }}</p>
                                        @endif
                                        
                                        <div class="mt-3">
                                            <a href="{{ route('training.register', $training->id) }}?session={{ $session->id }}" class="edu-btn btn-medium">
                                                S'inscrire à cette session <i class="icon-4"></i>
                                            </a>
                                        </div>
                                    </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">Lieu de formation</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">Plan d'accès</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 id="google-map" style="height: 400px; width: 100%; border-radius: 8px; overflow: hidden; border: 1px solid #e9ecef;">
                                        <iframe id="gmap_canvas" src="https://maps.google.com/maps?q=melbourne,%20Australia&t=&z=15&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
                                        </div> -->
                                    </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">Images de la formation</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 ?? 'Image de formation' }}">
                                                    </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">Informations </h4>
                                <ul class="course-item">
                                    <li>
                                        <span class="label"><i class="icon-60"></i>Prix :</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>Prix étudiant :</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>Durée :</span>
                                        <span class="value">{{ $training->nb_seminars }} {{ $training->nb_seminars > 1 ? 'jours' : 'jour' }}</span>
                                    </li>
                                    @endif
                                    @if($training->ufc)
                                    <li>
                                        <span class="label"><i class="icon-64"></i>UFC :</span>
                                        <span class="value">{{ $training->ufc }}</span>
                                    </li>
                                    @endif
                                    @if($training->registrations)
                                    <li>
                                        <span class="label"><i class="icon-63"></i>Inscrits :</span>
                                        <span class="value">{{ $training->registrations->count() }} participants</span>
                                    </li>
                                    @endif
                                    @if($training->location)
                                    <li>
                                        <span class="label"><i class="icon-59"></i>Lieu :</span>
                                        <span class="value">{{ $training->location->name }}</span>
                                    </li>
                                    @endif
                                    @if($training->target_audience)
                                    <li>
                                        <div class="value1 d-block">{{ $training->target_audience }}</div>
                                    </li>
                                    @endif
                                </ul>
                                <div class="read-more-btn">
                                    @if($training->sessions && $training->sessions->count() > 0)
                                        <button type="button" class="edu-btn" onclick="openSessionsTab()">
                                            S'inscrire maintenant <i class="icon-4"></i>
                                        </button>
                                    @else
                                        <a href="{{ route('training.register', $training->id) }}" class="edu-btn">
                                            S'inscrire maintenant <i class="icon-4"></i>
                                        </a>
                                    @endif
                                </div>
                                <div class="share-area">
                                    <h4 class="title">Partager :</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('Découvrez cette formation : ' . request()->url()) }}"><i class="icon-envelope"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if($training->categories && $training->categories->count() > 0)
                    <div class="edu-course-widget widget-course-summery mt-4">
                        <div class="inner">
                            <div class="content">
                                <h4 class="widget-title">Catégories :</h4>
                                <div class="categories-list">
                                    @foreach($training->categories as $category)
                                    <span class="badge bg-primary me-1 mb-2">{{ $category->name }}</span>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.edu-team-grid.team-style-1:hover .team-share-info li:first-child a {
    background-color: #f39;
    border-color: #f39;
    color: #fff;
}    
/* .avatar-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
}

.categories-list .badge {
    display: inline-block;
}

.content img {
    max-width: 100%;
    height: auto;
}

.location-info {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.course-lesson {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
} */

/* .google-map-container {
    margin-top: 20px;
}

#google-map {
    width: 100%;
    border: 1px solid #e9ecef;
} */


</style>

<script>
// 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' });
    }
}

// Initialiser Google Maps avec géocodage
// function initMap() {
//     @if($training->location)
//         const geocoder = new google.maps.Geocoder();
//         const address = "{{ $training->location->full_address }}";
        
//         console.log("Tentative de géocodage pour l'adresse : " + address);
        
//         geocoder.geocode({ address: address }, function(results, status) {
//             if (status === 'OK' && results[0]) {
//                 const location = results[0].geometry.location;
                
//                 console.log("Géocodage réussi - Lat: " + location.lat() + ", Lng: " + location.lng());
                
//                 const map = new google.maps.Map(document.getElementById('google-map'), {
//                     zoom: 15,
//                     center: location,
//                     mapTypeId: google.maps.MapTypeId.ROADMAP,
//                     styles: [
//                         {
//                             featureType: 'all',
//                             elementType: 'geometry.fill',
//                             stylers: [{ weight: '2.00' }]
//                         },
//                         {
//                             featureType: 'all',
//                             elementType: 'geometry.stroke',
//                             stylers: [{ color: '#9c9c9c' }]
//                         },
//                         {
//                             featureType: 'all',
//                             elementType: 'labels.text',
//                             stylers: [{ visibility: 'on' }]
//                         }
//                     ]
//                 });
                
//                 const marker = new google.maps.Marker({
//                     position: location,
//                     map: map,
//                     title: '{{ $training->location->name }}',
//                     animation: google.maps.Animation.DROP
//                 });
                
//                 const infoWindow = new google.maps.InfoWindow({
//                     content: `
//                         <div style="padding: 15px; min-width: 200px;">
//                             <h6 style="margin: 0 0 10px 0; color: #333; font-weight: bold;">{{ $training->location->name }}</h6>
//                             <p style="margin: 0; color: #666; font-size: 14px; line-height: 1.4;">{{ $training->location->full_address }}</p>
//                         </div>
//                     `
//                 });
                
//                 marker.addListener('click', function() {
//                     infoWindow.open(map, marker);
//                 });
                
//                 infoWindow.open(map, marker);
                
//             } else {
//                 console.error('Erreur de géocodage : ' + status);
//                 const mapContainer = document.getElementById('google-map');
//                 if (mapContainer) {
//                     mapContainer.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">Impossible de charger la carte pour cette adresse.</div>';
//                 }
//             }
//         });
//     @endif
// }

// Initialiser la galerie masonry et Google Maps
// document.addEventListener('DOMContentLoaded', function() {
//     // Initialiser le masonry pour la galerie
//     const masonryContainer = document.getElementById('masonry-gallery');
//     if (masonryContainer && typeof imagesLoaded !== 'undefined' && typeof Masonry !== 'undefined') {
//         imagesLoaded(masonryContainer, function() {
//             new Masonry(masonryContainer, {
//                 itemSelector: '.masonry-item',
//                 columnWidth: '.masonry-item',
//                 percentPosition: true,
//                 gutter: 20
//             });
//         });
//     }
    
    // Gérer l'affichage de Google Maps
    // const locationTab = document.getElementById('location-tab');
    // let mapLoaded = false;
    
    // if (locationTab) {
    //     locationTab.addEventListener('shown.bs.tab', function() {
    //         if (!mapLoaded) {
    //             setTimeout(function() {
    //                 if (typeof google !== 'undefined' && google.maps) {
    //                     initMap();
    //                     mapLoaded = true;
    //                 } else {
    //                     console.error('Google Maps API non disponible');
    //                 }
    //             }, 100);
    //         }
    //     });
    // }
    
    // Initialiser la popup lightbox pour les images
    // const imageLinks = document.querySelectorAll('.edu-popup-image');
    // if (imageLinks.length > 0 && typeof $.fn.magnificPopup !== 'undefined') {
    //     $('.edu-popup-image').magnificPopup({
    //         type: 'image',
    //         gallery: {
    //             enabled: true,
    //             navigateByImgClick: true,
    //             preload: [0, 1]
    //         },
    //         image: {
    //             titleSrc: function(item) {
    //                 return item.el.find('img').attr('alt') || 'Image de formation';
    //             }
    //         },
    //         zoom: {
    //             enabled: true,
    //             duration: 300,
    //             easing: 'ease-in-out'
    //         }
    //     });
    // }
// });

// Fonction de fallback si les événements Bootstrap ne fonctionnent pas
// function showLocationTab() {
//     setTimeout(function() {
//         if (!mapLoaded && typeof google !== 'undefined') {
//             initMap();
//             mapLoaded = true;
//         }
//     }, 300);
// }
</script>

{{-- Charger Google Maps API --}}
@if($training->location)
<script>
    // function loadGoogleMaps() {
    //     const script = document.createElement('script');
    //     script.src = 'https://maps.googleapis.com/maps/api/js?key={{ config("services.google.maps_api_key", "YOUR_GOOGLE_MAPS_API_KEY") }}&libraries=geometry&callback=initMap';
    //     script.async = true;
    //     script.defer = true;
    //     script.onerror = function() {
    //         console.error('Erreur lors du chargement de Google Maps API');
    //         const mapContainer = document.getElementById('google-map');
    //         if (mapContainer) {
    //             mapContainer.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">Service de cartographie temporairement indisponible.</div>';
    //         }
    //     };
    //     document.head.appendChild(script);
    // }
    
    // // Charger Google Maps seulement si nécessaire
    // document.addEventListener('DOMContentLoaded', function() {
    //     const locationTab = document.getElementById('location-tab');
    //     if (locationTab) {
    //         locationTab.addEventListener('click', function() {
    //             if (typeof google === 'undefined') {
    //                 loadGoogleMaps();
    //             }
    //         });
    //     }
    // });
</script>
@endif

@endsection