@extends('layouts.app')
@section('titulo','Plan Anual')
@section('contenido')

<style>
  .kpi-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.06); padding: 12px; text-align: center; border-left: 4px solid #1565C0; }
  .kpi-card .valor { font-size: 22px; font-weight: bold; color: #0D47A1; }
  .kpi-card .label { font-size: 11px; color: #666; }
  .kpi-card .sub { font-size: 10px; color: #888; }

  .mini-cal { background: #fff; border: 1px solid #dee2e6; border-radius: 6px; padding: 6px; font-size: 10px; }
  .mini-cal .mes { font-weight: bold; color: #0D47A1; text-align: center; padding-bottom: 2px; border-bottom: 1px solid #ddd; margin-bottom: 4px; }
  .mini-cal table { width: 100%; border-collapse: collapse; }
  .mini-cal th, .mini-cal td { width: 14.28%; text-align: center; padding: 1px; font-size: 9px; vertical-align: middle; }
  .mini-cal th { color: #999; font-weight: normal; }
  .mini-cal .d { background: #fafafa; border-radius: 2px; height: 16px; line-height: 16px; }
  .mini-cal .d.con-ot { color: #fff; font-weight: bold; cursor: help; }
  .mini-cal .d.low { background: #90caf9; }
  .mini-cal .d.med { background: #1976d2; }
  .mini-cal .d.high { background: #0D47A1; }
  .mini-cal .footer { text-align: center; font-size: 9px; color: #666; margin-top: 3px; padding-top: 3px; border-top: 1px solid #eee; }

  .gantt { font-size: 9px; border-collapse: collapse; width: 100%; }
  .gantt th, .gantt td { border: 1px solid #ddd; padding: 1px; height: 18px; vertical-align: middle; }
  .gantt thead th { background: #1565C0; color: #fff; font-weight: bold; text-align: center; }
  .gantt th.eq { background: #f7f7f7; color: #333; text-align: left; padding: 2px 6px; min-width: 180px; max-width: 220px; }
  .gantt th.divisor-mes { border-left: 2px solid #0D47A1; }
  .gantt .area-hdr { background: #E3F2FD; color: #0D47A1; font-weight: bold; }
  .gantt td.equipo { background: #fafafa; padding: 1px 6px; text-align: left; }
  .gantt td.equipo small { color: #888; }
  .gantt .marca { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
  .gantt .qui { background: #90caf9; }
  .gantt .men { background: #42a5f5; }
  .gantt .sem { background: #1565C0; }
  .gantt .anu { background: #0D47A1; }
  .gantt .otra { background: #9e9e9e; }
  .gantt .semana { width: 14px; min-width: 14px; }
  .leyenda span { margin-right: 12px; font-size: 10px; }
  .leyenda .punto { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

  .table-carga th, .table-carga td { font-size: 10.5px; padding: 4px 6px; vertical-align: middle; }
  .table-carga th { background: #1565C0; color: #fff; text-align: center; }
  .table-carga td.mes { text-align: center; }
  .table-carga td.mes.cero { color: #ccc; }
  .table-carga tr.total { background: #DDEEFF; font-weight: bold; }
</style>

<div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
  <h4 class="mb-0"><i class="fa fa-calendar"></i> Plan Anual de Mantenimiento
    <span class="badge text-bg-primary fs-6">{{ $anio }}</span>
  </h4>
  <div class="d-flex flex-wrap gap-2 align-items-end">
    <form method="GET" class="d-flex gap-2">
      <select name="anio" class="form-select form-select-sm" onchange="this.form.submit()" style="width:100px;">
        @foreach($anios_disponibles as $a)
          <option value="{{ $a }}" @selected($a==$anio)>{{ $a }}</option>
        @endforeach
      </select>
    </form>
    <div class="btn-group btn-group-sm">
      <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown">
          <i class="fa fa-file-pdf"></i> PDF
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="{{ route('plan-anual.pdf',['anio'=>$anio]) }}" target="_blank">
            <i class="fa fa-file-pdf text-danger"></i> Resumen ejecutivo
            <small class="d-block text-muted">A4 horizontal · 3 páginas</small>
          </a></li>
          <li><a class="dropdown-item" href="{{ route('plan-anual.pdf-detallado',['anio'=>$anio]) }}" target="_blank">
            <i class="fa fa-file-lines text-danger"></i> Detallado por mes
            <small class="d-block text-muted">A4 · resumen de todas las OT agrupadas por mes</small>
          </a></li>
          <li><a class="dropdown-item" href="{{ route('plan-anual.pdf-detallado',['anio'=>$anio,'fichas'=>1]) }}" target="_blank">
            <i class="fa fa-folder-open text-danger"></i> Detallado + fichas individuales
            <small class="d-block text-muted">A4 · mensual + 1 ficha por cada OT (muy largo)</small>
          </a></li>
          <li><a class="dropdown-item" href="{{ route('plan-anual.pdf-gantt',['anio'=>$anio]) }}" target="_blank">
            <i class="fa fa-bars-staggered text-danger"></i> Diagrama Gantt completo
            <small class="d-block text-muted">A3 horizontal · cronograma 52 semanas</small>
          </a></li>
        </ul>
      </div>
      <a href="{{ route('plan-anual.excel',['anio'=>$anio]) }}" class="btn btn-outline-success">
        <i class="fa fa-file-excel"></i> Excel
      </a>
      <a href="{{ route('plan-anual.word',['anio'=>$anio]) }}" class="btn btn-outline-primary">
        <i class="fa fa-file-word"></i> Word
      </a>
    </div>
  </div>
</div>

{{-- ===== KPIs ===== --}}
<div class="row g-2 mb-3">
  <div class="col-md-2 col-6"><div class="kpi-card">
    <div class="label">Total OT planificadas</div>
    <div class="valor">{{ number_format($kpis['total_ots']) }}</div>
  </div></div>
  <div class="col-md-2 col-6"><div class="kpi-card" style="border-left-color:#198754;">
    <div class="label">Ejecutadas</div>
    <div class="valor" style="color:#198754;">{{ $kpis['ejecutadas'] }}</div>
    <div class="sub">{{ $kpis['cumplimiento_pct'] }}% cumplimiento</div>
  </div></div>
  <div class="col-md-2 col-6"><div class="kpi-card" style="border-left-color:#FFC107;">
    <div class="label">Pendientes</div>
    <div class="valor" style="color:#D68000;">{{ $kpis['pendientes'] }}</div>
  </div></div>
  <div class="col-md-2 col-6"><div class="kpi-card" style="border-left-color:#dc3545;">
    <div class="label">Vencidas</div>
    <div class="valor" style="color:#dc3545;">{{ $kpis['vencidas'] }}</div>
  </div></div>
  <div class="col-md-2 col-6"><div class="kpi-card" style="border-left-color:#6f42c1;">
    <div class="label">Costo estimado</div>
    <div class="valor" style="color:#6f42c1; font-size:16px;">{{ ($appConfig['moneda_simbolo'] ?? 'S/') }} {{ number_format($kpis['costo_total_estimado'],0) }}</div>
    <div class="sub">Real: {{ number_format($kpis['costo_total_real'],0) }}</div>
  </div></div>
  <div class="col-md-2 col-6"><div class="kpi-card">
    <div class="label">Equipos cubiertos</div>
    <div class="valor">{{ $kpis['equipos_cubiertos'] }}</div>
    <div class="sub">{{ $kpis['planes_activos'] }} planes activos</div>
  </div></div>
</div>

{{-- ===== Gráfico distribución + Top 10 ===== --}}
<div class="row g-3 mb-3">
  <div class="col-lg-5">
    <div class="card h-100">
      <div class="card-header py-2"><strong><i class="fa fa-chart-pie"></i> Distribución por frecuencia</strong></div>
      <div class="card-body">
        <canvas id="chartFrec" style="max-height: 240px;"></canvas>
        <table class="table table-sm table-striped mb-0 mt-2">
          <thead><tr><th>Frecuencia</th><th>Días</th><th class="text-end">OT</th><th class="text-end">Costo</th></tr></thead>
          <tbody>
            @foreach($frecuencias as $f)
              <tr>
                <td><strong>{{ $f['nombre'] }}</strong> <small class="text-muted">{{ $f['codigo'] }}</small></td>
                <td>{{ $f['dias'] ?? '—' }}</td>
                <td class="text-end">{{ $f['count'] }}</td>
                <td class="text-end">{{ ($appConfig['moneda_simbolo'] ?? 'S/') }} {{ number_format($f['costo'],2) }}</td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="col-lg-7">
    <div class="card h-100">
      <div class="card-header py-2"><strong><i class="fa fa-trophy"></i> Top 10 equipos más mantenidos</strong></div>
      <div class="table-responsive"><table class="table table-sm mb-0 align-middle">
        <thead class="table-light"><tr>
          <th style="width:30px;">#</th><th>Código</th><th>Equipo</th><th>Área</th>
          <th class="text-end">OT</th><th class="text-end">Ejec.</th><th class="text-end">Costo total</th>
        </tr></thead>
        <tbody>
          @forelse($top_equipos as $i => $r)
            <tr>
              <td>{{ $i + 1 }}</td>
              <td><strong>{{ optional($r['equipo'])->codigo }}</strong></td>
              <td><small>{{ optional($r['equipo'])->nombre }}</small></td>
              <td><small class="text-muted">{{ optional($r['area'])->nombre }}</small></td>
              <td class="text-end"><span class="badge text-bg-primary">{{ $r['count'] }}</span></td>
              <td class="text-end"><small class="text-success">{{ $r['ejecutadas'] }}</small></td>
              <td class="text-end">{{ ($appConfig['moneda_simbolo'] ?? 'S/') }} {{ number_format($r['costo'],2) }}</td>
            </tr>
          @empty
            <tr><td colspan="7" class="text-muted text-center py-3">Sin OTs para este año.</td></tr>
          @endforelse
        </tbody>
      </table></div>
    </div>
  </div>
</div>

{{-- ===== Calendario visual del año (12 mini-meses) ===== --}}
<div class="card mb-3">
  <div class="card-header py-2 d-flex justify-content-between align-items-center">
    <strong><i class="fa fa-calendar-days"></i> Calendario visual del año {{ $anio }}</strong>
    <small class="text-muted">Intensidad de color = cantidad de OT del día</small>
  </div>
  <div class="card-body">
    <div class="row g-2">
      @foreach($meses as $m)
        <div class="col-md-3 col-sm-4 col-6">
          <div class="mini-cal">
            <div class="mes">{{ ucfirst($m['nombre']) }}</div>
            <table>
              <thead><tr>
                <th>L</th><th>M</th><th>M</th><th>J</th><th>V</th><th>S</th><th>D</th>
              </tr></thead>
              <tbody>
                @php
                  // Calcular offset hasta el primer día (Lunes=1, Domingo=0 en Carbon)
                  $offset = $m['primer_dow'] === 0 ? 6 : $m['primer_dow'] - 1;
                  $cells = [];
                  for ($i = 0; $i < $offset; $i++) $cells[] = null;
                  foreach ($m['dias'] as $d) $cells[] = $d;
                @endphp
                @for($i = 0; $i < count($cells); $i++)
                  @if($i % 7 == 0) <tr> @endif
                  @if($cells[$i] === null)
                    <td>&nbsp;</td>
                  @else
                    @php
                      $d = $cells[$i];
                      $clase = $d['count'] > 0 ? 'd con-ot ' . ($d['count'] >= 5 ? 'high' : ($d['count'] >= 2 ? 'med' : 'low')) : 'd';
                    @endphp
                    <td><span class="{{ $clase }}" title="{{ $d['count'] }} OT{{ $d['count'] != 1 ? 's' : '' }}">{{ $d['dia'] }}</span></td>
                  @endif
                  @if(($i + 1) % 7 == 0) </tr> @endif
                @endfor
              </tbody>
            </table>
            <div class="footer">
              <strong>{{ $m['total_ots'] }}</strong> OT · {{ ($appConfig['moneda_simbolo'] ?? 'S/') }} {{ number_format($m['costo'], 0) }}
            </div>
          </div>
        </div>
      @endforeach
    </div>
  </div>
</div>

{{-- ===== Carga mensual por área ===== --}}
<div class="card mb-3">
  <div class="card-header py-2"><strong><i class="fa fa-chart-bar"></i> Carga mensual por área</strong>
    <small class="text-muted ms-2">Conteo de OTs por área cada mes</small>
  </div>
  <div class="table-responsive">
    <table class="table table-bordered table-carga mb-0">
      <thead>
        <tr>
          <th rowspan="2" style="vertical-align:middle;">Área</th>
          <th colspan="12">Meses</th>
          <th rowspan="2" style="vertical-align:middle;">Total</th>
          <th rowspan="2" style="vertical-align:middle;">Costo</th>
        </tr>
        <tr>
          @foreach(['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'] as $mn)
            <th>{{ $mn }}</th>
          @endforeach
        </tr>
      </thead>
      <tbody>
        @forelse($carga_areas as $fila)
          <tr>
            <td><strong>{{ optional($fila['area'])->nombre }}</strong></td>
            @for($m = 1; $m <= 12; $m++)
              @php $v = $fila['meses'][$m]['count'] ?? 0; @endphp
              <td class="mes {{ $v == 0 ? 'cero' : '' }}">{{ $v ?: '—' }}</td>
            @endfor
            <td class="mes"><strong>{{ $fila['total'] }}</strong></td>
            <td class="mes"><small>{{ ($appConfig['moneda_simbolo'] ?? 'S/') }} {{ number_format($fila['costo'], 0) }}</small></td>
          </tr>
        @empty
          <tr><td colspan="15" class="text-muted text-center py-3">Sin datos para este año.</td></tr>
        @endforelse
      </tbody>
      <tfoot>
        <tr class="total">
          <td>TOTAL</td>
          @php $tCount = 0; $tCosto = 0; @endphp
          @for($m = 1; $m <= 12; $m++)
            <td class="mes">{{ $totales_mes[$m]['count'] }}</td>
            @php $tCount += $totales_mes[$m]['count']; $tCosto += $totales_mes[$m]['costo']; @endphp
          @endfor
          <td class="mes">{{ $tCount }}</td>
          <td class="mes">{{ ($appConfig['moneda_simbolo'] ?? 'S/') }} {{ number_format($tCosto, 0) }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

{{-- ===== Cronograma visual tipo Gantt ===== --}}
<div class="card mb-3">
  <div class="card-header py-2 d-flex justify-content-between align-items-center">
    <strong><i class="fa fa-bars-staggered"></i> Cronograma de mantenimiento (Gantt) — {{ $gantt_equipos->count() }} equipos</strong>
    <span class="leyenda">
      <span><span class="punto" style="background:#90caf9;"></span>Quincenal</span>
      <span><span class="punto" style="background:#42a5f5;"></span>Mensual</span>
      <span><span class="punto" style="background:#1565C0;"></span>Semestral</span>
      <span><span class="punto" style="background:#0D47A1;"></span>Anual</span>
    </span>
  </div>
  <div class="card-body p-2" style="max-height: 600px; overflow: auto;">
    <table class="gantt">
      <thead>
        <tr>
          <th class="eq" rowspan="2">Equipo</th>
          @foreach([['Ene',4],['Feb',4],['Mar',5],['Abr',4],['May',4],['Jun',5],['Jul',4],['Ago',4],['Sep',5],['Oct',4],['Nov',4],['Dic',5]] as $mes)
            <th colspan="{{ $mes[1] }}" class="divisor-mes">{{ $mes[0] }}</th>
          @endforeach
        </tr>
        <tr>
          @for($s = 1; $s <= 52; $s++)
            <th class="semana">{{ $s }}</th>
          @endfor
        </tr>
      </thead>
      <tbody>
        @php $areaActual = null; @endphp
        @forelse($gantt_equipos as $eq)
          @if($areaActual !== optional($eq['area'])->id)
            <tr><td colspan="53" class="area-hdr">📁 {{ optional($eq['area'])->nombre ?? '—' }}</td></tr>
            @php $areaActual = optional($eq['area'])->id; @endphp
          @endif
          <tr>
            <td class="equipo">
              <strong>{{ optional($eq['equipo'])->codigo }}</strong>
              <small class="d-block text-truncate" style="max-width:200px;">{{ optional($eq['equipo'])->nombre }}</small>
            </td>
            @for($s = 1; $s <= 52; $s++)
              <td class="semana">
                @if(count($eq['semanas'][$s] ?? []) > 0)
                  @foreach($eq['semanas'][$s] as $ot)
                    @php
                      $c = optional($ot->frecuencia)->codigo;
                      $clase = match($c) {
                        'QUI' => 'qui',
                        'MEN' => 'men',
                        'SEM' => 'sem',
                        'ANU' => 'anu',
                        default => 'otra',
                      };
                    @endphp
                    <a href="{{ route('ordenes.show', $ot) }}" class="marca {{ $clase }}"
                       title="{{ $ot->codigo }} · {{ $ot->fecha_programada->format('d/m/Y') }} · {{ optional($ot->frecuencia)->nombre }}"></a>
                  @endforeach
                @endif
              </td>
            @endfor
          </tr>
        @empty
          <tr><td colspan="53" class="text-muted text-center py-3">Sin OTs en {{ $anio }}.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>

@push('scripts_inline')
const datosFrec = @json($frecuencias->map(fn($f) => ['nombre'=>$f['nombre'].' ('.$f['codigo'].')', 'count'=>$f['count']]));
if (datosFrec.length > 0) {
  new Chart(document.getElementById('chartFrec'), {
    type: 'doughnut',
    data: {
      labels: datosFrec.map(x => x.nombre),
      datasets: [{
        data: datosFrec.map(x => x.count),
        backgroundColor: ['#90caf9','#42a5f5','#1565C0','#0D47A1','#90A4AE','#FFC107','#FF9800'],
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 10 } } } }
    }
  });
}
@endpush

@endsection