@extends('frontend.main_master')

@section('content')
@php
    $layoutConfig = is_array($page->layout_config ?? null) ? $page->layout_config : null;
    $builderHero = is_array($layoutConfig['hero'] ?? null) ? $layoutConfig['hero'] : [];
    $builderSections = is_array($layoutConfig['sections'] ?? null) ? $layoutConfig['sections'] : [];

    $hasElementsSection = false;
    $hasZodiacSection = false;
    foreach ($builderSections as $builderSection) {
        if (($builderSection['type'] ?? null) === 'elements') {
            $hasElementsSection = true;
        }
        if (($builderSection['type'] ?? null) === 'zodiac') {
            $hasZodiacSection = true;
        }
    }

    $useBirthChartVisuals =
        in_array((string) ($page->template_key ?? ''), ['birth_chart_article', 'birth_chart_guide'], true)
        || $hasElementsSection
        || $hasZodiacSection;

    $heroTitle = trim((string) ($builderHero['title'] ?? '')) !== '' ? $builderHero['title'] : ($page->title ?? 'Sayfa');
    $heroSubtitle = trim((string) ($builderHero['subtitle'] ?? '')) !== '' ? $builderHero['subtitle'] : ($page->subtitle ?? null);

    $sanitizeHex = static function ($value, $default) {
        $value = trim((string) $value);
        return preg_match('/^#[0-9a-fA-F]{6}$/', $value) ? strtolower($value) : $default;
    };

    $heroTitleColor = $sanitizeHex($builderHero['title_color'] ?? '#ffffff', '#ffffff');
    $heroSubtitleColor = $sanitizeHex($builderHero['subtitle_color'] ?? '#ffffff', '#ffffff');

    $heroButtons = [];
    if (is_array($builderHero['buttons'] ?? null)) {
        foreach ($builderHero['buttons'] as $button) {
            if (!is_array($button)) {
                continue;
            }

            $text = trim((string) ($button['text'] ?? ''));
            $url = trim((string) ($button['url'] ?? ''));

            if ($text === '' || $url === '') {
                continue;
            }

            $heroButtons[] = [
                'text' => $text,
                'url' => $url,
                'bg_color' => $sanitizeHex($button['bg_color'] ?? '#ffffff', '#ffffff'),
                'text_color' => $sanitizeHex($button['text_color'] ?? '#1f2937', '#1f2937'),
            ];
        }
    }

    // Geriye dönük uyumluluk: eski tek buton alanını yeni listeye çevir.
    if (empty($heroButtons)) {
        $legacyButtonText = trim((string) ($builderHero['button_text'] ?? ''));
        $legacyButtonUrl = trim((string) ($builderHero['button_url'] ?? ''));
        if ($legacyButtonText !== '' && $legacyButtonUrl !== '') {
            $heroButtons[] = [
                'text' => $legacyButtonText,
                'url' => $legacyButtonUrl,
                'bg_color' => '#ffffff',
                'text_color' => '#1f2937',
            ];
        }
    }

    $heroBackgroundType = $builderHero['background_type'] ?? 'image';
    $heroBackgroundColor = $builderHero['background_color'] ?? '#1f2937';
    $heroGradientFrom = $builderHero['gradient_from'] ?? '#1f2937';
    $heroGradientTo = $builderHero['gradient_to'] ?? '#7c3aed';

    if ($heroBackgroundType === 'solid') {
        $heroStyle = 'background: ' . $heroBackgroundColor . ';';
    } elseif ($heroBackgroundType === 'gradient') {
        $heroStyle = 'background: linear-gradient(135deg, ' . $heroGradientFrom . ', ' . $heroGradientTo . ');';
    } else {
        $heroImagePath = $page->hero_image ? asset($page->hero_image) : asset('frontend/images/default-hero.jpg');
        $heroStyle = 'background-image: url(' . $heroImagePath . ');';
    }
@endphp

@push('styles')
@if($useBirthChartVisuals)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="{{ asset('frontend/css/page-home.css') }}">
<link rel="stylesheet" href="{{ asset('frontend/css/birth-chart.css') }}">
@endif
<style>
    .builder-text-part {
        border-radius: 1rem;
        padding: 2rem;
        margin-bottom: 1.5rem;
    }
</style>
@endpush

<div class="page-wrapper {{ $useBirthChartVisuals ? 'natal-harita-page' : '' }}">
    <!-- Breadcrumb (SEO için önemli) -->
    <nav aria-label="breadcrumb" class="breadcrumb-section">
        <div class="container">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('index') }}">{{ __('messages.nav_home') }}</a>
                </li>
                @if(isset($page) && isset($page->parent) && $page->parent)
                    <li class="breadcrumb-item">
                        <a href="{{ route('page.show', $page->parent->slug) }}">
                            {{ $page->parent->title }}
                        </a>
                    </li>
                @endif
                <li class="breadcrumb-item active" aria-current="page">
                    {{ $page->title ?? 'Sayfa' }}
                </li>
            </ol>
        </div>
    </nav>

    @push('schema')
    @if(isset($page))
    @php
        $schemaBreadcrumbItems = [
            ['name' => __('messages.nav_home'), 'url' => route('index')],
        ];

        if (isset($page->parent) && $page->parent) {
            $schemaBreadcrumbItems[] = [
                'name' => $page->parent->title,
                'url' => route('page.show', $page->parent->slug),
            ];
        }

        $schemaBreadcrumbItems[] = [
            'name' => $page->title,
            'url' => url()->current(),
        ];
    @endphp
    <x-seo.schema-breadcrumb :items="$schemaBreadcrumbItems" />
    <x-seo.schema-article
        headline="{{ $page->title }}"
        description="{{ $page->meta_description ?? $page->excerpt ?? $page->title }}"
        image="{{ $page->og_image ? asset($page->og_image) : ($page->hero_image ? asset($page->hero_image) : asset('frontend/images/og-image.jpg')) }}"
        datePublished="{{ $page->created_at ? $page->created_at->toIso8601String() : now()->toIso8601String() }}"
        dateModified="{{ $page->updated_at ? $page->updated_at->toIso8601String() : now()->toIso8601String() }}" />
    @endif
    @endpush

    <!-- Hero Section (Dinamik Görsel) -->
    <section class="hero py-5" style="{{ $heroStyle }}">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-lg-8 mx-auto">
                    <div class="hero-content-wrapper">
                        <h1 class="text-balance display-4 display-md-3 display-lg-2 mb-4" style="color: {{ $heroTitleColor }};">
                            {{ $heroTitle }}
                        </h1>
                        @if($heroSubtitle)
                            <p class="lead text-pretty fs-5 fs-md-4 mb-4" style="color: {{ $heroSubtitleColor }};">
                                {{ $heroSubtitle }}
                            </p>
                        @endif

                        @if(!empty($heroButtons))
                            <div class="hero-buttons d-flex flex-column flex-md-row gap-3">
                                @foreach($heroButtons as $heroButton)
                                    @php
                                        $heroButtonClass = $loop->first ? 'hero-btn-primary' : 'hero-btn-secondary';
                                    @endphp
                                    <a
                                        href="{{ $heroButton['url'] }}"
                                        class="{{ $heroButtonClass }} text-center"
                                        style="background: {{ $heroButton['bg_color'] }}; color: {{ $heroButton['text_color'] }}; border-color: {{ $heroButton['bg_color'] }};"
                                    >
                                        {{ $heroButton['text'] }}
                                    </a>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <section class="page-content">
        <div class="container">
            <div class="row">
                <!-- Ana İçerik -->
                <div class="{{ $useBirthChartVisuals ? 'col-lg-12' : 'col-lg-8' }}">
                    <article class="page-article">
                        @if(!empty($builderSections))
                            @foreach($builderSections as $section)
                                @if(($section['type'] ?? null) === 'text_part')
                                    @php
                                        $partBgType = $section['background_type'] ?? 'none';
                                        $partStyle = '';

                                        if ($partBgType === 'solid') {
                                            $partStyle = 'background:' . ($section['background_color'] ?? '#ffffff') . ';';
                                        } elseif ($partBgType === 'gradient') {
                                            $partStyle = 'background: linear-gradient(135deg, ' . ($section['gradient_from'] ?? '#f8fafc') . ', ' . ($section['gradient_to'] ?? '#eef2ff') . ');';
                                        }
                                    @endphp

                                    <section class="builder-text-part" style="{{ $partStyle }}">
                                        @if(!empty($section['heading']))
                                            <h2>{{ $section['heading'] }}</h2>
                                        @endif
                                        @if(!empty($section['text']))
                                            <p>{!! nl2br(e($section['text'])) !!}</p>
                                        @endif
                                    </section>
                                @elseif(($section['type'] ?? null) === 'elements')
                                    @include('frontend.pages.partials.elements-section')
                                @elseif(($section['type'] ?? null) === 'zodiac')
                                    @include('frontend.pages.partials.zodiac-section')
                                @endif
                            @endforeach
                        @else
                            <!-- İçerik -->
                            <div class="content-body">
                                {!! $page->content !!}
                            </div>
                        @endif

                        <!-- Dinamik Görseller (Gallery) -->
                        @if(isset($page->images) && $page->images->count() > 0)
                            <div class="content-gallery mt-5">
                                <div class="row g-3">
                                    @foreach($page->images as $image)
                                        <div class="col-md-6">
                                            <img src="{{ asset($image->path) }}"
                                                 alt="{{ $image->alt ?? $page->title }}"
                                                 class="img-fluid rounded">
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <!-- İlgili İçerikler (Related Pages) -->
                        @if(isset($relatedPages) && $relatedPages->count() > 0)
                            <div class="related-pages mt-5">
                                <h3>Páginas Relacionadas</h3>
                                <div class="row g-3">
                                    @foreach($relatedPages as $related)
                                        <div class="col-md-4">
                                            <a href="{{ route('page.show', $related->slug) }}" class="card text-decoration-none">
                                                <div class="card-body">
                                                    <h5 class="card-title">{{ $related->title }}</h5>
                                                    <p class="card-text text-muted">{{ Str::limit($related->excerpt ?? '', 100) }}</p>
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </article>
                </div>

                <!-- Sidebar (İsteğe bağlı) -->
                @if(!$useBirthChartVisuals)
                    <div class="col-lg-4">
                        <aside class="page-sidebar">
                            <!-- Alt Menü (Eğer alt sayfalar varsa) -->
                            @if(isset($page->children) && $page->children->count() > 0)
                                <div class="sidebar-widget">
                                    <h4>Subpáginas</h4>
                                    <ul class="submenu-list">
                                        @foreach($page->children as $child)
                                            <li>
                                                <a href="{{ route('page.show', $child->slug) }}">
                                                    {{ $child->title }}
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <!-- CTA (Call to Action) -->
                            <div class="sidebar-widget">
                                <div class="cta-box">
                                    <h4>Calcula tu Carta Natal</h4>
                                    <p>Descubre tu mapa astral y conoce tu potencial.</p>
                                    <a href="{{ auth()->check() ? route('panel') : route('login') }}" class="btn btn-primary">
                                        Empezar Ahora
                                    </a>
                                </div>
                            </div>
                        </aside>
                    </div>
                @endif
            </div>
        </div>
    </section>
</div>

@if($hasZodiacSection)
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (!document.querySelector('.zodiac-swiper')) {
                return;
            }

            if (typeof Swiper !== 'function') {
                return;
            }

            new Swiper('.zodiac-swiper', {
                slidesPerView: 1,
                spaceBetween: 30,
                centeredSlides: true,
                loop: true,
                autoplay: {
                    delay: 5000,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                },
                effect: 'coverflow',
                coverflowEffect: {
                    rotate: 15,
                    stretch: 0,
                    depth: 300,
                    modifier: 1.5,
                    slideShadows: true,
                },
                breakpoints: {
                    640: { slidesPerView: 1, spaceBetween: 20 },
                    768: { slidesPerView: 2, spaceBetween: 30 },
                    1024: { slidesPerView: 3, spaceBetween: 40 },
                },
            });
        });
    </script>
@endif
@endsection