@extends('layouts.digitar')

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

@section('content')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    @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
        <div class="Relatorio">

            <div class="the-box d-flex justify-content-center align-items-center rounded" style="min-height: 80vh;">
                <div class="col-xl-10">
                    <div class="card rounded-3 shadow">
                        <div class="card-header text-dark">
                            <h4 class="mb-0" style="margin-left:5px;margin-top:20px;margin-bottom:50px;">Lista de Chamados
                            </h4>
                        </div>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-12" style="padding-bottom:15px;left:-15px;">
                                    <a href="{!! route('documents.create') !!}">
                                        <button type="button" class="btn btn-info"
                                            title="Para adicionar um novo documento clique no botão  e volte para a tela de chamados para vincular o documento!">
                                            <i class="fa fa-plus-circle"></i> Novo Documento
                                        </button>
                                    </a>
                                    <a href="{{ route('estatisticas.index') }}">
                                        <button type="button" class="btn btn-success"
                                            title="Para adicionar um novo documento clique no botão  e volte para a tela de chamados para vincular o documento!">
                                            <i class="fa fa-map-marker"></i> Estatisticas chamados
                                        </button>
                                    </a>
                                </div>
                                <div class="col-md-12" style="padding-bottom:15px;left:-15px;">
                                    <form method="GET" action="{{ route('chamados.result') }}" class="row g-3">
                                        @csrf
                                        <input type="hidden" name="entidade_id" value="{{ $entidadeDomain }}">
                                        <div class="col-md-3">
                                            <label for="protocolo" class="form-label">Protocolo</label>
                                            <input type="text" class="form-control" id="protocolo" name="protocolo"
                                                value="{{ old('protocolo', request('protocolo')) }}"
                                                placeholder="Digite o protocolo">
                                        </div>
                                        <div class="col-md-3">
                                            <label for="tipo" class="form-label">Tipo</label>
                                            <select class="form-control" 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-3">
                                            <label for="tipo" class="form-label">Categorias</label>
                                            <select class="form-control" id="tipo" name="tipo">
                                                <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-3">
                                            <label for="documento" class="form-label">Documento(Número)</label>
                                            <input type="text" class="form-control" id="documento" name="documento"
                                                value="{{ old('documento', request('documento')) }}"
                                                placeholder="Digite o documento">
                                        </div>
                                        <div class="col-md-3" style="margin-top:6px;">
                                            <label for="data" class="form-label">Data</label>
                                            <input type="date" class="form-control" id="data" name="data"
                                                value="{{ old('data', request('data')) }}">
                                        </div>
                                        <div class="col-md-12 mt-3" style="margin-top:25px;margin-bottom:25px;">
                                            <button type="submit" class="btn btn-primary">Buscar</button>
                                            <a href="{{ route('chamados.result') }}" class="btn btn-secondary">Limpar</a>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="card-body bg-light">
                            <div class="table-responsive">
                                <table class="table-bordered table-hover table" id="chamados-table">
                                    <thead class="table-primary">
                                        <tr>
                                            <th class="px-4 py-2 text-sm font-semibold text-gray-700">id</th>
                                            <th class="px-4 py-2 text-sm font-semibold text-gray-700">Protocolo</th>
                                            <th class="px-4 py-2 text-sm font-semibold text-gray-700">Indentificação</th>
                                            <th class="px-4 py-2 text-sm font-semibold text-gray-700">Tipo</th>
                                            <th class="px-4 py-2 text-sm font-semibold text-gray-700">Assunto</th>
                                            <th class="px-4 py-2 text-sm font-semibold text-gray-700">Documento</th>
                                            <th class="px-4 py-2 text-sm font-semibold text-gray-700">Categorias</th>
                                            <th class="px-4 py-2 text-sm font-semibold text-gray-700">Status</th>
                                            <th class="px-4 py-2 text-sm font-semibold text-gray-700">Data</th>
                                            <th class="px-4 py-2 text-sm font-semibold text-gray-700">Endereço</th>
                                            <th class="px-4 py-2 text-sm font-semibold text-gray-700">Anexos</th>
                                            <th class="px-4 py-2 text-sm font-semibold text-gray-700">Imprimir</th>
                                            <th class="px-4 py-2 text-sm font-semibold text-gray-700">Manutenção</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($chamados as $chamado)
                                            <tr class="border-b hover:bg-gray-50" id="linha-{{ $chamado->id }}">
                                                <td>{{ $chamado->id }}</td>
                                                <td class="px-4 py-2 text-sm text-gray-800">{{ $chamado->protocolo }}
                                                </td>
                                                <td class="px-4 py-2 text-sm text-gray-800">
                                                    {{ $chamado->anonimo ? 'Anônimo' : $chamado->nome }}</td>
                                                <td class="px-4 py-2 text-sm text-gray-800">{{ $chamado->tipo }}</td>
                                                <td class="px-4 py-2 text-sm text-gray-800">{{ $chamado->assunto }}</td>
                                                <td class="px-4 py-2 text-sm text-gray-800">
                                                    @if ($chamado->documentos && $chamado->documentos->count())
                                                        @foreach ($chamado->documentos as $documento)
                                                            <div class="badge bg-info text-white"
                                                                style="background-color: #007bff; color: #fff; padding: 10px;margin-bottom: 5px;">
                                                                <a href="{{ route('documents.show', $documento->id) }}"
                                                                    style="color: #fff; text-decoration: none;">
                                                                    {{ $documento->document_type->name ?? 'Sem tipo' }}
                                                                </a>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <span class="text-dark">Nenhum documento vinculado</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    {{ $chamado->category->name ?? 'N/A' }}
                                                </td>
                                                <td class="px-4 py-2 text-sm text-gray-800">
                                                    @php
                                                        $statusText = [
                                                            0 => [
                                                                'text' => 'Pendente',
                                                                'color' => '#dd4b4b',
                                                                'border-style' => 'none',
                                                                'border-radius' => '30px',
                                                                'padding' => '10px',
                                                                'width' => '100%',
                                                                'display' => 'flex',
                                                                'justify-content' => 'center',
                                                                'align-items' => 'center',
                                                            ],
                                                            1 => [
                                                                'text' => 'Em andamento',
                                                                'color' => '#2E8B57',
                                                                'border-style' => 'none',
                                                                'border-radius' => '30px',
                                                                'padding' => '10px',
                                                                'width' => '100%',
                                                                'display' => 'flex',
                                                                'justify-content' => 'center',
                                                                'align-items' => 'center',
                                                            ],
                                                            2 => [
                                                                'text' => 'Respondido',
                                                                'color' => '#2F4F4F',
                                                                'border-style' => 'none',
                                                                'border-radius' => '30px',
                                                                'padding' => '10px',
                                                                'width' => '100%',
                                                                'display' => 'flex',
                                                                'justify-content' => 'center',
                                                                'align-items' => 'center',
                                                            ],
                                                            3 => [
                                                                'text' => 'Finalizado',
                                                                'color' => 'green',
                                                                'border-style' => 'none',
                                                                'border-radius' => '30px',
                                                                'padding' => '10px',
                                                                'width' => '100%',
                                                                'display' => 'flex',
                                                                'justify-content' => 'center',
                                                                'align-items' => 'center',
                                                            ],
                                                        ];
                                                    @endphp

                                                    @switch($chamado->status)
                                                        @case(0)
                                                        @case(1)

                                                        @case(2)
                                                        @case(3)
                                                            <button type="button" class="badge text-bg-light change-status"
                                                                data-id="{{ $chamado->id }}"
                                                                data-current-status="{{ $chamado->status }}"
                                                                style="
                                                                    background-color: {{ $statusText[$chamado->status]['color'] }};
                                                                    border-style: {{ $statusText[$chamado->status]['border-style'] }};
                                                                    border-radius: {{ $statusText[$chamado->status]['border-radius'] }};
                                                                    padding: {{ $statusText[$chamado->status]['padding'] }};
                                                                ">
                                                                {{ $statusText[$chamado->status]['text'] }}
                                                            </button>
                                                        @break

                                                        @default
                                                            <span class="badge text-bg-secondary">Desconhecido</span>
                                                    @endswitch
                                                    <!-- Modal Simples -->
                                                    <div id="statusModal" class="custom-modal">
                                                        <div
                                                            class="custom-modal-content justify-content-center align-items-center">
                                                            <span class="custom-close">&times;</span>
                                                            <h3>Alterar Status do Chamado</h3>

                                                            <form id="formStatus" method="POST"
                                                                action="{{ route('chamados.atualizarStatus', ['id' => $chamado->id]) }}">
                                                                @csrf
                                                                <input type="hidden" name="chamado_id" id="chamado-id"
                                                                    value="{{ $chamado->id }}">
                                                                <input type="hidden" name="tenant_domain"
                                                                    value="{{ $chamado->entidade_domain }}">
                                                                <input type="hidden" name="status" id="status-input">

                                                                <div id="statusButtons">
                                                                    @foreach ($statusText as $key => $status)
                                                                        <button type="button" class="select-status"
                                                                            data-status="{{ $key }}"
                                                                            style="
                            margin: 5px; padding: 8px; width: 100%; color: white;
                            background-color: {{ $status['color'] }};
                            border-style: {{ $status['border-style'] }};
                            border-radius: {{ $status['border-radius'] }};
                            padding: {{ $status['padding'] }};
                            width: {{ $status['width'] }};
                            display: {{ $status['display'] }};
                            justify-content: {{ $status['justify-content'] }};
                            align-items: {{ $status['align-items'] }};
                        ">
                                                                            {{ $status['text'] }}
                                                                        </button>
                                                                    @endforeach
                                                                    <div id="loadingSpinner" style="display:none;">
                                                                        <div class="custom-spinner"></div>
                                                                        <p style="margin-top: 8px;">Atualizando status...
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>

                                                    <!-- CSS Modal -->
                                                    <style>
                                                        .custom-modal {
                                                            display: none;
                                                            position: fixed;
                                                            z-index: 50;
                                                            left: 0;
                                                            top: 0;
                                                            width: 100%;
                                                            height: 100%;
                                                            overflow: auto;
                                                            background-color: rgba(0, 0, 0, 0.4);
                                                        }

                                                        .custom-modal-content {
                                                            background-color: #fefefe;
                                                            margin: 10% auto;
                                                            padding: 20px;
                                                            border: 1px solid #888;
                                                            width: 300px;
                                                            border-radius: 5px;
                                                            text-align: center;
                                                        }

                                                        .custom-close {
                                                            color: #aaa;
                                                            float: right;
                                                            font-size: 28px;
                                                            font-weight: bold;
                                                            cursor: pointer;
                                                        }

                                                        .custom-close:hover,
                                                        .custom-close:focus {
                                                            color: black;
                                                            text-decoration: none;
                                                            cursor: pointer;
                                                        }

                                                        .custom-spinner {
                                                            border: 4px solid #f3f3f3;
                                                            border-top: 4px solid #3498db;
                                                            border-radius: 50%;
                                                            width: 40px;
                                                            height: 40px;
                                                            animation: spin 1s linear infinite;
                                                            margin: 0 auto;
                                                        }

                                                        @keyframes spin {
                                                            0% {
                                                                transform: rotate(0deg);
                                                            }

                                                            100% {
                                                                transform: rotate(360deg);
                                                            }
                                                        }

                                                        #loadingSpinner {
                                                            display: none;
                                                            margin-top: 15px;
                                                            text-align: center;
                                                        }
                                                    </style>
                                                </td>
                                                <td class="px-4 py-2 text-sm text-gray-800">
                                                    {{ $chamado->created_at->format('d/m/y') }}</td>
                                                <td class="px-4 py-2 text-sm text-gray-800">
                                                    <button class="btnOpenMap"
                                                        onclick="window.location.href='{{ route('maps.show', $chamado->id) }}'"
                                                        style="padding: 6px 12px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">
                                                        <i class="fas fa-map-marker-alt"></i>
                                                    </button>
                                                </td>
                                                <td class="px-4 py-2 text-sm text-gray-800">
                                                    @if ($chamado->arquivos?->count())
                                                        <button class="btn btn-primary" id="btnHiddenButton"
                                                            onclick="openImageModal('modal_{{ $chamado->id }}')">
                                                            <i class="bi bi-images"></i> Visualizar Anexos
                                                        </button>
                                                    @endif
                                                    @if ($chamado->arquivos?->count())
                                                        <div id="modal_{{ $chamado->id }}" class="custom-modal"
                                                            style="display: none;">
                                                            <div class="custom-modal-content">
                                                                <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 }}">
                                                                            </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>
                                                    @else
                                                        <div class="badge"
                                                            style="background-color:#FFD700;color:#000;padding:6px;">
                                                            Nenhum anexo vínculado
                                                        </div>
                                                    @endif
                                                    <style>
                                                        .custom-modal {
                                                            display: none;
                                                            position: fixed;
                                                            z-index: 50;
                                                            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 {
                                                            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;
                                                        }

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

                                                    <!-- Scripts -->
                                                    <script>
                                                        function openImageModal(modalId) {
                                                            const modal = document.getElementById(modalId);
                                                            modal.style.display = 'flex';
                                                        }

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

                                                        function prevImage(chamadoId) {
                                                            const container = document.getElementById(`carousel-inner-${chamadoId}`);
                                                            const items = container.querySelectorAll('.carousel-item');
                                                            const active = container.querySelector('.carousel-item.active');
                                                            let index = Array.from(items).indexOf(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}`);
                                                            const items = container.querySelectorAll('.carousel-item');
                                                            const active = container.querySelector('.carousel-item.active');
                                                            let index = Array.from(items).indexOf(active);

                                                            active.classList.remove('active');
                                                            const newIndex = (index + 1) % items.length;
                                                            items[newIndex].classList.add('active');
                                                        }
                                                    </script>
                                                </td>
                                                <td>
                                                    <div style="display: inline-flex; gap: 5px; align-items: center;">
                                                        <button type="button"
                                                            class="btn btn-success btn-sm responder-btn"
                                                            data-ouvidoria-id="{{ $chamado->id }}" title="Responder">
                                                            <i class="fa fa-paper-plane"></i>
                                                        </button>
                                                        <form action="{{ route('chamado.destroy', $chamado->id) }}"
                                                            method="POST"
                                                            onsubmit="return confirm('Tem certeza que deseja excluir este chamado?')"
                                                            style="margin: 0;">
                                                            @csrf
                                                            @method('DELETE')
                                                            <input type="hidden" name="tenant_id"
                                                                value="{{ $chamado->entidade_domain }}">
                                                            <button type="submit" class="btn btn-danger btn-sm"
                                                                title="Excluir">
                                                                <i class="fa fa-trash"></i>
                                                            </button>
                                                        </form>
                                                    </div>
                                                </td>
                                                <td>
                                                    <button class="btn btn-primary"
                                                        onclick="imprimirLinha({{ $chamado->id }})">
                                                        Imprimir
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div class="paginate">{{ $chamados->links() }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="respostaModal" class="custom-modal" style="display:none;z-index: 100;">
                <div class="custom-modal-overlay"></div>
                <div class="custom-modal-content">
                    <form id="formRespostaOuvidoria">
                        @csrf
                        <div class="modal-header">
                            <h5 class="modal-title"><b>Responder Chamado</b></h5>
                            <button type="button" class="btn-close close-modal" aria-label="Fechar"></button>
                        </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 g-3 mb-3">
                                <div class="col-md-6">
                                    <label for="selectedBoxes" class="form-label">Selecionar Documentos</label>
                                    <select class="form-select js-example-basic-multiple" name="selectedBoxes[]"
                                        id="selectedBoxes" multiple>

                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label for="categoria_id" class="form-label">Encaminhar para setor</label>
                                    <select name="categoria_id" id="categoria_id"
                                        class="form-select js-example-basic-multiple">
                                    </select>
                                </div>

                                <div class="col-md-12"
                                    style="margin-top: 10px;justify-content:rigth;algin-items: rigth;display:flex;">
                                    <a href="{!! route('documents.create') !!}" class="btn btn-info" title="...">
                                        <i class="fa fa-plus-circle"></i> Novo Documento
                                    </a>
                                </div>
                            </div>
                            <div class="mb-3" style="margin-top: 10px;">
                                <label for="mensagem" class="form-label">Mensagem</label>
                                <textarea name="mensagem" id="mensagem" class="form-control ckeditor" rows="6"></textarea>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-success">Enviar Resposta</button>
                                <button type="button" class="btn btn-secondary close-modal">Cancelar</button>
                            </div>
                    </form>
                </div>
            </div>
            <script>
                function openImageModal(modalId) {
                    document.getElementById(modalId).style.display = 'flex';


                    setTimeout(() => {
                        if (CKEDITOR.instances['mensagem']) {
                            CKEDITOR.instances['mensagem'].destroy(true);
                        }
                        CKEDITOR.replace('mensagem');
                    }, 300);
                }

                function closeImageModal(modalId) {
                    document.getElementById(modalId).style.display = 'none';


                    if (CKEDITOR.instances['mensagem']) {
                        CKEDITOR.instances['mensagem'].destroy(true);
                    }
                }

                function carregarDocumentos() {
                    // Inicializa o select2 com busca AJAX
                    $('#selectedBoxes').select2({
                        placeholder: "Digite para pesquisar um documento",
                        width: '100%',
                        minimumInputLength: 2,
                        ajax: {
                            url: '{{ route('documentos.carregar') }}',
                            dataType: 'json',
                            delay: 250,
                            data: function(params) {
                                return {
                                    search: params.term
                                };
                            },
                            processResults: function(data) {

                                let documentos = [];
                                if (Array.isArray(data.documentos)) {
                                    documentos = data.documentos.map(function(doc) {
                                        let mesAno = '';
                                        if (doc.date) {
                                            const dataFormatada = new Date(doc.date);
                                            if (!isNaN(dataFormatada)) {
                                                mesAno = dataFormatada.toLocaleDateString('pt-BR', {
                                                    month: '2-digit',
                                                    year: 'numeric'
                                                });
                                            }
                                        }
                                        return {
                                            id: doc.id,
                                            text: `#${doc.number} | ${mesAno} | ${doc.document_type?.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',
                        success: function(response) {
                            let selectCategorias = $('#categoria_id');
                            selectCategorias.empty();

                            if (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 disabled>Nenhuma categoria encontrada</option>');
                            }
                        }
                    });
                }



                function deletarChamado(button) {
                    const id = button.dataset.id;
                    const tenant = button.dataset.tenantId;

                    if (!tenant) {
                        alert('Erro: ID da entidade (tenant) não encontrado.');
                        return;
                    }

                    if (confirm('Tem certeza que deseja excluir este chamado?')) {
                        const url = `http://localhost:8001/api/ouvidoria/v1/deletar/chamado/${id}/?tenant_id=${tenant}`;

                        fetch(url, {
                                method: 'DELETE',
                                headers: {
                                    'Accept': 'application/json',
                                    'X-Authorization': '6YUF7bqwoKRC9HKd'
                                }
                            })
                            .then(async response => {
                                const json = await response.json();
                                console.log('Resposta completa da API:', json);

                                if (!response.ok) {
                                    alert(json.error || 'Erro ao deletar chamado.');
                                    return;
                                }

                                alert(json.message);

                                if (json.message === 'Chamado deletado com sucesso.') {
                                    const row = button.closest('tr');
                                    if (row) {
                                        row.remove();
                                    }
                                }
                            })
                            .catch(error => alert('Erro na requisição: ' + error.message));
                    }
                }


                document.addEventListener('DOMContentLoaded', function() {
                    const modal = document.getElementById('respostaModal');
                    const closeModalButtons = document.querySelectorAll('.close-modal');

                    document.querySelectorAll('.responder-btn').forEach(btn => {
                        btn.addEventListener('click', function() {
                            document.getElementById('ouvidoria_id').value = this.getAttribute(
                                'data-ouvidoria-id');
                            openImageModal('respostaModal');
                            carregarDocumentos();
                        });
                    });

                    closeModalButtons.forEach(btn => {
                        btn.addEventListener('click', () => closeImageModal('respostaModal'));
                    });

                    document.getElementById('formRespostaOuvidoria').addEventListener('submit', function(e) {
                        e.preventDefault();

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

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


                        const tenantDomain = form.querySelector('input[name="entidade_domain"]').value;

                        if (!tenantDomain) {
                            alert('Erro: domínio do tenant não encontrado no formulário.');
                            return;
                        }

                        console.log('Tenant Domain:', tenantDomain);
                        for (let pair of formData.entries()) {
                            console.log(pair[0] + ': ' + pair[1]);
                        }

                        fetch("{{ url('/ouvidoria/v1/responder-chamado') }}", {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': csrfToken,
                                    'X-Authorization': '6YUF7bqwoKRC9HKd',
                                },
                                body: formData
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.status) {
                                    alert(data.message || 'Resposta enviada com sucesso!');
                                    closeImageModal('respostaModal');
                                    location.reload();
                                } else {
                                    alert(data.message || 'Erro ao enviar resposta.');
                                    console.error('Erro retornado:', data);
                                }
                            })
                            .catch(error => {
                                console.error('Erro na requisição:', error);
                                alert('Erro ao enviar resposta.');
                            });
                    });
                });
            </script>
            <script>
                $(document).ready(function() {
                    $('.js-example-basic-multiple').select2({
                        placeholder: "Selecione",
                        width: '100%'
                    });

                    carregarDocumentos();
                });
            </script>
            <!-- JS Status -->
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    const modal = document.getElementById("statusModal");
                    const spanClose = document.querySelector(".custom-close");
                    const formStatus = document.getElementById("formStatus");
                    const statusInput = document.getElementById("status-input");
                    const loadingSpinner = document.getElementById("loadingSpinner");


                    document.querySelectorAll(".change-status").forEach(function(btn) {
                        btn.addEventListener("click", function() {
                            const chamadoId = this.dataset.id;
                            document.getElementById("chamado-id").value = chamadoId;
                            modal.style.display = "block";
                            loadingSpinner.style.display = "none";
                            document.querySelectorAll(".select-status").forEach(b => b.disabled = false);
                        });
                    });

                    spanClose.onclick = function() {
                        modal.style.display = "none";
                    };

                    window.onclick = function(event) {
                        if (event.target == modal) {
                            modal.style.display = "none";
                        }
                    };


                    document.querySelectorAll(".select-status").forEach(function(btn) {
                        btn.addEventListener("click", function() {
                            const status = this.dataset.status;
                            statusInput.value = status;

                            loadingSpinner.style.display = "block";
                            document.querySelectorAll(".select-status").forEach(b => b.disabled = true);

                            formStatus.submit();
                        });
                    });
                });
            </script>
            <script>
                function imprimirLinha(id) {

                    var conteudo = document.getElementById('linha-' + id).outerHTML;


                    var janela = window.open('', '', 'width=800,height=600');
                    janela.document.write('<html><head><title>Impressão</title>');
                    janela.document.write(
                        '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">'
                    );
                    janela.document.write('</head><body>');
                    janela.document.write('<table class="table table-bordered">' + conteudo + '</table>');
                    janela.document.write('</body></html>');


                    janela.document.close();
                    janela.print();
                    janela.close();
                }
            </script>
            <style>
                .custom-modal {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100vw;
                    height: 100vh;
                    z-index: 9999;
                    /* muito alto para ficar acima de qualquer menu */
                    display: none;
                    justify-content: center;
                    align-items: flex-start;
                    /* começar no topo */
                    background: rgba(0, 0, 0, 0.7);
                    padding: 80px 15px 15px;
                    /* espaço no topo para o menu fixo */
                    overflow-y: auto;
                }

                .custom-modal-content {
                    background: white;
                    width: 100%;
                    max-width: 650px;
                    padding: 1.5rem;
                    border-radius: 10px;
                    position: relative;
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
                    box-sizing: border-box;
                }

                .custom-close {
                    position: absolute;
                    top: 10px;
                    right: 15px;
                    font-size: 2rem;
                    font-weight: bold;
                    color: red;
                    z-index: 1000;
                    cursor: pointer;
                }

                .carousel-inner img {
                    width: 100%;
                    height: auto;
                    max-height: 60vh;
                    object-fit: contain;
                    display: block;
                    margin: auto;
                }

                @media (max-width: 768px) {
                    .custom-modal {
                        padding: 60px 10px 10px;
                        /* menos padding no mobile */
                    }

                    .custom-modal-content {
                        padding: 1rem;
                    }

                    .custom-close {
                        font-size: 2.5rem;
                    }
                }
            </style>
            <meta name="csrf-token" content="{{ csrf_token() }}">
            <meta name="tenant-domain" content="{{ request()->get('entidade_domain') }}">
        @else
            <div class="alert alert-danger">
                <strong>Erro:</strong> Nenhum domínio encontrado.
            </div>
    @endif
@endsection