@extends('layouts.digitar')
@section('Breadcrumbs')
    {!! Breadcrumbs::render('lawsProjects.show') !!}
@endsection
@section('content')
    <link rel="stylesheet"
        href="{{ asset('assets/css/processing-form.css') }}?v={{ filemtime(public_path('assets/css/processing-form.css')) }}">
    <link rel="stylesheet"
        href="{{ asset('assets/css/processing-timeline.css') }}?v={{ filemtime(public_path('assets/css/processing-timeline.css')) }}">
    <style>
        .response-document-card {
            background: #f8fbff;
            border: 1px solid #d7e7fb;
            border-radius: 8px;
            margin-bottom: 12px;
            padding: 14px 16px;
        }

        .response-document-card__head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
        }

        .response-document-card__title {
            color: #4d6178;
            font-weight: 700;
            line-height: 1.3;
        }

        .response-document-selected {
            min-height: 38px;
            padding: 10px 12px;
            border: 1px dashed #c5d9f1;
            border-radius: 6px;
            background: #fff;
            color: #1f3552;
            font-weight: 600;
        }

        .response-document-attachments {
            margin-top: 10px;
        }

        .response-document-attachment {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 8px 10px;
            border: 1px solid #dde9f6;
            border-radius: 6px;
            background: #fff;
        }

        .response-document-attachment + .response-document-attachment {
            margin-top: 6px;
        }

        .response-document-attachment span {
            min-width: 0;
            color: #4d6178;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .processing-heading-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .processing-new-btn {
            border-radius: 0;
            font-weight: 700;
        }

        .processing-heading-actions .processing-new-btn,
        .processing-heading-actions .processing-back-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0;
            height: 40px;
            line-height: 1;
            padding: 0 16px;
        }

        .processing-modal {
            padding: 10px !important;
            overflow-y: hidden !important;
        }

        .processing-modal.in {
            display: flex !important;
            align-items: center;
            justify-content: center;
        }

        .processing-modal .modal-dialog {
            width: 96%;
            max-width: none;
            margin: 0;
        }

        .processing-modal .modal-content {
            height: calc(100vh - 20px);
            max-height: calc(100vh - 20px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .processing-modal .modal-header,
        .processing-modal .modal-footer {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .processing-modal .processing-form-surface {
            margin: 0;
        }

        .processing-modal .modal-body {
            padding: 10px 16px 8px;
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .processing-modal .processing-editor-group {
            margin-bottom: 8px;
        }

        .processing-modal .processing-editor-card,
        .processing-modal .processing-upload-card {
            padding: 8px;
        }

        .processing-modal .processing-editor-card .cke_chrome {
            width: 100% !important;
        }

        .processing-modal #cke_new_observation .cke_contents,
        .processing-modal #cke_new_observation .cke_wysiwyg_frame {
            height: 110px !important;
        }

        .response-step-modal .select2-container {
            width: 100% !important;
        }

        .response-step-modal .modal-dialog {
            width: 88%;
            max-width: 1120px;
            margin: 6px auto;
        }

        .response-step-modal .modal-content {
            max-height: calc(100vh - 12px);
        }

        .response-step-modal .modal-body {
            padding-top: 8px;
            padding-bottom: 6px;
        }

        #reply_response_document_ids + .select2-container .select2-selection--multiple,
        #reply_response_document_file_id + .select2-container .select2-selection--single {
            min-height: 48px;
            border-color: #d1e0f1;
            border-radius: 8px;
        }

        #reply_response_document_ids + .select2-container .select2-selection--multiple {
            padding: 4px 8px 2px;
        }

        #reply_response_document_ids + .select2-container .select2-selection__rendered,
        #reply_response_document_file_id + .select2-container .select2-selection__rendered {
            line-height: 1.35;
            padding-left: 10px;
        }

        #reply_response_document_ids + .select2-container .select2-selection--multiple .select2-selection__rendered {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: flex-start;
            padding-left: 0;
        }

        #reply_response_document_ids + .select2-container .select2-selection--multiple .select2-selection__choice {
            margin: 0;
            max-width: 100%;
            white-space: normal;
        }

        #reply_response_document_ids + .select2-container .select2-search--inline .select2-search__field {
            margin-top: 4px;
            min-width: 180px;
        }

        #reply_response_document_ids + .select2-container .select2-selection__arrow,
        #reply_response_document_file_id + .select2-container .select2-selection__arrow {
            height: 46px;
        }

        .response-step-form {
            margin: 0;
        }

        .response-step-form .form-group {
            margin-bottom: 10px;
        }

        .response-step-modal .response-editor-card {
            padding: 6px 8px 4px;
        }

        .response-step-modal .response-editor-card .cke_chrome {
            width: 100% !important;
        }

        .response-step-modal #cke_reply_response_text .cke_contents,
        .response-step-modal #cke_reply_response_text .cke_wysiwyg_frame {
            height: 72px !important;
        }

        @media (max-width: 767px) {
            .processing-modal {
                padding: 5px !important;
            }

            .processing-modal .modal-dialog {
                width: 100%;
            }

            .processing-modal .modal-content {
                height: calc(100vh - 10px);
                max-height: calc(100vh - 10px);
            }
        }

        @media (min-width: 1600px) {
            .processing-modal .modal-dialog {
                width: calc(100vw - 32px);
            }

            .processing-modal .modal-content {
                height: calc(100vh - 32px);
                max-height: calc(100vh - 32px);
            }

            .processing-modal #cke_new_observation .cke_contents,
            .processing-modal #cke_new_observation .cke_wysiwyg_frame {
                height: 24vh !important;
                min-height: 220px !important;
            }
        }
    </style>
    <div class="the-box processing-wrapper rounded">
        <div class="panel panel-square panel-default processing-panel processing-form-shell">
            <div class="panel-heading processing-panel-heading">
                <h3 class="panel-title">
                    <i class="fa fa-angle-double-right"></i> TRAMITAÇÃO
                </h3>
                <div class="processing-heading-actions">
                    <button type="button" class="btn btn-info processing-new-btn" data-toggle="modal"
                        data-target="#processingFormModal">
                        {{ $processing_last->isEmpty() ? 'Nova tramitação' : 'Nova etapa de tramitação' }}
                    </button>
                    <a href="{!! route('lawsProjects.index') !!}" class="btn btn-default processing-back-btn">Voltar</a>
                </div>
            </div>
            <div class="panel-body processing-panel-body">
                <div class="row processing-form-grid">
                    <div class="col-md-12 col-sm-12 processing-form-content">
                        <div class="col-md-12 processing-timeline-wrap">
                            <div class="timeline">
                                @forelse($processing_last as $processing)
                                    @php
                                        $observationPreview = trim(strip_tags($processing->obsevation ?? ''));
                                        $hasObservation = $observationPreview !== '';
                                        $observationModalId = 'lawProcessingObservationModal' . $processing->id;
                                        $observationContentId = 'lawProcessingObservationContent' . $processing->id;
                                        $responsePreview = trim(strip_tags($processing->response_text ?? ''));
                                        $hasResponseText = $responsePreview !== '';
                                        $responseModalId = 'lawProcessingResponseModal' . $processing->id;
                                        $responseContentId = 'lawProcessingResponseContent' . $processing->id;
                                        $responseDocumentItems = $processing->responseDocumentItems;
                                        $responseDocumentLabel = $responseDocumentItems
                                            ->map(function ($responseDocument) {
                                                $responseDocumentType = optional($responseDocument->document_type)->name ?? 'Documento';
                                                $responseDocumentNumber = $responseDocument->number ?: 'Sem número';

                                                if (!empty($responseDocument->date)) {
                                                    return $responseDocumentType . ' ' . $responseDocumentNumber . '/' . $responseDocument->getYear($responseDocument->date);
                                                }

                                                return $responseDocumentType . ' ' . $responseDocumentNumber;
                                            })
                                            ->implode(' | ');
                                        $responseDocumentFileId = optional($processing->responseDocumentFile)->id;
                                        $responseDocumentFileLabel = optional($processing->responseDocumentFile)->filename_origin
                                            ?: optional($processing->responseDocumentFile)->filename
                                            ?: '';
                                        $responseUserName = optional($processing->responseUser)->short_name
                                            ?: optional($processing->responseUser)->name
                                            ?: 'Não informado';
                                        $responseSectorName = optional($processing->responseSector)->name
                                            ?: optional(optional($processing->destination)->sector)->name
                                            ?: 'Não informado';
                                        $authUser = Auth::user();
                                        $destinationSectorId = optional($processing->destination)->sector_id;
                                        $destinationUserId = data_get($processing, 'destination.user.id');
                                        $canRespondStep = $authUser && (
                                            $authUser->hasRole('root') ||
                                            (int) $processing->user_id === (int) $authUser->id ||
                                            (!empty($destinationUserId) && (int) $destinationUserId === (int) $authUser->id) ||
                                            (!empty($authUser->sector_id) && !empty($destinationSectorId) && (int) $destinationSectorId === (int) $authUser->sector_id) ||
                                            (empty($destinationUserId) && empty($destinationSectorId))
                                        );
                                    @endphp
                                    <div class="timeline-item {{ $loop->index % 2 === 0 ? 'timeline-item-left' : 'timeline-item-right' }}">
                                        <div class="timeline-badge">
                                            <i class="fa fa-check-circle"></i>
                                        </div>
                                        <div class="timeline-panel {{ $loop->index % 2 === 0 ? 'timeline-panel-left' : 'timeline-panel-right' }}">
                                            <div class="timeline-heading">
                                                <span class="timeline-step-label">
                                                    {{ $loop->first ? 'Trâmite atual' : 'Etapa ' . $loop->iteration }}
                                                </span>
                                                <h4 class="timeline-title">
                                                    {{ optional($processing->adviceSituationLaw)->name ?? 'Não informado' }}
                                                </h4>
                                                <p>
                                                    <small class="text-muted">
                                                        <i class="fa fa-clock-o"></i>
                                                        {{ $processing->processing_date }}
                                                    </small>
                                                </p>
                                            </div>
                                            <div class="timeline-body">
                                                <div class="timeline-info-grid timeline-info-grid-expanded">
                                                    <p><strong>Status:</strong>
                                                        {{ optional($processing->statusProcessingLaw)->name ?? 'Não informado' }}</p>
                                                    <p><strong>Encaminhado para:</strong>
                                                        {{ optional($processing->destination)->name ?? 'Não informado' }}</p>
                                                    <p><strong>Setor:</strong>
                                                        {{ optional(optional($processing->destination)->sector)->name ?? 'Não informado' }}</p>
                                                    <p><strong>Prazo:</strong>
                                                        {{ $processing->date_end ?? 'Prazo não definido' }}</p>
                                                    <p><strong>Nº Licitação:</strong>
                                                        {{ $processing->number_bids ?? 'Não definido' }}</p>
                                                    <p><strong>Nº Contrato:</strong>
                                                        {{ $processing->number_contract ?? 'Não definido' }}</p>
                                                </div>
                                                @if ($responseDocumentItems->isNotEmpty())
                                                    <div class="response-document-card">
                                                        <div class="response-document-card__head">
                                                            <span class="response-document-card__title">Documento(s) de resposta vinculado(s)</span>
                                                            @if ($responseDocumentItems->first())
                                                                <a href="{{ route('documents.details', $responseDocumentItems->first()->id) }}"
                                                                    target="_blank" class="btn btn-link btn-xs timeline-read-more">
                                                                    Abrir documento
                                                                </a>
                                                            @endif
                                                        </div>
                                                        <div class="response-document-selected">
                                                            @foreach ($responseDocumentItems as $responseDocument)
                                                                <div style="margin-bottom: 8px;">
                                                                    <a href="{{ route('documents.details', $responseDocument->id) }}"
                                                                        target="_blank" class="timeline-read-more"
                                                                        style="font-weight: 700;">
                                                                        {{ optional($responseDocument->document_type)->name ?? 'Documento' }}
                                                                        {{ $responseDocument->number ?: 'Sem número' }}@if (!empty($responseDocument->date))/{{ $responseDocument->getYear($responseDocument->date) }}@endif
                                                                    </a>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                        <div class="timeline-info-grid" style="margin-top: 10px;">
                                                            <p><strong>Respondido por:</strong> {{ $responseUserName }}</p>
                                                            <p><strong>Setor da resposta:</strong> {{ $responseSectorName }}</p>
                                                        </div>
                                                        @if ($hasResponseText)
                                                            <div class="timeline-observation-card" style="margin-top: 12px;">
                                                                <strong>Resposta:</strong>
                                                                <div class="timeline-observation-preview">
                                                                    {!! \Illuminate\Support\Str::limit(trim(strip_tags($processing->response_text)), 130, '...') !!}
                                                                </div>
                                                                <button type="button" class="btn btn-link btn-xs timeline-read-more"
                                                                    data-toggle="modal" data-target="#{{ $responseModalId }}"
                                                                    data-observation-source="#{{ $responseContentId }}">
                                                                    Ler texto completo
                                                                </button>
                                                                <div id="{{ $responseContentId }}" class="hidden">
                                                                    {!! $processing->response_text !!}
                                                                </div>
                                                            </div>
                                                        @endif
                                                        @if ($processing->responseDocumentFile && !empty($processing->responseDocumentFile->filename))
                                                            <div class="response-document-attachments">
                                                                <div class="response-document-attachment">
                                                                    <span title="{{ $responseDocumentFileLabel ?: 'Arquivo sem nome' }}">
                                                                        {{ \Illuminate\Support\Str::limit($responseDocumentFileLabel ?: 'Arquivo sem nome', 62, '...') }}
                                                                    </span>
                                                                    <a href="{{ \App\Helpers\TenantFileUrl::publicUrl($processing->responseDocumentFile->filename) }}"
                                                                        target="_blank" class="btn btn-link btn-xs">
                                                                        Abrir anexo
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        @elseif ($responseDocumentItems->flatMap(function ($responseDocument) { return $responseDocument->documentFiles; })->isNotEmpty())
                                                            <div class="response-document-attachments">
                                                                @foreach ($responseDocumentItems->flatMap(function ($responseDocument) { return $responseDocument->documentFiles; }) as $file)
                                                                    @if (!empty($file->filename))
                                                                        <div class="response-document-attachment">
                                                                            <span title="{{ $file->filename_origin ?: 'Arquivo sem nome' }}">
                                                                                {{ \Illuminate\Support\Str::limit($file->filename_origin ?: 'Arquivo sem nome', 62, '...') }}
                                                                            </span>
                                                                            <a href="{{ \App\Helpers\TenantFileUrl::publicUrl($file->filename) }}"
                                                                                target="_blank" class="btn btn-link btn-xs">
                                                                                Abrir anexo
                                                                            </a>
                                                                        </div>
                                                                    @endif
                                                                @endforeach
                                                            </div>
                                                        @else
                                                            <div class="response-document-attachments">
                                                                <div class="response-document-attachment">
                                                                    <span>Nenhum anexo vinculado a este documento.</span>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                @endif
                                                <div class="timeline-observation-card">
                                                    <strong>Observação:</strong>
                                                    @if ($hasObservation)
                                                        <div class="timeline-observation-preview">
                                                            {!! \Illuminate\Support\Str::limit(trim(strip_tags($processing->obsevation)), 130, '...') !!}
                                                        </div>
                                                        <button type="button" class="btn btn-link btn-xs timeline-read-more"
                                                            data-toggle="modal" data-target="#{{ $observationModalId }}"
                                                            data-observation-source="#{{ $observationContentId }}">
                                                            Ler texto completo
                                                        </button>
                                                        <div id="{{ $observationContentId }}" class="hidden">
                                                            {!! $processing->obsevation !!}
                                                        </div>
                                                    @else
                                                        <div class="timeline-observation-empty">
                                                            Nenhuma observação registrada.
                                                        </div>
                                                    @endif
                                                </div>
                                                <div class="timeline-actions mt-2">
                                                    @if ($canRespondStep)
                                                        <button type="button" class="btn btn-sm btn-info js-open-response-modal"
                                                            data-processing-id="{{ $processing->id }}"
                                                            data-response-file-id="{{ $responseDocumentFileId }}"
                                                            data-response-file-label="{{ $responseDocumentFileLabel }}">
                                                            Responder etapa
                                                        </button>
                                                    @endif
                                                    @if ($processing->processing_file)
                                                        <a href="{{ route('processings.download', $processing->id) }}"
                                                            target="_blank" class="btn btn-sm btn-primary">
                                                            Download Arquivo
                                                        </a>
                                                    @endif
                                                    @if (Auth::user()->id == $processing->user_id ||
                                                            $first_processing->id === $processing->id ||
                                                            Auth::user()->hasRole('root'))
                                                        <button type="button" class="btn btn-danger btn-sm"
                                                            onclick="delete_processing('{{ $processing->id }}')">
                                                            <i class="fa fa-trash"></i>
                                                        </button>
                                                        @if ($_SERVER['HTTP_HOST'] == 'cmcostarica.sis.superlegis.com.br' || $_SERVER['HTTP_HOST'] == 'dev.localhost:8000')
                                                            <button type="button" class="btn btn-primary btn-sm"
                                                                onclick="openModalDate('{{ $processing->id }}', '{{ $processing->processing_date }}', '{{ $processing->advice_situation_id }}')">
                                                                <i class="fa fa-edit"></i>
                                                            </button>
                                                        @endif
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    @if ($hasObservation)
                                        <div class="modal fade processing-observation-modal" id="{{ $observationModalId }}"
                                            tabindex="-1" role="dialog"
                                            aria-labelledby="{{ $observationModalId }}Label">
                                            <div class="modal-dialog modal-lg" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                        <h4 class="modal-title" id="{{ $observationModalId }}Label">
                                                            Observação completa
                                                        </h4>
                                                    </div>
                                                    <div class="modal-body js-processing-observation-modal-body"></div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default"
                                                            data-dismiss="modal">Fechar</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    @if ($hasResponseText)
                                        <div class="modal fade processing-observation-modal" id="{{ $responseModalId }}"
                                            tabindex="-1" role="dialog"
                                            aria-labelledby="{{ $responseModalId }}Label">
                                            <div class="modal-dialog modal-lg" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                        <h4 class="modal-title" id="{{ $responseModalId }}Label">
                                                            Resposta completa
                                                        </h4>
                                                    </div>
                                                    <div class="modal-body js-processing-observation-modal-body"></div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default"
                                                            data-dismiss="modal">Fechar</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @empty
                                    <div class="text-center">
                                        <strong>Não existe tramitação</strong>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade processing-modal" id="processingFormModal" tabindex="-1" role="dialog"
        aria-labelledby="processingFormModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="processingFormModalLabel">
                        {{ $processing_last->isEmpty() ? 'Nova tramitação' : 'Nova etapa de tramitação' }}
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="processing-form-surface">
                        <div class="processing-form-fields">
                            <div class="form-group col-sm-3">
                                {!! Form::label('new_advice_situation_id', 'Situação do projeto:') !!}
                                {!! Form::select('new_advice_situation_id', $advice_situation_law, null, ['class' => 'form-control']) !!}
                            </div>

                            <div class="form-group col-sm-3">
                                {!! Form::label('new_status_processing_law_id', 'Status do trâmite:') !!}
                                {!! Form::select('new_status_processing_law_id', $status_processing_law, null, ['class' => 'form-control']) !!}
                            </div>

                            @if (Auth::user()->roleHasPermission('dateAdvicesLawsProjects.edit'))
                                <div class="form-group col-sm-2">
                                    {!! Form::label('new_date_processing', 'Data:') !!}
                                    {!! Form::text('new_date_processing', null, ['class' => 'form-control datetimepicker1']) !!}
                                </div>
                            @else
                                <div class="form-group col-sm-2">
                                    {!! Form::label('new_date_processing', 'Data:') !!}
                                    {!! Form::text('new_date_processing', null, ['class' => 'form-control datetimepicker1', 'disabled']) !!}
                                </div>
                            @endif

                            <div class="form-group col-sm-2">
                                {!! Form::label('destination_id', 'Destinatário:') !!}
                                {!! Form::select('destination_id', $destinations, null, ['class' => 'form-control']) !!}
                            </div>

                            <div class="form-group col-sm-2">
                                {!! Form::label('date_end', 'Prazo:') !!}
                                {!! Form::text('date_end', null, ['class' => 'form-control datepicker', 'placeholder' => 'Opcional']) !!}
                            </div>

                            <div class="form-group col-sm-2">
                                {!! Form::label('days', 'Dias:') !!}
                                {!! Form::number('days', null, ['class' => 'form-control', 'readonly', 'placeholder' => 'Automático']) !!}
                            </div>

                            <div class="form-group col-sm-2">
                                {!! Form::label('number_bids', 'Nº Licitação:') !!}
                                {!! Form::text('number_bids', null, [
                                    'class' => 'form-control',
                                    'placeholder' => 'Ex: 012/2025',
                                ]) !!}
                            </div>

                            <div class="form-group col-sm-2">
                                {!! Form::label('number_contract', 'Nº Contrato:') !!}
                                {!! Form::text('number_contract', null, [
                                    'class' => 'form-control',
                                    'placeholder' => 'Ex: 045/2025',
                                ]) !!}
                            </div>
                        </div>

                        <div class="form-group col-sm-12 processing-file-group">
                            <div class="processing-upload-card">
                                {!! Form::label('processing_file', 'Anexar Arquivo:') !!}
                                {!! Form::file('processing_file', ['class' => 'form-control']) !!}
                            </div>
                        </div>

                        <div class="form-group col-sm-12 processing-editor-group">
                            <div class="processing-editor-card">
                                {!! Form::label('new_observation', ' Observações:') !!}
                                {!! Form::textarea('new_observation', null, ['class' => 'form-control ckeditor']) !!}
                            </div>
                        </div>

                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    <button class="btn btn-info" type="button" onclick="save_processing()">Salvar</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade response-step-modal" id="responseStepModal" tabindex="-1" role="dialog"
        aria-labelledby="responseStepModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="responseStepModalLabel">Responder etapa</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="reply_processing_id">
                    <div class="response-step-form">
                        <div class="form-group">
                            {!! Form::label('reply_response_document_ids', 'Documento(s) de resposta:') !!}
                            {!! Form::select('reply_response_document_ids[]', ['' => ''], null, [
                                'id' => 'reply_response_document_ids',
                                'class' => 'form-control reply-document-response-select2',
                                'data-placeholder' => 'Busque por ano, número, tipo, ementa ou autor',
                                'multiple' => 'multiple',
                            ]) !!}
                        </div>
                        <div class="form-group">
                            {!! Form::label('reply_response_document_file_id', 'Anexo do documento:') !!}
                            {!! Form::select('reply_response_document_file_id', ['' => 'Selecione um documento primeiro'], null, [
                                'id' => 'reply_response_document_file_id',
                                'class' => 'form-control reply-document-file-select2',
                                'disabled' => 'disabled',
                            ]) !!}
                        </div>
                        <div class="form-group response-editor-card">
                            {!! Form::label('reply_response_text', 'Resposta:') !!}
                            {!! Form::textarea('response_text', null, [
                                'id' => 'reply_response_text',
                                'class' => 'form-control ckeditor',
                                'rows' => 6,
                            ]) !!}
                        </div>
                    </div>
                    <div id="reply_response_document_attachments" class="response-document-attachments hidden"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    <button type="button" class="btn btn-info" onclick="save_processing_response()">Salvar resposta</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="exampleModalLabel">Alterar data da tramitação</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div id="container-alert"></div>
                        <div class="form-group">
                            <label for="dataModal" class="col-form-label">Data:</label>
                            <input type="hidden" id="idProcessing">
                            <input type="hidden" id="idSituation">
                            <input type="text" class="form-control" id="dataModal" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onclick="updateTramite()">Salvar</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        if (document.querySelector('#new_date_processing')) {
            document.querySelector('#new_date_processing').value = dateForm + ' ' + timeForm;
        }

        const processingResponseRouteTemplate = '{{ route('processings.response', ['id' => '__ID__']) }}';
        const processingResponseDocuments = {!! $processing_last->mapWithKeys(function ($processing) {
            return [
                $processing->id => $processing->responseDocumentItems
                    ->map(function ($responseDocument) {
                        return [
                            'id' => $responseDocument->id,
                            'text' => (optional($responseDocument->document_type)->name ?? 'Documento') . ' ' . ($responseDocument->number ?: 'Sem número') . (!empty($responseDocument->date) ? '/' . $responseDocument->getYear($responseDocument->date) : ''),
                            'attachments' => $responseDocument->documentFiles
                                ->filter(fn ($file) => !empty($file->filename))
                                ->map(function ($file) {
                                    return [
                                        'id' => $file->id,
                                        'title' => $file->filename_origin ?: 'Arquivo sem nome',
                                        'href' => \App\Helpers\TenantFileUrl::publicUrl($file->filename),
                                    ];
                                })
                                ->values(),
                        ];
                    })
                    ->values(),
            ];
        })->toJson() !!};

        const responseDocumentCache = {};

        $('.processing-observation-modal').on('show.bs.modal', function(event) {
            var trigger = $(event.relatedTarget);
            var sourceSelector = trigger.data('observation-source');
            var content = sourceSelector ? $(sourceSelector).html() : '';

            $(this).find('.js-processing-observation-modal-body').html(content || '<p>Nenhuma observação registrada.</p>');
        });

        const normalizeDateEnd = (value) => {
            if (!value) {
                return '';
            }

            if (value.includes('/')) {
                return value;
            }

            if (value.includes('-')) {
                const parts = value.split('-');
                if (parts.length === 3 && parts[0].length === 4) {
                    return `${parts[2]}/${parts[1]}/${parts[0]}`;
                }
            }

            return value;
        };

        const diffDate = () => {
            const dateEndValue = normalizeDateEnd($('#date_end').val());
            if (!dateEndValue) {
                return '';
            }

            const dateLastSplit = dateEndValue.split('/').reverse().join('/');
            const day1 = new Date(dateLastSplit);
            const today = new Date();
            today.setHours(0, 0, 0, 0);

            return Math.ceil((day1 - today) / (1000 * 3600 * 24));
        };

        $('#date_end').on('change keyup', () => {
            document.querySelector('#days').value = diffDate();
        });

        $('#destination_id').on('change', () => {
            document.querySelector('#days').value = diffDate();
        });

        if ({{ Auth::user()->can_request_secretary }}) {
            $('body').on('change', '#destination_id', () => {
                if ($('#destination_id').val() === '4') {
                    document.querySelector('#date_end').value = someDateForm;
                    document.querySelector('#days').value = diffDate();
                } else if ($('#destination_id').val() === '6') {
                    document.querySelector('#date_end').value = someDateTwentyForm;
                    document.querySelector('#days').value = diffDate();
                } else {
                    document.querySelector('#date_end').value = '';
                    document.querySelector('#days').value = diffDate();
                }
            });
        }

        function cacheResponseDocument(documentData) {
            if (!documentData || !documentData.id) {
                return;
            }

            responseDocumentCache[String(documentData.id)] = documentData;
        }

        function removeCachedResponseDocument(documentId) {
            delete responseDocumentCache[String(documentId)];
        }

        function getSelectedResponseDocuments() {
            const selectedIds = $('#reply_response_document_ids').val() || [];

            return selectedIds.map(function(id) {
                return responseDocumentCache[String(id)];
            }).filter(Boolean);
        }

        function getSelectedResponseDocumentAttachments() {
            return getSelectedResponseDocuments().reduce(function(acc, doc) {
                if (doc.attachments && doc.attachments.length > 0) {
                    return acc.concat(doc.attachments);
                }

                return acc;
            }, []);
        }

        function syncResponseDocumentAttachments() {
            const attachments = getSelectedResponseDocumentAttachments();
            populateResponseDocumentFiles(attachments, $('#reply_response_document_file_id').val());
        }

        function resetResponseTextEditor() {
            const editor = CKEDITOR.instances.reply_response_text;

            $('#reply_response_text').val('');

            if (editor) {
                editor.setData('');
            }
        }

        $('.reply-document-response-select2').select2({
            width: '100%',
            placeholder: $('.reply-document-response-select2').data('placeholder'),
            allowClear: true,
            minimumInputLength: 1,
            multiple: true,
            closeOnSelect: false,
            dropdownParent: $('#responseStepModal'),
            language: {
                inputTooShort: function(args) {
                    const remaining = args.minimum - args.input.length;
                    return 'Digite ' + remaining + ' ou mais caracteres';
                },
                searching: function() {
                    return 'Buscando...';
                },
                noResults: function() {
                    return 'Nenhum documento encontrado';
                }
            },
            ajax: {
                url: '/documents/response/search',
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        term: params.term || '',
                        current_document_id: 0
                    };
                },
                processResults: function(data) {
                    return data;
                },
                cache: true
            }
        });

        $('.reply-document-file-select2').select2({
            width: '100%',
            placeholder: 'Selecione um anexo',
            allowClear: true,
            dropdownParent: $('#responseStepModal')
        });

        $('#responseStepModal').on('shown.bs.modal', function() {
            $('.reply-document-response-select2').select2('close');
        });

        $('#responseStepModal').on('hidden.bs.modal', function() {
            resetResponseTextEditor();
        });

        $(document).on('select2:open', function() {
            const searchField = document.querySelector('.select2-container--open .select2-search__field');
            if (searchField) {
                searchField.focus();
            }
        });

        $('.reply-document-response-select2').on('select2:select', function(event) {
            cacheResponseDocument(event.params.data);
            syncResponseDocumentAttachments();
        });

        $('.reply-document-response-select2').on('select2:unselect', function(event) {
            removeCachedResponseDocument(event.params.data.id);
            syncResponseDocumentAttachments();
        });

        $('.reply-document-response-select2').on('select2:clear', function() {
            Object.keys(responseDocumentCache).forEach(function(key) {
                delete responseDocumentCache[key];
            });
            resetResponseDocumentFiles();
        });

        $('.js-open-response-modal').on('click', function() {
            const processingId = $(this).data('processing-id');
            const responseFileId = $(this).data('response-file-id');
            const $select = $('#reply_response_document_ids');

            $('#reply_processing_id').val(processingId);
            resetResponseDocumentFiles();
            resetResponseTextEditor();
            $select.empty().trigger('change');

            const responseDocuments = processingResponseDocuments[processingId] || [];

            responseDocuments.forEach(function(documentData) {
                cacheResponseDocument(documentData);
                const option = new Option(documentData.text || 'Documento', documentData.id, true, true);
                $select.append(option);
            });

            if (responseDocuments.length > 0) {
                $select.val(responseDocuments.map(function(documentData) {
                    return String(documentData.id);
                })).trigger('change');
                populateResponseDocumentFiles(getSelectedResponseDocumentAttachments(), responseFileId);
            }

            $('#responseStepModal').modal('show');
        });

        function escapeHtml(value) {
            return $('<div>').text(value || '').html();
        }

        function renderResponseDocumentAttachments(containerSelector, attachments) {
            const $container = $(containerSelector);

            if (!attachments || attachments.length === 0) {
                $container
                    .removeClass('hidden')
                    .html('<div class="response-document-attachment"><span>Nenhum anexo vinculado a este documento.</span></div>');
                return;
            }

            const html = attachments.map(function(attachment) {
                return '<div class="response-document-attachment">' +
                    '<span title="' + escapeHtml(attachment.title) + '">' + escapeHtml(attachment.title) + '</span>' +
                    '<a href="' + escapeHtml(attachment.href) + '" target="_blank" class="btn btn-link btn-xs">Abrir anexo</a>' +
                    '</div>';
            }).join('');

            $container.removeClass('hidden').html(html);
        }

        function resetResponseDocumentFiles() {
            $('#reply_response_document_file_id')
                .html('<option value="">Selecione um documento primeiro</option>')
                .prop('disabled', true)
                .val(null)
                .trigger('change');
            $('#reply_response_document_attachments').addClass('hidden').html('');
        }

        function populateResponseDocumentFiles(attachments, selectedFileId) {
            const $select = $('#reply_response_document_file_id');

            $select.empty().append(new Option('Selecione...', '', false, false));

            if (!attachments || attachments.length === 0) {
                $select
                    .append(new Option('Documento sem anexos', '', false, false))
                    .prop('disabled', true)
                    .val(null)
                    .trigger('change');
                $('#reply_response_document_attachments')
                    .removeClass('hidden')
                    .html('<div class="response-document-attachment"><span>Nenhum anexo vinculado a este documento.</span></div>');
                return;
            }

            attachments.forEach(function(attachment) {
                $select.append(new Option(attachment.title || 'Arquivo sem nome', attachment.id, false, false));
            });

            $select.prop('disabled', false);

            if (selectedFileId) {
                $select.val(String(selectedFileId));
            }

            $select.trigger('change');
            renderResponseDocumentAttachments('#reply_response_document_attachments', attachments);
        }

        const save_processing = () => {
            const url = '{{ route('processings.store') }}';

            if ($('#new_advice_situation_id').val() === '') {
                toastr.error('Selecione a situação da tramitação!');
            } else if ($('#new_status_processing_law_id').val() === '') {
                toastr.error('Selecione um status para tramitação!');
            } else if ($('#new_date_processing').val() === '') {
                toastr.error('Selecione uma data para tramitação!');
            } else {
                const data = new FormData();

                data.append('law_projects_id', '{{ $lawsProject->id }}');
                data.append('advice_publication_id', '');
                data.append('advice_situation_id', $('#new_advice_situation_id').val() || '');
                data.append('status_processing_law_id', $('#new_status_processing_law_id').val() || '');
                data.append('processing_date', $('#new_date_processing').val());
                data.append('processing_date_first', '{{ $first_processing->processing_date ?? '' }}');
                data.append('destination_id', $('#destination_id').val() || '');
                data.append('date_end', normalizeDateEnd($('#date_end').val()) || '');
                data.append('obsevation', CKEDITOR.instances.new_observation.getData());
                data.append('number_bids', $('#number_bids').val() || '');
                data.append('number_contract', $('#number_contract').val() || '');

                const fileInput = document.getElementById('processing_file');
                if (fileInput.files.length > 0) {
                    data.append('processing_file', fileInput.files[0]);
                }

                data.append('_token', $('meta[name="csrf-token"]').attr('content'));

                $.ajax({
                    url: url,
                    data: data,
                    method: 'post',
                    processData: false,
                    contentType: false
                }).done(function() {
                    toastr.success('Tramitação salva com sucesso!');
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                }).fail(function(jqXHR, textStatus, errorThrown) {
                    toastr.error('Erro ao salvar a tramitação. Por favor, tente novamente.');
                    console.error('AJAX Error:', textStatus, errorThrown);
                    console.error('Response:', jqXHR.responseText);
                });
            }
        };

        const save_processing_response = function() {
            var processingId = $('#reply_processing_id').val();
            var responseDocumentIds = $('#reply_response_document_ids').val() || [];
            var responseDocumentFileId = $('#reply_response_document_file_id').val();
            var responseTextEditor = CKEDITOR.instances.reply_response_text;
            var responseText = responseTextEditor ? responseTextEditor.getData() : $('#reply_response_text').val();

            if (!processingId) {
                toastr.error('Etapa da tramitação não encontrada.');
                return;
            }

            if (!responseDocumentIds.length) {
                toastr.error('Selecione um documento de resposta.');
                return;
            }

            $.ajax({
                url: processingResponseRouteTemplate.replace('__ID__', processingId),
                method: 'POST',
                data: {
                    response_document_ids: responseDocumentIds,
                    response_document_file_id: responseDocumentFileId,
                    response_text: responseText
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            }).done(function(data) {
                data = JSON.parse(data);

                if (data === true || (data && data.success === true)) {
                    toastr.success('Resposta vinculada com sucesso!');
                    location.reload();
                } else {
                    toastr.error((data && data.message) ? data.message : 'Não foi possível salvar a resposta.');
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                console.error('Erro na requisição AJAX de resposta: ' + textStatus, errorThrown);
                toastr.error('Ocorreu um erro ao salvar a resposta. Por favor, tente novamente.');
            });
        };

        const delete_processing = function(id) {
            if (confirm('Deseja excluir?')) {
                const url = '/processings/' + id;

                $.ajax({
                    url: url,
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                }).done(function() {
                    toastr.success('Tramitação excluída com sucesso!');
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                }).fail(function() {
                    toastr.error('Erro ao excluir a tramitação. Por favor, tente novamente.');
                });
            }
        };

        function openModalDate(id, data, situation) {
            $('#idProcessing').val(id);
            $('#dataModal').val(data);
            $('#idSituation').val(situation);
            $('#exampleModal').modal('show');
        }

        function updateTramite() {
            const dados = {
                id: $('#idProcessing').val(),
                data: $('#dataModal').val(),
                situation: $('#idSituation').val()
            };

            const url = '/lawProject/tramite/update/' + btoa(JSON.stringify(dados));
            $.ajax({
                url: url,
                method: 'POST',
                data: dados
            }).done(function() {
                $('#container-alert').append(
                    "<div class='alert alert-success' role='alert'>Tramitação alterada com sucesso!</div>"
                );
                location.reload();
            }).fail(function() {
                toastr.error('Erro ao atualizar a tramitação. Por favor, tente novamente.');
            });
        }
    </script>
@endsection