@extends('layouts.digitar')

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

@section('content')
    <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('lawsProjects.index') !!}" class="btn btn-default">Voltar</a>
    </div>
    <div class="custom-container-table the-box rounded">
        <div class="row">
            <div class="col-md-6 CollumLeft">
                <div class="col-12 ementa" style="margin-bottom: 15px;">
                    <b>Ementa:</b> <br>
                    {!! $lawsProject->title !!}
                </div>
                <div class="col-12" style="margin-bottom: 15px;">
                    <div class="flex-container">
                        <div class="field"><b>Protocolo:</b> {{ $lawsProject->protocol }}</div>
                        <div class="field"><b>Última Movimentação:</b> {{ $lawsProject->updated_at->format('d/m/y') }}
                        </div>
                        <div class="field"><b>Autoria:</b> {{ $lawsProject->law_type->name }}</div>
                    </div>
                </div>
                <div class="col ementa">
                    <b>Ementa:</b> <br>
                    {!! substr($lawsProject->description, 0, 200) . '...' !!}
                </div>
                <div class="col ementa">
                    <b>Sessões:</b> <br>
                    @if ($lawsProject && $lawsProject->meetings->count() > 0)
                        <p>Total de Sessões: {{ $lawsProject->meetings->count() }}</p>
                        <ul class="listSessionContainer">
                            @foreach ($lawsProject->meetings as $meeting)
                                <li>
                                    <a href="{{ route('meetings.show', $meeting->id) }}" class="listSession">
                                        Visualizar Sessão {{ $meeting->number }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p>não foram encontradas sessões.</p>
                    @endif
                </div>
                <div class="col ementa">
                    <b>Parecer:</b> {{ $situation->name }}
                    <br>
                    <b>Responsável:</b> {{ $lawsProject->assemblyman->short_name }}
                    <br>
                    <label>
                        <b class="offaprove">
                            Aprovação:
                        </b>
                        @if ($lawsProject->town_hall == 1)
                            ✅
                        @else
                            ❌
                        @endif
                    </label>
                </div>
                <div class="titleProcessing" style="margin-top:15px;">
                    <b>Tramitação</b>
                </div>
                <div class="container my-5">
                    <div class="timeline">
                        @forelse ($lawsProject->processing()->orderBy('processing_date', 'desc')->get() as $processing)
                            <a href="{{ route('lawsProjects.advices', $lawsProject->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->adviceSituationLaw->name ?? 'Ação não encontrada' }}
                                        </h5>
                                        <p class="text-muted mb-1">
                                            {{ \Carbon\Carbon::createFromFormat('d/m/Y H:i', $processing->processing_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->advice_publication_id->name))
                                                Descrição complementar: {{ $processing->advice_publication_id->name }}
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            @empty
                                <div class="alert alert-info small-alert text-start" role="alert">
                                    Nenhuma tramitação encontrada para este projeto.
                                </div>
                            </a>
                        @endforelse
                    </div>
                </div>
            </div>

            <div class="col-md-6 CollumRigth">
                <table class="table">
                    <thead>
                        <tr style="background-color:#3BAFDA;color:white;border-radius:5px;">
                            <th scope="col">Referente à</th>
                            <th scope="col">Data Publicação</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>
                                <a href="#" onclick="loadPdf('{{ route('lawsProjects.show', [$lawsProject->id]) }}')"
                                    class="linkPdf" data-toggle="modal" data-target="#pdfModal">
                                    <i class="fa fa-file-pdf ml-3" aria-hidden="true"></i>
                                    {{ $lawsProject->project_number }} - {{ $lawsProject->law_type->name }}
                                </a>

                                <button class="btn btn-sm btn-outline-secondary ml-2"
                                    onclick="copyToClipboard('{{ route('lawsProjects.show', [$lawsProject->id]) }}', this)">
                                    Copiar Link
                                </button>
                            </th>
                            <td>{{ $lawsProject->created_at->format('d/m/y - H:i') }}</td>
                        </tr>
                        @if ($lawsProject->reference_id > 0)
                            @php
                                $laws_project = \App\Models\LawsProject::find($lawsProject->reference_id);
                            @endphp
                            @if ($laws_project)
                                <tr>
                                    <th>
                                        <a href="#"
                                            onclick="loadPdf('{{ route('lawsProjects.show', [$laws_project->id]) }}')"
                                            class="linkPdf" data-toggle="modal" data-target="#pdfModal">
                                            <i class="fa fa-file-pdf ml-3" aria-hidden="true"></i>
                                            {{ $laws_project->project_number }} - {{ $laws_project->law_type->name }}
                                        </a>

                                        <button class="btn btn-sm btn-outline-secondary ml-2"
                                            onclick="copyToClipboard('{{ route('lawsProjects.show', [$laws_project->id]) }}', this)">
                                            Copiar Link
                                        </button>
                                    </th>
                                    <td>{{ $laws_project->created_at->format('d/m/y - H:i') }}</td>
                                </tr>
                            @endif
                        @endif
                        @foreach ($law_files as $file)
                            <tr>
                                <th>
                                    <a onclick="loadPdf('https://superlegis.nyc3.digitaloceanspaces.com/{{ $file->filename }}')"
                                        class="linkPdf" data-toggle="modal" data-target="#pdfModal">
                                        <i class="fa fa-file-pdf ml-3" aria-hidden="true"></i>
                                        {{ $file->filename }}
                                    </a>

                                    <button class="btn btn-sm btn-outline-secondary ml-2"
                                        onclick="copyToClipboard('https://superlegis.nyc3.digitaloceanspaces.com/{{ $file->filename }}', this)">
                                        Copiar Link
                                    </button>
                                </th>
                                <td>{{ $file->created_at->format('d/m/y - H:i') }}</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>
        #pdfModal>div.modal-dialog.modal-lg>div>div.modal-header>button>span {
            width: 100%;
            height: auto;
        }

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


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


        .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, #3BAFDA, #3BAFDA);
            border-radius: 0px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease-in-out;
        }

        .listSession:hover {
            background: linear-gradient(135deg, #3BAFDA, #3BAFDA);
            transform: translateY(-3px);
            box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
            color: white;
        }

        .timeline {
            position: relative;
            padding-left: 2rem;
            margin: 10px;
            width: 100%;
            hight: auto;
            justify-content: center;
            align-items: center;
        }

        .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(() => {
            const originalText = button.innerText;
            button.innerText = 'Copiado!';
            setTimeout(() => {
                button.innerText = originalText;
            }, 2000);
        }).catch(err => {
            console.error('Erro ao copiar: ', err);
        });
    }
</script>