{{--
  Componente Page Header Unificado - Porto 12.1.0
  Basado en el header de Properties (el preferido)

  Props:
  - title: Título principal (requerido)
  - subtitle: Subtítulo descriptivo (opcional)
  - icon: Clase del icono (opcional)
  - breadcrumbs: Array de breadcrumbs (opcional)
  - background: Tipo de background - 'primary' (default), 'dark', 'gradient' (opcional)
--}}

@props([
    'title' => 'Página',
    'subtitle' => '',
    'icon' => '',
    'breadcrumbs' => [],
    'background' => 'primary'
])

@php
    // Configuración de backgrounds según Porto 12.1.0
    $backgroundClasses = [
        'primary' => 'bg-color-primary',
        'dark' => 'bg-color-dark',
        'gradient' => 'bg-gradient-primary',
        'secondary' => 'bg-color-secondary',
    ];

    $bgClass = $backgroundClasses[$background] ?? $backgroundClasses['primary'];
@endphp

{{-- Page Header usando Porto page-header-modern --}}
<section class="page-header page-header-modern {{ $bgClass }} border-0 m-0">
    <div class="container container-xl-custom">
        <div class="row text-center text-md-start py-4">
            {{-- Título y Subtítulo --}}
            <div class="col-md-8 order-2 order-md-1 align-self-center p-static">
                <h1 class="font-weight-bold text-color-light text-8 mb-2 appear-animation"
                    data-appear-animation="fadeInUp"
                    data-appear-animation-delay="200">
                    @if($icon)
                        <i class="{{ $icon }} me-3"></i>
                    @endif
                    {{ $title }}
                </h1>
                @if($subtitle)
                    <p class="text-color-light opacity-8 text-4 mb-0 appear-animation"
                       data-appear-animation="fadeInUp"
                       data-appear-animation-delay="400">
                        {{ $subtitle }}
                    </p>
                @endif
            </div>

            {{-- Breadcrumbs --}}
            <div class="col-md-4 order-1 order-md-2 align-self-center text-md-end">
                @if(count($breadcrumbs) > 0)
                    <ul class="breadcrumb breadcrumb-light d-block text-md-end text-4 mb-0 appear-animation"
                        data-appear-animation="fadeInUp"
                        data-appear-animation-delay="600">
                        @foreach($breadcrumbs as $breadcrumb)
                            @if(isset($breadcrumb['active']) && $breadcrumb['active'])
                                <li class="text-uppercase active">{{ $breadcrumb['title'] }}</li>
                            @else
                                <li>
                                    <a href="{{ $breadcrumb['url'] ?? '#' }}" class="text-decoration-none">
                                        {{ $breadcrumb['title'] }}
                                    </a>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                @else
                    {{-- Breadcrumbs por defecto si no se proporcionan --}}
                    <ul class="breadcrumb breadcrumb-light d-block text-md-end text-4 mb-0 appear-animation"
                        data-appear-animation="fadeInUp"
                        data-appear-animation-delay="600">
                        <li><a href="{{ url('/') }}" class="text-decoration-none">Inicio</a></li>
                        <li class="text-uppercase active">{{ $title }}</li>
                    </ul>
                @endif
            </div>
        </div>
    </div>
</section>

{{-- CSS personalizado para animaciones adicionales --}}
@push('styles')
<style>
.page-header .appear-animation {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.page-header.animated .appear-animation {
    opacity: 1;
    transform: translateY(0);
}

/* Gradiente personalizado para background gradient */
.bg-gradient-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}

/* Hover effect para breadcrumbs */
.breadcrumb-light a:hover {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: underline !important;
}
</style>
@endpush

{{-- JavaScript para activar animaciones --}}
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const pageHeader = document.querySelector('.page-header');
    if (pageHeader) {
        setTimeout(() => {
            pageHeader.classList.add('animated');
        }, 100);
    }
});
</script>
@endpush