ispt4.0_laravel/resources/views/livewire/preparadas/show-qrcode-and-detalls-equipment.blade.php

<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>

<div>
    <td><a href="#" data-toggle="modal" data-target="#yourModalId-{{ $equipment->equipment_id }}"
            data-equipment-id="">
            <i class="fa-solid fa-eye" style="color:rgb(62, 62, 62)"></i>
        </a>
    </td>

    {{-- <div class="modal fade" id="yourModalId-{{ $equipment->equipment_id }}" tabindex="-1" role="dialog" data-equipment-id="{{ $equipment->equipment_id }}"> --}}
    <div class="modal fade" id="yourModalId-{{ $equipment->equipment_id }}" tabindex="-1" role="dialog"
        data-equipment-id="{{ $equipment->equipment_id }}">
        <div class="modal-dialog modal-lg">

            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Detalhes do equipamento {{ $equipment->equipment_tag }}</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    {{-- ID do Equipamento: <span>{{ $equipment->equipment_id }}</span> --}}
                    <input hidden type="text" id="valor" value="{{ $equipment->equipment_tag }}">

                    {{-- Para guardar id sem mostrar no HTML --}}
                    <div id="associatedData" style="display: none;"
                        data-associated="{{ json_encode($associatedArray) }}">
                    </div>


                    <div class="modal-content-center">
                        @foreach ($associatedEquipments as $associatedEquipment)

                            <div class="card-to-print">
                                <div class="top">
                                </div>

                                <div class="custom-row">
                                    <div class="col-sm text-center"
                                        style="display: flex; align-items: center; justify-content: center; background-color: #09255C; position: relative;">
                                        <div id="circulo"
                                            style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%);">
                                        </div>
                                        <img style="width:50px;"
                                            src="{{ asset('img/ispt/4.0/Ispt4.0_Símbolo_Fundo_Azul-Marinho@2x-100.jpg') }}"
                                            alt="imagem nao encontrada">
                                        <div style="line-height: 2.5; color: white;">ISPT 4.0</div>
                                    </div>
                                </div>

                                <div class="custom-row" style="margin-top: 10px;">

                                    <div class="col-sm qrcode-output" style="padding-left: 13px;"
                                        data-equipment-id="{{ $associatedEquipment->id }}"
                                        data-component-tag="{{ $associatedEquipment->component_tag }}">
                                    </div>

                                </div>


                                <div class="custom-row">
                                    <div class="col-sm text-center">
                                        <div style="margin-bottom: 13px;font-size: 1.1rem;color: #00B0EA"><b>TAG</b>
                                            {{ $equipment->equipment_tag }}</div>
                                    </div>
                                </div>

                                {{-- Serve para receber o conteudo que tem apos a @  --}}
                                <div class="custom-row">
                                    <div class="col-sm text-center">
                                        <div style="font-size: 1.1rem;color: #00B0EA">
                                            {{ explode('@', $associatedEquipment->component_tag)[1] }}
                                        </div>
                                    </div>
                                </div>

                                <div class="custom-row">
                                    <div class="col-sm text-center">
                                        <h6 style="line-height: 2.5;margin-block-end: 0;color: #00B0EA;">
                                            {{ $equipment->equipmentType->equipment_type_name }}</h6>
                                    </div>
                                    <div class="col-sm text-center">
                                        <h6 style="line-height: 2.5;margin-block-end: 0; color: #00B0EA;">
                                            {{ $equipment->unit->unit_name }}</h6>
                                    </div>
                                </div>

                                <div class="custom-row" style="margin-top: 10px;">
                                    <div class="col-sm text-center">
                                        <img style="width: 25px;" src="{{ asset('img/ispt/4.0/galpLogo1.png') }}"
                                            alt="Imagem nao encontrada galp ">
                                    </div>
                                    <div class="col-sm text-center">
                                        <img style="width: 20px;"
                                            src="{{ asset('img/ispt/4.0/isptLogoVertical.png') }}"
                                            alt="Imagem nao contrada Ispt">
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>



                    <br>
                    <div class="text-center">
                        <button class="btn btn-outline-secondary " onclick="printCard()">Imprimir Cartão</button>
                    </div>
                </div>
                {{-- ./modal-body --}}
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>

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


<script>
    $(document).ready(function() {
        $('#yourModalId-{{ $equipment->equipment_id }}').on('shown.bs.modal', function() {

            // Limpar QR codes antigos
            $('.qrcode-output').empty();

            // Para cada associatedEquipmentId na modal
            $('.qrcode-output', this).each(function() {
                var associatedEquipmentId = $(this).data('equipment-id');
                var componentTag = $(this).data('component-tag');

                console.log("associatedEquipmentId:",
                    associatedEquipmentId); // Log para verificar
                console.log("componentTag:", componentTag); // Log para verificar

                // Se o componentTag existir, crie o QR code
                if (componentTag) {
                    new QRCode(this, {
                        text: componentTag,
                        width: 140,
                        height: 140,
                        colorDark: '#09255C',
                        colorLight: "white",
                        correctLevel: QRCode.CorrectLevel.H
                    });
                }
            });
        });
    });


    function printEquipments() {
        // Acione a impressão
        window.print();
    }

    function printCard() {
        window.print();
    }
</script>