@extends('layouts.app')


<style>
     .container {
        display: flex;
        max-width: 900px;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .news {
        flex: 2;
        /* Coluna das notícias ocupa 2 partes */
        padding: 20px;
        /* border-right: 1px solid #eaeaea; */
        /* Divisão entre colunas */
    }

    .comments {
        flex: 1;
        /* Coluna dos comentários ocupa 1 parte */
        padding: 20px;
    }

    h1 {
        font-size: 1.8em;
        margin-bottom: 10px;
        color: #262626;
    }

    p {
        font-size: 0.9em;
        line-height: 1.5;
    }

    strong {
        color: #555;
    }

    .img-fluid {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
        margin-bottom: 15px;
    }

    .btn {
        padding: 8px 12px;
        font-size: 0.9em;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .btn-success {
        background-color: #032b46;
        /* Azul do Instagram */
        color: white;
    }

    .btn-success:hover {
        background-color: #00293f;
    }

    .btn-danger {
        background-color: #e1306c;
        /* Rosa do Instagram */
        color: white;
    }

    .btn-danger:hover {
        background-color: #c62850;
    }

    h4 {
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 1.3em;
        color: #262626;
    }

    #comments {
        margin-top: 15px;
    }

    .comment {
        border: 1px solid #eaeaea;
        border-radius: 4px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .mb-3 {
        margin-bottom: 15px;
    }

    .form-control {
        width: 100%;
        padding: 10px;
        /* border: 1px solid #ddd; */
        border-radius: 5px;
        box-sizing: border-box;
    }

    .form-control:focus {
        border-color: #003355;
        /* Azul do Instagram */
        outline: none;
        box-shadow: 0 0 5px rgba(1, 66, 109, 0.3);
    }
</style>

@section('content')
    <div class="container">
        <div class="news">
            <h1>{{ $news->title }}</h1>
            <p><strong>Publicado em:</strong> {{ $news->published_at }}</p>

            @if ($news->image)
                <img src="{{ asset('storage/' . $news->image) }}" alt="Imagem da notícia" class="img-fluid mb-3">
            @endif

            <p>{{ $news->content }}</p>

            <form action="{{ route('likes.store', $news->id) }}" method="POST" style="display: inline;">
                @csrf
                <button type="submit" class="btn btn-success">Curtir</button>
            </form>

            <form action="{{ route('likes.destroy', $news->id) }}" method="POST" style="display: inline;">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger">Descurtir</button>
            </form>
        </div>

        <div class="comments">
            <h4>Comentários</h4>
            <div id="comments">
                @foreach ($news->comments as $comment)
                    <div class="comment">
                        <strong>Comentário:</strong> {{ $comment->comment }} <br>
                        <strong>Por:</strong> {{ $comment->user->name }} ({{ $comment->created_at }})
                    </div>
                @endforeach
            </div>

            <h4>Adicionar Comentário</h4>
            <form action="{{ route('comments.store', $news->id) }}" method="POST">
                @csrf
                <div class="mb-3">
                    <textarea class="form-control" name="comment" rows="3" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Comentar</button>
            </form>
        </div>
    </div>
@endsection