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


     <section class="pc-container">
      <div class="pc-content">
        <div class="row">
         
          <div class="col-sm-12">
            <div class="card"> 
              <div class="card-body">
                  <h2 class="mb-0">Catálogo de Usuarios</h2>
                <div class="text-end p-4 pb-0"> 
            @if((Auth::user()->current_team_id==1))
              <a href="{{ route('user_add')}}" class="btn btn-primary">Agregar Usuarios</a>
            @endif
                </div>
                <div class="dt-responsive">
                  <table id="table-inventory-cat" class="table table-striped table-bordered nowrap w-100">
                    <thead>
                      <tr> 
                        <th>Nombre</th>
                        <th>Cuenta</th> 
                        <th>Perfil</th>
                        <th>Oficina</th>
                        <th>Zona</th>
                          @if(
                            (Auth::user()->current_team_id==1)||
                            (Auth::user()->current_team_id==2)||
                            (Auth::user()->current_team_id==9)
                          ) 
                        <th>Editar</th>
                        <th>Estatus</th>
                        <th>Inducción</th>
                        <th>Expedientes</th>
                        @endif
                      </tr>
                    </thead>
                    <tbody>
                    @foreach($users as $users)                   

                      <tr>  
                      <td>{{ $users->user_name}}</td>  
                      <td>{{ $users->user_email}}</td>    
                      <td>
                        @if($users->user_current_team_id==1) Admin @endif
                        @if($users->user_current_team_id==2) Dirección Comercial @endif
                        @if($users->user_current_team_id==3) Asociado @endif
                        @if($users->user_current_team_id==4) Asesor @endif
                        @if($users->user_current_team_id==5) Coordinador de operaciones @endif
                        @if($users->user_current_team_id==6) Coordinador de Finanzas @endif
                        @if($users->user_current_team_id==7) Atención a Asociados @endif
                        @if($users->user_current_team_id==8) Control de Riesgos @endif
                        @if($users->user_current_team_id==9) Coordinador Territorial @endif
                        @if($users->user_current_team_id==10) Capacitación @endif
                      </td>  
                      <td>{{ $users->nombre_sucursal}}</td>    
                      <td>{{ $users->zona}}</td>    

  @if(
        (Auth::user()->current_team_id==1)||
        (Auth::user()->current_team_id==2)||
        (Auth::user()->current_team_id==9)
  )                       
                      <td class="text-center"> 
                        <a href="../user/edit/{{ $users->id_u_user}}" class="avtar avtar-xs btn-link-success btn-pc-default" data-bs-toggle="tooltip" title="Editar"> 
                          <i class="ti ti-edit f-18"></i>
                        </a>
                      </td>

                      <td class="text-center">
                        <form class="smart-form" method="POST" action="{{ route('update_status_user')}}">
                          @csrf

                          {{-- Modal Cambio de Estatus --}}
                          <div id="ModalCambioEstatus_{{ $users->id_u_user}}" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h5 class="modal-title">Cambio de Estatus</h5>
                                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                  @if($users->status == 0)
                                    <p>¿Desea activar al usuario?</p>    
                                  @elseif($users->status == 1)
                                    <p>¿Desea desactivar al usuario?</p>   
                                  @endif
                                </div>
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                                  <button type="submit" id="guardar_btn" name="guardar_btn" value="cambio_estatus" class="btn btn-warning">Actualizar</button>
                                </div>
                              </div>
                            </div>
                          </div>

                          <input type="hidden" name="id_user" value="{{ $users->id_u_user}}"> 

                          @if($users->status == 0)
                            <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal"
                              data-bs-target="#ModalCambioEstatus_{{ $users->id_u_user}}">Desactivado</button>
                          @elseif($users->status == 1)
                            <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal"
                              data-bs-target="#ModalCambioEstatus_{{ $users->id_u_user}}">Activado</button>
                          @endif
                        </form>
                      </td> 

                      {{-- ── Columna Inducción ── --}}
                      <td class="text-center">
                        @if($users->user_current_team_id == 3)

                          @if($users->bitacora_id)
                            {{-- Ya tiene bitácora: mostrar botón de consulta según su estado --}}
                            <a href="{{ route('bitacora/tareas', $users->bitacora_id) }}"
                               class="btn btn-sm {{ $users->bitacora_status === 'finalizado' ? 'btn-success' : 'btn-warning text-dark' }}">
                              <i class="ti ti-clipboard-list me-1"></i>
                              {{ $users->bitacora_status === 'finalizado' ? 'Inducción completa' : 'Ver inducción' }}
                            </a>
                          @else
                            {{-- Sin bitácora: permitir iniciar --}}
                            <button type="button"
                                    class="btn btn-primary btn-sm btn-iniciar-induccion"
                                    data-bs-toggle="modal"
                                    data-bs-target="#confirmarInduccion"
                                    data-user-id="{{ $users->id_u_user }}"
                                    data-user-name="{{ $users->user_name }}">
                              <i class="ti ti-player-play me-1"></i>Iniciar Inducción
                            </button>
                          @endif

                        @endif
                      </td>

                      {{-- Expedientes (solo Admin id=1) --}}
                      <td class="text-center">
                      @if(Auth::user()->id == 1)
                        <a href="{{ route('user/descargar-archivos', $users->id_u_user) }}"
                           class="btn btn-success btn-sm"
                           title="Ver expedientes y descargar por separado">
                          <i class="ti ti-download"></i> Expedientes
                        </a>
                      @endif
                      </td>

  @endif

                      </tr>
                    @endforeach

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

{{-- ─────────────── Modal: Confirmar Inducción ─────────────── --}}
<div class="modal fade" id="confirmarInduccion" tabindex="-1" aria-labelledby="confirmarInduccionLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title" id="confirmarInduccionLabel">Iniciar Inducción</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>

      <form method="POST" action="{{ route('bitacora/iniciar') }}">
        @csrf
        <input type="hidden" name="user_id" id="modal-user-id" value="">

        <div class="modal-body">
          <p>¿Confirmas iniciar la bitácora de inducción para el asociado:</p>
          <p class="fw-bold fs-6" id="modal-user-name"></p>
          <p class="text-muted small">
            Se copiará el catálogo de tareas vigente como snapshot de esta inducción
            y serás redirigido al formulario de seguimiento.
          </p>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-primary">Sí, iniciar inducción</button>
        </div>
      </form>

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

<style>
  /* Columnas de texto: permiten wrap para adaptarse al ancho disponible */
  #table-inventory-cat th,
  #table-inventory-cat td {
    white-space: normal;
    word-break: break-word;
    vertical-align: middle;
  }

  /* Columnas de acción: ancho mínimo fijo para que los botones no se aplanen */
  #table-inventory-cat th:nth-child(6),
  #table-inventory-cat td:nth-child(6) { width: 48px;  min-width: 48px; }

  #table-inventory-cat th:nth-child(7),
  #table-inventory-cat td:nth-child(7) { width: 110px; min-width: 110px; }

  #table-inventory-cat th:nth-child(8),
  #table-inventory-cat td:nth-child(8) { width: 140px; min-width: 140px; }

  #table-inventory-cat th:nth-child(9),
  #table-inventory-cat td:nth-child(9) { width: 110px; min-width: 110px; }

  /* Quita el overflow lateral del wrapper de DataTables */
  .dataTables_wrapper {
    overflow-x: hidden;
  }

  /* En pantallas pequeñas, las columnas colapsadas por Responsive se muestran
     en el panel expandible con label:valor, sin romper layout */
  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    margin-right: 6px;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.btn-iniciar-induccion').forEach(function (btn) {
      btn.addEventListener('click', function () {
        document.getElementById('modal-user-id').value          = this.dataset.userId;
        document.getElementById('modal-user-name').textContent  = this.dataset.userName;
      });
    });
  });
</script>

<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).ready(function() {
    table = new DataTable('#table-inventory-cat', {
      responsive: {
        details: {
          type: 'inline',       // Expande filas hacia abajo en lugar de modal
          display: $.fn.dataTable.Responsive.display.childRow
        }
      },
      autoWidth: false,         // Deja que el CSS controle los anchos
      "bPaginate": false,
      "bLengthChange": false,
      "bFilter": true,
      "bInfo": false,
      "dom": 'lrt',
      "language": {
        "info": "Mostrando del _START_ al _END_ de _TOTAL_ registros",
        "search": "",
        "zeroRecords": "No se encontraron registros",
        "lengthMenu": "Mostrar _MENU_ registros",
        "emptyTable": "No hay registros por mostrar",
        "paginate": { "previous": "Anterior", "next": "Siguiente" }
      }
    });
  });
</script>

@endsection