@extends('layout.front.master')

@section('title', config('site.name') . ' | ' . config('site.tagline', __('Welcome')))
@section('description', config('site.seo.description') ?? config('site.description', ''))
@section('keywords', config('site.seo.keywords') ?? '')

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.name'))
@section('og_description', config('site.og.description') ?? config('site.description', ''))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', config('site.name'))
@section('twitter_description', config('site.twitter.description') ?? config('site.description', ''))
@section('twitter_image', brand_twitter_image())

@section('content')

<div role="main" class="main" id="main">
    {{-- Slider Revolution Fullscreen - Dinámico desde WelcomeCarousel --}}
    <div class="slider-container rev_slider_wrapper" style="height: 500px;">
        <div id="revolutionSlider" class="slider rev_slider manual" data-version="5.4.8">
            <ul>
                @if(isset($carouselImages) && $carouselImages->count() > 0)
                    @foreach($carouselImages as $index => $carouselImage)
                        @php
                            // Determinar si es una URL completa o una ruta relativa
                            $imageUrl = filter_var($carouselImage->image_path, FILTER_VALIDATE_URL)
                                ? $carouselImage->image_path
                                : asset($carouselImage->image_path);

                            // Usar name como título (o title si existe)
                            $slideTitle = $carouselImage->name ?? ($carouselImage->title ?? __('Slide') . ' ' . ($index + 1));
                        @endphp
                        <li data-transition="fade" data-index="rs-{{ $index }}">
                            <img src="{{ $imageUrl }}"
                                 alt="{{ $slideTitle }}"
                                 data-bgposition="center center"
                                 data-bgfit="cover"
                                 data-bgrepeat="no-repeat"
                                 class="rev-slidebg">

                            <div class="tp-caption tp-caption-photo-label"
                                data-x="['left','left','left','left']"
                                data-hoffset="['28','28','28','28']"
                                data-y="['bottom','bottom','bottom','bottom']"
                                data-voffset="['28','28','28','28']"
                                data-start="500"
                                data-basealign="slide"
                                data-transform_in="y:[-300%];opacity:0;s:500;">{{ $slideTitle }}</div>
                        </li>
                    @endforeach
                @else
                    {{-- Fallback: imágenes estáticas del demo original --}}
                    <li data-transition="fade" data-index="rs-0">
                        <img src="{{ asset('cd-project/img/demos/photography/slides/slide-photography-4.jpg') }}"
                             alt="{{ __('The Landscape') }}"
                             data-bgposition="center center"
                             data-bgfit="cover"
                             data-bgrepeat="no-repeat"
                             class="rev-slidebg">

                        <div class="tp-caption tp-caption-photo-label"
                            data-x="['left','left','left','left']"
                            data-hoffset="['28','28','28','28']"
                            data-y="['bottom','bottom','bottom','bottom']"
                            data-voffset="['28','28','28','28']"
                            data-start="500"
                            data-basealign="slide"
                            data-transform_in="y:[-300%];opacity:0;s:500;">{{ __('The Landscape') }}</div>
                    </li>
                    <li data-transition="fade" data-index="rs-1">
                        <img src="{{ asset('cd-project/img/demos/photography/slides/slide-photography-5.jpg') }}"
                             alt="{{ __('The Explorers') }}"
                             data-bgposition="center center"
                             data-bgfit="cover"
                             data-bgrepeat="no-repeat"
                             class="rev-slidebg">

                        <div class="tp-caption tp-caption-photo-label"
                            data-x="['left','left','left','left']"
                            data-hoffset="['28','28','28','28']"
                            data-y="['bottom','bottom','bottom','bottom']"
                            data-voffset="['28','28','28','28']"
                            data-start="500"
                            data-basealign="slide"
                            data-transform_in="y:[-300%];opacity:0;s:500;">{{ __('The Explorers') }}</div>
                    </li>
                    <li data-transition="fade" data-index="rs-2">
                        <img src="{{ asset('cd-project/img/demos/photography/slides/slide-photography-1.jpg') }}"
                             alt="{{ __('The Happy Family') }}"
                             data-bgposition="center center"
                             data-bgfit="cover"
                             data-bgrepeat="no-repeat"
                             class="rev-slidebg">

                        <div class="tp-caption tp-caption-photo-label"
                            data-x="['left','left','left','left']"
                            data-hoffset="['28','28','28','28']"
                            data-y="['bottom','bottom','bottom','bottom']"
                            data-voffset="['28','28','28','28']"
                            data-start="500"
                            data-basealign="slide"
                            data-transform_in="y:[-300%];opacity:0;s:500;">{{ __('The Happy Family') }}</div>
                    </li>
                    <li data-transition="fade" data-index="rs-3">
                        <img src="{{ asset('cd-project/img/demos/photography/slides/slide-photography-2.jpg') }}"
                             alt="{{ __('The Cool Style') }}"
                             data-bgposition="center center"
                             data-bgfit="cover"
                             data-bgrepeat="no-repeat"
                             class="rev-slidebg">

                        <div class="tp-caption tp-caption-photo-label"
                            data-x="['left','left','left','left']"
                            data-hoffset="['28','28','28','28']"
                            data-y="['bottom','bottom','bottom','bottom']"
                            data-voffset="['28','28','28','28']"
                            data-start="500"
                            data-basealign="slide"
                            data-transform_in="y:[-300%];opacity:0;s:500;">{{ __('The Cool Style') }}</div>
                    </li>
                    <li data-transition="fade" data-index="rs-4">
                        <img src="{{ asset('cd-project/img/demos/photography/slides/slide-photography-3.jpg') }}"
                             alt="{{ __('The Bride') }}"
                             data-bgposition="center center"
                             data-bgfit="cover"
                             data-bgrepeat="no-repeat"
                             class="rev-slidebg">

                        <div class="tp-caption tp-caption-photo-label"
                            data-x="['left','left','left','left']"
                            data-hoffset="['28','28','28','28']"
                            data-y="['bottom','bottom','bottom','bottom']"
                            data-voffset="['28','28','28','28']"
                            data-start="500"
                            data-basealign="slide"
                            data-transform_in="y:[-300%];opacity:0;s:500;">{{ __('The Bride') }}</div>
                    </li>
                @endif
            </ul>
        </div>
    </div>

    {{-- Gallery Section --}}
    @if(is_module_active('gallery') && isset($galleryImages) && $galleryImages->count() > 0)
    <section class="section border-0 m-0 py-5">
        <div class="container">
            <h2 class="font-weight-bold text-8 mb-4 text-center">{{ config('site.welcome.gallery_heading', __('Gallery')) }}</h2>
            <div class="row">
                @foreach($galleryImages->take(8) as $image)
                <div class="col-md-3 col-6 mb-4">
                    <a href="{{ filter_var($image->path, FILTER_VALIDATE_URL) ? $image->path : asset($image->path) }}" class="magnific-popup-image">
                        <img src="{{ filter_var($image->path, FILTER_VALIDATE_URL) ? $image->path : asset($image->path) }}" class="img-fluid" alt="{{ $image->alt ?? '' }}">
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- Blog Section --}}
    @if(is_module_active('blog') && isset($recentPosts) && $recentPosts->count() > 0)
    <section class="section bg-color-grey-scale-1 border-0 m-0 py-5">
        <div class="container">
            <h2 class="font-weight-bold text-8 mb-4 text-center">{{ config('site.welcome.blog_heading', __('Latest Posts')) }}</h2>
            <div class="row">
                @foreach($recentPosts->take(3) as $post)
                <div class="col-lg-4 mb-4">
                    <article class="card border-0 shadow-sm h-100">
                        @if($post->header)
                        <div class="card-img-top overflow-hidden" style="height: 200px;">
                            <a href="{{ route('blog.post', $post->slug) }}">
                                <img src="{{ filter_var($post->header, FILTER_VALIDATE_URL) ? $post->header : asset($post->header) }}" class="img-fluid w-100 h-100" style="object-fit: cover;" alt="{{ $post->title }}">
                            </a>
                        </div>
                        @endif
                        <div class="card-body p-4">
                            <p class="text-uppercase text-1 text-color-default mb-2">
                                <time datetime="{{ $post->created_at->format('Y-m-d') }}">{{ $post->created_at->format('d M Y') }}</time>
                            </p>
                            <h4 class="font-weight-bold text-4 mb-3">
                                <a href="{{ route('blog.post', $post->slug) }}" class="text-decoration-none text-color-dark">{{ $post->title }}</a>
                            </h4>
                            <p class="text-color-grey mb-0">{{ \Illuminate\Support\Str::limit($post->description ?? strip_tags($post->content), 100) }}</p>
                        </div>
                    </article>
                </div>
                @endforeach
            </div>
            <div class="text-center mt-3">
                <a href="{{ route('blog.index') }}" class="btn btn-outline-primary font-weight-semibold px-5">{{ __('VIEW ALL') }}</a>
            </div>
        </div>
    </section>
    @endif

    {{-- Projects Section --}}
    @if(is_module_active('projects') && isset($featuredProjects) && $featuredProjects->count() > 0)
    <section class="section border-0 m-0 py-5">
        <div class="container">
            <h2 class="font-weight-bold text-8 mb-4 text-center">{{ config('site.welcome.projects_heading', __('Projects')) }}</h2>
            <div class="row">
                @foreach($featuredProjects->take(6) as $project)
                <div class="col-md-4 col-6 mb-4">
                    <div class="card border-0 shadow-sm h-100">
                        @if($project->image)
                        <div class="card-img-top overflow-hidden" style="height: 200px;">
                            <a href="{{ route('frontend.projects.show', $project->slug) }}">
                                <img src="{{ filter_var($project->image, FILTER_VALIDATE_URL) ? $project->image : asset($project->image) }}" class="img-fluid w-100 h-100" style="object-fit: cover;" alt="{{ $project->title }}">
                            </a>
                        </div>
                        @endif
                        <div class="card-body p-4">
                            <h5 class="font-weight-bold text-4 mb-2">
                                <a href="{{ route('frontend.projects.show', $project->slug) }}" class="text-decoration-none text-color-dark">{{ $project->title }}</a>
                            </h5>
                            @if($project->description)
                            <p class="text-color-grey text-3 mb-0">{{ \Illuminate\Support\Str::limit($project->description, 80) }}</p>
                            @endif
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="text-center mt-3">
                <a href="{{ route('frontend.projects.index') }}" class="btn btn-outline-primary font-weight-semibold px-5">{{ __('VIEW ALL') }}</a>
            </div>
        </div>
    </section>
    @endif

</div>

@endsection

@section('css')
<style>
html.photography-demo-3 #main {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    position: relative;
}
</style>
@endsection

@section('scripts')
{{-- Sin JS extra: dejamos que demo-photography.js inicialice el slider --}}
@endsection