@extends('layout.front.master')
@section('content')

@php
    $moduleConfig = get_module_page_header_config('team-members');
    $pageTitle = $teamTexts['page_title'] ?? $moduleConfig['title'];
    $pageSubtitle = $teamTexts['page_subtitle'] ?? $moduleConfig['subtitle'];
    $breadcrumbs = get_module_breadcrumbs('team-members');
@endphp

@if(should_use_modern_page_header('team-members'))
    {{-- Modern Page Header (x-page-header) --}}
    <x-page-header
        :title="$pageTitle"
        :subtitle="$pageSubtitle"
        :icon="$moduleConfig['icon']"
        :breadcrumbs="$breadcrumbs"
        background="primary" />
@else
    {{-- Classic Page Header --}}
    @if(view()->exists('modules.team-members.frontend.partials.dynamic-header'))
        @include('modules.team-members.frontend.partials.dynamic-header')
    @endif
@endif


<section class="section my-0 bg-light py-5">
    <div class="container container-xl-custom">
        <!-- Filtros Dinámicos -->
        <ul class="nav nav-pills sort-source sort-source-style-3 justify-content-center"
            data-sort-id="team"
            data-option-key="filter"
            data-plugin-options="{'layoutMode': 'fitRows', 'filter': '*'}">
            <li class="nav-item {{ !$selectedCategory ? 'active' : '' }}" data-option-value="*">
                <a class="nav-link text-2-5 text-uppercase font-weight-bold {{ !$selectedCategory ? 'active' : '' }}"
                   href="{{ route('frontend.team.index') }}">
                    {{ __('Mostrar todos') }}
                </a>
            </li>
            @foreach($categories as $category)
                <li class="nav-item {{ $selectedCategory && $selectedCategory->id == $category->id ? 'active' : '' }}"
                    data-option-value=".{{ Str::slug($category->name) }}">
                    <a class="nav-link text-2-5 text-uppercase font-weight-bold {{ $selectedCategory && $selectedCategory->id == $category->id ? 'active' : '' }}"
                       href="{{ route('frontend.team.index', ['category' => $category->slug]) }}">
                        {{ $category->name }}
                    </a>
                </li>
            @endforeach
        </ul>

        <div class="sort-destination-loader sort-destination-loader-showing mt-4 pt-2">
            <div class="row team-list sort-destination" data-sort-id="team">
                <!-- Condicional para verificar si hay miembros del equipo -->
                @if($teamMembers->isNotEmpty())
                    @foreach($teamMembers as $member)
                        <div class="col-12 col-sm-6 col-lg-3 isotope-item {{ Str::slug($member->category->name ?? 'otros') }}">
                            <a href="{{ route('frontend.team.profile', $member->slug) }}" class="text-decoration-none">
                                <span class="thumb-info thumb-info-hide-wrapper-bg mb-4">
                                    <span class="thumb-info-wrapper">
                                        <img src="{{ !empty($member->image) ? asset($member->image) : asset('cd-project/product-5/img/team/default-team-member-img.png') }}"
                                             class="img-fluid"
                                             alt="{{ $member->name }}">
                                        <span class="thumb-info-title">
                                            <span class="thumb-info-inner">{{ $member->name }}</span>
                                            <span class="thumb-info-type">{{ $member->position }}</span>
                                        </span>
                                        <span class="thumb-info-caption">
                                            <span class="thumb-info-caption-text"></span>
                                            <br>
                                        </span>
                                    </span>
                                </span>
                            </a>
                        </div>
                    @endforeach
                @else
                    <!-- Mensaje cuando no hay miembros disponibles -->
                    <div class="col-12 text-center">
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            @if($selectedCategory)
                                <strong>No hay miembros en la categoría "{{ $selectedCategory->name }}"</strong>
                                <p class="mb-0 mt-2">Prueba con otra categoría o <a href="{{ route('frontend.team.index') }}">ver todos los miembros</a>.</p>
                            @else
                                <strong>No hay miembros disponibles</strong>
                                <p class="mb-0 mt-2">El equipo se está actualizando. Vuelve pronto.</p>
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>


@endsection

@section('css')
<style>
/* Efecto hover profesional para las cards del equipo */
.team-list a {
    transition: all 0.3s ease;
    display: block;
}

.team-list a:hover {
    transform: translateY(-5px);
    text-decoration: none;
}

.team-list .thumb-info {
    transition: all 0.3s ease;
}

.team-list a:hover .thumb-info {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.team-list .thumb-info-wrapper {
    transition: all 0.3s ease;
}

.team-list a:hover .thumb-info-wrapper {
    transform: scale(1.02);
}

/* Cursor pointer para indicar que es clickeable */
.team-list a {
    cursor: pointer;
}
</style>
@endsection