{{-- Messagens da session --}}
@include('partials.session-message')
<style>
    .max-height-modal .modal-content {
        max-height: 80vh;
        margin: 0 auto;
    }

    .max-height-modal .modal-dialog {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .max-height-modal img {
        max-width: 100%; /* Redimensiona a largura da imagem para caber no modal */
        max-height: 100%; /* Redimensiona a altura da imagem para caber no modal */

    }
</style>
{{-- Modal --}}
<div class="modal fade max-height-modal" id="imagemModal" tabindex="-1" role="dialog" aria-labelledby="imagemModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <img id="imagemModalContent" src="#" alt="Imagem Ampliada" />
            </div>
        </div>
    </div>
</div>

<div class="card shadow-lg mx-4 card-profile-bottom">
    <div class="card-body p-3">
        <div class="row gx-4">
            <div class="col-auto">
                <div class="avatar avatar-xl position-relative">
                    <i class="fa fa-users" style="color:#344767; font-size:48px !important"></i>
                </div>
            </div>
            <div class="col-auto my-auto ">
                <div class="h-100">
                <h5 id="head-assunto" class="mb-1">
                         {{ isset($ordem) ? $ordem->assunto : '-' }}
                    </h5>
                    <p id="head-username" class="mb-0 font-weight-bold text-sm">
                            @if(isset($ordem))
                                @switch($ordem->status)
                                    @case('aberto')
                                        <span class="badge badge-sm bg-gradient-info p-2">{{ $ordem->status }}</span>
                                        @break
                                    @case('em andamento')
                                        <span class="badge badge-sm bg-gradient-info p-2">{{ $ordem->status }}</span>
                                        @break
                                    @case('concluido')
                                        <span class="badge badge-sm bg-gradient-success p-2">{{ $ordem->status }}</span>
                                        @break
                                    @case('cancelado')
                                        <span class="badge badge-sm bg-gradient-danger p-2">{{ $ordem->status }}</span>
                                        @break
                                    @case('reaberto')
                                        <span class="badge badge-sm bg-gradient-warning p-2">{{ $ordem->status }}</span>
                                        @break         
                                    @default
                                        <span class="badge badge-sm bg-gradient-info p-2">{{ $ordem->status }}</span>
                                @endswitch
                            @endif
                        </p>
                </div>
            </div>
            {{--Botão de status--}}
            @if (isset($ordem))
                <div class="col-lg-8 col-md-8 my-sm-auto ms-sm-auto me-sm-0 mx-auto mt-3">
                    <div class="nav-wrapper position-relative end-0 text-end">
                        <a id="cancelado" href="#" data-status="cancelado" class="form-status btn btn-danger btn-sm d-inline-block" style="{{ ($ordem->status == 'aberto' || $ordem->status == 'em andamento' ) ? '' : 'display:none !important'}} "><i class="fa fa-times me-3" aria-hidden="true"></i>Cancelar</a>
                        <a id="em andamento" href="#" data-status="em andamento" class="form-status btn btn-info btn-sm d-inline-block" style=" {{ (Auth::user()->id == 1 || Auth::user()->id == 2 || Auth::user()->id == 75) ? '' : 'display: none !important'}}"><i class="fa fa-spinner me-3" aria-hidden="true"></i>Em Andamento</a>
                        <a id="concluido" href="#" data-status="concluido" class="form-status btn btn-success btn-sm d-inline-block" style=" {{ (Auth::user()->id == 1 || Auth::user()->id == 2 || Auth::user()->id == 75) ? '' : 'display: none !important'}}"><i class="fa fa-check me-3" aria-hidden="true"></i>Concluir</a>
                        <a id="reaberto" href="#" data-status="reaberto" class="form-status btn btn-warning btn-sm d-inline-block" style="{{ ($ordem->status == 'concluido' || $ordem->status == 'cancelado' ) ? '' : 'display:none !important'}}"><i class="fa fa-refresh me-3" aria-hidden="true"></i>Reabrir</a>
                    </div>
                </div>
                <div class="form-group" id="mudaStatus">
                    <input type="hidden" name="status" id="muda-status" value="{{ $ordem->status }}" >
                    
                </div>
            @endif
        </div>
    </div>
</div>
<div class="container-fluid py-4" >
    <div class="row">
        <div class="col-md-8">
            
            <div class="card" >
                <div class="card-header pb-0">
                    <div class="d-flex align-items-center">
                        <p class="mb-4">Preencha as informações abaixo</p>
                        <div class="ms-auto">
                        <button type="submit" class="btn btn-success btn-sm ms-auto " style="{{isset($ordem) ? 'display:none' : ''}}"><i class="fas fa-save me-3"></i>Salvar</button>
                                <button class="btn btn-danger btn-sm ms-auto d-none"><i class="fas fa-trash"></i></button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p class="text-uppercase text-sm">Descrição</p>
                    <div class="row">
                        {{-- Tipo da ordem de serviço --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>{{ __('Tipo') }}</label>
                                <select class="form-control  {{ $errors->has('tipo') ? ' is-invalid' : '' }}" name="tipo" id="select-tipo" {{ isset($ordem) ? 'disabled' : ''}}>
                                    <option value="">- Selecione o Tipo -</option>
                                    <option value="Bug" {{ (isset($ordem) && $ordem->tipo == 'Bug') || old('tipo') == 'Bug' ? 'selected' : '' }}>Bug</option>
                                    <option value="Sugestao" {{ (isset($ordem) && $ordem->tipo == 'Sugestao') || old('tipo') == 'Sugestao' ? 'selected' : '' }}>Sugestão</option>
                                    <option value="Duvida" {{ (isset($ordem) && $ordem->tipo == 'Duvida') || old('tipo') == 'Duvida' ? 'selected' : '' }}>Dúvida</option>
                                </select>
                                 @if ($errors->has('name'))
                                    <span id="tipo-error" class="error text-danger"
                                        for="input-tipo">{{ $errors->first('tipo') }}</span>
                                @endif
                            </div>
                        </div>
                        {{-- Assunto da ordem de serviço --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>{{ __('Assunto') }}</label>
                                <input class="form-control{{ $errors->has('assunto') ? ' is-invalid' : '' }}" 
                                name="assunto" id="input-assunto" type="text"
                                value="{{ isset($ordem) ? $ordem->assunto : old('assunto') }}"
                                placeholder="{{ __('Assunto') }}" 
                                onkeyup="updateHeadName('input-assunto', 'head-assunto')" 
                                {{ isset($ordem) ? 'readonly' : ''}}
                                 />
                            @if ($errors->has('name'))
                                <span id="assunto-error" class="error text-danger"
                                    for="input-assunto">{{ $errors->first('assunto') }}</span>
                            @endif
                            </div>
                        </div>
                        {{-- Descrição do evento --}}
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>{{ __('Descriçao') }}</label>
                                    <textarea placeholder="{{ __('Nos explique seu motivo de contato') }}" name="descricao" id="input-descricao" class="form-control" aria-label="With textarea" {{ isset($ordem) ? 'readonly' : ''}}>{{ isset($ordem) ? $ordem->descricao : old('descricao') }}</textarea>
                                @if ($errors->has('descricao'))
                                    <span id="descricao-error" class="error text-danger"
                                        for="input-descricao">{{ $errors->first('descricao') }}</span>
                                @endif
                            </div>
                        </div>
                        {{-- hidden inputs pro banco --}}
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="hidden" name="status" value="{{ isset($ordem) ? $ordem->status : old('status') }}" id="status">
                            </div>
                        </div>

                    </div>
                    
                    <hr class="horizontal dark">
                    
                    
                </div>
                
                
            </div>
           
        </div>

        <div class="col-md-4  mt-4 mt-md-0">
            <div class="card">
                <div class="card-header pb-0">
                    <div class="d-flex align-items-center">
                        <p class="mb-4">Chat</p>
                        <button class="btn btn-primary btn-sm ms-auto d-none">Settings</button>
                    </div>
                </div>
                @if(isset($ordem))
                    <div class="card-body">
                        <div id="chat-box">
                                @php //faz o carregamento inicial das mensagens
                                $mensagensDecoded = json_decode($mensagens, true);
                                if($mensagensDecoded['messages'] == []){
                                    echo "<p class='card-text text-xs mb-0' id='chatVazio'>Sem mensagens até o momento.</p>";
                                }
                                // Verifica se a decodificação foi bem-sucedida e se é um array
                                if (is_array($mensagensDecoded) && array_key_exists('messages', $mensagensDecoded)) {
                                    $messages = $mensagensDecoded['messages'];
                                    $owners = $mensagensDecoded['owners'];
                                    foreach ($messages as $index => $message) {
                                        // Defina a classe do card com base no ID (se é admin ou não)
                                        $isAdmin = isset($message['id']) && in_array($message['id'], [1, 2, 75]);
                                        $cardClass = $isAdmin ? 
                                            'card-body p-2 pb-0 mb-0 mt-0 flex-grow-1 w-auto align-items-center d-flex justify-content-start' 
                                            : 'card-body p-2 pb-0 mb-0 mt-0 flex-grow-1 w-auto align-items-center d-flex justify-content-end';
                                        
                                        // Crie o conteúdo do card
                                        $content = isset($message['conteudo']) ? htmlspecialchars($message['conteudo']) : '';
                                        $createdAt = isset($message['created_at']) ? $message['created_at'] : '';
                                        $owner = isset($owners[$index]) ? $owners[$index] : '';

                                        // Formate a data de criação para exibição legível
                                        $formattedDate = date('d/m/Y H:i', strtotime($createdAt));

                                        // Exiba o card com as informações da mensagem
                                        echo "<div class='{$cardClass}' style=''>";
                                        echo "<p class='card-text text-xxs mb-0 ' >{$owner} {$formattedDate}</p>";
                                        echo "</div>";
                                        echo "<div class='{$cardClass}'>";
                                        echo "<p class='card-text text-xs mb-0' style='background-color: #f6f9fc; border-radius: 5px; padding: 6px 4px'>{$content}</p>";
                                        echo "</div>";

                                        $idUltimaMsg = $messages[count($messages) - 1]['idordemservicomsg'];
                                        echo "<p id='idUltimaMsg' style='display: none'>{$idUltimaMsg}</p>";
                                        
                                    }
                            }
                            @endphp
                        
                        </div>
                    </div>
                @endif
                <p class="text-uppercase text-sm"></p>
                @if (isset($ordem))
                    <div class="row">
                        <div class=" col-md-12 " >
                            <!-- Input mensagem -->
                            <div class="form-group form-conteudo">
                                <div class="d-flex align-items-center m-1 mb-0"> 
                                    
                                    <textarea 
                                        placeholder="{{ __('Escrever uma mensagem') }}" 
                                        name="mensagem" 
                                        id="input-mensagem" 
                                        class="form-control" 
                                        aria-label="With textarea" 
                                        style="flex: 1; margin-right: 8px; height: 40px; overflow: hidden; "
                                        oninput="autoResize(this)"
                                    ></textarea>
                                
                                    
                                    <i class="fa fa-paper-plane text-dark text-md opacity-10" style="cursor: pointer" ></i>
                                </div>
                                
                                
                                @if ($errors->has('mensagem'))
                                    <span class="error text-danger" for="input-mensagem">{{ $errors->first('logo') }}</span>
                                @endif
                                <input type="hidden" name="idtenant" id="idtenant" value="{{ isset($ordem) ? $ordem->idtenant : old('idtenant') }}">
                                <input type="hidden" name="id" id="id" value="{{ Auth::user() != null ? Auth::user()->id : old('id') }}">
                                <input type="hidden" name="idordemservico" id="idordemservico" value=" {{ isset($ordem) ? $ordem->idordemservico : old('idordemservico') }} ">
                                <input type="hidden" name="idempresa" id="idempresa" value="{{ isset($ordem) ? $ordem->getCompanyByUser($ordem->idordemservico) : old('idempresa') }}">
                            </div>
                            
                        </div>
                        @if(isset($tenant->logo))
                            {{-- Foto --}}
                            <div class="col-md-3 pb-4">
                            {{--<label></label>
                                <img id="preview-logo" src="{{ asset('storage/' . $tenant->logo) }}" alt="Preview da Imagem" style="border:8px solid #f0f2f5;border-radius:4px;max-width:90px; max-height: 90px;float:left" onclick="document.getElementById('imagemModalContent').src = this.src; $('#imagemModal').modal('show');" />--}}
                            </div>
                            <div class="col-md-9  pb-4 text-start">
                                {{--<button type="button" class="btn btn-danger btn-xs" id="delete-logo" style="margin-left: 10px;">
                                    <i class="fa fa-trash"></i>
                                </button>--}}
                                {{--<span id="delete-logo-text" class="text-danger" style="display: none; margin-left: 10px;">Salve o registro para confirmar a exclusão</span>--}}
                                {{-- Campo oculto para controle de exclusão --}}
                                {{--<input type="hidden" name="delete_logo" id="delete-logo-input" value="0">--}}
                            </div>
                        @endif
                        <div class="col-md-12">
                            <!-- Input para upload da imagem de banner -->
                            {{--<div class="form-group">
                                <label>{{ __('Banner') }}</label>
                                <input type="file" class="form-control{{ $errors->has('banner') ? ' is-invalid' : '' }}" name="banner">
                                @if ($errors->has('banner'))
                                    <span class="error text-danger" for="input-banner">{{ $errors->first('banner') }}</span>
                                @endif
                            </div>--}}
                        </div>
                        @if(isset($tenant->banner))
                            {{-- Foto --}}
                            {{--<div class="col-md-3 pb-2">
                            <label></label>
                                <img id="preview-banner" src="{{ asset('storage/' . $tenant->banner) }}" alt="Preview da Imagem" style="border:8px solid #f0f2f5;border-radius:4px;max-width:90px; max-height: 90px;float:left" onclick="document.getElementById('imagemModalContent').src = this.src; $('#imagemModal').modal('show');" />
                            </div>--}}
                            <div class="col-md-9  pb-4 text-start">
                                {{--<button type="button" class="btn btn-danger btn-xs" id="delete-banner" style="margin-left: 10px;">
                                    <i class="fa fa-trash"></i>
                                </button>--}}
                                {{--<span id="delete-banner-text" class="text-danger" style="display: none; margin-left: 10px;">Salve o registro para confirmar a exclusão</span>--}}
                                {{-- Campo oculto para controle de exclusão --}}
                                {{--<input type="hidden" name="delete_banner" id="delete-banner-input" value="0">--}}
                            </div>
                        @endif
                        <div class="col-6">
                            <!-- Input para cor primária HEX -->
                            {{--<div class="form-group">
                                <label>{{ __('Cor Primária') }}</label>
                                <input type="color" class="form-control{{ $errors->has('corprimaria') ? ' is-invalid' : '' }}" name="corprimaria" id="corprimaria" 
                                value="{{ isset($tenant) ? $tenant->corprimaria : old('corprimaria') }}" placeholder="{{ __('Cor Primária') }}">
                                @if ($errors->has('corprimaria'))
                                    <span class="error text-danger" for="input-corprimaria">{{ $errors->first('corprimaria') }}</span>
                                @endif
                            </div>--}}
                        </div>
                        <div class="col-6">
                            {{--<div class="input-group-append mt-4">
                                <button class="btn btn-danger btn-xs" type="button" id="resetColorButton">Limpar</button>
                            </div>--}}
                        </div>
                        <div class="col-6 d-none">
                            <!-- Input para cor secundária HEX -->
                            {{--<div class="form-group">
                                <label>{{ __('Cor Secundária') }}</label>
                                <input type="color" class="form-control{{ $errors->has('corsecundaria') ? ' is-invalid' : '' }}" name="corsecundaria" 
                                value="{{ isset($tenant) ? $tenant->corsecundaria : old('corsecundaria') }}" placeholder="{{ __('Cor Secundária') }}">
                                @if ($errors->has('corsecundaria'))
                                    <span class="error text-danger" for="input-corsecundaria">{{ $errors->first('corsecundaria') }}</span>
                                @endif
                            </div>--}}
                        </div>
                    </div>
                @endif
            </div>
               
        </div>
        <div class="col-md-12 mt-4">
            @if(isset($ordem))
                @include('partials.upload', ['model' => $ordem])
            @endif
        </div>
    </div>       
</div>

    <script src="/assets/js/jquery.min.js" type="text/javascript"></script>
    <script>
        function changeStatus(model, id, newStatus) {
            $.ajax({
                url: `../../ordemservico/status/${model}/${id}/${newStatus}`,
                method: 'GET',
                success: function(response) {
                    //console.log(response);

                    $('#navbarDropdownMenuLink2').text(newStatus).css('text-transform', 'uppercase');
                    // Atualize a UI aqui
                },
                error: function(error) {
                    console.error(error);
                    // Lidar com erros aqui
                }
            });
        }
    </script>
    <script>
        //chama a changestatus com o click
        document.addEventListener('DOMContentLoaded', () => {
            const ordemId = {{ $ordem->idordemservico ?? 'undefined' }};
            const statusElements = document.querySelectorAll('.form-status');

            statusElements.forEach((element) => {
                element.addEventListener('click', () => {
                    const status = element.getAttribute('data-status');
                    changeStatus('ordemservico', ordemId, status);
                });
            });
        });
    </script>
    <script>
        function updateHeadName(inputId, outputId) {
            var inputValue = $('#' + inputId).val();
            $('#' + outputId).text(inputValue);
        }
                
    </script>
    <script>
    $(document).ready(function(){
    $('#input-cellphone').mask('(00) 00000-0000');
    });
    </script>
<script>
    $(document).ready(function(){
    $('#input-cnpj').mask('00.000.000/0000-00');
    $('#input-cep').mask('00000-000');
    });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#input-cep').keyup(function() {
                var cep = $(this).val();
    
                // Remove caracteres não numéricos e verifica se o CEP tem 8 caracteres
                var cleanCep = cep.replace(/\D/g, '');
                if(cleanCep.length == 8){
                    $.ajax({
                        url: '/buscar-cep/' + cleanCep,
                        method: 'GET',
                        success: function(data) {
                            // Supondo que os nomes das chaves na resposta sejam 'endereco', 'bairro', etc.
                            // Ajuste conforme necessário de acordo com a estrutura da sua resposta
                            $('#input-endereco').val(data.logradouro);
                            $('#input-bairro').val(data.bairro);
                            $('#input-cidade').val(data.localidade);
                            $('#input-estado').val(data.uf);
                            $('#input-ibge').val(data.ibge);
                            // Note que 'numero' e 'complemento' não estão sendo preenchidos, 
                            // pois geralmente não são fornecidos por APIs de CEP
                        },
                        error: function(error) {
                            console.error(error);
                            alert('Erro ao buscar CEP. Tente novamente.');
                        }
                    });
                } else {
              //      alert('CEP inválido. Por favor, insira um CEP válido.');
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#associate-empresa-container input[type="checkbox"]').change(function() {
                let tenantId = $(this).data('tenant-id');
                let empresaId = $(this).data('empresa-id');
                let associate = $(this).is(':checked');

                $.ajax({
                    url: `/updateAssociation`,
                    method: 'POST',
                    data: {
                        _token: $('input[name="_token"]').val(),
                        tenant_id: tenantId,
                        idempresa: empresaId,
                        associate: associate
                    },
                    success: function(response) {
                        console.log(response.message);
                    }
                });
            });
        });
    </script>
    <script>
        var deleteBannerButton = document.getElementById('delete-banner');
        if (deleteBannerButton) {
            deleteBannerButton.addEventListener('click', function() {
                // Mostrar texto de confirmação
                document.getElementById('delete-banner-text').style.display = 'inline';
                // Definir o campo oculto para 1 (indicando exclusão)
                document.getElementById('delete-banner-input').value = '1';
                // Opcional: Esconder a imagem
                document.getElementById('preview-banner').style.display = 'none';
            });
        }

        var deleteLogoButton = document.getElementById('delete-logo');
        if (deleteLogoButton) {
            deleteLogoButton.addEventListener('click', function() {
                // Mostrar texto de confirmação
                document.getElementById('delete-logo-text').style.display = 'inline';
                // Definir o campo oculto para 1 (indicando exclusão)
                document.getElementById('delete-logo-input').value = '1';
                // Opcional: Esconder a imagem
                document.getElementById('preview-logo').style.display = 'none';
            });
        }
        //document.getElementById('resetColorButton').addEventListener('click', function() {
        //document.getElementById('corprimaria').value = '#8D1F06E6';
//});
    </script>
     <script>
        function formatDateTime(dateString) {
            const date = new Date(dateString);
            const day = String(date.getDate()).padStart(2, '0');
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const year = date.getFullYear().toString().slice(-2);
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
    
            
    
    
            return `${day}/${month}/${year} ${hours}:${minutes}`;
        }
        </script>
        <script>
            function desenhaMensagem(message) {
                
                const messages = message.messages; // Array de mensagens
                const owners = message.owners;
                //Nao remover esse if !!!
                if (messages[0]) {
                    
                    var cardBodyClass = (messages[0].id == 1 || messages[0].id == 2 || messages[0].id == 75)
                        ? 'card-body p-2 pb-0 mb-0 mt-0 flex-grow-1 w-auto align-items-center d-flex justify-content-start'
                        : 'card-body p-2 pb-0 mb-0 mt-0 flex-grow-1 w-auto align-items-center d-flex justify-content-end';

                    var cardBody = $('<div></div>').addClass(cardBodyClass);
                    var cardHead = $('<div></div>').addClass(cardBodyClass);
                    var messageContent = $('<p></p>').addClass('text-xs mb-0').css({ 'background-color': '#f6f9fc', 'border-radius': '5px', 'padding': '6px 4px' }).text(messages[0].conteudo);
                    var messageDate = formatDateTime(messages[0].created_at);

                    var messageOwnerEData = $('<p></p>').addClass('text-xxs text-muted mb-0').text(message['owners'] + ' ' + messageDate);

                    cardHead.append(messageOwnerEData);
                    cardBody.append(messageContent);
                    $('#chat-box').append(cardHead);
                    $('#chat-box').append(cardBody);
                    idUltimaMsg = messages.idordemservicomsg;
                    $('#idUltimaMsg').text(idUltimaMsg);
                } else {
                    var cardBodyClass = (messages.id == 1 || messages.id == 2 || messages.id == 75)
                        ? 'card-body p-2 pb-0 mb-0 mt-0 flex-grow-1 w-auto align-items-center d-flex justify-content-start'
                        : 'card-body p-2 pb-0 mb-0 mt-0 flex-grow-1 w-auto align-items-center d-flex justify-content-end';

                    var cardBody = $('<div></div>').addClass(cardBodyClass);
                    var cardHead = $('<div></div>').addClass(cardBodyClass);
                    var messageContent = $('<p></p>').addClass('text-xs mb-0').css({ 'background-color': '#f6f9fc', 'border-radius': '5px', 'padding': '6px 4px' }).text(messages.conteudo);
                    var messageDate = formatDateTime(message['messages'].created_at);

                    var messageOwnerEData = $('<p></p>').addClass('text-xxs text-muted mb-0').text(message['owners'] + ' ' + messageDate);

                    cardHead.append(messageOwnerEData);
                    cardBody.append(messageContent);
                    $('#chat-box').append(cardHead);
                    $('#chat-box').append(cardBody);
                    idUltimaMsg = messages.idordemservicomsg;
                    $('#idUltimaMsg').text(idUltimaMsg);
                }

            }
        </script>
        <script>
            
            document.addEventListener('DOMContentLoaded', () => {
                function verificaMensagemNova() {
                    
                    var $idUltimaMsg = $('#idUltimaMsg');
                    var $idordemservico = $('#idordemservico');
                    var id = $('#id').val();
                    // Verificar se os elementos existem
                    if ($idUltimaMsg.length === 0 || $idordemservico.length === 0) {
                        return;
                    }

                    var idUltimaMsg = $idUltimaMsg.text().trim();
                    var idordemservico = $idordemservico.val().trim();

                    // Verificar se idUltimaMsg e idordemservico têm valores
                    if (!idUltimaMsg || !idordemservico) {
                        return;
                    }
                    
                    $.ajax({
                        url: `/ordemservico/msg/att/${idordemservico}/${idUltimaMsg}`,
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            const messages = data.messages; // Array de mensagens
                            const owners = data.owners; // Array de donos das mensagens
                            if (messages && messages.length === 0) {
                                return;
                            }
                            if (messages && Array.isArray(messages)) {
                                messages.forEach(function(message, index) {
                                    if (messages.id != id) //se nao for mensagem do user logado, desenha do banco
                                    {
                                        desenhaMensagem(data);
                                    }
                                });
                                idUltimaMsg = messages[messages.length - 1].idordemservicomsg;
                                $('#idUltimaMsg').text(idUltimaMsg);
                            }
                        },
                        error: function(error, request) {
                            console.error('Erro ao carregar mensagens:', error);
                            console.log('aqui errou', request);
                        }
                    });
                }
                setInterval(verificaMensagemNova, 5000);
            });
    
    
        </script>
    <script>
        // Função para enviar a mensagem
    function enviarMensagem() {
        var conteudo = $('#input-mensagem').val().trim();
        var idtenant = $('#idtenant').val();
        var idordemservico = $('#idordemservico').val();
        var idempresa = $('#idempresa').val();
        var id = $('#id').val();
        var chatVazio = $('#chatVazio').text();

        if (conteudo !== '') {
            $.ajax({
                url: `/ordemservico/msg/store`,
                type: 'POST',
                data: {
                    _token: $('input[name="_token"]').val(),
                    conteudo: conteudo,
                    idtenant: idtenant,
                    idordemservico: idordemservico,
                    idempresa: idempresa,
                    id: id
                },
                success: function(response) {
                    // Se der certo, limpa o campo de mensagem
                    $('#input-mensagem').val('');
                    $('#idUltimaMsg').text(response['idMensagemCriada']);

                    //se nao tinha mensagens, limpa o aviso de chat vazio
                    if(chatVazio)
                    {
                       $('#chat-box').empty();
                    }
                    desenhaMensagem(response);
                    
                    
                },
                error: function(error) {
                    console.error(error);
                    alert('Erro ao enviar mensagem. Tente novamente.');
                }
            });
        }
    }

    $(document).ready(function() {
        // Envia a mensagem ao pressionar "Enter"
        $('#input-mensagem').keyup(function(event) {
            if (event.keyCode === 13) { // 13 é o código para "Enter"
                event.preventDefault(); // Previne a quebra de linha
                enviarMensagem(); // Chama a função para enviar a mensagem
            }
        });

        // Envia a mensagem ao clicar no ícone
        $('.fa-paper-plane').click(function() {
            enviarMensagem(); // Chama a função para enviar a mensagem
        });
    }); 
    </script>

   
    
    <script>
        //trazer mensagens do banco
        // Variável global para armazenar a última data/hora da mensagem carregada
//let lastMessageTime = null;

/*function loadMessages() {
    var idordemservico = $('#idordemservico').val().trim();
    
    // Configuração para passar a data da última mensagem como parâmetro
    var data = {};
    if (lastMessageTime) {
        data.lastMessageTime = lastMessageTime;
    }

    $.ajax({
        url: `/ordemservico/msg/${idordemservico}`,
        type: 'GET',
        dataType: 'json',
        data: data, // Passar a última mensagem recebida como parâmetro
        success: function(data) {
            const messages = data.messages; // Array de mensagens
            const owners = data.owners; // Array de donos das mensagens

            // Se não há mensagens, nada será feito
            if (messages.length === 0) {
                return;
            }
            // Adiciona cada mensagem como um card
            messages.forEach(function(message, index) {
                // Define o tipo de alinhamento com base no ID ou outro critério
                var cardBodyClass = (message.id === 1 || message.id === 2 || message.id === 75) 
                    ? 'card-body p-2 pb-0 mb-0 mt-0 flex-grow-1 w-auto align-items-center d-flex justify-content-start' 
                    : 'card-body p-2 pb-0 mb-0 mt-0 flex-grow-1 w-auto align-items-center d-flex justify-content-end';

                var cardBody = $('<div></div>').addClass(cardBodyClass);
                var cardHead = $('<div></div>').addClass(cardBodyClass);

                var messageContent = $('<p></p>').addClass('text-xs mb-0').css({'background-color': '#f6f9fc', 'border-radius': '5px', 'padding': '6px 4px'}).text(message.conteudo);
                var messageDate = formatDateTime(message.created_at);

                var messageOwnerEData = $('<p></p>').addClass('text-xxs text-muted mb-0').text(owners[index] + ' ' + messageDate);

                cardHead.append(messageOwnerEData);
                cardBody.append(messageContent); 
                $('#chat-box').append(cardHead);
                $('#chat-box').append(cardBody);
                
            });

            // Atualiza a última data/hora da mensagem
            lastMessageTime = messages[messages.length - 1].created_at;
            verificaMensagemNova(idordemservico,lastMessageTime);
        },
        error: function(error) {
            console.error('Erro ao carregar mensagens:', error);
        }
    });
}*/

// Carregar mensagens quando a página for carregada
/*$(document).ready(function() {
    loadMessages();
});*/

// Atualiza as mensagens a cada 5 segundos
//setInterval(loadMessages, 5000);


    </script>

    <script>
        function autoResize(textarea) {
            // Redefine a altura para "auto" para recalcular o tamanho com base no conteúdo
            textarea.style.height = 'auto';
            // Define a altura de acordo com o scrollHeight
            textarea.style.height = textarea.scrollHeight + 'px';
        }
    </script>
    <script>
    document.addEventListener('DOMContentLoaded', () => {
        const statusElements = document.querySelectorAll('.form-status');

        statusElements.forEach((element) => {
            element.addEventListener('click', (event) => {
                event.preventDefault();
                const status = element.getAttribute('data-status');
                if (status) {
                    document.querySelector('input[id="status"]').value = status;
                    document.getElementById('formPrincipal').submit();
                }
            });
        });
    });
    </script>
    @include('partials.upload-js')
    @include('layouts.footers.auth.footer')
</div>