@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'];
    $breadcrumbs = get_module_breadcrumbs('team-members', $pageTitle);
@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" />
@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) -->
                            <img src="{{ asset($teamMember->image) }}" 
                                 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)
                        <p class="font-weight-semibold text-4 pb-2 mb-4">
                            {!! $teamMember->details !!}
                        </p>    
                    @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>
/* 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