@extends('layouts.site')
@section('content')
    <link rel="shortcut icon" href="assets/images/logoLegis.ico" type="image/png" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <div class="container mb-5 mt-4" id="appContent">
        <div class="header">
            <div>Superlegis</div>
            <div class="indicators d-flex justify-content-between">
                <div class="indicator">
                    <div class="title">Documentos:</div>
                    <div class="value">{{ $documentsCount }}</div>
                </div>
                <div class="indicator">
                    <div class="title">Projetos de Lei:</div>
                    <div class="value">{{ $lawsCount }}</div>
                </div>
                <div class="indicator">
                    <div class="title">Sessões:</div>
                    <div class="value">{{ $meetingCount }}</div>
                </div>
                <div class="indicator">
                    <div class="title">Vereadores:</div>
                    <div class="value">{{ $assemblymanCount }}</div>
                </div>
            </div>
            <a class="login" href="/login"><i class="fa fa-sign-in me-2"></i>ACESSO RESTRITO</a>
        </div>

        <div class="logobox text-center">
            @if ($logo)
                <img src="{{ $logo }}" alt="Superlegis" class="img-fluid">
            @endif
            <div class="title">{{ $company->shortName }}</div>
        </div>

        <div class="buttonBack">
            <a href="/" class="ButtonGoBack">Voltar</a>
        </div>

        <div class="row">
            <!-- Coluna esquerda: Lista de documentos -->
            <div class="col-md-6">
                <table class="table">
                    <thead>
                        <tr style="background-color:#35afd7;color:white;">
                            <th scope="col">Referente à</th>
                            <th scope="col">Data Publicação</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>
                                <a href="#" onclick="loadPdf('{{ route('documents.show', $document->id) }}')"
                                    class="linkPdf">
                                    <i class="fa fa-file-pdf ml-3" aria-hidden="true"></i>
                                    {{ $document->number }} - {{ $document->document_type->name }}
                                </a>
                            </th>
                            <td> {{ $document->date }}</td>
                        </tr>
                        <tr>
                            <th class="mb-4 mt-4">
                                @foreach ($documentFiles as $doc)
                                    @php
                                        $url = $_SERVER['HTTP_HOST'];
                                        $fullLink =
                                            $url == 'rioverde.localhost:8000'
                                                ? "https://superlegis.nyc3.digitaloceanspaces.com/doc_rio_verde/{$doc->filename}"
                                                : "https://superlegis.nyc3.digitaloceanspaces.com/{$doc->filename}";
                                    @endphp

                                    @if ($doc->filename)
                                        <div class="col-md-3 d-flex align-items-center mb-2"
                                            style="width: auto !important; gap: 6px;">
                                            <a href="{{ $fullLink }}" target="_blank">
                                                <button class="btn btn-xs btn-info">
                                                    {{ Str::limit($doc->filename, 60) }}
                                                </button>
                                            </a>
                                        </div>
                                    @endif
                                @endforeach
                            <td>Anexo</td>
                            </th>
                        </tr>
                        <script>
                            function loadPdf(url) {

                                var modal = document.createElement("div");
                                modal.classList.add("modal");
                                modal.style.display = "block";
                                modal.style.position = "fixed";
                                modal.style.top = "0";
                                modal.style.left = "0";
                                modal.style.width = "100%";
                                modal.style.height = "100%";
                                modal.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
                                modal.style.zIndex = "1000";

                                var modalContent = document.createElement("div");
                                modalContent.classList.add("modal-content");
                                modalContent.style.position = "relative";
                                modalContent.style.margin = "auto";
                                modalContent.style.top = "10%";
                                modalContent.style.width = "80%";
                                modalContent.style.maxWidth = "800px";
                                modalContent.style.backgroundColor = "#fff";
                                modalContent.style.padding = "20px";
                                modalContent.style.borderRadius = "8px";
                                modalContent.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.3)";
                                modal.appendChild(modalContent);


                                var closeButton = document.createElement("span");
                                closeButton.classList.add("close");
                                closeButton.innerHTML = "&times;";
                                closeButton.style.position = "absolute";
                                closeButton.style.top = "-10px";
                                closeButton.style.right = "10px";
                                closeButton.style.fontSize = "40px";
                                closeButton.style.cursor = "pointer";
                                closeButton.style.color = "red";
                                closeButton.onclick = function() {
                                    modal.style.display = "none";
                                };
                                modalContent.appendChild(closeButton);


                                var iframe = document.createElement("iframe");
                                iframe.src = url;
                                iframe.style.width = "100%";
                                iframe.style.height = "500px";
                                iframe.frameBorder = "0";
                                modalContent.appendChild(iframe);


                                document.body.appendChild(modal);


                                window.onclick = function(event) {
                                    if (event.target === modal) {
                                        modal.style.display = "none";
                                    }
                                };
                            }
                        </script>
                    </tbody>
                </table>
            </div>
            <!-- Coluna direita: Detalhes -->
            <div class="col-md-6">
                <div class="info-container">
                    <!-- Protocolo e Última Movimentação -->
                    <div class="ProtocolInfo ementa">
                        <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> {{ $document->user->name }}</div>
                    </div>
                    <!-- Ementa -->
                    <div class="info-row mb-3">
                        <div class="ementa-text">
                            <b>Ementa:</b> <br>
                            {!! \Illuminate\Support\Str::limit($document->resume, 800, '...') !!}
                            <br>
                        </div>
                    </div>
                    <div class="listSessionContainer ementa">
                        @if ($meetings)
                            <div class="mb-3">
                                <div class="d-flex">
                                    <b style="margin-top:20px;">Total Sessões: {{ $meetings->count() }}</b>
                                    <br><br>
                                    @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" style="padding:10px;"></i> Gerar
                                            pauta em PDF
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                            <div class="Observation"><b>Observações:</b>
                                @if (isset($meeting->observation))
                                    {{ $meeting->observation }}
                            </div>
                        @else
                            <p class="SessionNull">Não foram encontradas sessões.</p>
                        @endif
                    @else
                        <p class="SessionNull">Não foram encontradas sessões.</p>
                        @endif
                    </div>
                    <!-- Parecer e Aprovação -->
                    <div class="aprove-info">
                        <label>
                            <b class="offaprove">
                                Aprovação:
                            </b>
                            @if ($document->approved == 1)
                                ✅
                            @else
                                ❌
                            @endif
                        </label>
                    </div>
                </div>
                <!-- Tramitação -->
                <div class="titleProcessing" style="margin-top:15px;">
                    <b>Tramitação</b>
                </div>
                <div class="processing-info">
                    @if ($documentProcess)
                        @foreach ($documentProcess as $processing)
                            <div class="field"><b>Data:</b>
                                @if (isset($processing->statusProcessingDocument->created_at))
                                    {{ $processing->statusProcessingDocument->created_at->format('d/m/y') }}
                                @endif
                            </div>
                            @if (isset($processing->destination->name))
                                <div class="field"><b>Destinatário:</b> {{ $processing->destination->name }}</div>
                            @else
                                Destinatário: Não informado
                            @endif
                            <div class="field"><b>Ação:</b>
                                {{ $processing->statusProcessingDocument->name ?? 'não encontrado' }} </div>
                            <div class="field">
                                @if (isset($processing->advice_publication_id->name))
                                    <b>Descrição complementar:</b> {{ $processing->advice_publication_id->name }}
                                @endif
                            </div>
                            <hr>
                        @endforeach
                    @else
                        nada encontrado
                    @endif
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection
<style>
    .titleProcessing {
        width: 100%;
        background-color: #35afd8;
        padding: 20px;
        color: white;
        margin-bottom: 10px;
    }

    .processing-info {
        width: 200px;
        height: auto;
        margin-bottom: 50px;
    }

    .aprove-info {
        display: relative;
    }

    .ProtocolInfo {
        display: flex;
        margin-left: 20px;
        padding-left: 50px;
    }

    .info-row {
        margin-bottom: 10px;
        margin-top: 20px;
    }

    .AuthorInfo {
        margin-left: 20px;
    }

    .info-container {
        width: 100%;
        margin-left: 0 auto;
    }

    .buttonBack {
        margin-bottom: 50px;
    }

    .ButtonGoBack {
        background-color: #35afd7;
        padding: 10px;
        color: white;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    }

    .ButtonGoBack:hover {
        background-color: #35afd8;
        color: white;
    }

    @media screen and (max-width: 767px) {
        #appContent {
            width: 100%;
            height: 1500px;
        }

    }

    /* Remove os pontos da lista */
    .listSessionContainer {
        list-style: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        /* Espaçamento entre os botões */
    }

    /* Estilização dos botões */
    .listSession {
        display: inline-block;
        width: 180px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
        background: linear-gradient(135deg, #35afd7, #1e87a5);
        border-radius: 8px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease-in-out;
        margin-bottom: 20px;
    }

    .listSession:hover {
        background: linear-gradient(135deg, #1e87a5, #106b84);
        transform: translateY(-3px);
        box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
        color: white;
    }
</style>
<script>
    function copyToClipboard(text, button) {
        navigator.clipboard.writeText(text).then(() => {
            const original = button.innerText;
            button.innerText = 'Copiado!';
            setTimeout(() => {
                button.innerText = original;
            }, 2000);
        }).catch(err => {
            console.error('Erro ao copiar: ', err);
        });
    }
</script>