@extends('Templates.templateWorkstations')
<meta name="csrf-token" content="{{ csrf_token() }}">

<!-- jQuery -->
<script src="{{ URL::asset('assets/plugins/jquery/jquery.min.js') }}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{{ URL::asset('assets/plugins/jquery-ui/jquery-ui.min.js') }}"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button)
</script>

{{-- <!-- Bootstrap 4 -->
    <script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <!-- ChartJS -->
    <script src="{{ URL::asset('assets/plugins/chart.js/Chart.min.js') }}"></script>
    <!-- Sparkline -->
    <script src="{{ URL::asset('assets/plugins/sparklines/sparkline.js') }}"></script>
    <!-- JQVMap -->
    <script src="{{ URL::asset('assets/plugins/jqvmap/jquery.vmap.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/jqvmap/maps/jquery.vmap.usa.js') }}"></script>
    <!-- jQuery Knob Chart -->
    <script src="{{ URL::asset('assets/plugins/jquery-knob/jquery.knob.min.js') }}"></script>
    <!-- daterangepicker -->
    <script src="{{ URL::asset('assets/plugins/moment/moment.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/daterangepicker/daterangepicker.js') }}"></script>
    <!-- Tempusdominus Bootstrap 4 -->
    <script src="{{ URL::asset('assets/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js') }}">
    </script>
    <!-- Summernote -->
    <script src="{{ URL::asset('assets/plugins/summernote/summernote-bs4.min.js') }}"></script>
    <!-- overlayScrollbars -->
    <script src="{{ URL::asset('assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js') }}"></script>
    <!-- AdminLTE App -->
    <script src="{{ URL::asset('assets/dist/js/adminlte.js') }}"></script>
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
    <script src="{{ URL::asset('assets/dist/js/pages/dashboard.js') }}"></script>
    <!-- HTML5 QRCode-->
    <script src="{{ URL::asset('assets/plugins/html5-qrcode/html5-qrcode.min.js') }}"></script> --}}


@section('content')
    @if (session('danger'))
        <div class="content">
            <div class="alert alert-danger" role="alert" id="alert-message-danger" style="transition: opacity 1s;">
                {{ session('danger') }}
            </div>
        </div>
        <script>
            setTimeout(function() {
                $('#alert-message-danger').fadeOut('slow', function() {
                    $(this).remove();
                });
            }, 5000); // A mensagem desaparecerá após 5 segundos
        </script>
    @endif

    <section class="content">

        <div class="row justify-content-center align-items-center">
            <div class="col-12">

                <div class="card card-info" style="border: 1px solid red">
                    <!-- Card-header principal card-->
                    <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
                        <!-- Alinhado à esquerda -->
                        <div class="col-auto">
                            <a class="open-modal" data-toggle="modal" data-target="#modal-showEquipment">
                                <i class="fa-sharp fa-regular fa-newspaper"></i> Portfólio
                            </a>
                        </div>

                        <!-- Centralizado -->
                        <div class="col-auto text-center flex-grow-1">
                            <h4 class="mb-0">Ispt.N :{{ $detalsEquipment->istp_number }}</h4>
                        </div>

                        <!-- Alinhado à direita -->
                        <div class="col-auto">
                            <h5 class="mb-0 text-right">Ambito :{{ $detalsEquipment->equipment_ambit }}</h5>
                        </div>

                        <!-- Modal do Portifolio  -->
                        <div class="modal fade" id="modal-showEquipment">
                            <div class="modal-dialog modal-xl">

                                <div class="modal-content">
                                    <div class="modal-header bg-light">
                                        <h4 class="modal-title">Equipamento:</h4>
                                        <h3>{{ $detalsEquipment->equipment_tag }}</h3>
                                    </div>

                                    <div class="modal-body">

                                        <input type="hidden" name="equipmentId" value="{{ $detalsEquipment->equipment_id }}">

                                        <!-- Bordered Tabs -->
                                        <ul class="nav nav-tabs nav-tabs-bordered" id="portfolioTabs" role="tablist">
                                            <li class="nav-item">
                                                <button class="nav-link active" id="view-tab" data-bs-toggle="tab"
                                                    data-bs-target="#show-Equipment" type="button" role="tab"
                                                    aria-controls="show-Equipment" aria-selected="true">
                                                    Visualizar
                                                </button>
                                            </li>

                                            <li class="nav-item">
                                                <button class="nav-link" id="edit-tab" data-bs-toggle="tab"
                                                    data-bs-target="#edit-equipment" type="button" role="tab"
                                                    aria-controls="edit-equipment" aria-selected="false">
                                                    Editar
                                                </button>
                                            </li>
                                        </ul>


                                        <div class="tab-content pt-2" id="portfolioTabsContent">
                                            <x-portfolio.portfolioAttributesForEquipments :detalsEquipment="$detalsEquipment"
                                                :specificAttributesArray="$specificAttributesArray" :portfolioOnlyreadOrEditToo="$portfolioOnlyreadOrEditToo" />
                                        </div>

                                    </div><!-- ./modal-body-->

                                </div><!-- ./modal-content-->
                            </div><!-- ./modal-dialog modal-xl-->
                        </div> <!-- ./modal-showEquipment-->
                    </div><!-- ./Card-header-->

                    <!-- Card corpo do equipamento para onde vai receber as Tarefas elementares -->
                    <div class="card-body">

                        <div class="card card-success collapsed-card">
                            <div class="card-header clickable">
                                <div class="d-flex justify-content-between align-items-center" style="width: 100%;">
                                    <h3 class="card-title">Comentários sobre o Equipamento</h3>
                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool collapse-button"
                                            data-card-widget="collapse"><i class="fas fa-plus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">

                                <div class="chat-container"
                                    style="height: 250px; overflow-y: scroll; padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd;">

                                    <!-- Mensagens do Chat -->
                                    @foreach ($receiveComments as $receiveComment)
                                        <div
                                            class="chat-message {{ $receiveComment->type_users == 2 ? 'right' : 'left' }} mt-1">
                                            <div class="flex-shrink-1 bg-light rounded py-2 px-3 {{ $receiveComment->type_users == 2 ? 'mr-3' : 'ml-3' }}"
                                                style="border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
                                                <div class="font-weight-bold mb-1">{{ $receiveComment->user->user_name }}
                                                    <b>({{ $receiveComment->user->userType->type_user }})</b>
                                                </div>
                                                <p style="color:black">{{ $receiveComment->comment }}</p>
                                                <div class="text-muted small text-nowrap mt-2">
                                                    {{ $receiveComment->creation_date }} (
                                                    {{ \Carbon\Carbon::parse($receiveComment->creation_date)->diffForHumans() }})
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>

                                <!-- Área de envio de nova mensagem -->
                                <div class="mt-3">
                                    <form action="{{ route('createComment') }}" method="post">
                                        @csrf
                                        <input type="hidden" name="projectID"
                                            value="{{ $detalsEquipment->company_projects_id }}">
                                        <input type="hidden" name="equipmentID"
                                            value="{{ $dataControlEquipment['collection']->equipmentWorkHistorys_id }}">
                                            

                                        <div class="mb-3">
                                            <label for="comment" class="form-label">Comentário/Equipamento</label>
                                            <textarea class="form-control" id="comment" name="comment" rows="3" required
                                                placeholder="Digite aqui suas observações ou comentário..."></textarea>
                                        </div>
                                        <button class="btn btn-success float-right" type="submit">Enviar</button>

                                    </form>
                                </div>

                            </div>
                        </div>


                        <form
                            action="{{ route('cancelElementalTaskForEquipment', ['controlEquipmentID' => $dataControlEquipment['collection']->control_equipment_workstation_id]) }}"
                            method="get">
                            <div class="card-footer">
                                <button type="submit" data-action="cancel" class="btn btn-danger float-right"
                                    style="background-color: red">Finalizar Ações ao equipamento</button>
                            </div>
                        </form>

                        <div class="card-info">Teste</div>
                        <div class="card-info">teste</div>

                        {{-- <x-layouts.elementalTasksOfficial :recebeTasksForEquipment="$recebeTasksForEquipment" :dataControlEquipment="$dataControlEquipment" /> --}}

                    </div><!-- card-body do card principal -->
                </div> <!-- ./ Card card-indo principal-->
                
            </div> <!-- ./ col-12 -->
        </div>
    </section>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title" id="exampleModalLabel">Conformidade da etiqueta</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="overflow-y: auto; max-height: 400px;">

                    <div class="row justify-content-center align-items-center" style="height: 50vh">
                        <div class="col-12 col-lg-7">
                            <div class="card card-info">
                                <div class="card-header" style="background-color: #00B0EA">
                                    <h3 class="card-title text-center">Escaneie a outra Tag para confimar a junção</h3>
                                </div>
                                <div id="startScanUnique" class="card-body text-center">
                                    <div class="text-white p-3 mt-3 rounded" style="background-color: #00B0EA">
                                        <i class="fas fa-qrcode fa-5x"></i>
                                    </div>
                                </div>
                                <div id="readerUnique" style="display: none;">
                                    <div class="embed-responsive embed-responsive-1by1">
                                        <video id="videoUnique" class="embed-responsive-item"></video>
                                    </div>
                                </div>
                            </div>

                            <div class="text-center mt-3"> <!-- Adiciona margem acima e centraliza os botões -->
                                <button id="stopQrcodeRead" class="btn btn-warning mb-2">Parar Leitura</button>
                                <!-- Adiciona margem abaixo do botão -->
                                <div> <!-- Usar div para quebrar linha -->
                                    <button type="button" class="btn btn-danger" data-toggle="modal"
                                        data-target="#exampleModalSmall" style="background-color: red">
                                        Confirmar junção de etiquetas <b>Manualmente</b>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>

            </div>
        </div>
    </div>


    <div class="modal fade" id="exampleModalSmall">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Confirmar etiquetas Manualmente</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                        Deseja realmente confirmar as etiquetas manualmente? Esta ação deve ser efetuada apenas se a
                        confirmação por QR code não for possível. Ao confirmar, está a validar que o <b>Corpo</b> e o
                        <b>Obturador</b> pertencem ao mesmo equipamento.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                    <button type="button" id="btnConfirmManual" class="btn btn-primary">Confirmar</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="AddPhoneInElementalTaskModal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="exampleModalLabel">Adicionar Imagens</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <!-- Botões de controle da câmera -->
                        <div class="row justify-content-center text-center mb-4">
                            <div class="col-md-4">
                                <button class="btn btn-success w-100" id="startCamera">Iniciar Câmera</button>
                            </div>
                            <div class="col-md-4">
                                <button class="btn btn-danger w-100" id="stopCamera">Parar Câmera</button>
                            </div>
                            <div class="col-md-4">
                                <button class="btn btn-primary w-100" id="capture" style="display: none">Capturar
                                    Foto</button>
                            </div>
                        </div>
                        <!-- Vídeo e canvas -->
                        <div class="row justify-content-center text-center mb-4">
                            <video id="video" class="rounded border border-secondary" width="320" height="240"
                                autoplay></video>
                        </div>
                        <!-- Imagens capturadas -->
                        <div class="row" id="capturedImages" class="text-center">
                            <canvas id="canvas" width="320" height="240" class="d-none"></canvas>
                            <!-- As imagens capturadas serão inseridas aqui -->
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal" id="imageModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <img id="modalImage" src="" style="width: 100%;"> <!-- Imagem será inserida aqui -->
                </div>
            </div>
        </div>
    </div>

    {{-- Script para as Te7, verificar se as tarefas Te5 e Te6 ja foram finalizadas --}}

    <script type="text/javascript">
        $(document).ready(function() {
            var controlEquipmentWorkstationId = $('#controlEquipmentID_TE7').val();


            // Fazer a requisição AJAX para a API
            $.ajax({
                url: '/api/verify-equipment-te7/' + controlEquipmentWorkstationId,
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                success: function(response) {
                    var infoIcon = $('#infoIcon');
                    var newTitle;
                    var newColor;

                    if (response.status === true) {
                        // Habilita o botão
                        $('#checkVerifyTe7').prop('disabled', false);
                        // Mensagem e cor para o status true
                        newTitle = 'Verificação de tarefas anteriores bem-sucedida! Pode salvar.';
                        newColor = '#28a745'; // Verde
                    } else {
                        // Mensagem e cor para o status false
                        newTitle = response.message || 'Erro na verificação.';
                        newColor = '#dc3545'; // Vermelho
                    }

                    // Atualizar o título do tooltip e a cor do ícone
                    infoIcon.attr('title', newTitle).tooltip('dispose').tooltip({
                        title: newTitle
                    }); // Atualizar o conteúdo do tooltip
                    infoIcon.css('background-color', newColor); // Atualizar a cor do ícone
                },
                error: function(xhr, status, error) {
                    // Em caso de erro na requisição, mostrar uma mensagem de erro
                    var infoIcon = $('#infoIcon');
                    infoIcon.attr('title', 'Erro ao comunicar com a API.').tooltip('dispose').tooltip({
                        title: 'Erro ao comunicar com a API.'
                    });
                    infoIcon.css('background-color', '#dc3545'); // Vermelho para erro
                    console.error('Erro na API:', error);
                }
            });
        });
    </script>

    {{-- Script para monitorar a resposta da TE14  --}}
    <script type="text/javascript">
        $(document).ready(function() {
            // Função para definir todos os campos abaixo como desabilitados e definir valores como "N/A"
            function disableFields() {
                // Desabilitar campos de input e selects
                $('#body-test-pressure, #seat-test-pressure, #leak-tightness-test').val('N/A').prop('readonly',
                    true);
                $('#fluid_test-select, #test_result-select').val('n_a').prop('disabled', true);
                $('textarea[name="ID20[observations-text]"]').val('N/A').prop('readonly', true);
            }

            // Função para habilitar todos os campos abaixo e restaurar os valores originais
            function enableFields() {
                // Habilitar campos de input e selects
                $('#body-test-pressure, #seat-test-pressure, #leak-tightness-test').val('').prop('readonly', false);
                $('#fluid_test-select, #test_result-select').val('').prop('disabled', false);
                $('textarea[name="ID20[observations-text]"]').val('').prop('readonly', false);
            }

            // Monitorar mudanças no select
            $('#api-rp-598').change(function() {
                var selectedValue = $(this).val();

                if (selectedValue !== 'yes') {
                    disableFields();
                } else {
                    enableFields();
                }
            });

            // Verificar o valor inicial ao carregar a página
            if ($('#api-rp-598').val() !== 'yes') {
                disableFields();
            }
        });
    </script>


    <script>
        $(document).ready(function() {
            var equipmentId = "{{ $detalsEquipment->equipment_id }}"; // Pega o ID do equipamento
            var url = "/api/receiveQuestionsEquipment/" + equipmentId; // Constrói a URL

            $.ajax({
                url: url,
                type: "GET",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Adiciona o token CSRF
                },
                success: function(response) {

                    // Primeiro, desabilita todos os inputs e esconde as divs
                    $('#valve_repair-form6, #actuator_repair-form6, #repair_positioner-form6').hide();
                    $('#valve_repair-form11, #actuator_repair-form11, #repair_positioner-form11')
                        .hide();

                    let showValveRepair = false;
                    let showActuatorRepair = false;
                    let showRepairPositioner = false;

                    // Se a partir da resposta retornado for encontrado correspondencia,entao altera o valor a true 
                    response.forEach(function(item) {
                        if (item.question == 'valve_repair') {
                            showValveRepair = true;
                        } else if (item.question == 'actuator_repair') {
                            showActuatorRepair = true;
                        } else if (item.question == 'repair_positioner') {
                            showRepairPositioner = true;
                        }
                    });

                    // Mostra ou esconde as divs com base nas variáveis de controle
                    if (showValveRepair) {
                        $('#valve_repair-form6, #valve_repair-form11').show().find('input').prop(
                            'disabled', false);
                    }
                    if (showActuatorRepair) {
                        $('#actuator_repair-form6, #actuator_repair-form11').show().find('input').prop(
                            'disabled', false);
                    }
                    if (showRepairPositioner) {
                        $('#repair_positioner-form6, #repair_positioner-form11').show().find('input')
                            .prop('disabled', false);
                    }

                    // Se nao tiver nenhuma ocorencia sobre as varaveis, entao deixa a div agrupando todas em hide, que serve para ajudar na responsividade pois se as colunas ficassem apenas em hide a tarefa elementar ai ter um espaco vazio em sua visualizacao
                    if (!showValveRepair && !showActuatorRepair) {
                        $('#column_valveQuestions_and_actuator-form6').hide();
                    }
                    if (!showValveRepair && !showActuatorRepair && !showRepairPositioner) {
                        $('#column_valve_repair_and_actuator_repair_and_repair_positioner-form11')
                            .hide();
                    }
                }
            });
        });
    </script>


    <script>
        const video = document.getElementById('video');
        const canvas = document.getElementById('canvas');
        const startCameraButton = document.getElementById('startCamera');
        const stopCameraButton = document.getElementById('stopCamera');
        const captureButton = document.getElementById('capture');
        const context = canvas.getContext('2d');
        let stream = null;

        let imagesCount = 0; // Contador para controlar o número de imagens capturadas

        let images = []; // Armazena as imagens capturadas


        // Iniciar a câmera
        startCameraButton.addEventListener('click', function() {
            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({
                        video: {
                            facingMode: "environment"
                        } // Usando a câmera traseira
                    })
                    .then(function(localStream) {
                        stream = localStream;
                        video.srcObject = stream;
                    })
                    .catch(function(error) {
                        console.log("Algo deu errado ao acessar a câmera!", error);
                    });
            }
            captureButton.style.display = "block";
        });

        // Parar a câmera
        stopCameraButton.addEventListener('click', function() {
            if (stream) {
                const tracks = stream.getTracks();
                tracks.forEach(track => track.stop());
                video.srcObject = null; // Limpa o vídeo
            }
            captureButton.style.display = "none";
        });

        // Capturar a foto
        captureButton.addEventListener('click', function() {
            if (images.length < 3) {
                context.drawImage(video, 0, 0, 320, 240);
                canvas.style.display = 'none';
                const imageDataURL = canvas.toDataURL('image/png');
                images.push(imageDataURL);
                updateCapturedImagesDisplay();
            }
        });

        function updateCapturedImagesDisplay() {
            const capturedImagesDiv = document.getElementById('capturedImages');
            capturedImagesDiv.innerHTML = ''; // Limpa a exibição anterior
            capturedImagesDiv.classList.add('d-flex', 'flex-wrap', 'justify-content-center', 'align-items-center');

            images.forEach((image, index) => {
                const imageContainer = document.createElement('div');
                imageContainer.classList.add('position-relative', 'm-3'); // Aumentou a margem para 'm-3'

                const imageElem = document.createElement('img');
                imageElem.src = image;
                imageElem.classList.add('rounded'); // Adiciona bordas arredondadas
                imageElem.style.width = '100px'; // Define um tamanho fixo para a visualização
                imageElem.setAttribute('data-index', index);
                imageElem.onclick = function() {
                    showImageModal(image);
                }; // Adiciona o evento para expandir
                imageContainer.appendChild(imageElem);

                const closeButton = document.createElement('button');
                closeButton.innerHTML = 'X';
                closeButton.classList.add('btn', 'btn-danger', 'btn-sm', 'position-absolute');
                closeButton.style.borderRadius = '50%'; // Torna o botão circular
                closeButton.style.right = '-10px'; // Ajusta a posição à direita para tornar o botão mais acessível
                closeButton.style.top = '-10px'; // Ajusta a posição superior
                closeButton.onclick = function() {
                    removeImage(index);
                };
                imageContainer.appendChild(closeButton);

                capturedImagesDiv.appendChild(imageContainer);
            });
        }


        function removeImage(index) {
            images.splice(index, 1);
            updateCapturedImagesDisplay();
        }

        function showImageModal(imageSrc) {
            const modalImage = document.getElementById('modalImage');
            modalImage.src = imageSrc;
            $('#imageModal').modal('show'); // Usando jQuery para exibir a modal
        }


        document.querySelectorAll('form[id^="form"]').forEach(function(form) {
            form.addEventListener('submit', function(e) {
                e.preventDefault(); // Impede o envio padrão do formulário

                // Encontra o input no formulário atual onde as imagens capturadas devem ser anexadas
                const formId = this.getAttribute('id');
                const capturedImagesInput = this.querySelector(`#capturedImagesInput-${formId}`);

                // Aqui você precisa garantir que 'images' contém as imagens capturadas para o formulário atual
                // Isso pode requerer uma lógica adicional para associar imagens capturadas a formulários específicos
                capturedImagesInput.value = JSON.stringify(
                    images); // Converte o array de imagens em uma string JSON para o formulário atual

                this.submit(); // Envia o formulário após ajustar os dados
            });
        });
    </script>


    <!-- Script para abrir os card sem tem que click diretamente no icone -->
    <script type="text/javascript">
        $(document).ready(function() {
            $('.clickable').on('click', function(e) {
                // Verifica se o clique não foi no botão
                if (!$(e.target).is('.collapse-button') && !$(e.target).is('.collapse-button *')) {
                    $(this).find('.collapse-button').trigger('click');
                }
            });
        });
    </script>

    {{-- Este script serve para ter a opcao de deselecionar o botao Radio caso tenho apertado incorretamente  --}}
    <script>
        $(document).ready(function() {
            // Armazenar o último botão de rádio clicado
            let lastCheckedRadio = null;

            // Evento de clique nos botões de rádio com a classe 'toggle-radio'
            $('.toggle-radio').on('click', function(event) {
                if (this === lastCheckedRadio) {
                    // Se clicar no mesmo botão de rádio que foi clicado anteriormente, desmarque
                    $(this).prop('checked', false);
                    lastCheckedRadio = null;
                } else {
                    // Caso contrário, atualize lastCheckedRadio com o botão de rádio atual
                    lastCheckedRadio = this;
                }
            });
        });
    </script>

    <!-- Adicione o JavaScript no final do body -->
    <script>
        $(function() {
            $('[data-toggle="tooltip"]').tooltip();
        })
    </script>


    {{-- <script type="text/javascript">
            let formSubmitted = false;

            document.addEventListener('DOMContentLoaded', (event) => {
                const form = document.getElementById('idDoFormulario');
                if (form) {
                    form.addEventListener('submit', function() {
                        formSubmitted = true;
                    });

                    form.addEventListener('input', function() {
                        addBeforeUnload();
                    });
                } else {
                    console.error('Formulário não encontrado!');
                }
            });

            function addBeforeUnload() {
                window.addEventListener('beforeunload', function(e) {
                    if (!formSubmitted) {
                        const message = 'Você tem alterações não salvas. Se você sair, perderá essas alterações.';
                        e.returnValue = message;
                        return message;
                    }
                });
            }
        </script> --}}

    {{-- <script type="text/javascript">
            let formSubmitted = false;
            let formsChanged = false;
        
            document.addEventListener('DOMContentLoaded', (event) => {
                const forms = document.querySelectorAll('form');
                if (forms.length > 0) {
                    forms.forEach(form => {
                        form.addEventListener('submit', function() {
                            formSubmitted = true;
                        });
        
                        // Adiciona o evento de input a cada form para marcar formsChanged como true
                        form.addEventListener('input', function() {
                            formsChanged = true;
                        });
                    });
                } else {
                    console.error('Nenhum formulário encontrado!');
                }
        
                // Adiciona o evento beforeunload para verificar se houve mudanças nos formulários
                window.addEventListener('beforeunload', function(e) {
                    if (!formSubmitted && formsChanged) {
                        const message = 'Você tem alterações não salvas. Se você sair, perderá essas alterações.';
                        e.returnValue = message; // Necessário para alguns navegadores
                        return message; // Exibe a mensagem de confirmação
                    }
                });
            });
        </script> --}}


    <script type="text/javascript">
        let formSubmitted = false;
        let formsChanged = false;
        const controlEquipmentId = "{{ $dataControlEquipment['collection']->control_equipment_workstation_id }}";

        document.addEventListener('DOMContentLoaded', function() {

            //Script para verificar se em alguns dos form foi escrito algo em seu form 
            const forms = document.querySelectorAll('form');
            if (forms.length > 0) {
                forms.forEach(form => {
                    form.addEventListener('submit', function() {
                        formSubmitted = true;
                    });

                    // Adiciona o evento de input a cada form para marcar formsChanged como true
                    form.addEventListener('input', function() {
                        formsChanged = true;
                    });
                });
            } else {
                console.error('Nenhum formulário encontrado!');
            }


            // Envia o heartbeat a cada 30 segundos
            setInterval(function() {
                fetch("/api/updateSessionStatus/" + controlEquipmentId, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            status: 1
                        }) // Status 1 indica sessão ativa
                    }).then(response => response.json())
                    .then(data => console.log('Heartbeat enviado', data))
                    .catch(error => console.error('Erro ao enviar heartbeat', error));
            }, 10000);

            // Adiciona o evento beforeunload para verificar se houve mudanças nos formulários
            window.addEventListener('beforeunload', function(e) {
                if (!formSubmitted && formsChanged) {
                    const message =
                        'Você tem alterações não salvas. Se você sair, perderá essas alterações.';
                    e.returnValue = message; // Necessário para alguns navegadores
                    return message; // Exibe a mensagem de confirmação
                }

                // Tenta enviar o beacon para fechar a sessão
                navigator.sendBeacon(`/api/closeSession/${controlEquipmentId}`, JSON.stringify({
                    status: 0
                }));
            });
        });
    </script>
@endsection