@extends('layouts.digitar')
@section('Breadcrumbs')
    {!! Breadcrumbs::render('documents.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-card__actions {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
        }

        .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-empty {
            color: #8a99aa;
            font-weight: 500;
        }

        .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;
        }

        .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;
        }

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

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

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

        .processing-modal #cke_new_document_observation .cke_contents {
            height: 110px !important;
        }

        .processing-modal #cke_new_document_observation .cke_wysiwyg_frame {
            height: 110px !important;
        }

        .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 {
            height: 72px !important;
        }

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

        .processing-modal .processing-upload-card {
            padding: 8px;
            margin-bottom: 8px;
        }

        @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_document_observation .cke_contents,
            .processing-modal #cke_new_document_observation .cke_wysiwyg_frame {
                height: 24vh !important;
                min-height: 220px !important;
            }
        }
    </style>
    <div class="the-box rounded processing-wrapper">
        <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">
                        {{ $documents->isEmpty() ? 'Nova tramitação' : 'Nova etapa de tramitação' }}
                    </button>
                    <a href="{!! route('documents.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($documents as $key => $processing)
                                    @php
                                        $observationPreview = trim(strip_tags($processing->observation ?? ''));
                                        $hasObservation = $observationPreview !== '';
                                        $observationModalId = 'processingObservationModal' . $processing->id;
                                        $observationContentId = 'processingObservationContent' . $processing->id;
                                        $responsePreview = trim(strip_tags($processing->response_text ?? ''));
                                        $hasResponseText = $responsePreview !== '';
                                        $responseModalId = 'processingResponseModal' . $processing->id;
                                        $responseContentId = 'processingResponseContent' . $processing->id;
                                        $authUser = Auth::user();
                                        $canRespondStep = $authUser &&
                                            (
                                                (int) $processing->recipient_user_id === (int) $authUser->id ||
                                                (!empty($authUser->sector_id) && (int) $processing->recipient_sector_id === (int) $authUser->sector_id)
                                            );
                                        $responseUserName = optional($processing->responseUser)->short_name
                                            ?: optional($processing->responseUser)->name
                                            ?: 'Não informado';
                                        $responseSectorName = optional($processing->responseSector)->name ?: 'Não informado';
                                        $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
                                            ?: '';
                                    @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">
                                                    {{ $processing->documentSituation->name }}
                                                </h4>
                                                <p>
                                                    <small class="text-muted">
                                                        <i class="fa fa-clock-o"></i>
                                                        {{ $processing->processing_document_date }}
                                                    </small>
                                                </p>
                                            </div>
                                            <div class="timeline-body">
                                                <div class="timeline-info-grid">
                                                    <p><strong>Status:</strong>
                                                        {{ $processing->statusProcessingDocument->name ?? 'Não informado' }}</p>
                                                    <p><strong>Encaminhado para:</strong>
                                                        {{ optional($processing->recipientUser)->name ?? 'Não informado' }}</p>
                                                    <p><strong>Setor:</strong>
                                                        {{ optional($processing->recipientSector)->name ?? 'Não informado' }}</p>
                                                    <p><strong>Prazo:</strong>
                                                        {{ !is_null($processing->sla_days) && $processing->sla_days !== '' ? $processing->sla_days . ' dia(s) útil(eis)' : 'Não definido' }}</p>
                                                    <p><strong>Vencimento:</strong>
                                                        {{ !empty($processing->sla_deadline_at) ? $processing->sla_deadline_at : '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->observation)), 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->observation !!}
                                                        </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-id="{{ optional($processing->responseDocument)->id }}"
                                                            data-response-label="{{ $responseDocumentLabel }}"
                                                            data-response-file-id="{{ $responseDocumentFileId }}"
                                                            data-response-file-label="{{ $responseDocumentFileLabel }}">
                                                            Responder etapa
                                                        </button>
                                                    @endif
                                                    @if ($processing->file)
                                                        <a href="{{ asset('assets/processing_documents/' . $processing->file) }}"
                                                            target="_blank" class="btn btn-sm btn-primary">
                                                            Download Arquivo
                                                        </a>
                                                    @endif
                                                    @if (Auth::user()->id == $processing->owner_id ||
                                                            $first_documents->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>
                                                    @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>
                <div class="clearfix"></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">
                        {{ $documents->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_document_situation_id', 'Situação do documento:') !!}
                                {!! Form::select('new_document_situation_id', $document_situation, null, ['class' => 'form-control']) !!}
                            </div>

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

                            <div class="form-group col-sm-3">
                                {!! Form::label('recipient_sector_id', 'Setor destinatário:') !!}
                                {!! Form::select('recipient_sector_id', $recipient_sectors, null, ['class' => 'form-control']) !!}
                            </div>

                            <div class="form-group col-sm-3">
                                {!! Form::label('recipient_user_id', 'Usuário destinatário:') !!}
                                {!! Form::select('recipient_user_id', $recipient_users, null, ['class' => 'form-control']) !!}
                            </div>

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

                            <div class="form-group col-sm-4">
                                {!! Form::label('sla_days', 'Prazo (dias úteis):') !!}
                                {!! Form::text('sla_days', null, ['class' => 'form-control', 'readonly', 'placeholder' => 'Automático']) !!}
                            </div>

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

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

                        <div class="form-group col-sm-12 processing-editor-group">
                            <div class="processing-editor-card">
                                {!! Form::label('new_document_observation', ' Observações:') !!}
                                {!! Form::textarea('new_document_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_document_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>

    <script>
        document.querySelector('#new_processing_document_date').value = dateForm + '' + timeForm


        const assetsBaseUrl = '{{ asset('assets/processing_documents') }}';
        const processingResponseRouteTemplate = '{{ route('processingDocuments.response', ['id' => '__ID__']) }}';
        const processingResponseDocuments = {!! $documents->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 = {};

        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: '{{ $document->id }}'
                    };
                },
                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_document_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);
        }

        function parseDateOnly(value) {
            if (!value) {
                return null;
            }

            const parts = value.split('/');
            if (parts.length !== 3) {
                return null;
            }

            const day = parseInt(parts[0], 10);
            const month = parseInt(parts[1], 10) - 1;
            const year = parseInt(parts[2], 10);
            const date = new Date(year, month, day);

            if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) {
                return null;
            }

            return date;
        }

        function parseProcessingDate(value) {
            if (!value) {
                return null;
            }

            return parseDateOnly(value.split(' ')[0]);
        }

        function businessDaysBetween(startDate, endDate) {
            if (!startDate || !endDate || endDate < startDate) {
                return '';
            }

            let days = 0;
            const current = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());

            while (current < endDate) {
                current.setDate(current.getDate() + 1);
                const weekDay = current.getDay();

                if (weekDay !== 0 && weekDay !== 6) {
                    days++;
                }
            }

            return days;
        }

        function updateSlaDaysFromDeadline() {
            const processingDate = parseProcessingDate($('#new_processing_document_date').val());
            const deadlineDate = parseDateOnly($('#sla_deadline_date').val());
            const slaDays = businessDaysBetween(processingDate, deadlineDate);

            $('#sla_days').val(slaDays !== '' ? slaDays : '');
        }

        $('#sla_deadline_date, #new_processing_document_date').on('change keyup', updateSlaDaysFromDeadline);

        $('.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>');
        });

        var save_processing = function() {
            url = '{{ route('processingDocuments.store') }}';

            if ($('#new_document_situation_id').val() == 0) {
                toastr.error('Selecione uma situação para tramitação!')
            } else {
                if ($('#new_status_processing_document_id').val() == 0) {
                    toastr.error('Selecione um status para tramitação!');
                } else {
                    if ($('#recipient_user_id').val() == '' && $('#recipient_sector_id').val() == '') {
                        toastr.error('Selecione um setor ou um usuário destinatário.');
                        return;
                    }
                    if ($('#new_processing_document_date').val() == '') {
                        toastr.error('Selecione uma data para tramitação!');
                    } else {
                        var formData = new FormData();
                        formData.append('document_id', '{{ $document->id }}');
                        formData.append('document_situation_id', $('#new_document_situation_id').val());
                        formData.append('status_processing_document_id', $('#new_status_processing_document_id').val());
                        formData.append('processing_document_date', $('#new_processing_document_date').val());
                        formData.append('processing_document_date_first',
                            '{{ $first_documents->processing_document_date ?? '' }}');
                        formData.append('recipient_sector_id', $('#recipient_sector_id').val());
                        formData.append('recipient_user_id', $('#recipient_user_id').val());
                        formData.append('sla_days', $('#sla_days').val());
                        formData.append('sla_deadline_date', $('#sla_deadline_date').val());
                        formData.append('observation', CKEDITOR.instances.new_document_observation.getData());
                        formData.append('date_end', null);

                        var fileInput = $('#file')[0];
                        if (fileInput.files.length > 0) {
                            formData.append('file', fileInput.files[0]);
                        }

                        $.ajax({
                            url: url,
                            data: formData,
                            processData: false,
                            contentType: false,
                            method: 'post',
                            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('Tramitação salva com sucesso!');
                                location.reload();
                            } else {
                                toastr.error((data && data.message) ? data.message : 'Ocorreu um erro ao salvar a tramitação.');
                            }
                        }).fail(function(jqXHR, textStatus, errorThrown) {
                            console.error("Erro na requisição AJAX: " + textStatus, errorThrown);
                            toastr.error("Ocorreu um erro ao salvar a tramitação. Por favor, tente novamente.");
                        });
                    }
                }
            }
        }

        var save_processing_response = function() {
            var processingId = $('#reply_processing_document_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.");
            });
        }

        var delete_processing = function(id) {

            if (confirm('Deseja excluir?')) {

                url = '{{ route('processingDocuments.destroy', '') }}/' + id;

                $.ajax({
                    url: url,
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                }).done(function(data) {
                    data = JSON.parse(data);

                    location.reload();
                    toastr.success('Tramitação excluída com sucesso!');

                }).fail(function(jqXHR, textStatus, errorThrown) {
                    console.error("Erro na requisição AJAX de exclusão: " + textStatus, errorThrown);
                    toastr.error("Ocorreu um erro ao excluir a tramitação. Por favor, tente novamente.");
                });
            }
        }
    </script>
@endsection