@extends('layouts.digitar')

@section('Breadcrumbs')
    {!! Breadcrumbs::render('documents.show') !!}
@endsection

@section('content')
    <style rel="stylesheet">
        .title-session {
            padding: 10;
            margin-left: 10px;
            margin-top: 5px;
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUa7mZ4YvJrS80uQ3G1po5+5oP9y+5FOFeIB2M91/wJqBMyPQVmmz0SXNw4+" crossorigin="anonymous">

    <div class="form-group">
        <a href="{!! route('documents.index') !!}" class="btn btn-default">Voltar</a>
    </div>

    <div class="custom-container-table the-box rounded">
        <div class="row">
            <!-- Coluna da esquerda -->
            <div class="col-md-6">
                <div class="ementa mb-3">
                    <b>Ementa:</b> <br>
                    {!! $document->content !!}
                    <br>
                </div>
                <div class="ementa mb-3">
                    <div class="flex-container">
                        <div class="field"><b>Protocolo:</b>
                            @if (isset($document->document_protocol->number))
                                {{ $document->document_protocol->number }}
                            @else
                                Não protocolado
                            @endif
                        </div>
                        <div class="field"><b>Última Movimentação:</b> {{ $document->updated_at->format('d/m/y') }}</div>
                        <div class="field"><b>Autoria:</b>
                            @if (isset($document->author->name))
                                {{ $document->author->name }}
                            @else
                                Não informado
                            @endif
                        </div>
                    </div>
                    <div class="Tramites">


                    </div>
                </div>
                <div class="listSessionContainer ementa">
                    <div style="width: 100%">
                        <p class="title-session"><strong>Sessão: </strong></p>
                    </div>

                    @if ($meetings)
                        <div style="width: 100%">
                            @foreach ($meetings as $meeting)
                                <a href="/meeting/pauta/{{ $meeting->meeting_id }}/pdf" target="_blank" class="listSession">
                                    <i class="fa fa-file-pdf-o me-2"></i> Gerar pauta em PDF
                                </a>
                            @endforeach
                        </div>
                        <div style="width: 100%">
                            @foreach ($meetings as $meeting)
                                <div>
                                    <a href="{{ route('meetings.show', $meeting->meeting_id) }}" class="listSession">
                                        <i class="fa fa-calendar me-2"></i> Visualizar Sessão {!! $meeting->number !!}
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="SessionNull">Não foram encontradas sessões.</p>
                    @endif
                </div>
                <div class="ementa">
                    <b>Resumo:</b> <br>
                    <b>{!! $document->resume !!}</b>
                </div>

                <div class="titleProcessing" style="margin-top:15px;">
                    <b>Tramitação</b>
                </div>
                <br>
                <div class="container my-5">
                    <div class="timeline">
                        @forelse ($documentProcess as $processing)
                            <a href="{{ route('documents.advices', $document->id) }}"
                                style="text-decoration: none; color: inherit;">
                                <div class="timeline-step">
                                    <div class="timeline-icon">
                                        <i class="fas fa-check-circle text-primary"></i>
                                    </div>
                                    <div class="timeline-content">
                                        <h5 class="font-weight-bold mb-1">
                                            {{ $processing->statusProcessingDocument->name ?? 'Status não encontrado' }}
                                        </h5>
                                        <p class="text-muted mb-1">
                                            {{ \Carbon\Carbon::createFromFormat('d/m/Y H:i', $processing->processing_document_date)->format('y/m/d') }}
                                        </p>
                                        <p class="text-muted mb-0">
                                            Destino: {{ $processing->destination->name ?? 'Não informado' }}
                                        </p>
                                        <p class="text-muted mb-0">
                                            @if (isset($processing->file))
                                                Arquivo: <a
                                                    href="{{ asset('/assets/processing_documents/' . $processing->file) }}">
                                                    <button class="btn btn-success">Download</button>
                                                </a>
                                            @endif
                                        </p>
                                        @if (isset($processing->advice_publication_id->name))
                                            <small class="d-block mt-2">
                                                Descrição complementar: {{ $processing->advice_publication_id->name }}
                                            </small>
                                        @endif
                                    </div>
                                </div>
                            @empty
                                <div class="alert alert-info small-alert text-start" role="alert">
                                    Nenhuma tramitação encontrada para este documento.
                                </div>
                            </a>
                        @endforelse
                    </div>
                </div>
            </div>
            <!-- Coluna da direita -->
            <div class="col-md-6">
                <h3><strong>Documento gerado no sistema</strong></h3>
                <table class="table">
                    <thead>
                        <tr style="background-color:#3BAFDA;color:white;border-radius:5px;">
                            <th scope="col">Documento</th>
                            <th scope="col">Data Publicação</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>
                                <a onclick="loadPdf('{{ route('documents.show', $document->id) }}')" class="linkPdf"
                                    data-toggle="modal" data-target="#pdfModal" style="cursor: pointer">
                                    <i class="fa fa-file-pdf ml-3" aria-hidden="true"></i>
                                    {{ $document->number }} - {{ $document->document_type->name }}
                                </a>

                                <!-- Botão para copiar o link -->
                                <button class="btn btn-sm btn-outline-secondary ml-2"
                                    onclick="copyToClipboard('{{ route('documents.show', $document->id) }}', this)">
                                    Copiar Link
                                </button>
                            </th>
                            <td>{{ $document->date }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-md-6">
                <h3><strong>Documentos anexados</strong></h3>
                <table class="table">
                    <thead>
                        <tr style="background-color:#3BAFDA;color:white;border-radius:5px;">
                            <th scope="col">Arquivo</th>
                            <th scope="col">paginas</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $files = \App\Models\DocumentFiles::whereNull('deleted_at')
                                ->where('document_id', '=', $document->id)
                                ->get();
                        @endphp
                        @foreach ($files as $file)
                            <tr>
                                <td>
                                    <i class="fa fa-file-pdf ml-3" aria-hidden="true"></i>
                                    <a class="link-attachament"
                                        href="https://superlegis.nyc3.digitaloceanspaces.com/{{ $file->filename }}"
                                        target="_blank">
                                        {{ \Illuminate\Support\Str::limit($file->filename_origin, 30, '...') }}
                                    </a>

                                    <!-- Botão de cópia -->
                                    <button class="btn btn-sm btn-outline-secondary ml-2"
                                        onclick="copyToClipboard('{{ 'https://superlegis.nyc3.digitaloceanspaces.com/' . $file->filename }}', this)">
                                        Copiar Link
                                    </button>
                                </td>
                                <td>{{ $file->num_pag }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal para exibição do PDF -->
    <div class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-labelledby="pdfModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="pdfModalLabel">Visualização do Documento</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <iframe id="pdfViewer" style="width: 100%; height: 600px;" frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </div>
    <script>
        function loadPdf(pdfUrl) {
            document.getElementById('pdfViewer').src = pdfUrl;
        }
    </script>

    <style>
        .link-attachament {
            font-weight: bold;
            color: black;
        }

        .small-alert {
            padding: 0.25rem 0.5rem;
            font-size: 16px;
            max-width: fit-content;
            display: inline-block;
        }

        .custom-container-table {
            padding: 15px;
        }

        .Tramites {
            margin-top: 20px;
        }

        .flex-container {
            display: flex;
            flex-wrap: wrap;
        }

        .field {
            margin-right: 10px;
        }

        .ementa {
            margin-top: 15px;
        }

        .col-md-6:first-child {
            max-height: 80vh;
            overflow-y: auto;
            padding-right: 15px;
        }

        .listSession {
            display: inline-block;
            margin-top: 50px;
            width: 180px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            font-weight: bold;
            color: #fff;
            text-decoration: none;
            background: linear-gradient(135deg, #3BAFDA, #3BAFDA);
            border-radius: 8px;
        }

        .listSession:hover {
            box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
            color: white;
            text-decoration: none;
        }

        .listSessionContainer {
            list-style: none;
            padding: 10;
            display: flex;
            flex-direction: row;
            gap: 10px;
        }

        .SessionNull {
            color: red;
            font-weigth: 500;
            padding: 10px;
        }

        .Observation {
            position: relative;
            justify-content: center;
            align-items: center;
            font-size: 15px;
            padding: 15px;
        }

        .custom-container-table {
            heigth: auto;
        }

        @media (max-width: 768px) {
            .row {
                flex-direction: column;
            }

            .col-md-6 {
                margin-bottom: 20px;
            }
        }

        .timeline {
            position: relative;
            padding-left: 2rem;
        }

        .timeline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 8px;
            height: 100%;
            width: 2px;
            background-color: #e0e0e0;
        }

        .timeline-step {
            position: relative;
            margin-bottom: 2rem;
        }

        .timeline-icon {
            position: absolute;
            left: -18px;
            top: 0;
            font-size: 1.5rem;
            background-color: #fff;
            padding-right: 10px;
            z-index: 1;
        }

        .timeline-content {
            margin-left: 1.5rem;
            padding: 0.5rem 1rem;
            border-left: 3px solid transparent;
            transition: border-color 0.3s ease;
        }

        .timeline-step:hover .timeline-content {
            border-color: #007bff;
        }

        .timeline-content p,
        .timeline-content small {
            margin-bottom: 0.25rem;
        }
    </style>
@endsection
<script>
    function copyToClipboard(text, button) {
        navigator.clipboard.writeText(text).then(function() {
            const originalText = button.innerText;
            button.innerText = 'Copiado!';
            setTimeout(() => {
                button.innerText = originalText;
            }, 2000);
        }, function(err) {
            console.error('Erro ao copiar texto: ', err);
        });
    }
</script>