@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

{{-- Dynamic Header --}}
@include('modules.team-members.frontend.partials.dynamic-header')
<section class="section my-0 py-5" style="background-color: {{ get_active_demo() === 'demo-law-firm-2' ? '#f7f7f7' : 'var(--secondary)' }};">

    <div class="container container-xl-custom">
        @php
            $initialFilter = '*';
            if ($selectedCategory) {
                $initialFilter = '.' . Str::slug($selectedCategory->name);
            }
        @endphp

        <!-- 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': '{{ $initialFilter }}', 'useHash': false}">
            <li class="nav-item {{ !$selectedCategory ? 'active' : '' }}" data-option-value="*" data-hash="">
                <a class="nav-link text-2-5 text-uppercase font-weight-bold {{ !$selectedCategory ? 'active' : '' }}"
                   href="#">
                    {{ __('Mostrar todos') }}
                </a>
            </li>
            @foreach($categories as $category)
                @php
                    $categorySlug = Str::slug($category->name);
                @endphp
                <li class="nav-item {{ $selectedCategory && $selectedCategory->id == $category->id ? 'active' : '' }}"
                    data-option-value=".{{ $categorySlug }}" data-hash="{{ $categorySlug }}">
                    <a class="nav-link text-2-5 text-uppercase font-weight-bold {{ $selectedCategory && $selectedCategory->id == $category->id ? 'active' : '' }}"
                       href="#{{ $categorySlug }}">
                        {{ $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') }} mb-4">
                            <div class="card border-0 border-radius-0 custom-box-shadow-1 w-100 text-center">
                                <a href="{{ route('frontend.team.profile', $member->slug) }}" class="text-decoration-none text-color-dark d-block">
                                    <div class="position-relative overflow-hidden" style="height: 320px;">
                                        @php
                                            $imgSrc = !empty($member->image)
                                                ? (filter_var($member->image, FILTER_VALIDATE_URL) ? $member->image : asset($member->image))
                                                : asset('cd-project/img/defaults/team/team-' . (($loop->index % 6) + 1) . '.jpg');
                                        @endphp
                                        <img src="{{ $imgSrc }}"
                                             class="img-fluid w-100 h-100"
                                             style="object-fit: cover; object-position: center;"
                                             alt="{{ $member->name }}">
                                    </div>
                                    <div class="p-3">
                                        <h4 class="font-weight-bold text-4 mb-1 text-color-dark">{{ $member->name }}</h4>
                                        <p class="text-color-primary text-3 font-weight-semibold mb-0">{{ $member->position }}</p>
                                    </div>
                                </a>
                                @if($member->linkedin || $member->email)
                                    <div class="card-footer bg-transparent border-0 pt-0 pb-3 text-center mt-auto">
                                        <div class="d-flex justify-content-center gap-3">
                                            @if($member->linkedin)
                                                <a href="{{ $member->linkedin }}" target="_blank" class="text-color-dark text-color-hover-primary text-4" title="LinkedIn">
                                                    <i class="fab fa-linkedin"></i>
                                                </a>
                                            @endif
                                            @if($member->email)
                                                <a href="mailto:{{ $member->email }}" class="text-color-dark text-color-hover-primary text-4" title="Email">
                                                    <i class="fas fa-envelope"></i>
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </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;
}

/* Estilos para igualar alturas de las imágenes del equipo */
.team-list .thumb-info-wrapper {
    position: relative;
    overflow: hidden;
    height: 400px;
    display: flex;
    flex-direction: column;
}

.team-list .thumb-info-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    flex: 1;
}

.team-list .thumb-info-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    padding: 20px 15px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

.team-list .thumb-info-inner {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 5px;
    min-height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.team-list .thumb-info-type {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 5px;
}

/* Asegurar que todas las tarjetas tengan la misma altura */
.team-list .isotope-item {
    display: flex;
    flex-direction: column;
}

.team-list .isotope-item > a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.team-list .isotope-item .thumb-info {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
}
</style>
@endsection
@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const hash = window.location.hash.substring(1);
        if (hash) {
            const targetLi = document.querySelector('.sort-source[data-sort-id="team"] li[data-hash="' + hash + '"]');
            if (targetLi) {
                const targetLink = targetLi.querySelector('a');
                if (targetLink) {
                    setTimeout(() => {
                        targetLink.click();
                    }, 250);
                }
            }
        }
    });
</script>
@endpush