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

@php
    $moduleConfig = get_module_page_header_config('team-members');
    $pageTitle = $teamMember->name ?? $moduleConfig['title'];
    $pageSubtitle = $teamMember->position ?? $moduleConfig['subtitle'];
    $rawBreadcrumbs = get_module_breadcrumbs('team-members', $pageTitle);
    $breadcrumbs = array_map(function($b) {
        return [
            'url' => $b['url'] ?? null,
            'label' => $b['title'] ?? ($b['label'] ?? '')
        ];
    }, $rawBreadcrumbs);
@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
    @include('modules.team-members.frontend.partials.dynamic-header', [
        'pageTitle' => $pageTitle,
        'pageSubtitle' => $pageSubtitle,
        'breadcrumbItems' => $breadcrumbs
    ])
@endif

<section id="service" class="section my-0" style="min-height: 100vh;">
        <div class="container">
            <!-- Botón "Back" -->
            <a class="nav-link" href="javascript:history.back()">
                <i class="fa fa-arrow-left"></i> Back
            </a>
            <br>

            <div class="row">
                <!-- Sidebar Col -->
                <div class="col-lg-4 mb-5 mb-lg-0 position-relative">
                    <aside class="sidebar">
                        <div class="card border-0 border-radius-0 custom-box-shadow-1 mb-5">
                            <!-- Imagen (avatar) -->
                            @php
                                $photoSrc = !empty($teamMember->image)
                                    ? (filter_var($teamMember->image, FILTER_VALIDATE_URL) ? $teamMember->image : asset($teamMember->image))
                                    : asset('cd-project/img/defaults/team/team-1.jpg');
                            @endphp
                            <img src="{{ $photoSrc }}" 
                                 class="card-img-top border-radius-0" 
                                 alt="{{ $teamMember->name }} Image" />

                            <div class="card-body text-center px-4 pt-5 pb-2">
                                <!-- Nombre -->
                                <h2 class="card-title alternative-font-4 text-color-dark font-weight-semibold line-height-1 text-5 mb-1">
                                    {{ $teamMember->name }}
                                </h2>

                                <!-- Puesto (Position) -->
                                <p class="text-color-grey positive-ls-3 mb-3">
                                    {{ $teamMember->position }}
                                </p>

                                <!-- Áreas de ejercicio (description) -->
                                <p class="mb-1">
                                    <span><strong class="text-uppercase">{{ __('Exercise Areas')}}</strong></span>
                                </p>
                                <p class="font-weight-light text-color-dark line-height-7 mb-2">
                                    {{ $teamMember->description ?? 'N/A' }}
                                </p>

                                <!-- Idiomas -->
                                <p class="mt-3 mb-1">
                                    <span><strong class="text-uppercase">{{ __('Languages') }}</strong></span>
                                </p>
                                <p>
                                    @if(is_array($teamMember->languages))
                                        {{ implode(', ', $teamMember->languages) }}
                                    @else
                                        {{ $teamMember->languages ?? 'N/A' }}
                                    @endif
                                </p>
                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- Contact Info -->
                        <h3 class="font-weight-bold text-color-dark text-transform-none text-5-5 mb-2">
                            Contact Info
                        </h3>

                        <!-- LinkedIn -->
                        <div class="d-flex align-items-center py-2 my-4">
                            <i class="fab fa-linkedin text-color-primary text-4 me-3"></i>
                            <div>
                                <h4 class="alternative-font-4 font-weight-bold line-height-1 text-3 mb-0">LinkedIn</h4>
                                @if($teamMember->linkedin)
                                    <a href="{{ $teamMember->linkedin }}" target="_blank"
                                       class="text-decoration-none text-color-default text-color-hover-primary">
                                       {{ $teamMember->linkedin }}
                                    </a>
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </div>
                        </div>

                        <!-- Email -->
                        <div class="d-flex align-items-center py-2 my-4">
                            <i class="fas fa-envelope text-color-primary text-4 me-3"></i>
                            <div>
                                <h4 class="alternative-font-4 font-weight-bold line-height-1 text-3 mb-0">
                                    E-mail Address
                                </h4>
                                @if($teamMember->email)
                                    <a href="mailto:{{ $teamMember->email }}"
                                       class="text-decoration-none text-color-default text-color-hover-primary">
                                       {{ $teamMember->email }}
                                    </a>
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </div>
                        </div>
                    </aside>
                </div>

                <!-- Main Col (details) -->
                <div class="col-lg-8 mb-5 mb-lg-0">
                    
                    @if($teamMember->details)
                        <div class="team-member-details text-4 pb-2 mb-4">
                            {!! $teamMember->details !!}
                        </div>    
                    @else
                        <div class="alert alert-warning alert-dismissible" role="alert">
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            <strong>Sorry!</strong> We have not updated this member's reference information yet. Please check back later.
                        </div>
                    @endif

                </div>
            </div>
        </div>
    </section>
@endsection

@section('css')
<style>
/* Estilos premium para los detalles del perfil */
.team-member-details {
    line-height: 1.8;
    color: #444;
}
.team-member-details h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1A325D; /* Azul distinguido */
    margin-top: 2.2rem;
    margin-bottom: 1.2rem;
    border-bottom: 2px solid #eef2f7;
    padding-bottom: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.team-member-details p {
    margin-bottom: 1.2rem;
    font-size: 1.05rem;
    color: #444;
}
.team-member-details p strong {
    color: #1A325D;
    font-size: 1.1rem;
}
.team-member-details ol, .team-member-details ul {
    margin-bottom: 1.8rem;
    padding-left: 1.8rem;
}
.team-member-details li {
    margin-bottom: 0.6rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #333;
}

/* Estabilizar el layout para evitar el "salto" del footer */
.section {
    min-height: calc(100vh - 200px);
}

/* Asegurar que el sidebar sticky no cause problemas de layout */
.sidebar[data-plugin-sticky] {
    will-change: transform;
    backface-visibility: hidden;
}

/* Prevenir reflow en el contenido principal */
.col-lg-8 {
    contain: layout;
}

/* Estabilizar el footer */
footer, .footer {
    position: relative;
    z-index: 1;
}

/* Prevenir el salto en el contenedor principal */
.container {
    overflow-x: hidden;
}

/* Asegurar que las animaciones no afecten el layout */
* {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Estabilizar el sticky positioning */
[data-plugin-sticky] {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
</style>
@endsection