{{-- <x-pdf-layout>

    <h1>{{ $card1 }}</h1>
    <p>
       ISPT4.0 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere consequatur perferendis culpa vel magnam enim doloremque eveniet. Repudiandae quisquam earum, provident sapiente sint iure sequi delectus rerum, odit iste a?
    </p>

    <div class="page-break"></div>

    <h1>Card 2</h1>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum tenetur, asperiores cum laudantium tempore illum ducimus rem veniam officia. Dolorum quam sequi dolores earum architecto nemo temporibus, voluptatibus repudiandae tempora.
    </p>
</x-pdf-layout> --}}


{{-- 
<x-pdf-layout :tag="$tag" :numeroPanini="$numeroPanini" :nObra="$nObra" :ambito="$ambito">
    <h1>{{ $card1 }}</h1>
    <p>
       ISPT4.0 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere consequatur perferendis culpa vel magnam enim doloremque eveniet. Repudiandae quisquam earum, provident sapiente sint iure sequi delectus rerum, odit iste a?
    </p>

    <div class="page-break"></div>

    <h1>Card 2</h1>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum tenetur, asperiores cum laudantium tempore illum ducimus rem veniam officia. Dolorum quam sequi dolores earum architecto nemo temporibus, voluptatibus repudiandae tempora.
    </p>
</x-pdf-layout> --}}

<x-pdf-layout :tag="$tag" :numeroPanini="$numeroPanini" :nObra="$nObra" :ambito="$ambito">

    <div class="card card-danger" style="border-style: double;">
        <!-- Card-header TE3 - Pré-teste-->
        <div class="card-header clickable" style="background-color: #09255C">
            <div class="d-flex justify-content-between align-items-center" style="width: 100%;">
                <h3 class="card-title mb-0" style="color: white">

                    PSV - Pré-teste</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>

        <!-- Card-header TE3 - Pré-teste-->

        <div class="card-body">

            <div class="form-group"> <!-- Single form-group for all content -->

                <div class="row">

                    <!-- First card column -->
                    <div class="col-md">

                        <!-- Validar especificações técnicas -->
                        <div class="row mb">


                            <div class="icheck-primary">
                                <input id="ID3[validate-technical-specifications]" type="checkbox"
                                    name="ID3[validate-technical-specifications-checkbox]" value="on" checked>

                                <label for="ID3[validate-technical-specifications]">
                                    Validar especificações técnicas
                                    <span style="color: red;">*</span>
                                </label>
                            </div>
                        </div>
                        <!-- ./ Validar especificações técnicas -->

                        <!-- Especificações técnicas -->

                        <!-- ./ Especificações técnicas -->

                        <!-- Data de pré-teste -->
                        <div class="row mb-3">
                            <div class="col-md-4 d-flex align-items-center">
                                <label>Data de calibração</label>
                                                    <span style="color: red;">*</span></label>
                                                    <span style="color: red;">*</span></label>
                            </div>
                            <div class="col-md-8 d-flex align-items-center">
                                <div class="input-group date" id="reservationdate" data-target-input="nearest">
                                    <input name="ID3[pre_test_data-datetime]" type="datetime-local"
                                        class="form-control float-right">

                                </div>
                            </div>
                        </div>
                        <!-- ./ Data de pré-teste -->

                        <!-- API RP 576 -->
                        <div class="row mb-3">
                            <div class="col-md d-flex align-items-center">
                                <label for="apirp576-select">Pré-teste efetuado de acordo
                                    com o API RP 576</label>
                            </div>
                            <div class="col-md">
                                <select id="apirp576-select" name="ID3[apirp576-select]" class="form-control">
                                    <option value="yes">
                                        Sim</option>
                                    <option value="no">
                                        Não</option>
                                </select>
                            </div>
                        </div>
                        <!-- ./ API RP 576 -->

                        <!-- Pré-teste em bancada -->
                        <div class="row mb-3">
                            <div class="col-md d-flex align-items-center">
                                <label for="bench-pretest-select">
                                    Foi efetuado o pré-teste em bancada <span style="color: red;">*</span>
                                </label>
                            </div>
                            <div class="col-md-3">
                                <select id="bench-pretest-select" name="ID3[bench_pretest-select]" class="form-control">
                                    <option value="yes">
                                        Sim</option>
                                    <option value="no">
                                        Não</option>
                                </select>
                            </div>
                        </div>
                        <!-- ./ Pré-teste em bancada -->

                        <!-- Conforme recebida da unidade -->
                        <div class="row mb-3">
                            <div class="col-md-9 d-flex align-items-center">
                                <label for="unit-received-select">Conforme recebida da unidade</label>

                            </div>
                            <div class="col-md-3">
                                <select id="unit-received-select" name="ID3[unit_received-select]" class="form-control">
                                    <option value="yes">
                                        Sim</option>
                                    <option value="no">
                                        Não</option>
                                </select>
                            </div>
                        </div>
                        <!-- ./ Conforme recebida da unidade -->

                        <!-- Após limpeza -->
                        <div class="row mb-3">
                            <div class="col-md-9 d-flex align-items-center">
                                <label for="after-cleaning-select">Após limpeza</label>
                            </div>
                            <div class="col-md-3">
                                <select id="after-cleaning-select" name="ID3[after_cleaning-select]"
                                    class="form-control">
                                    <option value="yes">
                                        Sim</option>
                                    <option value="no">
                                        Não</option>
                                </select>
                            </div>
                        </div>
                        <!-- ./ Após limpeza -->

                        <!-- Apresenta fuga -->
                        <div class="row mb-3">
                            <div class="col-md-9 d-flex align-items-center">
                                <label for="shows-leak-select">Apresenta fuga</label>
                                <i class="fas fa-info-circle ml-2" style="color: #9B9B9B;" data-toggle="tooltip"
                                    title="Considera-se com fuga no teste de 'POP', em bancada ou na instalação, quando o início da passagem é inferior a 90% relativamente ao 'set pressure', (95% para válvulas pilotadas). Para testes de inspeção visual considera-se com fuga se houver evidência de danos excessivos ou cortes nas faces de vedação"></i>
                            </div>
                            <div class="col-md-3">
                                <select id="shows-leak-select" name="ID3[shows_leak-select]" class="form-control">
                                    <option value="yes">
                                        Sim</option>
                                    <option value="no">
                                        Não</option>
                                </select>
                            </div>
                        </div>
                        <!-- ./ Apresenta fuga -->
                    </div>
                    <!-- ./First card column -->

                    <!-- Second card column -->
                    <div class="col-md">

                        <!-- Pressão a que se inicia a passagem (bar) -->
                        <div class="row mb-3">
                            <div class="col-md-7">
                                <label>Pressão a que se inicia a passagem (bar) <span
                                        style="color: red;">*</span></label>
                            </div>
                            <div class="col-md-5 d-flex align-items-center">



                            </div>
                        </div>
                        <!-- ./ Pressão a que se inicia a passagem (bar) -->

                        <!-- Pressão a que volta a fechar "assentar" (bar) -->
                        <div class="row mb-3">
                            <div class="col-md-7">
                                <label>Pressão a que volta a fechar "assentar" (bar) <span
                                        style="color: red;">*</span></label>
                            </div>
                            <div class="col-md-5 d-flex align-items-center">
                                <input id="pressure-flow-stops" name="ID3[pressure_flow_stops-number]" type="number"
                                    step="0.01" class="form-control" style="width: 100%;">
                            </div>
                        </div>
                        <!-- ./ Pressão a que volta a fechar "assentar" (bar) -->

                        <!-- Pressão de abertura POP (bar) -->
                        <div class="row mb-3">
                            <div class="col-md-7">
                                <label>Pressão de abertura POP (bar) <span style="color: red;">*</span></label>
                            </div>
                            <div class="col-md-5 d-flex align-items-center">
                                <input id="POP_opening_pressure" name="ID3[POP_opening_pressure-number]"
                                    type="number" step="0.01" class="form-control" style="width: 100%;">
                            </div>
                        </div>
                        <!-- ./ Pressão de abertura POP (bar) -->

                        <!-- A válvula está colada -->
                        <div class="row mb-3">
                            <div class="col-md-9 d-flex align-items-center">
                                <label for="stuck-valve-select">
                                    A válvula está colada <span style="color: red;">*</span>
                                </label>
                                <i class="fas fa-info-circle ml-2" style="color: #9B9B9B;" data-toggle="tooltip"
                                    title="Considera-se válvula colada quando se eleva a pressão até 30% da Pressão de Teste e não abre"></i>
                            </div>
                            <div class="col-md-3">
                                <select id="stuck_valve-select" name="ID3[stuck_valve-select]" class="form-control">
                                    <option value="yes">
                                        Sim</option>
                                    <option value="no">
                                        Não</option>
                                </select>
                            </div>
                        </div>
                        <!-- ./ A válvula está colada -->

                        <!-- Indicar se a válvula volta a assentar durante o teste -->
                        <div class="row mb-3">
                            <div class="col-md-7 d-flex align-items-center">
                                <label for="valve-reseats-select">
                                    Indicar se a válvula volta a assentar durante o teste
                                    <span style="color: red;">*</span>
                                </label>
                            </div>
                            <div class="col-md-5">
                                <select id="valve_reseats-select" name="ID3[valve_reseats-select]"
                                    class="form-control">
                                    <option value="yes">
                                        Sim</option>
                                    <option value="no">
                                        Não</option>
                                    <option value="not applicable">
                                        Não aplicável</option>
                                </select>
                            </div>
                        </div>

                        <!-- ./ Indicar se a válvula volta a assentar durante o teste -->

                        <!-- Reparada -->
                        <div class="row mb-3">
                            <div class="col-md-8 d-flex align-items-center">
                                <label for="repaired-select">
                                    Reparada <span style="color: red;">*</span>
                                </label>
                            </div>
                            <div class="col-md-4">
                                <select id="repaired-select" name="ID3[repaired-select]" class="form-control">
                                    <option value="yes">
                                        Sim</option>
                                    <option value="no">
                                        Não</option>
                                    <option value="new">
                                        Nova</option>
                                </select>
                            </div>
                        </div>
                        <!-- ./ Reparada -->

                        <!-- Resultado do pré-teste -->
                        <div class="row mb-3">
                            <div class="col-md-8 d-flex align-items-center">
                                <label for="pre-test-result-select">
                                    Resultado do pré-teste
                                    <span style="color: red;">*</span>
                                </label>
                                <i class="fas fa-info-circle ml-2" style="color: #9B9B9B;" data-toggle="tooltip"
                                    title="Considera-se que passou o teste de 'POP', em bancada ou na instalação, quando a abertura se dá num intervalo de 30% relativamente ao 'set pressure'. Para testes de inspeção visual considera-se que passou se não houver evidências de mola danificada, corrosão excessiva e/ou gripagem das peças móveis (haste/guia/obturador)."></i>
                            </div>
                            <div class="col-md-4">
                                <select id="pre_test_result-select" name="ID3[pre_test_result-select]"
                                    class="form-control" X>
                                    <option value="passed" X>
                                        Passou</option>
                                    <option value="plunked">
                                        Chumbou</option>
                                </select>
                            </div>
                        </div>
                        <!-- ./ Resultado do pré-teste -->

                        <!-- Resumo -->
                        <label>Resumo</label>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th style="width: 50%">Falha ao abrir</th>
                                    <th style="width: 50%">Falha de estanquicidade (Fuga)
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <!-- FTO -->
                                        <div class="icheck-primary d-inline mr-2">
                                            <input type="radio" class="toggle-radio" id="fto-lpv-fto"
                                                name="fto_lpv-select" checked>
                                            <label value="FTO" for="fto-lpv-fto">
                                                Preso ou Falha a Abrir (FTO)
                                                <span style="color: red;">*</span>
                                            </label>
                                        </div>
                                        <!-- ./ FTO -->
                                    </td>
                                    <td>
                                        <!-- LPV -->
                                        <div class="icheck-primary d-inline mr-2">
                                            <input type="radio" class="toggle-radio" id="fto-lpv-lpv"
                                                name="fto_lpv-select">
                                            <label value="FTO" for="fto-lpv-lpv">
                                                Fuga Superior à Permitida (LPV)
                                                <span style="color: red;">**</span>
                                            </label>
                                        </div>
                                        <!-- ./ LPV -->
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <!-- VPO -->
                                        <div class="icheck-primary d-inline mr-2">
                                            <input type="radio" class="toggle-radio" id="vpo-spo-vpo"
                                                name="vpo_spo-select">
                                            <label value="VPO" for="vpo-spo-vpo">
                                                Válvula Parcialmente Aberta (VPO)
                                                <span style="color: red;">*</span>
                                            </label>
                                        </div>
                                        <!-- ./ VPO -->
                                    </td>
                                    <td>
                                        <!-- SPO -->
                                        <div class="icheck-primary d-inline mr-2">
                                            <input type="radio" class="toggle-radio" id="vpo-spo-spo"
                                                name="vpo_spo-select">
                                            <label value="SPO" for="vpo-spo-spo">
                                                Abre Antes da Pressão de Teste (SPO)
                                                <span style="color: red;">**</span>
                                            </label>
                                        </div>
                                        <!-- ./ SPO -->
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <!-- OASP -->
                                        <div class="icheck-primary d-inline mr-2">
                                            <input type="radio" class="toggle-radio" id="oasp-vso-oasp"
                                                name="oasp_vso-select">
                                            <label value="OASP" for="oasp-vso-oasp">
                                                Abre Acima da Pressão de Teste (OASP)
                                                <span style="color: red;">*</span></label>

                                        </div>
                                        <!-- ./ OASP -->
                                    </td>
                                    <td>
                                        <!-- VSO -->
                                        <div class="icheck-primary d-inline mr-2">
                                            <input type="radio" class="toggle-radio" id="oasp-vso-vso"
                                                name="oasp_vso-select">
                                            <label value="VSO" for="oasp-vso-vso">Válvula
                                                Colada
                                                (VSO)
                                                <span style="color: red;">**</span></label>
                                        </div>
                                        <!-- ./ VSO -->
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- ./Resumo -->

                    </div>
                    <!-- ./ Second card column -->



                </div>

            </div> <!-- End of single form-group -->

        </div>

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

    @if (isset($imagesBase64) && is_array($imagesBase64))
        <div class="row no-gutters">
            @foreach ($imagesBase64 as $image)
                <div class="col-4">
                    <img src="{{ $image }}" alt="Image" class="pdf-image" style="border: 3px solid #00B0EA">
                </div>
            @endforeach
        </div>
    @endif

</x-pdf-layout>