@extends('layouts._site.main')
@section('title', 'EcoFeminino - Detalhes')
@section('content')

    @php
        use App\Models\Project;
        use App\Models\News;
        use Illuminate\Support\Str;

        $isNews = isset($news);
        $item = $isNews ? $news : $project;

        if ($isNews) {
            $related = $relatedNews ?? collect();

            // Se não houver relacionados, pega 4 notícias recentes diferentes da atual
            if ($related->count() === 0) {
                $related = News::where('id', '!=', $item->id)->latest()->take(4)->get();
            }
        } else {
            // Pega 4 projetos quaisquer diferentes do atual
            $related = Project::where('id', '!=', $item->id)->where('status', 'approved')->latest()->take(4)->get();
        }
    @endphp


    <!--================= Details Section =================-->
    <div class="rts-news-details-section mb--50 full-height" style="background:#e9ecef;">
        <div class="container">
            <div class="rts-post-heading mb--50">
                <div class="heading-content">
                    <div class="contents">

                        {{-- ========================= CABEÇALHO ========================= --}}
                        @if ($isNews)
                            <!-- ======== NOTÍCIA ======== -->
                            <a href="#0" class="news-catagory-tag-3" style="margin-top:5rem;">
                                {{ $item->category->name ?? 'Sem Categoria' }}
                            </a>

                            <h2 class="content-title" style="font-size: 34px !important; line-height: 1.2 !important">
                                {{ $item->title }}
                            </h2>

                            <div class="overview-play-btn">
                                <div class="post-bottom-info">
                                    <span class="post-comment item">
                                        <img src="{{ url('assets/user/images/comment.svg') }}" alt="comment-icon">
                                        {{ $item->created_at->format('d M, Y') }}
                                    </span>
                                </div>
                            </div>
                        @else
                            <!-- ======== PROJETO ======== -->
                            <a href="#0" class="news-catagory-tag-3" style="margin-top:5rem;">
                                {{ ucfirst(strtolower($item->category ?? 'Projeto')) }}
                            </a>

                            <h2 class="content-title" style="font-size: 34px !important; line-height: 1.2 !important">
                                {{ $item->project_name ?? $item->title }}
                            </h2>

                            <div class="overview-play-btn">
                                <div class="post-bottom-info">
                                    @if (!empty($item->organization))
                                        <span class="post-author item">
                                            <img src="{{ url('assets/user/images/user.svg') }}" alt="org-icon">
                                            <strong>Organização:</strong> {{ $item->organization }}
                                        </span>
                                    @endif
                                    <span class="post-comment item">
                                        <img src="{{ url('assets/user/images/date.svg') }}" alt="date-icon">
                                        {{ $item->created_at->format('d M, Y') }}
                                    </span>
                                </div>
                            </div>
                        @endif
                        {{-- ========================= FIM CABEÇALHO ========================= --}}

                    </div>
                </div>
            </div>

            <!-- Imagem principal -->
            <div class="post-picture img-detail">
                <img src="{{ $isNews
                    ? asset('img/news/' . $item->image)
                    : ($item->images->count() > 0
                        ? asset('storage/' . $item->images->first()->image_path)
                        : asset('img/default-project.jpg')) }}"
                    alt="{{ $item->project_name ?? $item->title }}">
            </div>

            <div class="row" style="margin-top: 3rem">
                <div class="col-xl-9">
                    <div class="news-content-box">
                        {{-- ========================= CONTEÚDO ========================= --}}

                        @if ($isNews)
                            {{-- ======== NOTÍCIA ======== --}}
                            @if (isset($item->category) && Str::lower($item->category->name) === 'perfil inspirador')
                                @if ($item->blocks && $item->blocks->count() > 0)
                                    @foreach ($item->blocks as $index => $block)
                                        <div class="perfil-paragrafo">
                                            @if (!empty($block->imagem))
                                                <a href="{{ asset('img/news_blocks/' . $block->imagem) }}"
                                                    class="image-popup-vertical-fit image-m"
                                                    title="{{ $item->subtitle ?? $item->title }}">
                                                    <img src="{{ asset('img/news_blocks/' . $block->imagem) }}"
                                                        alt="Imagem do perfil {{ $item->title }}"
                                                        class="perfil-float {{ $index % 2 ? 'left' : 'right' }}">
                                                </a>
                                            @endif

                                            @if (!empty($block->texto))
                                                <p>{!! nl2br(e($block->texto)) !!}</p>
                                            @endif
                                        </div>
                                    @endforeach
                                @elseif (!empty($item->description))
                                    {!! nl2br(e($item->description)) !!}
                                @else
                                    <em>Sem Conteúdo Disponível para este Perfil.</em>
                                @endif
                            @else
                                {!! $item->description !!}
                            @endif
                        @else
                            {{-- ======== PROJETO ======== --}}

                            {{-- ======== PDF e Link do Projeto ======== --}}
                            @if (!empty($item->pdf_path) || !empty($item->link))
                                <div class="project-resources mt--30">
                                    @if (!empty($item->pdf_path))
                                        <div class="resource">
                                            <h4>Imprimir</h4>
                                            <a href="{{ asset('storage/' . $item->pdf_path) }}" target="_blank"
                                                class="btn btn-outline-danger">
                                                <i class="fas fa-file-pdf"></i> PDF
                                            </a>
                                        </div>
                                    @endif

                                    @if (!empty($item->link))
                                        <div class="resource">
                                            <h4>Link</h4>
                                            <a href="{{ $item->link }}" target="_blank" class="btn btn-outline-primary">
                                                <i class="fas fa-external-link-alt"></i> Visitar
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            @endif

                            {{-- ======== Descrição do Projeto ======== --}}
                            <div class="project-description"
                                style="font-size:1.2rem; line-height:1.9; text-align: justify;">
                                @php
                                    $paragraphs = preg_split("/\r\n|\n|\r/", trim($item->description));
                                @endphp

                                @foreach ($paragraphs as $paragraph)
                                    @php
                                        $trimmed = trim($paragraph);
                                    @endphp

                                    @if ($trimmed === '')
                                        @continue
                                    @endif

                                    {{-- Linhas com ## viram h2 --}}
                                    @if (Str::startsWith($trimmed, '##'))
                                        <h2 style="color:#ff1856; font-size:1.6rem; margin-top:2rem; margin-bottom:1rem;">
                                            {{ trim(Str::replaceFirst('##', '', $trimmed)) }}
                                        </h2>

                                        {{-- Linhas com ### viram h3 --}}
                                    @elseif (Str::startsWith($trimmed, '###'))
                                        <h3
                                            style="color:#ff1856; font-size:1.3rem; margin-top:1.5rem; margin-bottom:0.8rem;">
                                            {{ trim(Str::replaceFirst('###', '', $trimmed)) }}
                                        </h3>

                                        {{-- Linhas totalmente em maiúsculas viram h2 também --}}
                                    @elseif ($trimmed === Str::upper($trimmed) && strlen($trimmed) > 5)
                                        <h2 style="color:#ff1856; font-size:1.6rem; margin-top:2rem; margin-bottom:1rem;">
                                            {{ $trimmed }}
                                        </h2>

                                        {{-- Senão, é um parágrafo normal --}}
                                    @else
                                        <p style="margin-bottom:1.2rem;">{{ $trimmed }}</p>
                                    @endif
                                @endforeach
                            </div>

                            {{-- Galeria de imagens do projeto --}}
                            @if ($item->images && $item->images->count() > 0)
                                <div class="project-gallery mt--30">
                                    <h4>Galeria do Projeto</h4>
                                    <div class="rts-related-grid">
                                        @foreach ($item->images as $img)
                                            <div class="rts-post rts-post-medium img-gallery">
                                                <a href="{{ asset('storage/' . $img->image_path) }}"
                                                    class="image-popup-vertical-fit">
                                                    <img src="{{ asset('storage/' . $img->image_path) }}"
                                                        alt="Imagem do projeto">
                                                </a>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        @endif
                    </div>

                    {{-- ========================= RELACIONADOS ========================= --}}

                    <div style="clear: both;"></div> <!-- Limpa todos os floats -->

                    @if ($related->count() > 0)
                        <div class="rts-related-posts-section rts-read2-section mb--50" style="margin-top:3rem">
                            <div class="news-topbar">
                                <div class="post-type-tag">
                                    @if ($isNews && isset($item->category) && Str::lower($item->category->name) === 'perfil inspirador')
                                        Mais Perfis
                                    @elseif($isNews)
                                        Notícias Relacionadas
                                    @else
                                        Projetos Relacionados
                                    @endif
                                </div>
                            </div>

                            <div class="rts-related-grid">
                                @foreach ($related as $itemRelated)
                                    <div class="rts-post rts-post-medium related-card">
                                        <div class="post-picture img-related">
                                            <a
                                                href="{{ $isNews ? route('site.news.show', $itemRelated->slug) : route('site.projects.show', $itemRelated->slug) }}">
                                                <img src="{{ $isNews
                                                    ? asset('img/news/' . $itemRelated->image)
                                                    : ($itemRelated->images->count() > 0
                                                        ? asset('storage/' . $itemRelated->images->first()->image_path)
                                                        : asset('img/default-project.jpg')) }}"
                                                    alt="{{ $itemRelated->title }}">
                                            </a>
                                        </div>
                                        <div class="contents">
                                            <div class="news-catagory-tag-3">
                                                {{ $isNews ? $itemRelated->category->name ?? 'Sem Categoria' : $itemRelated->category ?? 'Projeto' }}
                                            </div>
                                            <div class="post-title">
                                                <a
                                                    href="{{ $isNews ? route('site.news.show', $itemRelated->slug) : route('site.projects.show', $itemRelated->slug) }}">
                                                    <p class="project-desc mt-3" style="font-size: 18px; font-weight:bold">
                                                        {{ Str::limit(trim(strip_tags($itemRelated->title ?? '')), 40) ?:
                                                            Str::limit(trim(strip_tags($itemRelated->description ?? '')), 120, '...') }}
                                                    </p>
                                                </a>
                                            </div>
                                            <div class="post-bottom-info">
                                                @if ($isNews)
                                                    <span class="post-date item">
                                                        <img class="span-icon"
                                                            src="{{ url('assets/user/images/date.svg') }}" alt="date-icon">
                                                        {{ $itemRelated->created_at->format('d M, Y') }}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @else
                        <div class="rts-related-posts-section rts-read2-section mb--50" style="margin-top:3rem">
                            <div class="news-topbar">
                                <div class="post-type-tag">
                                    @if ($isNews && isset($item->category) && Str::lower($item->category->name) === 'perfil inspirador')
                                        Mais Perfis
                                    @elseif($isNews)
                                        Notícias Relacionadas
                                    @else
                                        Projetos Relacionados
                                    @endif
                                </div>
                            </div>

                            <p style="margin-top: 1rem; font-style: italic; color: #555;">
                                Sem notícias relacionadas.
                            </p>
                        </div>
                    @endif

                </div>
            </div>
        </div>
    </div>

    {{-- ========================= ESTILOS ========================= --}}
    <style>
        .project-resources {
            display: flex;
            flex-wrap: wrap;
            /* Responsivo: quebra em mobile */
            gap: 2rem;
            margin-top: -1rem;
            margin-bottom: 4rem;
        }

        .project-resources .resource {
            display: flex;
            align-items: center;
            /* Alinha título e botão verticalmente */
            gap: 0.5rem;
        }

        .project-resources .resource h4 {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 700;
            color: #413d3e;
        }

        .project-resources .resource .btn {
            font-size: 0.85rem;
            padding: 0.4rem 0.8rem;
            border-radius: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .project-resources {
                flex-direction: column;
                align-items: flex-start;
                gap: 1.2rem;
            }

            .project-resources .project-pdf,
            .project-resources .project-link {
                width: 100%;
                justify-content: flex-start;
            }
        }

        .news-content-box {
            width: 75rem;
        }

        .perfil-paragrafo {
            margin-bottom: 2.5rem;
            font-size: 1.2rem;
            line-height: 1.9;
            color: #000000;
            text-align: justify;
        }

        .perfil-float {
            max-width: 350px;
            height: auto;
            border-radius: 8px;
            margin: 0.5rem 1.5rem 1rem 1.5rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .perfil-float.right {
            float: right;
            margin-left: 1.5rem;
        }

        .perfil-float.left {
            float: left;
            margin-right: 1.5rem;
        }

        .rts-related-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            margin-top: 2rem;
        }

        @media (max-width: 992px) {
            .rts-related-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 576px) {
            .rts-related-grid {
                grid-template-columns: 1fr;
            }
        }

        .project-description h2,
        .project-description h3 {
            color: #ff1856;
            font-weight: 700;
            text-transform: none;
        }

        .project-description h2 {
            font-size: 1.6rem;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }

        .project-description h3 {
            font-size: 1.3rem;
            margin-top: 1.5rem;
            margin-bottom: 0.8rem;
        }

        .project-description p {
            margin-bottom: 1.2rem;
            text-align: justify;
        }

        .img-gallery {
            height: 15rem;
            width: 100%;
            overflow: hidden;
        }

        .img-gallery img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .related-card {
            width: 17rem;
        }
    </style>

    {{-- ========================= SCRIPT ========================= --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            $('.image-popup-vertical-fit').magnificPopup({
                type: 'image',
                closeOnContentClick: true,
                mainClass: 'mfp-img-mobile',
                image: {
                    verticalFit: true
                }
            });
        });
    </script>

@endsection