@extends('layouts.dashboard_layout')

@section('title', 'Actas de Testing UAT')

@section('body-class', 'programar_testing acta-reunion')

@section('content')
        <div class="container-fluid p-3 table-acta">
            <form action="#" method="post">
            <div id="seccionform" class="seccion seccion-visible">
                <label class="text-align mb-4">Programar Testing 1/3</label>
            <div class="row">
                <div class="col-md-6">
                  <label class="form-label mb-3">Nombre del proyecto</label>
                  <input type="text" class="form-control mb-3" placeholder="Nombre del proyecto">
                </div>
                <div class="col-md-6">
                  <label class="form-label mb-3">Fecha de Inicio de pruebas UAT</label>
                  <input type="date" class="form-control mb-3">
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                  <label class="form-label mb-3">Equipo de pruebas UAT</label>
                  <input type="text" class="form-control mb-4" placeholder="Equipo de pruebas UAT">
                </div>
                <div class="col-md-6">
                  <label class="form-label mb-3">Fecha de Cierre de pruebas UAT</label>
                  <input type="date" class="form-control mb-3">
                </div>
            </div>
                <label class="form-label text-align">Requerimientos Funcionales</label>
                <label class="form-label mb-3 text-align2">A continuación se presenta una lista de los requerimientos funcionales acordados para el proyecto <strong>[Nombre del Proyecto]</strong>.
                    Marque "Cumple" si el requerimiento se ha cumplido de manera satisfactoria y "No Cumple" si no se ha cumplido.
                </label>

                <div class="table-responsive" >
                <table class="table">
                    <thead>
                      <tr id="text-table">
                        <th>Requerimiento</th>
                        <th>Descripción</th>
                        <th>Estado de Verificación</th>
                      </tr>
                    </thead>
                    <tbody>
                        <tr id="">
                            <td>1</td>
                            <td>Mark</td>
                            <td>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="estado1">
                                    <label class="form-check-label">Cumple</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="estado1">
                                    <label class="form-check-label">No Cumple</label>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                </div>
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                    <button class="btnNext" type="button" onclick="nextSection('seccionform2')">Siguiente</button>
               </div>
            </div>

                <div id="seccionform2" class="seccion">
                    <label class="text-align mb-4">Programar Testing 2/3</label><br>
                    <label class="form-label text-align mb-4">Prueba UAT</label>
                    <label class="form-label text-align2 mb-4">En esta sección, se registran los detalles de las pruebas UAT realizadas. Cada caso de prueba debe describir el escenario de prueba, los pasos a seguir, los datos utilizados y el resultado esperado.</label>
                 
                    <label class="form-label text-align mb-4">Caso de prueba 1</label>

                    <div class="form-group mb-3 col-md-6">
                        <label class="form-label mb-3">Escenario</label>
                        <input type="text" class="form-control" placeholder="Descripción del escenario">
                    </div>

                    <div id="dynamicFormPasos">
                        <div class="form-group pb-3">
                            <label class="form-label mb-3">Pasos</label>
                            <div class="input-group mb-2 col-md-6">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa-solid fa-circle"></i></span>
                                </div>
                                <input type="text" class="form-control custom-input" placeholder="Paso 1">
                            </div>
                            <div class="input-group mb-2 col-md-6">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa-solid fa-circle"></i></span>
                                </div>
                                <input type="text" class="form-control custom-input" placeholder="Paso 2">
                            </div>
                            <div class="input-group mb-2 col-md-6">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa-solid fa-circle"></i></span>
                                </div>
                                <input type="text" class="form-control custom-input" placeholder="Paso 3">
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <button class="btnNext mb-4" id="btnAddPaso" type="button"><i class="fa-solid fa-plus"></i> Añadir Paso</button>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col">
                          <label class="form-label mb-3">Datos</label>
                          <input type="text" class="form-control mb-3 col-md-12" placeholder="Datos utilizados en la prueba">
                        </div>
                        <div class="col">
                          <label class="form-label mb-3">Resultados esperados</label>
                          <input type="text" class="form-control mb-3 col-md-12" placeholder="Resultados esperados">
                        </div>
                        <div class="col">
                          <label class="form-label mb-3">Adjuntar evidencia de observación</label>
                          <input type="file" class="form-control mb-4 col-md-6" placeholder="Escoge un archivo">
                        </div>
                    </div>

                    <label class="form-label text-align mb-4">Caso de prueba 2</label>

                    <div class="form-group mb-3">
                        <label class="form-label mb-3">Escenario</label>
                        <input type="text" class="form-control w-75" placeholder="Descripción del escenario">
                    </div>

                    <div id="dynamicFormPasos">
                        <div class="form-group pb-3">
                            <label class="form-label mb-3">Pasos</label>
                            <div class="input-group mb-2 w-75">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa-solid fa-circle"></i></span>
                                </div>
                                <input type="text" class="form-control custom-input" placeholder="Paso 1">
                            </div>
                            <div class="input-group mb-2 w-75">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa-solid fa-circle"></i></span>
                                </div>
                                <input type="text" class="form-control custom-input" placeholder="Paso 2">
                            </div>
                            <div class="input-group mb-2 w-75">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa-solid fa-circle"></i></span>
                                </div>
                                <input type="text" class="form-control custom-input" placeholder="Paso 3">
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <button class="btnNext mb-4 w-50" type="button"><i class="fa-solid fa-plus"></i> Añadir Paso</button>
                        </div>

                    </div>

                    <div class="form-group">
                        <div class="col">
                          <label class="form-label mb-3">Datos</label>
                          <input type="text" class="form-control mb-3 col-md-6" placeholder="Datos utilizados en la prueba">
                        </div>
                        <div class="col">
                          <label class="form-label mb-3">Resultados esperados</label>
                          <input type="text" class="form-control mb-3 col-md-6" placeholder="Resultados esperados">
                        </div>
                        <div class="col">
                          <label class="form-label mb-3">Adjuntar evidencia de observación</label>
                          <input type="file" class="form-control mb-4 col-md-6" placeholder="Escoge un archivo">
                        </div>
                    </div>

                    <div class="d-grid gap-2">
                        <button class="btnNext mb-4" id="btnNextCase" type="button"><i class="fa-solid fa-plus"></i> Añadir Caso de prueba</button>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="button" class="btn-previos" onclick="previosSection('seccionform')">Atrás</button>
                        <button class="btnNext" type="button" onclick="nextSection('seccionform3')">Siguiente</button>
                    </div>
                </div>

                <div id="seccionform3" class="seccion">
                    <label class="text-align mb-4">Programar Testing 3/3</label><br>
                    <label class="form-label text-align mb-3">Observaciones y Problemas</label><br>
                    <label class="form-label mb-4 text-align2">Registre cualquier observación o problema identificado durante las pruebas UAT.</label>
                 
                 
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="check1" id="flexCheckDefault">
                        <label class="form-check-label mb-3" for="flexCheckDefault">
                            Problemas identificados (Especificar)
                        </label>
                    </div>

                    <textarea class="form-control mb-3" placeholder="Problemas identificados"></textarea>

                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="check1" id="flexCheckDefault">
                        <label class="form-check-label mb-3" for="flexCheckDefault">
                            Observaciones (Especificar)
                        </label>
                    </div>

                    <textarea class="form-control mb-3" placeholder="Observaciones"></textarea>

                    <label class="form-label text-align">Comentarios y Aprobación</label>
                    <label class="form-label mb-4 text-align2">Espacio para que el cliente incluya cualquier comentario, observación o solicitud de modificaciones relacionadas con los requerimientos funcionales.</label>
                
                    <textarea class="form-control mb-3" placeholder="Comentarios"></textarea>

                    <label class="form-label mb-3 text-align">Firma de Aprobación del Cliente</label>
                <div class="row">
                    <div class="col-md-12">
                        <label class="form-label mb-3">Fecha firma</label>
                        <input type="date" class="form-control mb-3 ">
                    </div>
                </div>

                <label class="form-label mb-3 text-align">Firma de Aprobación de K2 Digital</label>
                <div class="row">
                    <div class="col-md-6">
                        <label class="form-label mb-3">Fecha firma</label>
                        <input type="date" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label mb-3">Firma de Aprobación de K2 Digital</label>
                        <input type="file" class="form-control mb-3">
                    </div>
                </div>
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                     <button type="button" class="btn-previos" onclick="previosSection('seccionform2')">Atrás</button>
                     <button class="btnNext" type="submit">Crear y notificar</button>
                </div>

                </div>

            </form>
        </div>
@endsection

@section('scripts')
    @parent
    <script src="{{ asset('js/testing/seccion.js') }}"></script>
    <script src="{{ asset('js/testing/btn-steps.js') }}"></script>
    <script src="{{ asset('js/testing/btn-cdp.js') }}"></script>
@endsection