@extends('layouts._includes.admin.Header')
@section('titulo', 'Ver Notícia')

@section('conteudo')

    <div class="content-wrapper">
        <!-- START PAGE CONTENT-->
        <div class="page-content fade-in-up">
            <div class="row">
                <div class="col-md-12">
                    <div class="ibox">
                        <div class="ibox-head">
                            <div class="ibox-title">Detalhes da Notícia: {{ $noticia->vc_titulo }}</div>
                            <div class="ibox-tools">
                                <a class="ibox-collapse"><i class="fa fa-minus"></i></a>
                            </div>
                        </div>
                        <div class="ibox-body">
                            <div class="row">
                                <div class="col-md-8">
                                    <table class="table table-bordered">
                                        <tbody>
                                            <tr>
                                                <td><strong>ID:</strong></td>
                                                <td>{{ $noticia->id }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Título:</strong></td>
                                                <td>{{ $noticia->vc_titulo }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Status:</strong></td>
                                                <td>
                                                    @if($noticia->vc_status == 'publicada')
                                                        <span class="badge badge-success">Publicada</span>
                                                    @elseif($noticia->vc_status == 'rascunho')
                                                        <span class="badge badge-warning">Rascunho</span>
                                                    @else
                                                        <span class="badge badge-secondary">Oculta</span>
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong>Data de Criação:</strong></td>
                                                <td>{{ $noticia->created_at->format('d/m/Y H:i:s') }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Última Atualização:</strong></td>
                                                <td>{{ $noticia->updated_at->format('d/m/Y H:i:s') }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Categorias:</strong></td>
                                                <td>
                                                    @foreach($noticia->categorias as $categoria)
                                                        <span class="badge badge-info">{{ $categoria->vc_nome }}</span>
                                                    @endforeach
                                                    @if($noticia->categorias->count() == 0)
                                                        <span class="text-muted">Nenhuma categoria</span>
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong>Total de Imagens:</strong></td>
                                                <td>{{ $noticia->imagens->count() }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <h5>Resumo:</h5>
                                    <div class="card">
                                        <div class="card-body">
                                            {{ $noticia->txt_resumo }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <h5>Conteúdo:</h5>
                                    <div class="card">
                                        <div class="card-body">
                                            {!! nl2br(e($noticia->txt_conteudo)) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @if($noticia->imagens->count() > 0)
                                <div class="row mt-4">
                                    <div class="col-md-12">
                                        <h5>Imagens:</h5>
                                        <div class="row">
                                            @foreach($noticia->imagens->sortBy('it_ordem') as $imagem)
                                                <div class="col-md-4 mb-3">
                                                    <div class="card">
                                                        <img src="{{ asset('storage/' . $imagem->vc_caminho_imagem) }}"
                                                             class="card-img-top img-thumbnail"
                                                             style="height: 200px; object-fit: cover; cursor: pointer;"
                                                             alt="{{ $imagem->vc_legenda }}"
                                                             data-toggle="modal"
                                                             data-target="#imageModal"
                                                             data-image="{{ asset('storage/' . $imagem->vc_caminho_imagem) }}"
                                                             data-legenda="{{ $imagem->vc_legenda ?: 'Sem legenda' }}">
                                                        <div class="card-body">
                                                            <p class="card-text">
                                                                <strong>Legenda:</strong> {{ $imagem->vc_legenda ?: 'Sem legenda' }}
                                                            </p>
                                                            <p class="card-text">
                                                                <small class="text-muted">Ordem: {{ $imagem->it_ordem }}</small>
                                                            </p>
                                                            @if (Auth::user()->id_nivel_usuario <= 3)
                                                                <a href="{{ route('admin.noticias.remover_imagem', $imagem->id) }}"
                                                                   class="btn btn-sm btn-danger"
                                                                   data-confirm="Tem certeza que deseja remover esta imagem?">
                                                                    Remover
                                                                </a>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <a href="{{ route('admin.noticias.listar') }}" class="btn btn-secondary">Voltar à Lista</a>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para Visualização Ampliada de Imagens -->
    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Visualizar Imagem</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <img id="modalImage" src="" class="img-fluid" alt="Imagem ampliada">
                    <p id="modalLegenda" class="mt-2"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // Modal para visualização ampliada de imagens
            $('img[data-toggle="modal"]').click(function() {
                var imageSrc = $(this).data('image');
                var legenda = $(this).data('legenda');

                $('#modalImage').attr('src', imageSrc);
                $('#modalLegenda').text(legenda);
            });

            // Confirmação para remover imagem
            $('a[data-confirm]').click(function(ev) {
                var href = $(this).attr('href');
                if (!$('#confirm-delete').length) {
                    $('body').append(
                        '<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Remover Imagem</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">Tem certeza que pretende remover esta imagem?</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button> <a class="btn btn-danger" id="dataConfirmOK">Remover</a> </div></div></div></div>'
                    );
                }
                $('#dataConfirmOK').attr('href', href);
                $('#confirm-delete').modal({
                    show: true
                });
                return false;
            });
        });
    </script>

@endsection