@extends('layouts.master')
@section('title', $noticias->title)
@section('content')
    <div class="container pt-4">
        {{ Breadcrumbs::render('noticia', $noticias) }}
    </div>

    <div class="container-fluid">
        <div class="row g-0">

            {{-- COLUNA ESQUERDA - IMAGEM + COMPARTILHAR --}}
            <div class="col-lg-6">
                @if (isset($noticias->image))
                    <figure class="m-0">
                        <a href="{{ asset('assets/notices/images/' . $noticias->image) }}" data-fancybox
                            data-caption="{{ $noticias->title }}">
                            <img src="{{ asset('assets/notices/images/' . $noticias->image) }}"
                                class="img-fluid img-clickable w-100 full-height-img" alt="{{ $noticias->title }}">
                        </a>
                    </figure>
                @endif

                {{-- Compartilhar abaixo da imagem --}}
                <div class="p-3 bg-light border-top border-bottom mt-3">
                    <section class="compartilhar-section">
                        <h4 class="mb-3 fw-bold">Compartilhar:</h4>
                        <div class="d-flex gap-3 flex-wrap">
                            <button class="btn share-btn facebook" id="facebook-share-btn">
                                <i class="bi bi-facebook"></i>
                                <span>Facebook</span>
                            </button>

                            <button class="btn share-btn whatsapp" id="whatsapp-share-btn">
                                <i class="bi bi-whatsapp"></i>
                                <span>WhatsApp</span>
                            </button>
                        </div>
                    </section>
                </div>
            </div>

            {{-- COLUNA DIREITA - TEXTO DA NOTÍCIA --}}
            <div class="col-lg-6">
                <div class="p-5">
                    <article>
                        <header class="mb-4">
                            <strong class="display-6 fw-bolder">{{ $noticias->title }}</strong>

                            @if ($noticias->chapeu)
                                <p class="lead">{{ $noticias->chapeu }}</p>
                            @endif

                            <div class="text-muted fst-italic article-meta mb-2">
                                Publicado em
                                {{ \Carbon\Carbon::parse($noticias->dateshow)->translatedFormat('d \d\e F \d\e Y') }}
                                @if ($noticias->photographer)
                                    | Por {{ $noticias->photographer }}
                                @endif
                            </div>
                        </header>

                        <section class="article-body mb-5">
                            {!! $noticias->content !!}
                        </section>

                        @if ($noticias->peoples && !$noticias->peoples->isEmpty())
                            <section class="mb-5">
                                <h4 class="fw-bold border-bottom mb-3 pb-2">Parlamentares Relacionados</h4>
                                <p class="lead">
                                    @foreach ($noticias->peoples as $vereador)
                                        <a href="{{ route('perfilVereadores', ['id' => $vereador->id, 'name' => $vereador->name]) }}"
                                            class="text-decoration-none">
                                            {{ $vereador->name }}</a>{{ !$loop->last ? ',' : '' }}
                                    @endforeach
                                </p>
                            </section>
                        @endif
                    </article>

                    @push('scripts')
                        @include('layouts.scripts.redessociais')
                    @endpush
                </div>
            </div>
        </div>
    </div>
@endsection