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

<section class="pc-container">
  <div class="pc-content">

    {{-- Breadcrumb --}}
    <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>

    <div class="row">
      <div class="col-sm-12">
        <div class="card">
          <div class="card-body">

            

            {{-- Tabla --}}
            <div class="table-responsive dt-responsive mt-3">
              <table id="tbl-bitacoras" class="table table-striped table-bordered table-hover" width="100%">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>Nombre de Oficina</th>
                    <th>Asociado</th>
                    <th>Email</th>
                    <th>Fecha Inicio</th>
                    <th>Avance</th>
                    <th>Progreso</th>
                    <th>Status</th>
                    <th>Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($agendadigital as $item)
                    @php
                      $pct = $item->total_tareas > 0
                        ? round(($item->total_tareas_finalizadas / $item->total_tareas) * 100)
                        : 0;
                    @endphp
                    <tr>
                      <td>{{ $item->id }}</td>
                      <td>{{ $item->nombre_oficina ?: '—' }}</td>
                      <td>{{ $item->nombre_asociado }}</td>
                      <td>{{ $item->email_asociado }}</td>
                      <td>{{ $item->fecha_inicio }}</td>
                      <td class="text-center">
                        <strong>{{ $item->total_tareas_finalizadas }} / {{ $item->total_tareas }}</strong>
                      </td>
                      <td style="min-width:120px">
                        <div class="progress" style="height:18px; border-radius:9px;">
                          <div class="progress-bar {{ $pct == 100 ? 'bg-success' : 'bg-warning' }}"
                               role="progressbar"
                               style="width:{{ $pct }}%">
                            {{ $pct }}%
                          </div>
                        </div>
                      </td>
                      <td class="text-center">
                        @if($item->status === 'finalizado')
                          <span class="badge bg-success">Finalizado</span>
                        @else
                          <span class="badge bg-warning text-dark">En proceso</span>
                        @endif
                      </td>
                      <td class="text-center">
                        <a href="{{ route('bitacora/tareas', $item->id) }}"
                           class="btn btn-sm btn-outline-primary">
                          <i class="feather icon-eye"></i> Ver detalle
                        </a>
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>

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

  </div>
</section>

{{-- ─────────────── Modal: Nueva Inducción ─────────────── --}}
<div class="modal fade" id="modalAgregar" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Iniciar Nueva Inducción</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST" action="{{ route('bitacora/iniciar') }}">
        @csrf
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label fw-semibold">Selecciona el Asociado</label>
            <select name="user_id" class="form-select" required>
              <option value="">— Seleccionar —</option>
              @foreach($asociados as $asociado)
                <option value="{{ $asociado->id }}">
                  {{ $asociado->name }} ({{ $asociado->email }})
                </option>
              @endforeach
            </select>
          </div>
          <p class="text-muted small">
            Se copiará el catálogo de tareas vigente como snapshot de esta inducción.
          </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">Iniciar Inducción</button>
        </div>
      </form>
    </div>
  </div>
</div>

{{-- DataTables --}}
<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 () {
  $('#tbl-bitacoras').DataTable({
    responsive: true,
    ordering: false,
    language: {
      url: 'https://cdn.datatables.net/plug-ins/1.13.4/i18n/es-ES.json'
    }
  });
});
</script>

@endsection