@extends('layouts.digitar')

@section('Breadcrumbs')
    {!! Breadcrumbs::render('parameters.list') !!}
@endsection

@section('content')
    @if (session('success'))
        <div class="alert alert-success">
            {!! session('success') !!}
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger">
            {!! session('error') !!}
        </div>
    @endif
    @if (session('toastr'))
        <script>
            toastr.{{ session('toastr.type') }}('{{ session('toastr.message') }}');
        </script>
    @endif
    @if (isset($entidadeDomain) && $entidadeDomain)
        @php
            $responderUrl = route('ouvidoria.responder');
        @endphp

        <style>
            .table-compact {
                font-size: 14px;
            }

            .table-compact th,
            .table-compact td {
                padding: 6px 8px;
                vertical-align: middle;
            }

            .table-compact .btn-group-sm,
            .btn,
            .btn-sm {
                font-size: 14px !important;
            }

            .table-compact .btn-sm {
                padding: 3px 6px;
                font-size: 15px;
            }

            .badge-status {
                font-size: 14px;
                padding: 3px 6px;
                cursor: pointer;
                border: none;
                display: block;
                text-align: center;
            }

            .action-buttons {
                white-space: nowrap;
                dissplay:
            }

            .action-buttons .btn {
                margin: 1px;
            }

            .custom-modal-arquivo {
                display: none;
                position: fixed;
                z-index: 1050;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.8);
                justify-content: center;
                align-items: center;
            }

            .custom-modal-content-arquivo {
                position: relative;
                background: #fff;
                padding: 20px;
                border-radius: 8px;
                width: 90%;
                max-width: 800px;
            }

            .custom-close {
                position: absolute;
                top: 10px;
                right: 15px;
                font-size: 30px;
                cursor: pointer;
                z-index: 1060;
            }

            .carousel-container {
                position: relative;
                overflow: hidden;
            }

            .carousel-inner {
                display: flex;
                transition: transform 0.5s ease-in-out;
                width: 100%;
            }

            .carousel-item {
                min-width: 100%;
                transition: opacity 0.5s ease;
                display: none;
            }

            .carousel-item.active {
                display: block;
            }

            .carousel-control-prev,
            .carousel-control-next {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                background: rgba(0, 0, 0, 0.5);
                border: none;
                padding: 10px;
                cursor: pointer;
                z-index: 10;
                color: white;
            }

            .carousel-control-prev {
                left: 10px;
            }

            .carousel-control-next {
                right: 10px;
            }

            .select2-container {
                z-index: 1060 !important;
            }

            .dropdown-menu-custom {
                background-color: #ffffff;
                border: 1px solid #ddd;
                border-radius: 8px;
                padding: 6px 0;
                min-width: 180px;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            }

            /* Itens do menu */
            .dropdown-menu-custom .dropdown-item {
                color: #333;
                font-size: 14px;
                padding: 10px 15px;
                display: flex;
                align-items: center;
                gap: 8px;
                transition: all 0.2s ease;
                text-decoration: none;
                background: transparent;
                border: none;
                width: 100%;
                text-align: left;
            }

            /* Ícones */
            .dropdown-menu-custom .dropdown-item i {
                color: #666;
                font-size: 15px;
            }

            /* Hover */
            .dropdown-menu-custom .dropdown-item:hover {
                background-color: #f5f5f5;
                color: #007bff;
            }

            /* Botão de excluir com destaque */
            .dropdown-menu-custom .delete-btn {
                color: #dc3545 !important;
                font-weight: 500;
            }

            .dropdown-menu-custom .delete-btn i {
                color: #dc3545;
            }

            .dropdown-menu-custom .delete-btn:hover {
                background-color: #ffe6e6;
            }

            /* Divider mais suave */
            .dropdown-menu-custom .dropdown-divider {
                border-color: #eee;
                margin: 6px 0;
            }

            /* Corrige links verdes (caso tenha herança de estilos) */
            .dropdown-menu-custom a {
                color: inherit !important;
            }

            .card-header {
                margin-bottom: 20px;
            }

            .custom-row {
                margin-top: 20px;
                margin-bottom: 20px;
            }
        </style>

        <div class="Relatorio">
            <div class="the-box d-flex justify-content-center align-items-center rounded" style="min-height: 80vh;">
                <div class="col-xl-12">
                    <div class="card rounded-3 shadow">
                        <div class="card-header text-dark">
                            <div class="d-flex justify-content-between align-items-center">
                                <h4 class="mb-0">Lista de Chamados</h4>
                                <div>
                                    <a href="{!! route('documents.create') !!}" class="btn btn-info btn-sm">
                                        <i class="fa fa-plus-circle"></i> Novo Documento
                                    </a>
                                    <a href="{{ route('estatisticas.index') }}" class="btn btn-success btn-sm">
                                        <i class="fa fa-map-marker"></i> Estatisticas
                                    </a>
                                    <button type="button" class="btn btn-primary btn-sm" onclick="imprimirTabela()">
                                        <i class="fa fa-print"></i> Imprimir Tabela
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-12" style="padding-bottom:15px;">
                                    <form method="GET" action="{{ route('chamados.result') }}">
                                        @csrf
                                        <input type="hidden" name="entidade_id" value="{{ $entidadeDomain }}">

                                        <div class="col-md-2">
                                            <label for="protocolo" class="form-label">Protocolo</label>
                                            <input type="text" class="form-control form-control-sm" id="protocolo"
                                                name="protocolo" value="{{ old('protocolo', request('protocolo')) }}"
                                                placeholder="Digite o protocolo">
                                        </div>

                                        <div class="col-md-2">
                                            <label for="tipo" class="form-label">Tipo</label>
                                            <select class="form-control form-control-sm" id="tipo" name="tipo">
                                                <option value="">Selecione o tipo</option>
                                                @foreach ($chamados->pluck('tipo')->unique() as $tipo)
                                                    <option value="{{ $tipo }}"
                                                        {{ request('tipo') == $tipo ? 'selected' : '' }}>{{ $tipo }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-2">
                                            <label for="categoria" class="form-label">Categorias</label>
                                            <select class="form-control form-control-sm" id="categoria" name="categoria">
                                                <option value="">Selecione a Categoria</option>
                                                @foreach ($chamados->pluck('category')->unique() as $categoria)
                                                    @if (isset($categoria))
                                                        <option value="{{ $categoria->id }}"
                                                            {{ request('categoria') == $categoria->name ? 'selected' : '' }}>
                                                            {{ $categoria->name }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-2">
                                            <label for="documento" class="form-label">Documento</label>
                                            <input type="text" class="form-control form-control-sm" id="documento"
                                                name="documento" value="{{ old('documento', request('documento')) }}"
                                                placeholder="Nº documento">
                                        </div>

                                        <div class="col-md-4" style="margin-bottom:20px;">
                                            <label for="data" class="form-label">Data</label>
                                            <input type="date" class="form-control form-control-sm" id="data"
                                                name="data" value="{{ old('data', request('data')) }}">
                                        </div>

                                        <div class="row custom-row">
                                            <div class="col-md-12">
                                                <button type="submit"
                                                    class="btn btn-primary btn-sm btn-block">Buscar</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                        </div>

                        <div class="card-body bg-light">
                            <div class="table-responsive">
                                <table class="table-bordered table-hover table-compact table" id="chamados-table">
                                    <thead class="table-primary">
                                        <tr>
                                            <th width="40">ID</th>
                                            <th width="100">Protocolo</th>
                                            <th width="100">Identificação</th>
                                            <th width="80">Tipo</th>
                                            <th>Assunto</th>
                                            <th width="80">Descrição</th>
                                            <th width="100">Documento</th>
                                            <th width="120">Parlamentar</th>
                                            <th width="100">Categoria</th>
                                            <th width="80">Status</th>
                                            <th width="70">Data</th>
                                            <th width="60">Mapa</th>
                                            <th width="80">Anexos</th>
                                            <th width="70">Imprimir</th>
                                            <th width="100" class="text-center">Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($chamados as $chamado)
                                            <tr id="linha-{{ $chamado->id }}">
                                                <td>{{ $chamado->id }}</td>
                                                <td>{{ $chamado->protocolo }}</td>
                                                <td>
                                                    <span class="badge {{ $chamado->anonimo ? 'bg-warning' : 'bg-info' }}">
                                                        {{ $chamado->anonimo ? 'Anônimo' : (strlen($chamado->nome) > 10 ? substr($chamado->nome, 0, 10) . '...' : $chamado->nome) }}
                                                    </span>
                                                </td>
                                                <td>{{ $chamado->tipo }}</td>
                                                <td style="max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
                                                    title="{{ $chamado->assunto }}">
                                                    {{ $chamado->assunto }}
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-primary btn-sm"
                                                        data-toggle="modal"
                                                        data-target="#descricaoModal{{ $chamado->id }}"
                                                        title="Ler descrição">
                                                        <i class="fa fa-eye"></i>
                                                    </button>
                                                </td>
                                                <td>
                                                    @if ($chamado->documentos && $chamado->documentos->count())
                                                        @foreach ($chamado->documentos as $documento)
                                                            <div class="badge bg-info d-block mb-1 text-white">
                                                                <a href="{{ route('documents.show', $documento->id) }}"
                                                                    style="color: #fff; text-decoration: none; font-size: 10px;">
                                                                    {{ $documento->document_type->name ?? 'Sem tipo' }}
                                                                </a>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <span class="text-dark">S/R</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    {{ $chamado->parlamentar_nome ?? optional($chamado->assemblyman)->short_name ?? optional($chamado->assemblyman)->name ?? 'Não vinculado' }}
                                                </td>
                                                <td>
                                                    {{ $chamado->category->name ?? 'N/A' }}
                                                </td>
                                                <td>
                                                    @php
                                                        $statusText = [
                                                            0 => [
                                                                'text' => 'Pendente',
                                                                'color' => '#dd4b4b',
                                                                'class' => 'bg-danger',
                                                            ],
                                                            1 => [
                                                                'text' => 'Em andamento',
                                                                'color' => '#2E8B57',
                                                                'class' => 'bg-warning',
                                                            ],
                                                            2 => [
                                                                'text' => 'Respondido',
                                                                'color' => '#2F4F4F',
                                                                'class' => 'bg-info',
                                                            ],
                                                            3 => [
                                                                'text' => 'Finalizado',
                                                                'color' => 'green',
                                                                'class' => 'bg-success',
                                                            ],
                                                        ];
                                                    @endphp

                                                    @if (isset($statusText[$chamado->status]))
                                                        <button type="button"
                                                            class="badge {{ $statusText[$chamado->status]['class'] }} badge-status change-status text-white"
                                                            data-id="{{ $chamado->id }}"
                                                            data-current-status="{{ $chamado->status }}"
                                                            title="Clique para alterar status">
                                                            {{ $statusText[$chamado->status]['text'] }}
                                                        </button>
                                                    @else
                                                        <span class="badge bg-secondary">Desconhecido</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <small>{{ $chamado->created_at->format('d/m/y') }}</small>
                                                </td>
                                                <td>
                                                    <button class="btn btn-primary btn-sm btnOpenMap"
                                                        onclick="window.location.href='{{ route('maps.show', $chamado->id) }}'"
                                                        title="Ver no mapa">
                                                        <i class="fa fa-map-marker"></i>
                                                    </button>
                                                </td>
                                                <td>
                                                    @if ($chamado->arquivos?->count())
                                                        <button class="btn btn-primary btn-sm"
                                                            onclick="openImageModal('modal_{{ $chamado->id }}')"
                                                            title="Visualizar Anexos">
                                                            <i class="fa fa-paperclip"></i>
                                                            {{ $chamado->arquivos->count() }}
                                                        </button>
                                                    @else
                                                        <span class="badge bg-warning">Nenhum</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <button class="btn btn-primary btn-sm"
                                                        onclick="imprimirLinha({{ $chamado->id }})" title="Imprimir">
                                                        <i class="fa fa-print"></i>
                                                    </button>
                                                </td>

                                                <td class="action-buttons text-center">
                                                    <div class="btn-group">
                                                        <button type="button"
                                                            class="btn btn-success btn-sm responder-btn"
                                                            data-ouvidoria-id="{{ $chamado->id }}" title="Responder">
                                                            <i class="fa fa-reply"></i>
                                                        </button>
                                                        <button type="button" class="btn btn-info btn-sm dropdown-toggle"
                                                            data-toggle="dropdown" title="Mais ações">
                                                            <i class="fa fa-cog"></i>
                                                        </button>
                                                        <div
                                                            class="dropdown-menu dropdown-menu-custom dropdown-menu-right">
                                                            <a class="dropdown-item" href="#"
                                                                onclick="imprimirLinha({{ $chamado->id }})">
                                                                <i class="fa fa-print"></i> Detalhes
                                                            </a>
                                                            <a class="dropdown-item"
                                                                href="{{ route('maps.show', $chamado->id) }}">
                                                                <i class="fa fa-map-marker"></i> Ver Mapa
                                                            </a>
                                                            @if ($chamado->arquivos?->count())
                                                                <a class="dropdown-item" href="#"
                                                                    onclick="openImageModal('modal_{{ $chamado->id }}')">
                                                                    <i class="fa fa-paperclip"></i> Ver Anexos
                                                                </a>
                                                            @endif
                                                            <div class="dropdown-divider"></div>
                                                            <form action="{{ route('chamado.destroy', $chamado->id) }}"
                                                                method="POST" class="d-inline">
                                                                @csrf
                                                                @method('DELETE')
                                                                <input type="hidden" name="tenant_id"
                                                                    value="{{ $chamado->entidade_domain }}">
                                                                <button type="submit" class="dropdown-item text-danger"
                                                                    onclick="return confirm('Tem certeza que deseja excluir este chamado?')">
                                                                    <i class="fa fa-trash"></i> Excluir
                                                                </button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>

                                            <!-- Modal Descrição -->
                                            <div class="modal fade" id="descricaoModal{{ $chamado->id }}"
                                                tabindex="-1" role="dialog"
                                                aria-labelledby="descricaoModalLabel{{ $chamado->id }}"
                                                aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h4 class="modal-title"
                                                                id="descricaoModalLabel{{ $chamado->id }}">Descrição da
                                                                demanda</h4>
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                aria-hidden="true">&times;</button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <p>{!! $chamado->descricao !!}</p>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-default"
                                                                data-dismiss="modal">Fechar</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Modal Anexos -->
                                            @if ($chamado->arquivos?->count())
                                                <div id="modal_{{ $chamado->id }}" class="custom-modal-arquivo"
                                                    style="display: none;">
                                                    <div class="custom-modal-content-arquivo">
                                                        <span class="custom-close"
                                                            onclick="closeImageModal('modal_{{ $chamado->id }}')">&times;</span>
                                                        <div class="carousel-container">
                                                            <div class="carousel-inner"
                                                                id="carousel-inner-{{ $chamado->id }}">
                                                                @foreach ($chamado->arquivos as $index => $arquivo)
                                                                    <div
                                                                        class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                                                        <img src="{{ asset('uploads/ouvidorias/' . $chamado->id . '/' . basename($arquivo->arquivo)) }}"
                                                                            class="d-block w-100 rounded shadow"
                                                                            alt="Anexo {{ $index + 1 }}"
                                                                            style="max-height: 70vh; object-fit: contain;">
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                            <button class="carousel-control-prev" type="button"
                                                                onclick="prevImage({{ $chamado->id }})">
                                                                <span class="carousel-control-prev-icon"
                                                                    aria-hidden="true"></span>
                                                                <span class="visually-hidden">Anterior</span>
                                                            </button>
                                                            <button class="carousel-control-next" type="button"
                                                                onclick="nextImage({{ $chamado->id }})">
                                                                <span class="carousel-control-next-icon"
                                                                    aria-hidden="true"></span>
                                                                <span class="visually-hidden">Próximo</span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    </tbody>
                                </table>
                                <div class="paginate">{{ $chamados->links() }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal de Resposta -->
            <div id="respostaModal" class="modal fade" tabindex="-1" role="dialog"
                aria-labelledby="respostaModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <form id="formRespostaOuvidoria">
                            @csrf
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">&times;</button>
                                <h4 class="modal-title" id="respostaModalLabel"><b>Responder Chamado</b></h4>
                            </div>
                            <div class="modal-body">
                                <input type="hidden" name="ouvidoria_id" id="ouvidoria_id">
                                <input type="hidden" name="respondido_por" value="{{ auth()->user()->id }}">
                                @php
                                    $host = request()->getHost();
                                    $subdomain = explode('.', $host)[0];
                                @endphp
                                <input type="hidden" name="entidade_domain" value="{{ $subdomain }}">

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="selectedBoxes" class="control-label">Selecionar Documentos</label>
                                            <select class="form-control js-example-basic-multiple" name="selectedBoxes[]"
                                                id="selectedBoxes" multiple></select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="categoria_id" class="control-label">Encaminhar para setor</label>
                                            <select name="categoria_id" id="categoria_id"
                                                class="form-control js-example-basic-multiple"></select>
                                        </div>
                                    </div>
                                </div>

                                <div class="text-right" style="margin-bottom: 15px;">
                                    <a href="{!! route('documents.create') !!}" class="btn btn-info">
                                        <i class="fa fa-plus-circle"></i> Novo Documento
                                    </a>
                                </div>

                                <div class="form-group">
                                    <label for="mensagem" class="control-label">Mensagem</label>
                                    <textarea name="mensagem" id="mensagem" class="form-control ckeditor" rows="6"></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                                <button type="submit" class="btn btn-success">Enviar Resposta</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Modal de Status -->
            <div class="modal fade" id="statusModal" tabindex="-1" role="dialog" aria-labelledby="statusModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                aria-hidden="true">&times;</button>
                            <h4 class="modal-title">Alterar Status</h4>
                        </div>
                        <div class="modal-body">
                            <form id="formStatus" method="POST">
                                @csrf
                                @method('PUT')
                                <input type="hidden" name="status" id="status-input">
                                <input type="hidden" name="chamado_id" id="chamado-id">
                                <input type="hidden" name="tenant_domain" id="tenant-domain"
                                    value="{{ $entidadeDomain }}">

                                <div class="text-center">
                                    <p>Selecione o novo status:</p>
                                    <button type="button" class="btn btn-danger select-status m-1"
                                        data-status="0">Pendente</button>
                                    <button type="button" class="btn btn-warning select-status m-1" data-status="1">Em
                                        Andamento</button>
                                    <button type="button" class="btn btn-info select-status m-1"
                                        data-status="2">Respondido</button>
                                    <button type="button" class="btn btn-success select-status m-1"
                                        data-status="3">Finalizado</button>
                                </div>
                                <div id="loadingSpinner" class="mt-3 text-center" style="display: none;">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="sr-only">Carregando...</span>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- JavaScript -->
        <script>
            console.log('Script carregado - verificando funcionalidades');

            if (typeof jQuery === 'undefined') {
                console.error('jQuery não está carregado!');
            } else {
                console.log('jQuery versão:', jQuery.fn.jquery);
            }

            if (typeof $.fn.modal === 'undefined') {
                console.error('Bootstrap não está carregado!');
            } else {
                console.log('Bootstrap modal carregado');
            }

            const chamadosDataset = @json($chamados->items());

            function openImageModal(modalId) {
                const modal = document.getElementById(modalId);
                if (modal) {
                    modal.style.display = 'flex';
                    document.body.style.overflow = 'hidden';
                }
            }

            function closeImageModal(modalId) {
                const modal = document.getElementById(modalId);
                if (modal) {
                    modal.style.display = 'none';
                    document.body.style.overflow = 'auto';
                }
            }

            function prevImage(chamadoId) {
                const container = document.getElementById(`carousel-inner-${chamadoId}`);
                if (!container) return;

                const items = container.querySelectorAll('.carousel-item');
                const active = container.querySelector('.carousel-item.active');
                let index = Array.from(items).indexOf(active);

                if (active) {
                    active.classList.remove('active');
                    const newIndex = (index - 1 + items.length) % items.length;
                    items[newIndex].classList.add('active');
                }
            }

            function nextImage(chamadoId) {
                const container = document.getElementById(`carousel-inner-${chamadoId}`);
                if (!container) return;

                const items = container.querySelectorAll('.carousel-item');
                const active = container.querySelector('.carousel-item.active');
                let index = Array.from(items).indexOf(active);

                if (active) {
                    active.classList.remove('active');
                    const newIndex = (index + 1) % items.length;
                    items[newIndex].classList.add('active');
                }
            }


            document.addEventListener('click', function(event) {
                if (event.target.classList.contains('custom-modal-arquivo')) {
                    event.target.style.display = 'none';
                    document.body.style.overflow = 'auto';
                }
            });


            function carregarDocumentos() {
                console.log('Carregando documentos...');


                $('#selectedBoxes').select2({
                    placeholder: "Digite para pesquisar um documento",
                    width: '100%',
                    dropdownParent: $('#respostaModal'),
                    minimumInputLength: 2,
                    ajax: {
                        url: '{{ route('documentos.carregar') }}',
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                search: params.term,
                                entidade_id: '{{ $entidadeDomain }}'
                            };
                        },
                        processResults: function(response) {
                            let documentos = [];

                            if (response.documentos && Array.isArray(response.documentos)) {
                                documentos = response.documentos.map(function(doc) {
                                    let ano = '';
                                    if (doc.date) {
                                        const partes = doc.date.split('/');
                                        if (partes.length === 3) {
                                            const dataObj = new Date(partes[2], partes[1] - 1, partes[0]);
                                            if (!isNaN(dataObj.getTime())) {
                                                ano = dataObj.getFullYear();
                                            }
                                        }
                                    }

                                    const numeroDoc = doc.number || '';
                                    return {
                                        id: doc.id,
                                        text: `Nº ${numeroDoc}/${ano} - ${doc.document_type?.name || ''} parlamentar: ${doc.owner?.short_name || doc.user?.name || ''}`
                                    };
                                });
                            }

                            return {
                                results: documentos
                            };
                        },
                        cache: true
                    },
                    language: {
                        inputTooShort: function() {
                            return "Digite pelo menos 2 caracteres para buscar";
                        },
                        searching: function() {
                            return "Pesquisando...";
                        },
                        noResults: function() {
                            return "Nenhum documento encontrado";
                        }
                    }
                });


                $.ajax({
                    url: '{{ route('documentos.carregar') }}',
                    method: 'GET',
                    data: {
                        entidade_id: '{{ $entidadeDomain }}'
                    },
                    success: function(response) {
                        console.log('Resposta categorias:', response);
                        let selectCategorias = $('#categoria_id');
                        selectCategorias.empty();

                        if (response.categorias && Array.isArray(response.categorias) && response.categorias
                            .length > 0) {
                            selectCategorias.append('<option value="">Selecione uma categoria</option>');
                            response.categorias.forEach(function(cat) {
                                if (cat.id && cat.name) {
                                    selectCategorias.append('<option value="' + cat.id + '">' + cat.name +
                                        '</option>');
                                }
                            });
                        } else {
                            selectCategorias.append(
                                '<option value="" disabled>Nenhuma categoria encontrada</option>');
                        }


                        selectCategorias.select2({
                            placeholder: "Selecione uma categoria",
                            width: '100%',
                            dropdownParent: $('#respostaModal')
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error('Erro ao carregar categorias:', error);
                        $('#categoria_id').html('<option value="" disabled>Erro ao carregar categorias</option>');
                    }
                });
            }

            function openRespostaModal(chamadoId) {
                console.log('Abrindo modal de resposta para:', chamadoId);
                $('#ouvidoria_id').val(chamadoId);
                $('#respostaModal').modal('show');


                $('#selectedBoxes').val(null).trigger('change');
                $('#categoria_id').val(null).trigger('change');
                if (CKEDITOR.instances.mensagem) {
                    CKEDITOR.instances.mensagem.setData('');
                }

                carregarDocumentos();
            }

            function closeRespostaModal() {
                $('#respostaModal').modal('hide');
            }


            $(document).ready(function() {
                console.log('Document ready iniciado');


                $('.js-example-basic-multiple').select2({
                    placeholder: "Selecione",
                    width: '100%',
                    dropdownParent: $('#respostaModal')
                });

                $(document).on('click', '.responder-btn', function(e) {
                    e.preventDefault();
                    var chamadoId = $(this).data('ouvidoria-id');
                    console.log('Botão responder clicado, chamado ID:', chamadoId);
                    openRespostaModal(chamadoId);
                });

                $('#formRespostaOuvidoria').on('submit', function(e) {
                    e.preventDefault();
                    console.log('Formulário de resposta submetido');

                    for (const instance in CKEDITOR.instances) {
                        CKEDITOR.instances[instance].updateElement();
                    }

                    const form = e.target;
                    const formData = new FormData(form);
                    const csrfToken = formData.get('_token');

                    console.log('Enviando dados...');

                    fetch("{{ url('/ouvidoria/v1/responder-chamado') }}", {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': csrfToken,
                                'X-Authorization': '6YUF7bqwoKRC9HKd',
                            },
                            body: formData
                        })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Erro na resposta do servidor');
                            }
                            return response.json();
                        })
                        .then(data => {
                            console.log('Resposta recebida:', data);
                            if (data.status) {
                                alert(data.message || 'Resposta enviada com sucesso!');
                                closeRespostaModal();
                                location.reload();
                            } else {
                                alert(data.message || 'Erro ao enviar resposta.');
                            }
                        })
                        .catch(error => {
                            console.error('Erro na requisição:', error);
                            alert('Erro ao enviar resposta: ' + error.message);
                        });
                });

                $(document).on('click', '.change-status', function() {
                    const chamadoId = $(this).data('id');
                    const currentStatus = $(this).data('current-status');

                    console.log('Alterando status do chamado:', chamadoId);

                    $('#chamado-id').val(chamadoId);
                    $('#statusModal').modal('show');
                    $('#loadingSpinner').hide();
                    $('.select-status').prop('disabled', false);
                });

                $('.select-status').on('click', function() {
                    const status = $(this).data('status');
                    $('#status-input').val(status);

                    $('#loadingSpinner').show();
                    $('.select-status').prop('disabled', true);

                    const chamadoId = $('#chamado-id').val();
                    const formAction = "{{ route('chamados.atualizarStatus', ['id' => '__ID__']) }}".replace(
                        '__ID__', chamadoId);

                    $('#formStatus').attr('action', formAction);
                    console.log('Enviando formulário de status para:', formAction);

                    $('#formStatus').submit();
                });

                $(document).on('click', '[data-dismiss="modal"]', function() {
                    $(this).closest('.modal').modal('hide');
                });

                console.log('Document ready finalizado');
            });

            function imprimirLinha(id) {
                try {
                    console.log('Imprimindo linha:', id);

                    // Busca o chamado específico nos dados que vieram do controller
                    var chamado = chamadosDataset.find(c => c.id == id);

                    if (!chamado) {
                        console.error('Chamado não encontrado para ID:', id);
                        alert('Chamado não encontrada');
                        return;
                    }

                    console.log('Dados do chamado:', chamado);

                    const parlamentarNome = chamado.parlamentar_nome ||
                        (chamado.assemblyman && (chamado.assemblyman.short_name || chamado.assemblyman.name)) ||
                        'Não vinculado';

                    // Função para formatar a data
                    function formatarData(dataString) {
                        if (!dataString) return 'Não informada';

                        try {
                            const data = new Date(dataString);
                            if (isNaN(data.getTime())) return 'Data inválida';

                            return data.toLocaleDateString('pt-BR', {
                                day: '2-digit',
                                month: '2-digit',
                                year: 'numeric',
                                hour: '2-digit',
                                minute: '2-digit'
                            });
                        } catch (e) {
                            return dataString; // Retorna original se der erro
                        }
                    }

                    // Função para converter HTML em texto preservando formatação
                    function converterHtmlParaTexto(html) {
                        if (!html) return '';

                        return html
                            .replace(/<br\s*\/?>/gi, '\n') // <br> para quebra de linha
                            .replace(/&nbsp;/g, ' ') // &nbsp; para espaço
                            .replace(/<\/p>/gi, '\n\n') // </p> para duas quebras
                            .replace(/<[^>]*>/g, '') // remove outras tags
                            .replace(/\n\s*\n/g, '\n\n') // remove linhas vazias extras
                            .trim();
                    }

                    var htmlRelatorio = `
            <div class="container mx-auto p-8">
                <h1 class="text-3xl font-bold mb-4 text-center">Relatório do Chamado #${chamado.id || ''}</h1>
                <div class="bg-gray-100 p-6 rounded-lg shadow-md mb-6">
                    <h2 class="text-xl font-semibold mb-4 border-b-2 pb-2">Detalhes Principais</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <p><strong>Protocolo:</strong> ${chamado.protocolo || ''}</p>
                        <p><strong>Identificação:</strong> ${chamado.identificacao || ''}</p>
                        <p><strong>Tipo:</strong> ${chamado.tipo || ''}</p>
                        <p><strong>Assunto:</strong> ${chamado.assunto || ''}</p>
                        <p><strong>Documento:</strong> ${chamado.document ? chamado.document.number : ''}</p>
                        <p><strong>Parlamentar:</strong> ${parlamentarNome}</p>
                        <p><strong>Categoria:</strong> ${chamado.category ? chamado.category.name : ''}</p>
                        <p><strong>Status:</strong> ${chamado.status || ''}</p>
                        <p><strong>Data:</strong> ${formatarData(chamado.created_at)}</p>
                    </div>
                </div>
                <div class="bg-gray-100 p-6 rounded-lg shadow-md mb-6">
                    <h2 class="text-xl font-semibold mb-4 border-b-2 pb-2">Solicitação do Usuário</h2>
                    <div class="bg-white p-3 rounded border min-h-[100px] whitespace-pre-wrap">${converterHtmlParaTexto(chamado.descricao) || 'Sem descrição fornecida'}</div>
                </div>
                <div class="bg-gray-100 p-6 rounded-lg shadow-md mb-6">
                    <h2 class="text-xl font-semibold mb-4 border-b-2 pb-2">Detalhes da Resposta</h2>
                    <div class="space-y-4">
                        <div>
                            <p class="font-semibold mb-2">Data da Resposta:</p>
                            <p class="bg-white p-3 rounded border">${formatarData(chamado.updated_at)}</p>
                        </div>
                        <div>
                            <p class="font-semibold mb-2">Resposta:</p>
                            <div class="bg-white p-3 rounded border min-h-[100px] whitespace-pre-wrap">${converterHtmlParaTexto(chamado.resposta) || 'Nenhuma resposta registrada'}</div>
                        </div>
                    </div>
                </div>
            </div>
        `;

                    var janela = window.open('', '_blank', 'width=1000,height=800,scrollbars=yes');

                    janela.document.write('<!DOCTYPE html>');
                    janela.document.write('<html>');
                    janela.document.write('<head>');
                    janela.document.write('<title>Relatório do Chamado #' + (chamado.id || '') + '</title>');
                    janela.document.write('<script src="https://cdn.tailwindcss.com"><\/script>');
                    janela.document.write('<style>');
                    janela.document.write('body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }');
                    janela.document.write(
                        '@media print { body { margin: 0; padding: 20px; } .no-print { display: none !important; } }');
                    janela.document.write('<\/style>');
                    janela.document.write('<\/head>');
                    janela.document.write('<body class="bg-gray-200">');
                    janela.document.write(htmlRelatorio);
                    janela.document.write('<div class="no-print text-center mt-4">');
                    janela.document.write(
                        '<button onclick="window.print()" class="bg-blue-500 text-white px-4 py-2 rounded">Imprimir</button>'
                    );
                    janela.document.write(
                        '<button onclick="window.close()" class="bg-gray-500 text-white px-4 py-2 rounded ml-2">Fechar</button>'
                    );
                    janela.document.write('<\/div>');
                    janela.document.write('<\/body>');
                    janela.document.write('<\/html>');

                    janela.document.close();

                } catch (e) {
                    console.error('Erro ao imprimir relatório:', e);
                    alert('Erro ao gerar relatório: ' + e.message);
                }
            }

            function imprimirTabela() {
                try {
                    const dados = chamadosDataset;
                    const totalChamados = dados.length;
                    const statusLabels = {
                        0: 'Pendente',
                        1: 'Em andamento',
                        2: 'Respondido',
                        3: 'Finalizado'
                    };
                    const statusCounts = {};
                    const parlamentarCounts = {};

                    dados.forEach(item => {
                        const status = item.status ?? 'Sem status';
                        statusCounts[status] = (statusCounts[status] || 0) + 1;

                        const nomeParlamentar = item.parlamentar_nome ||
                            (item.assemblyman && (item.assemblyman.short_name || item.assemblyman.name)) ||
                            'Não vinculado';
                        parlamentarCounts[nomeParlamentar] = (parlamentarCounts[nomeParlamentar] || 0) + 1;
                    });

                    const topParlamentares = Object.entries(parlamentarCounts)
                        .sort((a, b) => b[1] - a[1])
                        .slice(0, 5);

                    const statusListHtml = Object.entries(statusLabels).map(([value, label]) => {
                        return `<li><strong>${label}:</strong> ${statusCounts[value] || 0}</li>`;
                    }).join('');

                    const parlamentarListHtml = topParlamentares.length ? topParlamentares.map(([nome, qtd]) => {
                        return `<li><strong>${nome}:</strong> ${qtd} ${qtd === 1 ? 'chamado' : 'chamados'}</li>`;
                    }).join('') : '<li>Nenhum parlamentar vinculado nesta listagem.</li>';

                    const formatarData = dataString => {
                        if (!dataString) return '-';
                        const data = new Date(dataString);
                        if (Number.isNaN(data.getTime())) return dataString;
                        return data.toLocaleDateString('pt-BR');
                    };

                    const linhasResumo = dados.map(item => {
                        const statusTexto = statusLabels[item.status] || 'Desconhecido';
                        const parlamentar = item.parlamentar_nome ||
                            (item.assemblyman && (item.assemblyman.short_name || item.assemblyman.name)) ||
                            'Não vinculado';
                        return `
                            <tr>
                                <td>${item.id || '-'}</td>
                                <td>${item.protocolo || '-'}</td>
                                <td>${item.tipo || '-'}</td>
                                <td>${item.assunto || '-'}</td>
                                <td>${parlamentar}</td>
                                <td>${statusTexto}</td>
                                <td>${formatarData(item.created_at)}</td>
                            </tr>
                        `;
                    }).join('');

                    const tabelaResumo = `
                        <table>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Protocolo</th>
                                    <th>Tipo</th>
                                    <th>Assunto</th>
                                    <th>Parlamentar</th>
                                    <th>Status</th>
                                    <th>Data</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${linhasResumo || '<tr><td colspan="7">Nenhum chamado disponível.</td></tr>'}
                            </tbody>
                        </table>
                    `;

                    const janela = window.open('', '_blank', 'width=1200,height=800,scrollbars=yes');
                    janela.document.write('<!DOCTYPE html>');
                    janela.document.write('<html>');
                    janela.document.write('<head>');
                    janela.document.write('<title>Lista completa de chamados</title>');
                    janela.document.write('<style>');
                    janela.document.write(`
                        body { font-family: Arial, sans-serif; margin: 0; padding: 30px; background: #f4f6f8; }
                        h1 { text-align: center; margin-bottom: 10px; }
                        h2 { margin: 0; }
                        .meta { text-align: center; color: #555; margin-bottom: 30px; }
                        table { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; }
                        th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
                        th { background: #0d6efd; color: #fff; }
                        .stats-container { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; }
                        .stat-box { flex: 1 1 250px; background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
                        .stat-box h3 { margin-top: 0; margin-bottom: 15px; font-size: 16px; color: #0d6efd; }
                        .stat-box ul { list-style: none; padding: 0; margin: 0; }
                        .stat-box li { margin-bottom: 8px; }
                        .total-box { text-align: center; font-size: 32px; font-weight: bold; color: #0d6efd; }
                        @media print {
                            body { background: #fff; padding: 0; }
                            .no-print { display: none !important; }
                        }
                    `);
                    janela.document.write('</style>');
                    janela.document.write('</head>');
                    janela.document.write('<body>');
                    janela.document.write('<h1>Lista de Chamados</h1>');
                    janela.document.write(`<p class="meta">Relatório gerado em ${new Date().toLocaleString('pt-BR')}</p>`);
                    janela.document.write('<div class="stats-container">');
                    janela.document.write('<div class="stat-box total-box">');
                    janela.document.write(`<div>Total de chamados</div><div>${totalChamados}</div>`);
                    janela.document.write('</div>');
                    janela.document.write('<div class="stat-box">');
                    janela.document.write('<h3>Status</h3>');
                    janela.document.write(`<ul>${statusListHtml}</ul>`);
                    janela.document.write('</div>');
                    janela.document.write('<div class="stat-box">');
                    janela.document.write('<h3>Parlamentares mais solicitados</h3>');
                    janela.document.write(`<ul>${parlamentarListHtml}</ul>`);
                    janela.document.write('</div>');
                    janela.document.write('</div>');
                    janela.document.write(tabelaResumo);
                    janela.document.write('<script>window.onload = function() { window.print(); };<\/script>');
                    janela.document.write('</body>');
                    janela.document.write('</html>');
                    janela.document.close();
                } catch (error) {
                    console.error('Erro ao imprimir tabela:', error);
                    alert('Erro ao imprimir tabela: ' + error.message);
                }
            }

            $('#respostaModal').on('shown.bs.modal', function() {
                if (typeof CKEDITOR !== 'undefined' && !CKEDITOR.instances.mensagem) {
                    CKEDITOR.replace('mensagem');
                }
            });


            $('#respostaModal').on('hidden.bs.modal', function() {
                if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances.mensagem) {
                    CKEDITOR.instances.mensagem.setData('');
                }
            });
        </script>
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="tenant-domain" content="{{ $entidadeDomain }}">
    @else
        <div class="alert alert-danger">
            <strong>Erro:</strong> Nenhum domínio encontrado.
        </div>
    @endif
@endsection