@extends('admin.admin_dashboard_hipotecario') 
@section('content')
				

     <section class="pc-container">
      <div class="pc-content">
        <!-- [ breadcrumb ] start -->
        <div class="page-header">
          <div class="page-block">
            <div class="row align-items-center"> 
              <div class="col-md-12">
                <div class="page-header-title">
                  <h2 class="mb-0">Bitácora de Inducción</h2>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- [ breadcrumb ] end -->
        <div class="row">

          <!-- DOM/Jquery table start -->
          <div class="col-sm-12">
            <div class="card"> 
              <div class="card-body">
                <div class="text-end p-4 pb-0"> 
  

                       </div>
               <style>
    /* Resalta la celda que está siendo editada */
   
</style>




<div class="alert alert-info py-2">
     <strong>Bitácora de Inducción:</strong> 
</div>

 

 
 

<div class="container mt-5 ">
    <form>
        <div class="row mb-4">
            <!-- Nombre de la Oficina -->
            <div class="col-md-6">
                <label class="form-label">Nombre de la Oficina</label>
                <div class="input-group">
                    <input type="text" class="form-control" value="TESTSSSSS" disabled="">
                    <span class="input-group-text">
                        ✏️
                    </span>
                </div>
            </div>

            <!-- Nombre de Oficinatario -->
            <div class="col-md-6">
                <label class="form-label">Nombre de Asociado</label>
                <div class="input-group">
                    <input type="text" class="form-control" 
                           value="Juan Antonio Butrón Luz" disabled="">
                    <span class="input-group-text">
                        ✏️
                    </span>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Email Oficinatario -->
            <div class="col-md-6">
                <label class="form-label">Email Oficina</label>
                <div class="input-group">
                    <input type="email" class="form-control" 
                           value="juanantonio.butron@hotmail.com" disabled="">
                    <span class="input-group-text">
                        ✏️
                    </span>
                </div>
            </div>

            <!-- Fecha Inicio -->
            <div class="col-md-6">
                <label class="form-label">Fecha Inicio</label>
                <div class="input-group">
                    <input type="date" class="form-control" 
                           value="2026-01-08"  disabled="">
                    <span class="input-group-text">
                        📅
                    </span>
                </div>
            </div>
        </div>
    </form>
</div>

 <br>
 <br>

<div class="table-responsive">
    <table class="table table-bordered table-striped align-middle">
        <thead class="table-dark">
            <tr>
                <th>ID</th>
                <th>Módulo/Bloque</th>
                <th>Actividad a Realizar</th>
                <th>Responsable</th>
                <th>Estatus (✓)</th>
                <th>Comentarios / Retroalimentación</th>
            </tr>
        </thead>
        <tbody>

            <!-- I. PROCESO INDUCCIÓN -->
            <tr class="table-secondary">
                <td colspan="6"><strong>I. PROCESO INDUCCIÓN</strong></td>
            </tr>

            <tr>
                <td >1</td>
                <td >Usuarios</td>
                <td >Google Workspace</td>
                <td >Atención Asociados</td>
                <td ></td>
                <td ></td>
            </tr>
            <tr>
                <td></td><td></td><td >Sistema SISO</td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td >Micrositio y Calculadora Solidez</td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td >Campus Virtual</td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td >Portal AHMEX</td><td></td><td></td><td></td>
            </tr>

            <tr>
                <td >2</td>
                <td >Documentos</td>
                <td >Directorio Equipo Central / Horarios</td>
                <td >Atención Asociados</td>
                <td ></td><td ></td>
            </tr>

            <tr>
                <td >3</td>
                <td >Google Workspace</td>
                <td >Correo Gmail, Google Chat, Google Drive, Calendario, Google Meet (fondos institucionales)</td>
                <td >Capacitación</td>
                <td ></td><td ></td>
            </tr>

            <!-- II. CURSOS -->
            <tr class="table-secondary">
                <td colspan="6"><strong>II. CURSOS (Tiempo máximo 5 días)</strong></td>
            </tr>

            <tr>
                <td >4</td>
                <td >Campus Virtual</td>
                <td >Curso: Solidez Hipotecaria</td>
                <td >Capacitación</td>
                <td ></td><td ></td>
            </tr>
            <tr><td></td><td></td><td >Curso: Crédito Hipotecario</td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td >Cursos: Infonavit y Fovissste</td><td></td><td></td><td></td></tr>

            <tr>
                <td >5</td>
                <td >Campus Virtual</td>
                <td >Reunión de Retroalimentación</td>
                <td >Capacitación</td>
                <td ></td><td ></td>
            </tr>

            <!-- III. CAPACITACIÓN SISO -->
            <tr class="table-secondary">
                <td colspan="6"><strong>III. CAPACITACIÓN SISO (SISTEMA DE SOLIDEZ)</strong></td>
            </tr>

            <tr>
                <td >6</td>
                <td >SISO Módulo 1</td>
                <td >Contenido SISO y sus Enlaces</td>
                <td >Capacitación</td>
                <td ></td><td ></td>
            </tr>

            <tr>
                <td >7</td>
                <td >SISO Módulo 2</td>
                <td >Expedientes: Ejercicio práctico</td>
                <td >Capacitación</td>
                <td ></td><td ></td>
            </tr>

            <tr>
                <td >8</td>
                <td >SISO Módulo 3</td>
                <td >Verificación de Documentos</td>
                <td >Capacitación</td>
                <td ></td><td ></td>
            </tr>

            <!-- IV. HERRAMIENTAS -->
            <tr class="table-secondary">
                <td colspan="6"><strong>IV. HERRAMIENTAS</strong></td>
            </tr>

            <tr>
                <td >9</td>
                <td >Micrositio</td>
                <td >Micrositio y Calculadora Solidez</td>
                <td >Capacitación</td>
                <td ></td><td ></td>
            </tr>

            <tr>
                <td >10</td>
                <td >Descargables</td>
                <td >Carpeta de Descargables</td>
                <td >Capacitación</td>
                <td ></td><td ></td>
            </tr>

            <!-- V. CIERRE Y CERTIFICACIÓN -->
            <tr class="table-secondary">
                <td colspan="6"><strong>V. CIERRE Y CERTIFICACIÓN</strong></td>
            </tr>

            <tr>
                <td >11</td>
                <td >Certificación</td>
                <td >Liberación del Curso de Certificación de AHMEX</td>
                <td >Capacitación</td>
                <td ></td><td ></td>
            </tr>

            <tr>
                <td >12</td>
                <td >Presentación</td>
                <td >Reunión Google Meet con Equipo Central</td>
                <td >Capacitación</td>
                <td ></td><td ></td>
            </tr>

        </tbody>
    </table>
</div>
              </div>
            </div>
          </div>
 
 </div>
</div>
</section>

<!-- Modal Finalizar -->
<div class="modal fade" id="finalizarModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Finalizar Actividad</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Comentarios</label>
                    <textarea class="form-control" id="comentariosFinalizar" rows="3"
                        placeholder="Escribe un comentario..."></textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label">Subir archivo (prueba)</label>
                    <input type="file" class="form-control" id="archivoFinalizar">
                </div>
 
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Cancelar
                </button>
                <button type="button" class="btn btn-success" id="confirmarFinalizar">
                    Confirmar Finalización
                </button>
            </div>
        </div>
    </div>
</div>


          <!-- DOM/Jquery table end -->
<!--main--> 

    <!-- datatable Js --> 
 <style>
td {
    vertical-align: middle;
}
</style>

    <style>
        .form-label {
            font-weight: 600;
            color: #4a5568;
        }
        .input-group-text {
            background-color: #f8f9fa;
        }
    </style>

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="{{ URL::asset('js/plugins/jquery.dataTables.min.js')}}"></script>
    <script src="{{ URL::asset('js/plugins/dataTables.bootstrap5.min.js')}}"></script>
    <script src="{{ URL::asset('js/plugins/dataTables.responsive.min.js')}}"></script>
    <script src="{{ URL::asset('js/plugins/responsive.bootstrap5.min.js')}}"></script>


<script>
document.addEventListener('DOMContentLoaded', function () {

    const rows = Array.from(document.querySelectorAll('tbody tr'))
        .filter(row => {
            const firstCell = row.querySelector('td');
            return firstCell && firstCell.textContent.trim().match(/^\d+$/);
        });

    let currentIndex = 0;
    let activeRow = null;

    function getNow() {
        const now = new Date();
        const d = String(now.getDate()).padStart(2, '0');
        const m = String(now.getMonth() + 1).padStart(2, '0');
        const y = now.getFullYear();
        const h = String(now.getHours()).padStart(2, '0');
        const min = String(now.getMinutes()).padStart(2, '0');
        return `${d}/${m}/${y} ${h}:${min}`;
    }

    function showButton(index) {
        rows.forEach(row => {
            const statusCell = row.children[4];
            if (!statusCell.textContent.includes('Finalizado')) {
                statusCell.innerHTML = '';
            }
        });

        if (!rows[index]) return;

        activeRow = rows[index];

        const statusCell = activeRow.children[4];

        const btn = document.createElement('button');
        btn.className = 'btn btn-sm btn-success';
        btn.textContent = 'Finalizar';

        btn.addEventListener('click', function () {
            const modal = new bootstrap.Modal(
                document.getElementById('finalizarModal')
            );
            modal.show();
        });

        statusCell.appendChild(btn);
    }

    document.getElementById('confirmarFinalizar').addEventListener('click', function () {

        const comentario = document.getElementById('comentariosFinalizar').value.trim();
        const fechaHora = getNow();

        // Columna Estatus (✓)
        activeRow.children[4].innerHTML = `
            ✓ Finalizado<br>
            <small class="text-muted">${fechaHora}</small>
        `;

        // Columna Comentarios / Retroalimentación
        activeRow.children[5].innerHTML = comentario
            ? comentario
            : '<span class="text-muted">Sin comentarios</span>';

        // Limpia modal
        document.getElementById('comentariosFinalizar').value = '';
        document.getElementById('archivoFinalizar').value = '';

        bootstrap.Modal.getInstance(
            document.getElementById('finalizarModal')
        ).hide();

        currentIndex++;
        showButton(currentIndex);
    });

    showButton(currentIndex);
});
</script>



@endsection