@extends('layouts._includes.admin.Header')
@section('titulo', 'Ver Parceiro')

@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 do Parceiro: {{ $parceiro->vc_nome }}</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>{{ $parceiro->id }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Nome:</strong></td>
                                                <td>{{ $parceiro->vc_nome }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Link:</strong></td>
                                                <td><a href="{{ $parceiro->vc_link }}" target="_blank">{{ $parceiro->vc_link }}</a></td>
                                            </tr>
                                            <tr>
                                                <td><strong>Data de Criação:</strong></td>
                                                <td>{{ $parceiro->created_at->format('d/m/Y H:i:s') }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Última Atualização:</strong></td>
                                                <td>{{ $parceiro->updated_at->format('d/m/Y H:i:s') }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <h5>Descrição:</h5>
                                    <div class="card">
                                        <div class="card-body">
                                            {{ $parceiro->txt_descricao }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @if($parceiro->vc_imagem)
                                <div class="row mt-4">
                                    <div class="col-md-12">
                                        <h5>Imagem:</h5>
                                        <div class="row">
                                            <div class="col-md-4 mb-3">
                                                <div class="card">
                                                    <img src="{{ asset('storage/' . $parceiro->vc_imagem) }}"
                                                         class="card-img-top img-thumbnail"
                                                         style="height: 200px; object-fit: cover; cursor: pointer;"
                                                         alt="{{ $parceiro->vc_nome }}"
                                                         data-toggle="modal"
                                                         data-target="#imageModal"
                                                         data-image="{{ asset('storage/' . $parceiro->vc_imagem) }}"
                                                         data-legenda="{{ $parceiro->vc_nome }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <a href="{{ route('admin.parceiros.listar') }}" class="btn btn-secondary">Voltar à Lista</a>
                                    @if (Auth::user()->id_nivel_usuario <= 3)
                                        <a href="{{ route('admin.parceiros.editar', $parceiro->id) }}" class="btn btn-primary">Editar</a>
                                    @endif
                                </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);
            });
        });
    </script>

@endsection