@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="hero">
            <div class="swiper">
                <div class="swiper-wrapper">
                    @foreach($sliders as $slider)
                        <div class="swiper-slide">
                            <a href="{{ $slider->link }}">
                                <picture>
                                    {{-- Imagen para móviles --}}
                                    <source srcset="{{ asset('sliders/mobile/' . $slider->mobile_image) }}"
                                        media="(max-width: 768px)">
                                    {{-- Imagen para desktop (por defecto) --}}
                                    <img src="{{ asset('sliders/desktop/' . $slider->desktop_image) }}"
                                        alt="{{ $slider->title }}" style="width:100%; height:auto;">
                                </picture>
                            </a>
                            @if($slider->show_caption)
                                @php
                                    $locale = App::getLocale();
                                    $sliderTitle = $slider->getTranslation('title', $locale, false);
                                    $sliderDescription = $slider->getTranslation('description', $locale, false);
                                @endphp
                                @if($sliderTitle)
                                    <div class="caption">
                                        <h3>{{ $sliderTitle }}</h3>
                                        @if($sliderDescription)
                                            <p>{{ $sliderDescription }}</p>
                                        @endif
                                    </div>
                                @endif
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="content">
            <h1 class="title">
                {{ App::getLocale() == 'es' ? '. nuestros programas' : '. our programs' }}
            </h1>
        </div>
        <div class="our-programs grid">
            @foreach($projects as $project)
                @php
                    $locale = App::getLocale();
                    $projectTitle = $project->getTranslation('title', $locale, false);
                    $projectRegion = $project->getTranslation('region', $locale, false);
                    $projectCountry = $project->getTranslation('country', $locale, false);
                @endphp
                @if($projectTitle)
                    <a href="{{ route('project.show', $project->slug) }}" class="program-card summer-program">
                        <div class="img">
                            <img src="{{ asset('projects/desktop/' . $project->desktop_image) }}" alt="">
                        </div>
                        <div class="description">
                            @if($projectRegion || $projectCountry)
                                <div class="region">
                                    @if($projectRegion){{ $projectRegion }}@endif
                                    @if($projectRegion && $projectCountry)<br>@endif
                                    @if($projectCountry){{ $projectCountry }}@endif
                                </div>
                            @endif
                            <div class="bottom-card">
                                <h4 class="title-program">{{ $projectTitle }}</h4>
                                @if($project->estimated_cost)
                                    <div class="cost">
                                        {{ App::getLocale() == 'es' ? 'Costo estimado: $' : 'Estimated Cost: $' }}{{ $project->estimated_cost }}
                                    </div>
                                @endif
                            </div>
                        </div>
                    </a>
                @endif
            @endforeach
        </div>
    </div>

    <div class="container">
        <div class="two-cols grid">
            <div class="aside">
                <div class="tabs">
                    @if($homeSection && $homeSection->tabs)
                        @php
                            $locale = App::getLocale();
                            $filteredTabs = collect($homeSection->tabs)->filter(function ($tab) use ($locale) {
                                return !empty($tab['title'][$locale] ?? null) && !empty($tab['content'][$locale] ?? null);
                            });
                        @endphp
                        @foreach($filteredTabs as $tab)
                            <div class="tab {{ $loop->first ? 'active' : '' }}" onclick="openTab(event, 'tab-{{ $loop->index }}')">
                                <p>{{ $tab['title'][$locale] ?? '' }} ></p>
                            </div>
                        @endforeach
                    @endif
                </div>
                <div class="program-card">
                    @if($homeSection)
                        @php
                            $locale = App::getLocale();
                            $hasDestacadoTitle = !empty($homeSection->getTranslation('destacado_title', $locale, false));
                            $hasDestacadoContent = !empty($homeSection->getTranslation('destacado_content', $locale, false));
                        @endphp

                        @if($hasDestacadoTitle && $hasDestacadoContent)
                            <div class="img">
                                <div class="caption">
                                    {{ $homeSection->getTranslation('destacado_title', $locale, false) }}
                                </div>
                                @if($homeSection->destacado_image)
                                    <img src="{{ asset('home_sections/' . $homeSection->destacado_image) }}">
                                @endif
                            </div>
                            <div class="description">
                                {!! $homeSection->getTranslation('destacado_content', $locale, false) !!}
                            </div>
                        @endif
                    @endif
                </div>
            </div>
            <div class="main-tabs">
                @if($homeSection && $homeSection->tabs)
                    @php
                        $locale = App::getLocale();
                        $filteredTabs = collect($homeSection->tabs)->filter(function ($tab) use ($locale) {
                            return !empty($tab['title'][$locale] ?? null) && !empty($tab['content'][$locale] ?? null);
                        });
                    @endphp
                    @foreach($filteredTabs as $tab)
                        <div id="tab-{{ $loop->index }}" class="main-tab {{ $loop->first ? 'open' : '' }}">
                            <h4>{{ $tab['title'][$locale] ?? '' }}</h4>
                            {!! $tab['content'][$locale] ?? '' !!}
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </div>
@endsection