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

@php
  $camposOficinaCompletos = !empty($bitacora->nombre_oficina)
      && !empty($bitacora->id_entidad_federativa)
      && !empty($bitacora->zona);

  $zonas = ['CENTRO', 'NORTE', 'OCCIDENTE', 'SUR'];

  // Consecutivo global que solo cuenta filas de tarea (no encabezados de bloque)
  $consecutivo = 0;
@endphp

<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>
            <nav>
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('bitacora/list') }}">Listado</a></li>
                <li class="breadcrumb-item active">Detalle #{{ $bitacora->id }}</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </div>

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

            {{-- ── Badge de estado ── --}}
            <div class="alert alert-info py-2 mb-4">
              <strong>Bitácora #{{ $bitacora->id }}</strong>
              @if($bitacora->status === 'finalizado')
                <span class="badge bg-success ms-2">Finalizada</span>
              @else
                <span class="badge bg-warning text-dark ms-2">En proceso</span>
              @endif
            </div>

            {{-- ── Alerta de éxito al guardar datos de oficina ── --}}
            @if(session('oficina_guardada'))
              <div class="alert alert-success d-flex align-items-center gap-2 mb-4">
                <i class="ti ti-circle-check fs-5"></i>
                <div>✓ Datos de la oficina guardados correctamente.</div>
              </div>
            @endif

            {{-- ── Alerta si faltan datos de la oficina ── --}}
            @if(!$camposOficinaCompletos && $bitacora->status !== 'finalizado')
              <div class="alert alert-warning d-flex align-items-start gap-2 mb-4">
                <i class="ti ti-alert-triangle fs-5 mt-1"></i>
                <div>
                  <strong>Datos de la oficina incompletos.</strong>
                  Completa el <strong>Nombre de la Oficina</strong>, la <strong>Entidad Federativa</strong>
                  y la <strong>Zona</strong> y guárdalos antes de poder finalizar actividades.
                </div>
              </div>
            @endif

            {{-- ════════════════════════════════════════════
                 SECCIÓN 1 — DATOS DE LA NUEVA OFICINA
            ═════════════════════════════════════════════ --}}
            <div class="card border mb-4">
              <div class="card-header bg-light py-2">
                <strong>Datos de la nueva Oficina / Sucursal</strong>
                @if($bitacora->status !== 'finalizado')
                  <span class="text-danger ms-1 small">* Requerido para finalizar actividades</span>
                @endif
              </div>
              <div class="card-body">

                @if($bitacora->status !== 'finalizado')
                  <form method="POST" action="{{ route('bitacora/update-datos-oficina', $bitacora->id) }}">
                    @csrf
                    <div class="row g-3">

                      <div class="col-md-4">
                        <label class="form-label fw-semibold">
                          Nombre de la Oficina <span class="text-danger">*</span>
                        </label>
                        <input type="text"
                               name="nombre_oficina"
                               class="form-control @error('nombre_oficina') is-invalid @enderror {{ !empty($bitacora->nombre_oficina) ? '' : 'border-warning' }}"
                               value="{{ old('nombre_oficina', $bitacora->nombre_oficina) }}"
                               placeholder="Ej. Oficina Monterrey Norte"
                               required>
                        @error('nombre_oficina')
                          <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                      </div>

                      <div class="col-md-4">
                        <label class="form-label fw-semibold">
                          Entidad Federativa <span class="text-danger">*</span>
                        </label>
                        <select name="id_entidad_federativa"
                                class="form-select @error('id_entidad_federativa') is-invalid @enderror {{ !empty($bitacora->id_entidad_federativa) ? '' : 'border-warning' }}"
                                required>
                          <option value="">-- Seleccione --</option>
                          @foreach($entidades_federativas as $entidad)
                            <option value="{{ $entidad->CATALOG_KEY }}"
                              {{ old('id_entidad_federativa', $bitacora->id_entidad_federativa) == $entidad->CATALOG_KEY ? 'selected' : '' }}>
                              {{ $entidad->ENTIDAD_FEDERATIVA }}
                            </option>
                          @endforeach
                        </select>
                        @error('id_entidad_federativa')
                          <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                      </div>

                      <div class="col-md-4">
                        <label class="form-label fw-semibold">
                          Zona <span class="text-danger">*</span>
                        </label>
                        <select name="zona"
                                class="form-select @error('zona') is-invalid @enderror {{ !empty($bitacora->zona) ? '' : 'border-warning' }}"
                                required>
                          <option value="">-- Seleccione --</option>
                          @foreach($zonas as $z)
                            <option value="{{ $z }}"
                              {{ old('zona', $bitacora->zona) === $z ? 'selected' : '' }}>
                              {{ $z }}
                            </option>
                          @endforeach
                        </select>
                        @error('zona')
                          <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                      </div>

                    </div>

                    <div class="mt-3">
                      <button type="submit" class="btn btn-primary">
                        <i class="ti ti-device-floppy"></i> Guardar datos de oficina
                      </button>
                    </div>
                  </form>

                @else
                  <div class="row g-3">
                    <div class="col-md-4">
                      <label class="form-label fw-semibold">Nombre de la Oficina</label>
                      <input type="text" class="form-control" value="{{ $bitacora->nombre_oficina }}" disabled>
                    </div>
                    <div class="col-md-4">
                      <label class="form-label fw-semibold">Entidad Federativa</label>
                      <input type="text" class="form-control"
                             value="{{ optional($entidades_federativas->firstWhere('CATALOG_KEY', $bitacora->id_entidad_federativa))->ENTIDAD_FEDERATIVA ?? $bitacora->id_entidad_federativa }}"
                             disabled>
                    </div>
                    <div class="col-md-4">
                      <label class="form-label fw-semibold">Zona</label>
                      <input type="text" class="form-control" value="{{ $bitacora->zona }}" disabled>
                    </div>
                  </div>
                @endif

              </div>
            </div>

            {{-- ════════════════════════════════════════════
                 SECCIÓN 2 — DATOS DEL ASOCIADO
            ═════════════════════════════════════════════ --}}
            <div class="card border mb-4">
              <div class="card-header bg-light py-2">
                <strong>Datos del Asociado</strong>
              </div>
              <div class="card-body">
                <div class="row g-3">

                  <div class="col-md-4">
                    <label class="form-label fw-semibold">Nombre del Asociado</label>
                    <input type="text" class="form-control" value="{{ $bitacora->nombre_asociado }}" disabled>
                  </div>

                  <div class="col-md-4">
                    <label class="form-label fw-semibold">Correo Electrónico</label>
                    <input type="email" class="form-control" value="{{ $bitacora->email_asociado }}" disabled>
                  </div>

                  <div class="col-md-4">
                    <label class="form-label fw-semibold">Fecha de Inicio</label>
                    <input type="date" class="form-control" value="{{ $bitacora->fecha_inicio }}" disabled>
                  </div>

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

            {{-- ── Barra de progreso ── --}}
            <div class="mb-4">
              <div class="d-flex justify-content-between mb-1">
                <span class="fw-semibold">Progreso general</span>
                <span class="text-muted">
                  {{ $tareasFinalizadas }} de {{ $totalTareas }} tareas completadas ({{ $porcentaje }}%)
                </span>
              </div>
              <div class="progress" style="height:22px; border-radius:11px;">
                <div class="progress-bar {{ $porcentaje == 100 ? 'bg-success' : 'bg-primary' }} progress-bar-striped progress-bar-animated"
                     role="progressbar"
                     style="width:{{ $porcentaje }}%">
                  {{ $porcentaje }}%
                </div>
              </div>
            </div>

            {{-- ── Tabla de tareas ── --}}
            <div class="table-responsive">
              <table class="table table-bordered table-striped align-middle">
                <thead class="table-dark">
                  <tr>
                    <th style="width:46px">#</th>
                    <th>Módulo</th>
                    <th>Actividad a Realizar</th>
                    <th style="width:160px">Responsable</th>
                    <th style="width:160px">Estatus</th>
                    <th>Comentarios / Retroalimentación</th>
                    <th style="width:110px">Evidencia</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($tareas as $bloque => $items)
                    @php
                      $totalBloque    = $items->count();
                      $finalizBloque  = $items->where('status', 'finalizado')->count();
                      $esBloqueActual = $bloque === $bloqueActual;

                      if ($finalizBloque === $totalBloque) {
                          $headerClass = 'table-success';
                      } elseif ($finalizBloque > 0) {
                          $headerClass = 'table-warning';
                      } else {
                          $headerClass = 'table-secondary';
                      }
                    @endphp

                    {{-- ── Fila de encabezado de bloque (colspan=7 ahora) ── --}}
                    <tr class="{{ $headerClass }}">
                      <td colspan="7">
                        <strong>{{ $bloque }}</strong>
                        <span class="text-muted small ms-2">{{ $finalizBloque }}/{{ $totalBloque }} completadas</span>
                        @if($finalizBloque === $totalBloque)
                          <span class="badge bg-success ms-1">✓ Completado</span>
                        @elseif($esBloqueActual)
                          <span class="badge bg-primary ms-1">En curso</span>
                        @endif
                      </td>
                    </tr>

                    @foreach($items as $tarea)
                      @php
                        $consecutivo++;   // ← incrementa solo en filas de tarea
                        $userTeam = Auth::user()->current_team_id;
                        $esAdmin  = $userTeam === 1;

                        $puedeFinalizar = $tarea->status === 'pendiente'
                            && $esBloqueActual
                            && (
                                $esAdmin
                                || ($tarea->responsable === 'Capacitación'       && $userTeam === 10)
                                || ($tarea->responsable === 'Atención Asociados' && $userTeam === 7)
                            );

                        // Detectar extensión para decidir si es imagen o archivo genérico
                        $esImagen = false;
                        if ($tarea->archivo_path) {
                            $ext = strtolower(pathinfo($tarea->archivo_path, PATHINFO_EXTENSION));
                            $esImagen = in_array($ext, ['jpg', 'jpeg', 'png', 'gif', 'webp']);
                        }
                      @endphp
                      <tr>
                        {{-- ── Consecutivo automático ── --}}
                        <td class="text-center fw-semibold">{{ $consecutivo }}</td>

                        <td>{{ $tarea->modulo }}</td>
                        <td>{{ $tarea->actividad }}</td>
                        <td><span class="badge bg-secondary">{{ $tarea->responsable }}</span></td>

                        {{-- ── Estatus / Botón finalizar ── --}}
                        <td>
                          @if($tarea->status === 'finalizado')
                            <span class="text-success fw-semibold">✓ Finalizado</span>
                            @if($tarea->finalizado_at)
                              <br><small class="text-muted">
                                {{ \Carbon\Carbon::parse($tarea->finalizado_at)->format('d/m/Y H:i') }}
                              </small>
                            @endif
                          @elseif($puedeFinalizar)
                            @if($camposOficinaCompletos)
                              <button type="button"
                                      class="btn btn-sm btn-success btn-finalizar"
                                      data-tarea-id="{{ $tarea->id }}"
                                      data-actividad="{{ $tarea->actividad }}">
                                Finalizar
                              </button>
                            @else
                              <span class="d-inline-block"
                                    data-bs-toggle="tooltip"
                                    title="Guarda primero los datos de la oficina">
                                <button type="button"
                                        class="btn btn-sm btn-outline-secondary"
                                        disabled
                                        style="pointer-events:none;">
                                  <i class="ti ti-lock me-1"></i>Finalizar
                                </button>
                              </span>
                            @endif
                          @else
                            <span class="text-muted">Pendiente</span>
                          @endif
                        </td>

                        {{-- ── Comentario ── --}}
                        <td>
                          @if($tarea->comentario)
                            {{ $tarea->comentario }}
                          @elseif($tarea->status === 'finalizado')
                            <span class="text-muted">Sin comentarios</span>
                          @endif
                        </td>

                        {{-- ── Evidencia / Archivo adjunto ── --}}
                        <td class="text-center">
                          @if($tarea->archivo_path)
                            @if($esImagen)
                              {{-- Imagen: miniatura con click para ampliar --}}
                              <a href="{{ url('storage/file/' . $tarea->archivo_path) }}"
                                 target="_blank"
                                 title="Ver imagen">
                                <img src="{{ url('storage/file/' . $tarea->archivo_path) }}"
                                     alt="Evidencia"
                                     style="width:48px; height:48px; object-fit:cover; border-radius:4px; border:1px solid #dee2e6;">
                              </a>
                            @else
                              {{-- Archivo genérico (PDF, DOC, etc.) --}}
                              <a href="{{ url('storage/file/' . $tarea->archivo_path) }}"
                                 target="_blank"
                                 class="btn btn-sm btn-outline-primary"
                                 title="Ver archivo adjunto">
                                <i class="ti ti-paperclip"></i> Ver
                              </a>
                            @endif
                          @elseif($tarea->status === 'finalizado')
                            <span class="text-muted small">—</span>
                          @endif
                        </td>

                      </tr>
                    @endforeach
                  @endforeach
                </tbody>
              </table>
            </div>

            <div class="mt-3">
              <a href="{{ route('bitacora/list') }}" class="btn btn-outline-secondary">
                ← Volver al listado
              </a>
            </div>

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

  </div>
</section>

{{-- ─────────────── Modal: Finalizar Actividad ─────────────── --}}
<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">
        <p class="text-muted small mb-3" id="modal-actividad-nombre"></p>
        <div class="mb-3">
          <label class="form-label fw-semibold">Comentarios</label>
          <textarea class="form-control" id="comentariosFinalizar" rows="3"
                    placeholder="Escribe un comentario (opcional)..."></textarea>
        </div>
        <div class="mb-3">
          <label class="form-label fw-semibold">Subir archivo (evidencia)</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>

{{-- ─────────────── Scripts ─────────────── --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

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

  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
    new bootstrap.Tooltip(el);
  });

  let tareaActivaId = null;

  document.querySelectorAll('.btn-finalizar').forEach(function (btn) {
    btn.addEventListener('click', function () {
      tareaActivaId = this.dataset.tareaId;
      document.getElementById('modal-actividad-nombre').textContent =
        'Actividad: ' + this.dataset.actividad;
      document.getElementById('comentariosFinalizar').value = '';
      document.getElementById('archivoFinalizar').value = '';
      new bootstrap.Modal(document.getElementById('finalizarModal')).show();
    });
  });

  document.getElementById('confirmarFinalizar').addEventListener('click', function () {
    if (!tareaActivaId) return;

    const btn = this;
    btn.disabled = true;
    btn.textContent = 'Guardando...';

    const formData = new FormData();
    formData.append('_token',     '{{ csrf_token() }}');
    formData.append('comentario', document.getElementById('comentariosFinalizar').value);

    const archivoInput = document.getElementById('archivoFinalizar');
    if (archivoInput.files.length > 0) {
      formData.append('archivo', archivoInput.files[0]);
    }

    fetch('/bitacora/finalizar/' + tareaActivaId, {
      method: 'POST',
      body: formData,
    })
    .then(function (res) { return res.json(); })
    .then(function (data) {
      bootstrap.Modal.getInstance(document.getElementById('finalizarModal')).hide();
      btn.disabled = false;
      btn.textContent = 'Confirmar Finalización';

      if (data.success) {
        if (data.todas_finalizadas) {
          Swal.fire({
            icon: 'success',
            title: '¡Inducción completada!',
            text: data.mensaje,
            confirmButtonText: 'Ver listado',
          }).then(function () {
            window.location.href = '{{ route("bitacora/list") }}';
          });
        } else {
          window.location.reload();
        }
      } else {
        if (data.campos_incompletos) {
          Swal.fire({ icon: 'warning', title: 'Datos incompletos', text: data.mensaje });
        } else {
          Swal.fire({ icon: 'error', title: 'Error', text: data.mensaje });
        }
      }
    })
    .catch(function () {
      btn.disabled = false;
      btn.textContent = 'Confirmar Finalización';
      Swal.fire({ icon: 'error', title: 'Error', text: 'Ocurrió un error inesperado.' });
    });
  });

});
</script>

<style>
  td { vertical-align: middle; }
  .form-label { font-weight: 600; color: #4a5568; }
</style>

@endsection