@extends('layouts.app')

@section('title', __('navigation.trainings'))
@section('meta_description', __('trainings.meta_description'))

@section('content')
<!-- Breadcrumb Area Start -->
<div class="edu-breadcrumb-area" style="padding: 50px 0 50px;">
    <div class="container">
        <div class="breadcrumb-inner">
            <div class="page-title">
                <h1 class="title">{{ __('trainings.page_title') }}</h1>
            </div>
            <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 active" aria-current="page">{{ __('navigation.trainings') }}</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>

<!-- Courses Area Start -->
<div class="edu-course-area course-area-1 edu-section-gap">
    <div class="container">
        @php
            $selectedCategories = (array) request('categories', []);
            // Support du paramètre sort (ID catégorie depuis la homepage)
            if (request()->filled('sort') && is_numeric(request('sort'))) {
                $sortCatId = (int) request('sort');
                if (!in_array($sortCatId, $selectedCategories)) {
                    $selectedCategories[] = $sortCatId;
                }
            }
            $selectedTeams = (array) request('teams', []);
        @endphp
        {{-- Barre de recherche pleine largeur --}}
        <form method="GET" action="{{ route('trainings.index') }}" class="mb-5">
            @foreach($selectedCategories as $cid)
            <input type="hidden" name="categories[]" value="{{ $cid }}">
            @endforeach
            @foreach($selectedTeams as $tid)
            <input type="hidden" name="teams[]" value="{{ $tid }}">
            @endforeach
            @if(request('price_sort'))
            <input type="hidden" name="price_sort" value="{{ request('price_sort') }}">
            @endif
            <div class="input-group" style="box-shadow: 0 4px 20px rgba(0,0,0,0.10); border-radius: 6px; overflow: hidden;">
                <span class="input-group-text bg-white border-0 ps-3" style="font-size: 1.1rem; color: #aaa;">
                    <i class="icon-2"></i>
                </span>
                <input type="text"
                       class="form-control border-0"
                       style="font-size: 1.5rem; line-height: 1.25; height: 56px;"
                       name="search"
                       value="{{ request('search') }}"
                       placeholder="{{ __('trainings.search_placeholder') }}">
                <button class="edu-btn border-0 px-4" type="submit" style="border-radius: 0; height: 56px; line-height: 56px; padding-top: 0; padding-bottom: 0;">
                    {{ __('trainings.search') }}
                </button>
            </div>
        </form>

        <div class="row g-5">
            {{-- Sidebar Filtres --}}
            <div class="col-lg-3">
                <div class="edu-course-sidebar">
                    {{-- Bouton effacer les filtres --}}
                    @if(!empty($selectedCategories) || !empty($selectedTeams) || request('price_sort') || request('search'))
                    <div class="mb-3">
                        <a href="{{ route('trainings.index') }}" class="edu-btn btn-medium btn-outline w-100 text-center">
                            <i class="icon-close"></i> {{ __('trainings.clear_filters') }}
                        </a>
                    </div>
                    @endif

                    <form method="GET" action="{{ route('trainings.index') }}" id="sidebar-filter-form">
                        @if(request('search'))
                        <input type="hidden" name="search" value="{{ request('search') }}">
                        @endif
                        @if(request('price_sort'))
                        <input type="hidden" name="price_sort" value="{{ request('price_sort') }}">
                        @endif

                        {{-- Filtre par catégories --}}
                        @if($trainingCategories && $trainingCategories->isNotEmpty())
                        <div class="edu-course-widget widget-category">
                            <div class="inner">
                                <h5 class="widget-title">{{ __('trainings.filter_categories') }}</h5>
                                <div class="content">
                                    @foreach($trainingCategories as $category)
                                    <div class="edu-form-check">
                                        <input type="checkbox"
                                               name="categories[]"
                                               id="cat-{{ $category->id }}"
                                               value="{{ $category->id }}"
                                               {{ in_array($category->id, $selectedCategories) ? 'checked' : '' }}
                                               onchange="document.getElementById('sidebar-filter-form').submit()">
                                        <label for="cat-{{ $category->id }}">{{ $category->display_name ?? $category->translate()?->name }}</label>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        @endif

                        {{-- Filtre par intervenants --}}
                        @if($teams && $teams->isNotEmpty())
                        <div class="edu-course-widget widget-category">
                            <div class="inner">
                                <h5 class="widget-title">{{ __('trainings.filter_trainers') }}</h5>
                                <div class="content">
                                    @foreach($teams as $index => $team)
                                    <div class="edu-form-check trainer-item {{ $index >= 5 && !in_array($team->id, $selectedTeams) ? 'd-none' : '' }}" data-trainer-extra="{{ $index >= 5 ? 'true' : 'false' }}">
                                        <input type="checkbox"
                                               name="teams[]"
                                               id="team-{{ $team->id }}"
                                               value="{{ $team->id }}"
                                               {{ in_array($team->id, $selectedTeams) ? 'checked' : '' }}
                                               onchange="document.getElementById('sidebar-filter-form').submit()">
                                        <label for="team-{{ $team->id }}">{{ $team->full_name }}</label>
                                    </div>
                                    @endforeach
                                    @if($teams->count() > 5)
                                    <div class="trainer-toggle mt-2" id="trainer-toggle-btn">
                                        <a href="#" class="text-primary small" onclick="toggleTrainers(event)">
                                            <span id="trainer-toggle-text">{{ __('trainings.show_more') }} <i class="icon-angle-down"></i></span>
                                        </a>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @endif

                        {{-- Filtre par prix --}}
                        <div class="edu-course-widget widget-price">
                            <div class="inner">
                                <h5 class="widget-title">{{ __('trainings.filter_price') }}</h5>
                                <div class="content">
                                    <div class="edu-form-check">
                                        <input type="radio" name="price_sort" id="price-none" value="" {{ !request('price_sort') ? 'checked' : '' }} onchange="this.form.submit()">
                                        <label for="price-none">{{ __('trainings.price_all') }}</label>
                                    </div>
                                    <div class="edu-form-check">
                                        <input type="radio" name="price_sort" id="price-asc" value="asc" {{ request('price_sort') === 'asc' ? 'checked' : '' }} onchange="this.form.submit()">
                                        <label for="price-asc">{{ __('trainings.price_low_to_high') }}</label>
                                    </div>
                                    <div class="edu-form-check">
                                        <input type="radio" name="price_sort" id="price-desc" value="desc" {{ request('price_sort') === 'desc' ? 'checked' : '' }} onchange="this.form.submit()">
                                        <label for="price-desc">{{ __('trainings.price_high_to_low') }}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            {{-- Contenu principal --}}
            <div class="col-lg-9 col-pl--35">
                {{-- Zone de tri --}}
                <div class="edu-sorting-area">
                    <div class="sorting-left">
                        @if($trainings && $trainings->count() > 0)
                        <h6 class="showing-text">
                            {{ __('trainings.showing_results', [
                                'from' => $trainings->firstItem() ?: 0,
                                'to' => $trainings->lastItem() ?: 0,
                                'total' => $trainings->total()
                            ]) }}
                        </h6>
                        @else
                        <h6 class="showing-text">{{ __('trainings.no_results_title') }}</h6>
                        @endif
                    </div>
                    <div class="sorting-right">
                        <div class="edu-sorting">
                            <div class="icon"><i class="icon-55"></i></div>
                            <form method="GET" action="{{ route('trainings.index') }}" style="display: inline;">
                                @foreach($selectedCategories as $cid)
                                <input type="hidden" name="categories[]" value="{{ $cid }}">
                                @endforeach
                                @foreach($selectedTeams as $tid)
                                <input type="hidden" name="teams[]" value="{{ $tid }}">
                                @endforeach
                                @if(request('search'))
                                <input type="hidden" name="search" value="{{ request('search') }}">
                                @endif
                                <select class="edu-select" name="price_sort" onchange="this.form.submit()">
                                    <option value="">{{ __('trainings.sort_default') }}</option>
                                    <option value="date" {{ request('price_sort') === 'date' ? 'selected' : '' }}>{{ __('trainings.sort_by_date') }}</option>
                                    <option value="asc" {{ request('price_sort') === 'asc' ? 'selected' : '' }}>{{ __('trainings.price_low_to_high') }}</option>
                                    <option value="desc" {{ request('price_sort') === 'desc' ? 'selected' : '' }}>{{ __('trainings.price_high_to_low') }}</option>
                                </select>
                            </form>
                        </div>
                    </div>
                </div>

                {{-- Liste des formations --}}
                @if($trainings && $trainings->count() > 0)
                <div class="row g-5 mt-3">
                    @foreach($trainings as $index => $training)
                    <div class="col-12" data-sal-delay="{{ ($index % 3 + 1) * 100 }}" data-sal="slide-up" data-sal-duration="800">
                        <div class="edu-course course-style-4 course-style-14">
                            <div class="inner">
                                <div class="thumbnail">
                                    <a href="{{ route('training.show', $training->slug) }}">
                                        <img src="{{ $training->thumbnail_url ?? $training->image_url ?? asset('assets/images/course/course-12.jpg') }}" alt="{{ $training->title }}">
                                    </a>
                                    @if($training->nb_seminars)
                                    <div class="time-top">
                                        <span class="duration">{{ $training->nb_seminars }} {{ $training->nb_seminars > 1 ? __('trainings.days') : __('trainings.day') }}</span>
                                    </div>
                                    @endif
                                </div>
                                <div class="content">
                                    <div class="course-price">{{ number_format($training->price, 0, ',', ' ') }} €</div>
                                    <h6 class="title">
                                        <a href="{{ route('training.show', $training->slug) }}">{{ $training->title }}</a>
                                    </h6>
                                    @if($training->accroche_first || $training->accroche_second)
                                    <p>{{ Str::limit($training->accroche_first ?: $training->accroche_second, 120) }}</p>
                                    @endif
                                    <ul class="course-meta">
                                        @if($training->ufc)
                                        <li><i class="icon-24"></i>{{ $training->ufc }} {{ __('trainings.ufc') }}</li>
                                        @endif
                                        @if($training->target_audience)
                                        <li><i class="icon-25"></i>{{ $training->target_audience }}</li>
                                        @endif
                                        @if($training->location)
                                        <li><i class="icon-40"></i>{{ optional($training->location)->name }}</li>
                                        @endif
                                        <li>
                                            <i class="icon-61"></i>
                                            @if($training->next_session_date)
                                                {{ \Carbon\Carbon::parse($training->next_session_date)->locale(app()->getLocale())->translatedFormat('d M Y') }}
                                            @else
                                                {{ __('trainings.date_to_be_defined') }}
                                            @endif
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <!-- <div class="hover-content-aside">
                                <div class="content">
                                    @if($training->first_category)
                                    <span class="course-level">{{ $training->first_category->display_name ?? $training->first_category->translate()?->name }}</span>
                                    @endif
                                    <h5 class="title">
                                        <a href="{{ route('training.show', $training->slug) }}">{{ $training->title }}</a>
                                    </h5>
                                    <ul class="course-meta">
                                        @if($training->nb_seminars)
                                        <li>{{ $training->nb_seminars }} {{ __('trainings.days') }}</li>
                                        @endif
                                        @if($training->ufc)
                                        <li>{{ $training->ufc }} {{ __('trainings.ufc') }}</li>
                                        @endif
                                        @if($training->target_audience)
                                        <li>{{ $training->target_audience }}</li>
                                        @endif
                                    </ul>
                                    @if($training->accroche_first || $training->accroche_second)
                                    <div class="course-feature">
                                        <h6 class="title">{{ __('trainings.summary') }}</h6>
                                        <p>{{ Str::limit($training->accroche_first ?: $training->accroche_second, 120) }}</p>
                                    </div>
                                    @endif
                                    <div class="button-group">
                                        <a href="{{ route('training.show', $training->slug) }}" class="edu-btn btn-medium">{{ __('trainings.view_details') }}</a>
                                    </div>
                                </div>
                            </div> -->
                        </div>
                    </div>
                    @endforeach
                </div>

                {{-- Pagination --}}
                @if($trainings->hasPages())
                <div class="row mt-5">
                    <div class="col-12">
                        <div class="d-flex justify-content-center">
                            {{ $trainings->withQueryString()->links('layouts.custom-pagination') }}
                        </div>
                    </div>
                </div>
                @endif

                @else
                {{-- Aucun résultat --}}
                <div class="text-center py-5">
                    <i class="icon-search display-1 text-muted"></i>
                    <h3 class="text-muted mb-3 mt-3">{{ __('trainings.no_results_title') }}</h3>
                    <p class="text-muted mb-4">{{ __('trainings.no_results_general') }}</p>
                    <a href="{{ route('contact') }}" class="edu-btn btn-medium">
                        {{ __('trainings.contact_us') }}
                    </a>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@push('scripts')
<script>
(function() {
    var expanded = false;

    // Si un intervenant au-delà de 5 est sélectionné, on commence en mode étendu
    var activeExtra = document.querySelector('.trainer-item[data-trainer-extra="true"] a.fw-bold');
    if (activeExtra) {
        expanded = true;
        document.querySelectorAll('.trainer-item[data-trainer-extra="true"]').forEach(function(el) {
            el.classList.remove('d-none');
        });
        var toggleText = document.getElementById('trainer-toggle-text');
        if (toggleText) toggleText.innerHTML = '{{ __("trainings.show_less") }} <i class="icon-angle-up"></i>';
    }

    window.toggleTrainers = function(e) {
        e.preventDefault();
        expanded = !expanded;
        document.querySelectorAll('.trainer-item[data-trainer-extra="true"]').forEach(function(el) {
            el.classList.toggle('d-none', !expanded);
        });
        var toggleText = document.getElementById('trainer-toggle-text');
        if (toggleText) {
            toggleText.innerHTML = expanded
                ? '{{ __("trainings.show_less") }} <i class="icon-angle-up"></i>'
                : '{{ __("trainings.show_more") }} <i class="icon-angle-down"></i>';
        }
    };
})();
</script>
@endpush

@endsection