@extends('layouts.app')
@section('titulo', 'Dashboard')
@section('contenido')
<div class="row g-3 mb-3">
  <div class="col-lg-4">
    <div class="card h-100"><div class="card-header bg-warning-subtle py-2"><i class="fa fa-bell"></i> Próximos 7 días</div>
      <ul class="list-group list-group-flush" style="max-height:240px; overflow-y:auto;">
        @forelse($proximos as $o)
          <li class="list-group-item d-flex justify-content-between align-items-start py-2">
            <div><a href="{{ route('ordenes.show', $o) }}">{{ $o->codigo }}</a><br>
              <small class="text-muted">{{ optional($o->equipo)->nombre }}</small></div>
            <span class="badge text-bg-warning">{{ $o->fecha_programada?->format('d/m') }}</span>
          </li>
        @empty
          <li class="list-group-item text-muted small">Sin órdenes próximas</li>
        @endforelse
      </ul>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card h-100"><div class="card-header bg-secondary-subtle py-2"><i class="fa fa-list-check"></i> 10 pendientes</div>
      <ul class="list-group list-group-flush" style="max-height:240px; overflow-y:auto;">
        @forelse($pendientes_lista as $o)
          <li class="list-group-item d-flex justify-content-between py-2">
            <a href="{{ route('ordenes.show', $o) }}">{{ $o->codigo }}</a>
            <small class="text-muted text-truncate ms-2" style="max-width:160px;">{{ optional($o->equipo)->nombre }}</small>
          </li>
        @empty
          <li class="list-group-item text-muted small">Sin pendientes</li>
        @endforelse
      </ul>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card h-100"><div class="card-header bg-success-subtle py-2"><i class="fa fa-clock-rotate-left"></i> 20 últimas</div>
      <ul class="list-group list-group-flush" style="max-height:240px; overflow-y:auto;">
        @forelse($ultimas as $o)
          <li class="list-group-item d-flex justify-content-between py-2">
            <a href="{{ route('ordenes.show', $o) }}">{{ $o->codigo }}</a>
            <small class="text-muted">{{ $o->fecha_cierre?->format('d/m H:i') }}</small>
          </li>
        @empty
          <li class="list-group-item text-muted small">Sin historial</li>
        @endforelse
      </ul>
    </div>
  </div>
</div>

@if(count($proximas_pm) > 0)
<div class="card mb-3 border-warning">
  <div class="card-header bg-warning-subtle d-flex justify-content-between py-2">
    <strong><i class="fa fa-gauge-high"></i> Próximas PM por horómetro</strong>
    <a href="{{ route('horometro.index') }}" class="small">Registrar lectura →</a>
  </div>
  <div class="table-responsive"><table class="table table-sm table-hover mb-0 align-middle">
    <thead><tr>
      <th>Equipo</th><th>Área</th><th>PM</th>
      <th class="text-end">Horóm. actual</th><th class="text-end">Última PM</th>
      <th style="width:200px;">Progreso</th><th class="text-end">Estado</th>
    </tr></thead><tbody>
      @foreach($proximas_pm as $p)
        @php $color = $p->restantes <= 0 ? 'danger' : ($p->restantes < $p->pm * 0.05 ? 'warning' : 'info'); @endphp
        <tr>
          <td><strong>{{ $p->equipo->codigo }}</strong><br><small class="text-muted">{{ $p->equipo->nombre }}</small></td>
          <td><small>{{ optional($p->equipo->area)->nombre }}</small></td>
          <td><span class="badge text-bg-secondary">PM {{ $p->pm }}h</span></td>
          <td class="text-end">{{ number_format($p->horometro_actual, 0) }} h</td>
          <td class="text-end">{{ number_format($p->base, 0) }} h</td>
          <td>
            <div class="progress" style="height: 14px;">
              <div class="progress-bar bg-{{ $color }}" style="width: {{ min(100,$p->porcentaje) }}%">
                {{ number_format($p->porcentaje,0) }}%
              </div>
            </div>
          </td>
          <td class="text-end">
            <span class="badge text-bg-{{ $color }}">
              {{ $p->restantes > 0 ? 'Faltan '.number_format($p->restantes,0).' h' : 'Excedido '.number_format(-$p->restantes,0).' h' }}
            </span>
          </td>
        </tr>
      @endforeach
    </tbody></table></div>
</div>
@endif

<form method="GET" class="row g-2 align-items-end mb-3">
  <div class="col-md-4">
    <label class="form-label small">Buscar código</label>
    <input name="q" value="{{ $busqueda }}" class="form-control" placeholder="OTP-2026-...">
  </div>
  <div class="col-md-3">
    <label class="form-label small">Área</label>
    <select name="area_id" class="form-select">
      <option value="">— Todas —</option>
      @foreach($areas as $a)
        <option value="{{ $a->id }}" @selected($area_id==$a->id)>{{ $a->nombre }}</option>
      @endforeach
    </select>
  </div>
  <div class="col-md-2">
    <button class="btn btn-primario w-100"><i class="fa fa-filter"></i> Filtrar</button>
  </div>
  <div class="col-md-3 text-end">
    <a href="{{ route('reportes.index') }}" class="btn btn-outline-secondary"><i class="fa fa-chart-line"></i> Reportes</a>
  </div>
</form>

<div class="row g-2 mb-3">
  @php
    $tarjetas = [
      ['Total mes', $kpis['total_mes'], '#0d6efd', 'fa-calendar'],
      ['Pendientes', $kpis['pendientes'], '#6c757d', 'fa-hourglass-half'],
      ['En proceso', $kpis['en_proceso'], '#0dcaf0', 'fa-spinner'],
      ['Ejecutadas', $kpis['ejecutadas'], '#198754', 'fa-circle-check'],
      ['Vencidas', $kpis['vencidas'], '#dc3545', 'fa-triangle-exclamation'],
      ['Reprogramadas', $kpis['reprogramadas'], '#ffc107', 'fa-rotate-right'],
      ['Aprobadas', $kpis['aprobadas'], '#20c997', 'fa-check-double'],
      ['Críticas', $kpis['criticas'], '#dc3545', 'fa-bolt'],
      ['Cumplimiento %', $kpis['cumplimiento'].'%', '#0d6efd', 'fa-bullseye'],
      ['Costo mes ('.($appConfig['moneda_simbolo'] ?? 'S/').')', number_format($kpis['costo_mes'],2), '#6f42c1', 'fa-dollar-sign'],
      ['Planes activos', $kpis['planes_activos'], '#198754', 'fa-list'],
      ['Equipos activos', $kpis['equipos_activos'], '#0d6efd', 'fa-gear'],
    ];
  @endphp
  @foreach($tarjetas as [$titulo, $valor, $color, $icono])
    <div class="col-6 col-md-4 col-lg-2">
      <div class="card kpi-card h-100">
        <div class="card-body p-3">
          <div class="d-flex justify-content-between align-items-center">
            <div>
              <div class="text-muted small">{{ $titulo }}</div>
              <div class="fs-4 fw-bold" style="color: {{ $color }};">{{ $valor }}</div>
            </div>
            <i class="fa {{ $icono }} fs-2" style="color: {{ $color }}; opacity:.4;"></i>
          </div>
        </div>
      </div>
    </div>
  @endforeach
</div>

<style>
.chart-card { height: 100%; }
.chart-wrap { position: relative; height: 230px; }
@media (max-width: 768px) { .chart-wrap { height: 200px; } }
</style>
<div class="row g-3">
  <div class="col-md-6 col-xl-4"><div class="card chart-card"><div class="card-body"><h6 class="small fw-bold">Órdenes por estado</h6><div class="chart-wrap"><canvas id="g1"></canvas></div></div></div></div>
  <div class="col-md-6 col-xl-4"><div class="card chart-card"><div class="card-body"><h6 class="small fw-bold">Órdenes por área</h6><div class="chart-wrap"><canvas id="g2"></canvas></div></div></div></div>
  <div class="col-md-6 col-xl-4"><div class="card chart-card"><div class="card-body"><h6 class="small fw-bold">Preventivo vs correctivo</h6><div class="chart-wrap"><canvas id="g3"></canvas></div></div></div></div>
  <div class="col-md-6 col-xl-4"><div class="card chart-card"><div class="card-body"><h6 class="small fw-bold">Órdenes diarias del mes</h6><div class="chart-wrap"><canvas id="g4"></canvas></div></div></div></div>
  <div class="col-md-6 col-xl-4"><div class="card chart-card"><div class="card-body"><h6 class="small fw-bold">Costo por área</h6><div class="chart-wrap"><canvas id="g5"></canvas></div></div></div></div>
  <div class="col-md-6 col-xl-4"><div class="card chart-card"><div class="card-body"><h6 class="small fw-bold">Top 10 responsables</h6><div class="chart-wrap"><canvas id="g6"></canvas></div></div></div></div>
  <div class="col-md-6 col-xl-4"><div class="card chart-card"><div class="card-body"><h6 class="small fw-bold">Por prioridad</h6><div class="chart-wrap"><canvas id="g7"></canvas></div></div></div></div>
  <div class="col-md-6 col-xl-4"><div class="card chart-card"><div class="card-body"><h6 class="small fw-bold">Top 10 equipos</h6><div class="chart-wrap"><canvas id="g8"></canvas></div></div></div></div>
  <div class="col-md-6 col-xl-4"><div class="card chart-card"><div class="card-body"><h6 class="small fw-bold">Tendencia 12 meses (cantidad)</h6><div class="chart-wrap"><canvas id="g9"></canvas></div></div></div></div>
  <div class="col-md-6 col-xl-4"><div class="card chart-card"><div class="card-body"><h6 class="small fw-bold">Costo mensual 12 meses</h6><div class="chart-wrap"><canvas id="g10"></canvas></div></div></div></div>
</div>

@push('scripts_inline')
const _g1 = @json($g_estados);
const _g2 = @json($g_areas);
const _g3 = @json($g_clase);
const _g4 = @json($g_diaria);
const _g5 = @json($g_costo_area);
const _g6 = @json($g_responsables);
const _g7 = @json($g_prioridad);
const _g8 = @json($g_equipos);
const _g9 = @json($g_mensual);
const _g10 = _g9;

function chart(id, type, labels, data, colors=null, label='Total') {
  const el = document.getElementById(id); if (!el) return;
  const palette = ['#1565C0','#0D47A1','#FFC107','#198754','#dc3545','#6f42c1','#0dcaf0','#fd7e14','#20c997','#6c757d'];
  return new Chart(el, {
    type,
    data: { labels, datasets: [{ label, data, backgroundColor: colors || palette, borderColor: type==='line'?'#1565C0':undefined, borderWidth: type==='line'?2:0, tension: 0.25, fill: type==='line' }] },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: ['doughnut','pie'].includes(type), position: 'bottom', labels: { boxWidth: 10, font: { size: 10 } } }
      },
      scales: ['doughnut','pie'].includes(type) ? {} : {
        x: { ticks: { font: { size: 9 }, maxRotation: 45, minRotation: 0 } },
        y: { ticks: { font: { size: 9 } }, beginAtZero: true }
      }
    }
  });
}
chart('g1','doughnut', _g1.map(x=>x.nombre||'—'), _g1.map(x=>+x.total), _g1.map(x=>x.color||'#999'));
chart('g2','bar', _g2.map(x=>x.nombre||'—'), _g2.map(x=>+x.total));
chart('g3','pie', _g3.map(x=>x.clase), _g3.map(x=>+x.total), ['#0d6efd','#dc3545']);
chart('g4','line', _g4.map(x=>x.dia), _g4.map(x=>+x.total));
chart('g5','bar', _g5.map(x=>x.nombre), _g5.map(x=>+x.costo));
chart('g6','bar', _g6.map(x=>x.nombre), _g6.map(x=>+x.total));
chart('g7','doughnut', _g7.map(x=>x.nombre||'—'), _g7.map(x=>+x.total), _g7.map(x=>x.color||'#999'));
chart('g8','bar', _g8.map(x=>x.nombre), _g8.map(x=>+x.total));
chart('g9','line', _g9.map(x=>x.mes), _g9.map(x=>+x.total));
chart('g10','line', _g10.map(x=>x.mes), _g10.map(x=>+x.costo));
@endpush
@endsection