@extends('layouts.app')
@section('titulo','Programación')
@section('contenido')
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
  <h4><i class="fa fa-calendar-days"></i> Programación de mantenimientos</h4>
  <a href="{{ route('paros.index') }}" class="btn btn-outline-secondary"><i class="fa fa-circle-stop"></i> Paros de planta</a>
</div>

{{-- ==== Paros activos ==== --}}
@if($parosActivos->count() > 0)
<div class="card mb-3 border-danger">
  <div class="card-header bg-danger text-white d-flex justify-content-between">
    <strong><i class="fa fa-triangle-exclamation"></i> Paros de planta ACTIVOS ({{ $parosActivos->count() }})</strong>
    <small>Cierra el paro cuando termine para reprogramar automáticamente las OT pendientes.</small>
  </div>
  <div class="table-responsive"><table class="table table-sm mb-0 align-middle">
    <thead><tr>
      <th>Desde</th><th>Días transcurridos</th><th>Motivo</th><th>Registrado por</th><th class="text-end" style="width:240px;">Cerrar paro</th>
    </tr></thead><tbody>
      @foreach($parosActivos as $p)
        <tr>
          <td>{{ $p->fecha_inicio->format('d/m/Y') }}</td>
          <td><span class="badge text-bg-warning">{{ $p->fecha_inicio->diffInDays(now()) }} días</span></td>
          <td><strong>{{ $p->motivo }}</strong><br><small class="text-muted">{{ $p->descripcion }}</small></td>
          <td><small>{{ optional($p->usuario)->usuario }}</small></td>
          <td class="text-end">
            <form method="POST" action="{{ route('paros.cerrar', $p) }}" class="d-flex gap-1" onsubmit="return confirm('¿Cerrar el paro y desplazar las OT?');">
              @csrf
              <input type="date" name="fecha_fin" value="{{ now()->toDateString() }}" class="form-control form-control-sm" required>
              <button class="btn btn-sm btn-primario"><i class="fa fa-check"></i> Cerrar</button>
            </form>
          </td>
        </tr>
      @endforeach
    </tbody></table></div>
</div>
@endif

{{-- ==== Generación anual ==== --}}
@can('programacion.generar')
@php
  $planesPorArea = $planes->groupBy(fn($p) => optional($p->area)->nombre ?: '— Sin área —');
@endphp
<style>
  .lista-planes {
    max-height: 360px; overflow-y: auto; border: 1px solid #dee2e6;
    border-radius: 6px; padding: 8px; background: #fafafa;
  }
  .lista-planes .area-header {
    background: #1565C0; color: #fff; padding: 4px 8px; margin: 8px 0 4px;
    border-radius: 4px; font-size: 12px; font-weight: bold; cursor: pointer;
    user-select: none; display: flex; justify-content: space-between; align-items: center;
  }
  .lista-planes .area-header:first-child { margin-top: 0; }
  .lista-planes .area-header:hover { background: #0D47A1; }
  .lista-planes .area-header .small-info { font-weight: normal; font-size: 11px; opacity: .85; }
  .lista-planes .plan-row {
    padding: 3px 6px 3px 22px; border-bottom: 1px dotted #eee; font-size: 13px;
    display: flex; align-items: center; gap: 8px;
  }
  .lista-planes .plan-row:hover { background: #e9f2fd; }
  .lista-planes .plan-row label { flex: 1; cursor: pointer; margin: 0; }
  .lista-planes .plan-row .form-check-input { margin: 0; }
  .lista-planes .plan-codigo { font-weight: bold; color: #0D47A1; font-family: monospace; font-size: 11.5px; }
  .lista-planes .plan-row.oculto { display: none; }
  .lista-planes .area-block.oculto { display: none; }
</style>

<div class="card mb-3"><div class="card-header bg-primary text-white">
  <strong><i class="fa fa-bolt"></i> Generar planificación anual</strong>
  <small class="ms-2">Crea órdenes preventivas según las frecuencias del plan (quincenal, mensual, semestral, anual).</small>
</div>
<form method="POST" action="{{ route('programacion.generar') }}" class="card-body">@csrf
  <div class="row g-2 mb-3">
    <div class="col-md-3">
      <label class="form-label small">Desde</label>
      <input type="date" name="desde" value="{{ now()->toDateString() }}" class="form-control" required>
    </div>
    <div class="col-md-3">
      <label class="form-label small">Hasta</label>
      <input type="date" name="hasta" value="{{ now()->addYear()->toDateString() }}" class="form-control" required>
    </div>
    <div class="col-md-6 d-flex align-items-end justify-content-end">
      <button class="btn btn-primario btn-lg" onclick="return confirm('Esto puede crear cientos de órdenes. ¿Continuar?');">
        <i class="fa fa-rocket"></i> Generar planificación
      </button>
    </div>
  </div>

  <div class="row g-2 mb-2 align-items-center">
    <div class="col-md-5">
      <label class="form-label small mb-1"><strong>Planes a procesar</strong>
        <span class="text-muted small">— marca los que sí, deja sin marcar los que no.</span>
      </label>
      <input type="text" id="buscaPlan" class="form-control form-control-sm" placeholder="🔎 Buscar por código, nombre, equipo o área...">
    </div>
    <div class="col-md-7 text-md-end">
      <div class="btn-group btn-group-sm" role="group">
        <button type="button" class="btn btn-outline-success" onclick="planesMarcar(true)"><i class="fa fa-square-check"></i> Marcar todos</button>
        <button type="button" class="btn btn-outline-secondary" onclick="planesMarcar(false)"><i class="fa fa-square"></i> Desmarcar todos</button>
        <button type="button" class="btn btn-outline-primary" onclick="planesInvertir()"><i class="fa fa-arrows-rotate"></i> Invertir</button>
        <button type="button" class="btn btn-outline-info" onclick="planesSoloVisibles()"><i class="fa fa-filter"></i> Marcar solo visibles</button>
      </div>
      <div class="mt-1 small text-muted">
        <span id="planesContador" class="badge text-bg-primary">0 / {{ $planes->count() }}</span> seleccionados
      </div>
    </div>
  </div>

  <div class="lista-planes" id="listaPlanes">
    @foreach($planesPorArea as $area => $planesArea)
      @php $areaSlug = 'area_' . md5($area); @endphp
      <div class="area-block" data-area="{{ Str::lower($area) }}">
        <div class="area-header" onclick="planesAreaToggle('{{ $areaSlug }}')">
          <span>
            <i class="fa fa-folder"></i> {{ $area }}
            <span class="small-info">({{ $planesArea->count() }} plan{{ $planesArea->count() == 1 ? '' : 'es' }})</span>
          </span>
          <span>
            <button type="button" class="btn btn-sm btn-light py-0 px-2" onclick="event.stopPropagation(); planesAreaMarcar('{{ $areaSlug }}', true)"
                    title="Marcar todos los planes de esta área">
              <i class="fa fa-check"></i>
            </button>
            <button type="button" class="btn btn-sm btn-light py-0 px-2" onclick="event.stopPropagation(); planesAreaMarcar('{{ $areaSlug }}', false)"
                    title="Desmarcar todos los planes de esta área">
              <i class="fa fa-xmark"></i>
            </button>
          </span>
        </div>
        <div class="area-planes" data-grupo="{{ $areaSlug }}">
          @foreach($planesArea as $p)
            <div class="plan-row"
                 data-busca="{{ Str::lower($p->codigo . ' ' . $p->nombre . ' ' . optional($p->equipo)->nombre . ' ' . $area) }}">
              <input type="checkbox" name="plan_ids[]" value="{{ $p->id }}"
                     id="plan_{{ $p->id }}" class="form-check-input plan-chk"
                     data-grupo="{{ $areaSlug }}">
              <label for="plan_{{ $p->id }}">
                <span class="plan-codigo">{{ $p->codigo }}</span> · {{ $p->nombre }}
                @if($p->equipo && $p->equipo->codigo !== $p->codigo)
                  <small class="text-muted">· {{ $p->equipo->nombre }}</small>
                @endif
              </label>
            </div>
          @endforeach
        </div>
      </div>
    @endforeach
  </div>

  <small class="text-muted d-block mt-2">
    <i class="fa fa-info-circle"></i> El sistema no duplica: si re-ejecutas, solo crea las que faltan.
    Una OT agrupa todos los ítems del plan que comparten frecuencia.
    Si <strong>no marcas ninguno</strong>, se procesarán TODOS los planes activos.
  </small>
</form></div>

@push('scripts_inline')
function planesActualizarContador() {
  const total = document.querySelectorAll('.plan-chk').length;
  const sel = document.querySelectorAll('.plan-chk:checked').length;
  const c = document.getElementById('planesContador');
  c.textContent = sel + ' / ' + total;
  c.className = 'badge ' + (sel === 0 ? 'text-bg-warning' : sel === total ? 'text-bg-success' : 'text-bg-primary');
}
function planesMarcar(v) {
  document.querySelectorAll('.plan-chk').forEach(c => c.checked = v);
  planesActualizarContador();
}
function planesInvertir() {
  document.querySelectorAll('.plan-chk').forEach(c => c.checked = !c.checked);
  planesActualizarContador();
}
function planesSoloVisibles() {
  document.querySelectorAll('.plan-chk').forEach(c => {
    const fila = c.closest('.plan-row');
    c.checked = fila && !fila.classList.contains('oculto') && !fila.closest('.area-block.oculto');
  });
  planesActualizarContador();
}
function planesAreaMarcar(grupo, v) {
  document.querySelectorAll('.plan-chk[data-grupo="' + grupo + '"]').forEach(c => c.checked = v);
  planesActualizarContador();
}
function planesAreaToggle(grupo) {
  const bloque = document.querySelector('.area-planes[data-grupo="' + grupo + '"]');
  if (bloque) bloque.style.display = bloque.style.display === 'none' ? '' : 'none';
}

document.querySelectorAll('.plan-chk').forEach(c => c.addEventListener('change', planesActualizarContador));

// Buscador en tiempo real
document.getElementById('buscaPlan').addEventListener('input', function (e) {
  const q = e.target.value.trim().toLowerCase();
  document.querySelectorAll('.plan-row').forEach(row => {
    const match = q === '' || row.dataset.busca.includes(q);
    row.classList.toggle('oculto', !match);
  });
  // Ocultar áreas sin coincidencias
  document.querySelectorAll('.area-block').forEach(blk => {
    const algunVisible = [...blk.querySelectorAll('.plan-row')].some(r => !r.classList.contains('oculto'));
    blk.classList.toggle('oculto', !algunVisible);
  });
});

planesActualizarContador();
@endpush
@endcan

{{-- ==== Replanificar manual ==== --}}
<div class="row g-2 mb-3">
  <div class="col-md-6">
    <div class="card h-100">
      <a class="card-header text-decoration-none text-dark d-block" data-bs-toggle="collapse" href="#collapseReplan">
        <strong><i class="fa fa-rotate-right"></i> Replanificar OT pendientes</strong>
        <small class="text-muted ms-2">Empuja OT pendientes N días.</small>
        <i class="fa fa-chevron-down float-end"></i>
      </a>
      <div id="collapseReplan" class="collapse">
        <form method="POST" action="{{ route('programacion.replanificar') }}" class="card-body row g-2">@csrf
          <div class="col-md-6">
            <label class="form-label small">Desde fecha</label>
            <input type="date" name="desde" value="{{ now()->toDateString() }}" class="form-control" required>
          </div>
          <div class="col-md-3">
            <label class="form-label small">Días a desplazar</label>
            <input type="number" name="dias" value="7" class="form-control" required>
            <small class="text-muted">+ futuro, − pasado</small>
          </div>
          <div class="col-12">
            <label class="form-label small">Motivo *</label>
            <input name="motivo" class="form-control" required maxlength="200" placeholder="Ej. Falla eléctrica en la zona 3">
          </div>
          <div class="col-12 text-end">
            <button class="btn btn-primario btn-sm" onclick="return confirm('¿Replanificar todas las OT pendientes desde esa fecha?');">
              <i class="fa fa-rotate-right"></i> Aplicar
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="card h-100">
      <a class="card-header text-decoration-none text-dark d-block" data-bs-toggle="collapse" href="#collapseParo">
        <strong><i class="fa fa-circle-stop"></i> Registrar paro de planta</strong>
        <small class="text-muted ms-2">Queda histórico y desplaza al cerrarse.</small>
        <i class="fa fa-chevron-down float-end"></i>
      </a>
      <div id="collapseParo" class="collapse">
        <form method="POST" action="{{ route('paros.store') }}" class="card-body row g-2">@csrf
          <div class="col-md-6">
            <label class="form-label small">Fecha de inicio</label>
            <input type="date" name="fecha_inicio" value="{{ now()->toDateString() }}" class="form-control" required>
          </div>
          <div class="col-md-6">
            <label class="form-label small">Motivo *</label>
            <input name="motivo" class="form-control" required maxlength="200" placeholder="Ej. Mantenimiento mayor molino 01">
          </div>
          <div class="col-12">
            <label class="form-label small">Descripción</label>
            <textarea name="descripcion" rows="2" class="form-control"></textarea>
          </div>
          <div class="col-12 text-end">
            <button class="btn btn-acento btn-sm"><i class="fa fa-pause"></i> Registrar paro abierto</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

{{-- ==== Calendario mensual ==== --}}
<form method="GET" class="row g-2 mb-3">
  <div class="col-md-2"><select name="mes" class="form-select">
    @foreach(range(1,12) as $m)<option value="{{ $m }}" @selected($mes==$m)>{{ \Carbon\Carbon::create()->month($m)->translatedFormat('F') }}</option>@endforeach
  </select></div>
  <div class="col-md-2"><input type="number" name="anio" value="{{ $anio }}" class="form-control"></div>
  <div class="col-md-2"><button class="btn btn-outline-primary"><i class="fa fa-filter"></i> Ver mes</button></div>
  <div class="col-md-6 text-end pt-2"><small class="text-muted">Cada celda muestra las OT programadas. Click en el código para abrirla.</small></div>
</form>

<div class="card"><div class="card-body p-2">
<div class="table-responsive">
<table class="table table-bordered text-center mb-0" style="table-layout:fixed;">
<thead><tr>@foreach(['Lun','Mar','Mié','Jue','Vie','Sáb','Dom'] as $d)<th>{{ $d }}</th>@endforeach</tr></thead>
<tbody>
@php
  $dia = $inicio->copy()->startOfWeek();
  $hoy = \Carbon\Carbon::today();
@endphp
@for($w=0; $w<6; $w++)
  <tr>
  @for($d=0; $d<7; $d++)
    @php $key = $dia->format('Y-m-d'); $delMes = $dia->month === $mes; $delHoy = $dia->isSameDay($hoy); @endphp
    <td style="height:80px; vertical-align:top; {{ $delMes?'':'background:#f5f5f5; color:#aaa;' }} {{ $delHoy?'border:2px solid #1565C0;':'' }}">
      <small class="d-block fw-bold">{{ $dia->day }}</small>
      @foreach($ordenes->get($key, collect()) as $o)
        <a href="{{ route('ordenes.show',$o) }}" class="d-block small text-truncate"
           title="{{ optional($o->equipo)->nombre }} · {{ optional($o->frecuencia)->nombre ?? '—' }}"
           style="background: {{ optional($o->estado)->color ?? '#999' }}; color:#fff; padding:1px 4px; border-radius:3px; margin:1px 0;">
          {{ $o->codigo }}
        </a>
      @endforeach
    </td>
    @php $dia->addDay(); @endphp
  @endfor
  </tr>
  @if($dia->month !== $mes && $dia->gt($fin)) @break @endif
@endfor
</tbody></table></div></div></div>

{{-- ==== Histórico de paros (colapsado) ==== --}}
@if($parosHistorial->count() > 0)
<div class="card mt-3">
  <a class="card-header text-decoration-none text-dark d-block" data-bs-toggle="collapse" href="#collapseHistorial">
    <strong><i class="fa fa-clock-rotate-left"></i> Historial de paros ({{ $parosHistorial->count() }} recientes)</strong>
    <i class="fa fa-chevron-down float-end"></i>
  </a>
  <div id="collapseHistorial" class="collapse">
    <div class="table-responsive"><table class="table table-sm mb-0">
      <thead><tr><th>#</th><th>Desde</th><th>Hasta</th><th>Días</th><th>Motivo</th><th>OT afectadas</th></tr></thead>
      <tbody>
        @foreach($parosHistorial as $p)
          <tr>
            <td>{{ $p->id }}</td>
            <td>{{ $p->fecha_inicio->format('d/m/Y') }}</td>
            <td>{{ $p->fecha_fin?->format('d/m/Y') }}</td>
            <td><strong>{{ $p->duracion_dias }}</strong></td>
            <td>{{ $p->motivo }}</td>
            <td>{{ $p->ots_afectadas }}</td>
          </tr>
        @endforeach
      </tbody>
    </table></div>
  </div>
</div>
@endif

@endsection