@extends('layout.front.master')

@section('title', config('site.seo.title', config('site.name')))
@section('description', config('site.seo.description', ''))
@section('keywords', config('site.seo.keywords', ''))

@section('content')

{{-- ───────────────────────── HERO SLIDER ─────────────────────────
     Fuente: $carouselImages del WelcomeCarouselController (editable
     desde /admin/welcomecarousel). Fallback: 2 slides hardcoded con
     defaults del demo si el módulo no inyecta data o está vacío.
--}}
@php
    // Slides desde el módulo WelcomeCarousel. Cada slide tiene:
    //   image_path, title, subtitle, caption (opcionales)
    $hasCarousel = isset($carouselImages) && $carouselImages->count() > 0;

    // Fallback: 2 slides hardcoded con assets default + textos config
    $defaultSlides = collect([
        (object) [
            'image_path' => site_asset_url('hero_background', 'cd-project/img/demos/medical/slides/slide-medical-1.jpg'),
            'title'      => config('site.welcome.hero1_headline', 'ESPECIALISTAS'),
            'subtitle'   => config('site.welcome.hero1_subheadline', '20 años cuidando de vos'),
            'caption'    => config('site.welcome.hero1_caption', config('site.contact.address', 'Atención de primer nivel')),
        ],
        (object) [
            'image_path' => site_asset_url('hero_background_2', 'cd-project/img/demos/medical/slides/slide-medical-2.jpg'),
            'title'      => config('site.welcome.hero2_headline', 'PEDÍ TU TURNO'),
            'subtitle'   => config('site.welcome.hero2_subheadline', 'Reservá online o por WhatsApp'),
            'caption'    => config('site.welcome.hero2_caption', 'Atención online y presencial'),
        ],
    ]);

    $slides = $hasCarousel ? $carouselImages : $defaultSlides;
@endphp

<div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-vertical-center dots-align-right dots-orientation-portrait custom-dots-style-1 show-dots-hover show-dots-xs nav-style-1 nav-inside nav-inside-plus nav-dark nav-lg nav-font-size-lg show-nav-hover mb-0" data-plugin-options="{'autoplayTimeout': 7000}" data-dynamic-height="['650px','650px','650px','550px','500px']" style="height: 650px;">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            @foreach($slides as $slide)
                @php
                    $imageUrl = filter_var($slide->image_path, FILTER_VALIDATE_URL)
                        ? $slide->image_path
                        : asset($slide->image_path);
                    $slideTitle    = $slide->title ?? '';
                    $slideSubtitle = $slide->subtitle ?? '';
                    $slideCaption  = $slide->caption ?? ($slide->description ?? '');
                @endphp
                <div class="owl-item position-relative overlay overlay-show overlay-op-3" style="background-image: url('{{ $imageUrl }}'); background-size: cover; background-position: center;">
                    <div class="container position-relative z-index-3 h-100">
                        <div class="row align-items-center h-100">
                            <div class="col pb-4">
                                @if($slideTitle)
                                    <h1 class="text-color-light font-weight-extra-bold text-13 line-height-2 mb-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">{{ $slideTitle }}</h1>
                                @endif
                                @if($slideSubtitle)
                                    <h2 class="text-color-light font-weight-extra-bold text-4-5 line-height-2 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750">{{ $slideSubtitle }}</h2>
                                @endif
                                @if($slideCaption)
                                    <div class="d-inline-block">
                                        <p class="text-color-light custom-border-bottom-1 font-weight-light text-4-5 mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000">{{ $slideCaption }}</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <div class="owl-dots mb-5">
        @foreach($slides as $i => $slide)
            <button role="button" class="owl-dot {{ $i === 0 ? 'active' : '' }}"><span></span></button>
        @endforeach
    </div>
</div>

{{-- ───────────────────────── 4 BOXES INFO ───────────────────────── --}}
<section class="section-custom-medical">
    <div class="container">
        <div class="row medical-schedules">
            {{-- Box 1: Atención médica --}}
            <div class="col-xl-3 box-one bg-color-primary appear-animation" data-appear-animation="fadeInLeft" data-appear-animation-delay="0">
                <div class="feature-box feature-box-style-2 align-items-center p-4">
                    <div class="feature-box-icon p-0">
                        <i class="icon-heart icons font-weight-light" style="font-size: 2.5rem;"></i>
                    </div>
                    <div class="feature-box-info">
                        <h4 class="m-0 p-0">{{ config('site.welcome.box1_title', __('Atención médica')) }}</h4>
                    </div>
                </div>
            </div>

            {{-- Box 2: Especialidades (link a /services) --}}
            <div class="col-xl-3 box-two bg-color-tertiary appear-animation" data-appear-animation="fadeInLeft" data-appear-animation-delay="600">
                <h5 class="m-0">
                    <a href="{{ url('/services') }}" title="{{ __('Ver especialidades') }}">
                        {{ config('site.welcome.box2_title', __('Especialidades')) }}
                        <i class="icon-arrow-right-circle icons"></i>
                    </a>
                </h5>
            </div>

            {{-- Box 3: Horarios (expanded al hover) --}}
            <div class="col-xl-3 box-three bg-color-primary appear-animation" data-appear-animation="fadeInLeft" data-appear-animation-delay="1200">
                <div class="expanded-info p-4 bg-color-primary">
                    <div class="info custom-info">
                        @php $hw = explode(':', config('site.contact.hours_weekday', 'Lun-Vie : 8:30 a 19:00'), 2); @endphp
                        <span>{{ trim($hw[0]) }}</span>
                        <span>{{ trim($hw[1] ?? '') }}</span>
                    </div>
                    <div class="info custom-info">
                        @php $hs = explode(':', config('site.contact.hours_saturday', 'Sábado : 9:00 a 13:00'), 2); @endphp
                        <span>{{ trim($hs[0]) }}</span>
                        <span>{{ trim($hs[1] ?? '') }}</span>
                    </div>
                    <div class="info custom-info">
                        @php $hd = explode(':', config('site.contact.hours_sunday', 'Domingo : cerrado'), 2); @endphp
                        <span>{{ trim($hd[0]) }}</span>
                        <span>{{ trim($hd[1] ?? '') }}</span>
                    </div>
                </div>
                <h5 class="m-0">
                    {{ config('site.welcome.box3_title', __('Horarios de atención')) }}
                    <i class="icon-arrow-right-circle icons"></i>
                </h5>
            </div>

            {{-- Box 4: Urgencias --}}
            <div class="col-xl-3 box-four bg-color-secondary p-0 appear-animation" data-appear-animation="fadeInLeft" data-appear-animation-delay="1800">
                @php $emergencyPhone = config('site.contact.emergency_phone') ?: config('site.contact.phone'); @endphp
                <a href="tel:{{ preg_replace('/[^0-9+]/', '', (string) $emergencyPhone) }}" class="text-decoration-none">
                    <div class="feature-box feature-box-style-2 m-0">
                        <div class="feature-box-icon">
                            <i class="icon-call-out icons"></i>
                        </div>
                        <div class="feature-box-info">
                            <label class="font-weight-light">{{ config('site.welcome.box4_label', __('Urgencias')) }}</label>
                            <strong class="font-weight-normal">{{ $emergencyPhone ?: __('Reservá tu turno') }}</strong>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        {{-- ───────────────────────── ABOUT PREVIEW ───────────────────────── --}}
        <div class="row mt-5 mb-5 pt-3 pb-3 align-items-center">
            <div class="col-md-8">
                <h2 class="font-weight-semibold mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">{{ config('site.welcome.about_heading', __('Sobre nosotros')) }}</h2>
                <p class="lead font-weight-normal appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">
                    {{ config('site.welcome.about_subtitle', config('site.tagline', __('Atención médica integral y humana'))) }}
                </p>
                <p class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700">
                    {{ config('site.welcome.about_text', config('site.description', __('Somos un equipo de profesionales comprometidos con tu salud. Combinamos experiencia clínica, tecnología y atención personalizada para acompañarte en cada paso.'))) }}
                </p>
                <a class="btn btn-outline btn-quaternary custom-button text-uppercase mt-4 mb-4 mb-md-0 font-weight-bold appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="900" href="{{ url('/about') }}">{{ __('Conocernos') }}</a>
            </div>
            <div class="col-md-4">
                @php $aboutImg = config('site.welcome.about_image', 'cd-project/img/demos/medical/gallery/gallery-1.jpg'); @endphp
                <img src="{{ filter_var($aboutImg, FILTER_VALIDATE_URL) ? $aboutImg : asset($aboutImg) }}" alt="{{ __('Sobre nosotros') }}" class="img-fluid box-shadow-custom" />
            </div>
        </div>
    </div>
</section>

{{-- ───────────────────────── SERVICES / DEPARTAMENTOS ───────────────────────── --}}
@if(is_module_active('services') && isset($services) && $services->count() > 0)
<section class="section section-no-border mb-0">
    <div class="container">
        <div class="row pt-3">
            <div class="col">
                <h2 class="font-weight-semibold mb-0">{{ config('site.welcome.services_heading', __('Especialidades')) }}</h2>
                <p class="lead font-weight-normal">{{ config('site.welcome.services_subtitle', __('Nuestras áreas de atención')) }}</p>
            </div>
        </div>
        <div class="row mt-4">
            @foreach($services->take(6) as $index => $service)
                @php
                    $serviceIcon = $service->icon ?? null;
                    $serviceImg  = $service->header ?? null;
                @endphp
                <div class="col-lg-4 mb-4">
                    <div class="feature-box feature-box-style-2 appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="{{ 200 + ($index * 100) }}">
                        <div class="feature-box-icon" style="min-width: 4.7rem;">
                            @if($serviceImg && !filter_var($serviceImg, FILTER_VALIDATE_URL) === false)
                                <img src="{{ filter_var($serviceImg, FILTER_VALIDATE_URL) ? $serviceImg : asset($serviceImg) }}" class="img-fluid" alt="{{ $service->title }}" />
                            @elseif($serviceIcon)
                                <i class="{{ $serviceIcon }} text-color-primary text-7"></i>
                            @else
                                <i class="icon-energy text-color-primary text-7"></i>
                            @endif
                        </div>
                        <div class="feature-box-info">
                            <h4 class="font-weight-semibold">
                                <a href="{{ url('/services/' . $service->slug) }}" class="text-decoration-none">{{ $service->title }}</a>
                            </h4>
                            <p>{{ \Illuminate\Support\Str::limit(strip_tags($service->description ?? $service->content ?? ''), 120) }}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="row mt-2 pb-4">
            <div class="col-lg-12 text-center">
                <a class="btn btn-outline btn-quaternary custom-button text-uppercase mt-4 font-weight-bold" href="{{ url('/services') }}">{{ __('Ver todas las especialidades') }}</a>
            </div>
        </div>
    </div>
</section>
@endif

{{-- ───────────────────────── BLOG PREVIEW (RESOURCES STYLE) ───────────────────────── --}}
@php
    // El controller inyecta $featuredPosts o $recentPosts según el demo. Soporto ambos.
    $welcomePosts = $featuredPosts ?? ($recentPosts ?? ($posts ?? collect()));
@endphp
@if(is_module_active('blog') && $welcomePosts->count() > 0)
<section class="section my-0">
    <div class="container">
        <div class="row pt-3">
            <div class="col">
                <h2 class="font-weight-semibold mb-0">{{ config('site.welcome.blog_heading', __('Guía de salud y bienestar')) }}</h2>
                <p class="lead font-weight-normal">{{ config('site.welcome.blog_subtitle', __('Información útil para tu bienestar')) }}</p>
            </div>
        </div>
        <div class="row">
            @foreach($welcomePosts->take(3) as $index => $post)
                @php
                    $postImg = $post->header
                        ?: asset('cd-project/img/demos/medical/blog/blog-' . (($index % 3) + 1) . '.jpg');
                @endphp
                <div class="col-md-4 mb-4">
                    <a href="{{ url('/blog/' . $post->slug) }}" class="text-decoration-none">
                        <span class="thumb-info thumb-info-side-image thumb-info-side-image-custom thumb-info-no-zoom thumb-info-side-image-custom-highlight d-block">
                            <span class="thumb-info-side-image-wrapper">
                                <img alt="{{ $post->title }}" class="img-fluid" src="{{ filter_var($postImg, FILTER_VALIDATE_URL) ? $postImg : asset($postImg) }}">
                            </span>
                            <span class="thumb-info-caption px-4 pb-3">
                                <span class="thumb-info-caption-text p-xl">
                                    <h4 class="font-weight-semibold mb-1">{{ $post->title }}</h4>
                                    <p class="text-3">{{ \Illuminate\Support\Str::limit(strip_tags($post->summary ?? $post->content ?? ''), 110) }}</p>
                                </span>
                            </span>
                        </span>
                    </a>
                </div>
            @endforeach
        </div>
        <div class="row pb-4">
            <div class="col-lg-12 text-center">
                <a class="btn btn-outline btn-quaternary custom-button text-uppercase font-weight-bold" href="{{ url('/blog') }}">{{ __('Ver todas las notas') }}</a>
            </div>
        </div>
    </div>
</section>
@endif

{{-- ───────────────────────── PRODUCTS — destacados con slider ───────────────────────── --}}
@if(is_module_active('products'))
    @php
        // Cargamos los 8 productos más recientes activos. Owl Carousel los
        // muestra en slides según breakpoint (4 cols desktop / 2 tablet / 1 mobile).
        $featuredProducts = \App\Modules\Products\Models\Product::where('is_active', true)
            ->with('images', 'category')
            ->orderBy('id', 'desc')
            ->limit(8)
            ->get();
    @endphp
    @if($featuredProducts->count() > 0)
        <section class="section section-no-border my-0 py-5 bg-white">
            <div class="container py-4">
                {{-- Header de sección --}}
                <div class="row mb-4">
                    <div class="col-md-8">
                        <h2 class="font-weight-bold text-color-dark mb-1">
                            Productos destacados
                        </h2>
                        <p class="text-muted text-3">
                            Suplementos formulados con criterio clínico + material educativo y programas digitales.
                        </p>
                    </div>
                    <div class="col-md-4 text-md-end align-self-center">
                        <a href="{{ url('/products-catalogue') }}" class="btn btn-outline-primary btn-modern">
                            Ver todos los productos <i class="fas fa-arrow-right ms-2"></i>
                        </a>
                    </div>
                </div>

                {{-- Slider Owl Carousel: 4 col desktop / 3 lg / 2 md / 1 sm --}}
                <div class="owl-carousel owl-theme nav-style-3 nav-style-3-rounded nav-with-transparency stage-margin nav-inside"
                     data-plugin-options="{'items': 4, 'margin': 16, 'loop': true, 'dots': false, 'nav': true, 'autoplay': true, 'autoplayTimeout': 6000, 'responsive': {'0': {'items': 1}, '576': {'items': 2}, '992': {'items': 3}, '1200': {'items': 4}}}">

                    @foreach($featuredProducts as $product)
                        @php $img = $product->images->first()->image_path ?? null; @endphp
                        <div>
                            <div class="product">
                                <div class="product-thumb-info border-0 mb-3 position-relative">
                                    {{-- Badges --}}
                                    <div class="product-thumb-info-badges-wrapper">
                                        @if($product->created_at && $product->created_at->gt(now()->subDays(30)))
                                            <span class="badge badge-ecommerce text-bg-success">NUEVO</span>
                                        @endif
                                        @if($product->is_digital)
                                            <span class="badge badge-ecommerce text-bg-info">DIGITAL</span>
                                        @endif
                                    </div>

                                    <a href="{{ route('front.products.show', $product->slug) }}">
                                        <div class="product-thumb-info-image">
                                            @if($img)
                                                <img alt="{{ $product->name }}" class="img-fluid" src="{{ $img }}">
                                            @else
                                                <div class="bg-light d-flex align-items-center justify-content-center" style="aspect-ratio: 3 / 2;">
                                                    <i class="fas fa-image text-muted fs-2x"></i>
                                                </div>
                                            @endif
                                        </div>
                                    </a>
                                </div>

                                @if($product->category)
                                    <a href="{{ route('front.products.category', $product->category->slug) }}"
                                       class="d-block text-uppercase text-decoration-none text-color-default text-color-hover-primary line-height-1 text-0 mb-1">
                                        {{ $product->category->name }}
                                    </a>
                                @endif
                                <h3 class="text-3-5 font-weight-medium line-height-3 mb-1">
                                    <a href="{{ route('front.products.show', $product->slug) }}"
                                       class="text-color-dark text-color-hover-primary text-decoration-none">
                                        {{ \Illuminate\Support\Str::limit($product->name, 50) }}
                                    </a>
                                </h3>
                                <p class="price text-4 mb-0">
                                    <span class="amount text-color-dark font-weight-semi-bold">
                                        ${{ number_format($product->price, 0, ',', '.') }}
                                        @if($product->quantity_label)
                                            <small class="text-muted fw-normal">{{ $product->quantity_label }}</small>
                                        @endif
                                    </span>
                                </p>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </section>
    @endif
@endif

{{-- ───────────────────────── TESTIMONIALS ───────────────────────── --}}
@if(is_module_active('testimonials') && isset($testimonials) && $testimonials->count() > 0)
<section class="section-secondary">
    <div class="container">
        <div class="row pt-5 pb-5">
            <div class="owl-carousel owl-theme nav-bottom rounded-nav" data-plugin-options="{'items': 1, 'loop': true, 'dots': false, 'autoplay': true, 'autoplayTimeout': 7000}">
                @foreach($testimonials as $t)
                    <div class="row justify-content-center">
                        <div class="col-lg-8 pt-4 mt-3">
                            <div class="testimonial testimonial-style-2 testimonial-with-quotes mb-0">
                                <div class="testimonial-quote">"</div>
                                <blockquote>
                                    <p class="font-weight-light">{{ $t->content ?? $t->testimonial }}</p>
                                </blockquote>
                                <div class="testimonial-author">
                                    <p class="text-uppercase">
                                        <strong>{{ $t->author ?? $t->name }}</strong>
                                        @if(!empty($t->position) || !empty($t->title))
                                            <span class="d-block font-weight-light text-3">{{ $t->position ?? $t->title }}</span>
                                        @endif
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
@endif

@endsection