@extends('layout.main')
@section('content')
@php
    $money = function ($v) { return '$' . number_format((float) $v, 2); };
    $delta = function ($now, $before) { return $before > 0 ? round(100 * ($now - $before) / $before, 1) : null; };
    $m = $data['month'];
    $dm = $delta($m['net'], $m['prev']);
    $dt = $delta($data['today']['total'], $data['yesterday']['total']);
    $r = $data['reservations'];
    $goal = $data['goal'];
    $isAdmin = Auth::user()->isAdminOrOwner();
    $firstName = explode(' ', trim(Auth::user()->name))[0];
    // Resumen del día: lo arma el software con reglas fijas (sin IA).
    $summary = [];
    $summary[] = $data['today']['count']
        ? 'Hoy llevas <strong>' . $money($data['today']['total']) . '</strong> en ' . $data['today']['count'] . ($data['today']['count'] == 1 ? ' venta' : ' ventas')
            . ($dt !== null ? ', ' . abs($dt) . '% ' . ($dt >= 0 ? 'más' : 'menos') . ' que ayer.' : '.')
        : 'Hoy todavía no hay ventas registradas' . ($data['yesterday']['count'] ? ' (ayer: ' . $money($data['yesterday']['total']) . ').' : '.');
    if ($dm !== null)
        $summary[] = 'En ' . $m['label'] . ' vas ' . abs($dm) . '% ' . ($dm >= 0 ? 'por encima' : 'por debajo') . ' del mes pasado a esta misma fecha.';
    if ($goal['amount'])
        $summary[] = 'Llevas el <strong>' . $goal['pct'] . '%</strong> de tu meta; a esta fecha lo esperado es ' . $goal['expected_pct'] . '%.';
    $summary[] = count($data['attention']) ? 'Hay <strong>' . count($data['attention']) . '</strong> ' . (count($data['attention']) == 1 ? 'cosa' : 'cosas') . ' que revisar.' : 'Todo está en orden.';
    $maxStore = collect($data['stores'])->max('total') ?: 1;
    $maxTop = collect($data['top'])->max('total') ?: 1;
    $payTotal = array_sum($data['payments']);
    $brand = \App\Services\Brand::settings();
@endphp
<link rel="stylesheet" href="{{ asset('css/centro.css') }}?v={{ @filemtime(public_path('css/centro.css')) }}">
<div class="px-2 pt-2">@include('reservation._alerts')</div>

<div class="cc" id="command-center" data-payload='@json($data)' data-model="{{ asset('models/tienda.glb') }}">
  {{-- ============ HERO ============ --}}
  <section class="cc-hero fx-reveal">
    <div class="cc-aurora" aria-hidden="true"><i></i><i></i><i></i></div>
    <div class="cc-grid-bg" aria-hidden="true"></div>
    <div class="cc-hero-main">
      <div class="cc-hero-top">
        <span class="cc-chip"><span class="cc-live"></span> En vivo · <span data-today-label>{{ now()->format('d/m/Y') }}</span></span>
        @if($warehouses->count() > 1)
        <div class="cc-stores" role="tablist" aria-label="Tienda">
          <a href="{{ url('/?vista=graficos') }}" class="{{ !$warehouse_id ? 'on' : '' }}">Todas</a>
          @foreach($warehouses as $w)
          <a href="{{ url('/?vista=graficos&warehouse_id=' . $w->id) }}" class="{{ $warehouse_id == $w->id ? 'on' : '' }}">{{ preg_replace('/\s*-\s*Entre Tu y Yo$/i', '', $w->name) }}</a>
          @endforeach
        </div>
        @elseif($store)
        <span class="cc-chip"><i class="fa fa-building"></i> {{ $store }}</span>
        @endif
      </div>
      <h1 class="cc-greet"><span data-greeting>Hola</span>, <span class="cc-name">{{ $firstName }}</span></h1>
      <p class="cc-summary">{!! implode(' ', $summary) !!}</p>

      <div class="cc-hero-figures">
        <div class="cc-big">
          <small>Ventas netas de {{ $m['label'] }}{{ $store ? ' · ' . $store : '' }}</small>
          <div class="cc-big-num" data-count="{{ $m['net'] }}" data-money>{{ $money($m['net']) }}</div>
          <div class="cc-big-meta">
            @if($dm !== null)<span class="cc-delta {{ $dm >= 0 ? 'up' : 'down' }}"><i class="fa fa-arrow-{{ $dm >= 0 ? 'up' : 'down' }}"></i> {{ abs($dm) }}%</span> vs. mismo día del mes pasado @endif
            <span class="cc-dot"></span> {{ $m['count'] }} ventas · ticket {{ $money($m['ticket']) }}
          </div>
        </div>
        <div class="cc-goal">
          @if($goal['amount'])
          <svg viewBox="0 0 120 120" class="cc-ring" data-pct="{{ min(100, $goal['pct']) }}" data-expected="{{ $goal['expected_pct'] }}">
            <circle cx="60" cy="60" r="52" class="track"/>
            <circle cx="60" cy="60" r="52" class="expected"/>
            <circle cx="60" cy="60" r="52" class="bar"/>
          </svg>
          <div class="cc-goal-text"><b data-count="{{ $goal['pct'] }}" data-suffix="%">{{ $goal['pct'] }}%</b><small>de la meta<br>{{ $money($goal['amount']) }}</small></div>
          @if($isAdmin)<button type="button" class="cc-goal-edit" data-toggle="modal" data-target="#goal-modal" title="Cambiar meta"><i class="fa fa-pencil"></i></button>@endif
          @elseif($isAdmin)
          <button type="button" class="cc-goal-empty" data-toggle="modal" data-target="#goal-modal"><i class="fa fa-flag-checkered"></i><b>Define tu meta del mes</b><small>y mira tu avance cada día</small></button>
          @endif
        </div>
      </div>

      <div class="cc-actions">
        <a href="{{ route('sale.pos') }}" target="_blank" class="cc-btn primary"><i class="fa fa-th-large"></i> Abrir POS</a>
        @if(!\App\Reservation::missingSchema())<a href="{{ route('reservations.create') }}" class="cc-btn"><i class="fa fa-bookmark"></i> Nueva reserva</a>@endif
        <a href="{{ route('cash-closings.create') }}" class="cc-btn"><i class="fa fa-lock"></i> Cierre de caja</a>
        <button type="button" class="cc-btn ghost" data-open-palette><i class="fa fa-search"></i> Buscar todo <kbd>Ctrl K</kbd></button>
      </div>
    </div>
    <div class="cc-hero-3d" aria-label="Ventas de los últimos 6 meses en 3D">
      <canvas id="cc-3d"></canvas>
      <div class="cc-3d-tip" id="cc-3d-tip"></div>
      <div class="cc-3d-caption">Ventas de los últimos 6 meses · mueve el mouse</div>
    </div>
  </section>

  {{-- ============ KPIs ============ --}}
  <section class="cc-kpis">
    <article class="cc-card fx-card fx-tilt fx-reveal">
      <header><span class="cc-ico"><i class="fa fa-bolt"></i></span>Ventas de hoy</header>
      <div class="cc-num" data-count="{{ $data['today']['total'] }}" data-money>{{ $money($data['today']['total']) }}</div>
      <footer>@if($dt !== null)<span class="cc-delta {{ $dt >= 0 ? 'up' : 'down' }}">{{ $dt >= 0 ? '+' : '−' }}{{ abs($dt) }}%</span> vs. ayer ({{ $money($data['yesterday']['total']) }})@else Ayer: {{ $money($data['yesterday']['total']) }}@endif</footer>
      <svg class="cc-spark" data-spark="daily14" preserveAspectRatio="none"></svg>
    </article>
    <article class="cc-card fx-card fx-tilt fx-reveal">
      <header><span class="cc-ico"><i class="fa fa-shopping-bag"></i></span>Ticket promedio</header>
      <div class="cc-num" data-count="{{ $m['ticket'] }}" data-money>{{ $money($m['ticket']) }}</div>
      <footer>{{ $m['count'] }} ventas en {{ $m['label'] }}</footer>
      <svg class="cc-spark" data-spark="count14" preserveAspectRatio="none"></svg>
    </article>
    <article class="cc-card fx-card fx-tilt fx-reveal">
      <header><span class="cc-ico"><i class="fa fa-hourglass-half"></i></span>Por cobrar en reservas</header>
      @if($r)
      <div class="cc-num" data-count="{{ $r['balance'] }}" data-money>{{ $money($r['balance']) }}</div>
      <footer>{{ $r['active'] }} reservas activas @if($r['overdue'])· <span class="cc-text-bad">{{ $r['overdue'] }} vencidas</span>@endif</footer>
      @else
      <div class="cc-num">—</div><footer>Reservas no instalado</footer>
      @endif
      <a class="cc-card-link" href="{{ route('reservations.index') }}" aria-label="Ver reservas"></a>
    </article>
    <article class="cc-card fx-card fx-tilt fx-reveal">
      <header><span class="cc-ico"><i class="fa fa-exchange"></i></span>Flujo de {{ $m['label'] }}</header>
      <div class="cc-flow">
        <div><small>Entra</small><b class="cc-text-ok" data-count="{{ $data['cash']['in'] }}" data-money>{{ $money($data['cash']['in']) }}</b></div>
        <div><small>Sale</small><b class="cc-text-bad" data-count="{{ $data['cash']['out'] }}" data-money>{{ $money($data['cash']['out']) }}</b></div>
      </div>
      @php $flowMax = max($data['cash']['in'], $data['cash']['out'], 1); @endphp
      <div class="cc-flowbar"><i class="in" style="--w: {{ round(100 * $data['cash']['in'] / $flowMax) }}%"></i><i class="out" style="--w: {{ round(100 * $data['cash']['out'] / $flowMax) }}%"></i></div>
      <footer>Cobros de ventas y abonos vs. pagos a proveedores y gastos</footer>
    </article>
  </section>

  {{-- ============ Gráfico + atención ============ --}}
  <section class="cc-row">
    <article class="cc-card cc-span-8 fx-card fx-reveal">
      <header class="cc-card-head">
        <div><h3>Ventas de los últimos 30 días</h3><small>Pasa el mouse sobre el gráfico · línea punteada = 30 días anteriores</small></div>
        <div class="cc-legend"><span><i class="now"></i>Actual</span><span><i class="prev"></i>Anterior</span></div>
      </header>
      <div class="cc-chart" id="cc-area"><div class="cc-chart-tip"></div></div>
    </article>
    <article class="cc-card cc-span-4 fx-card fx-reveal">
      <header class="cc-card-head"><div><h3>Necesita tu atención</h3><small>Lo importante de hoy</small></div></header>
      @if(count($data['attention']))
      <ul class="cc-attn">
        @foreach($data['attention'] as $a)
        <li><a href="{{ $a['url'] }}"><span class="cc-attn-ico {{ $a['tone'] }}"><i class="fa {{ $a['icon'] }}"></i></span><span>{{ $a['text'] }}</span><i class="fa fa-angle-right"></i></a></li>
        @endforeach
      </ul>
      @else
      <div class="cc-allgood"><svg viewBox="0 0 52 52"><circle cx="26" cy="26" r="24"/><path d="M14 27l8 8 16-17"/></svg><b>Todo en orden</b><small>No hay pendientes urgentes.</small></div>
      @endif
    </article>
  </section>

  {{-- ============ Tiendas, cobros, top ============ --}}
  <section class="cc-row">
    <article class="cc-card cc-span-4 fx-card fx-reveal">
      <header class="cc-card-head"><div><h3>{{ $data['stores'] ? 'Ventas por tienda' : 'Reservas' }}</h3><small>{{ $data['stores'] ? ucfirst($m['label']) . ', hasta hoy' : 'Del activo al paquete entregado' }}</small></div></header>
      @if($data['stores'])
      <ul class="cc-bars">
        @foreach($data['stores'] as $s)
        <li><div class="cc-bars-top"><span>{{ $s['name'] }}</span><b>{{ $money($s['total']) }}</b></div><div class="cc-bars-track"><i style="--w: {{ round(100 * $s['total'] / $maxStore) }}%"></i></div><small>{{ $s['count'] }} ventas</small></li>
        @endforeach
      </ul>
      @elseif($r)
      @include('dashboard._pipeline', ['r' => $r])
      @endif
    </article>
    <article class="cc-card cc-span-4 fx-card fx-reveal">
      <header class="cc-card-head"><div><h3>Formas de cobro</h3><small>Ventas y abonos de {{ $m['label'] }}</small></div></header>
      <div class="cc-donut-wrap">
        <svg viewBox="0 0 160 160" class="cc-donut" id="cc-donut"></svg>
        <div class="cc-donut-center"><small>Total cobrado</small><b data-count="{{ $payTotal }}" data-money>{{ $money($payTotal) }}</b></div>
      </div>
      <ul class="cc-donut-legend">
        @foreach(['efectivo' => 'Efectivo', 'transferencia' => 'Transferencia', 'tarjeta' => 'Tarjeta', 'otros' => 'Otros'] as $k => $label)
        <li><i class="sw-{{ $k }}"></i>{{ $label }}<b>{{ $payTotal > 0 ? round(100 * $data['payments'][$k] / $payTotal) : 0 }}%</b></li>
        @endforeach
      </ul>
    </article>
    <article class="cc-card cc-span-4 fx-card fx-reveal">
      <header class="cc-card-head"><div><h3>Lo más vendido</h3><small>Top 5 de {{ $m['label'] }} por monto</small></div></header>
      @if($data['top'])
      <ol class="cc-top">
        @foreach($data['top'] as $i => $p)
        <li><span class="cc-rank">{{ $i + 1 }}</span><div class="cc-top-main"><div class="cc-bars-top"><span title="{{ $p['code'] }}">{{ $p['name'] }}</span><b>{{ $money($p['total']) }}</b></div>
          <div class="cc-bars-track"><i style="--w: {{ round(100 * $p['total'] / $maxTop) }}%"></i></div><small>{{ (float) $p['qty'] }} unidades</small></div></li>
        @endforeach
      </ol>
      @else
      <p class="cc-empty">Todavía no hay ventas este mes.</p>
      @endif
    </article>
  </section>

  {{-- ============ Reservas + actividad ============ --}}
  <section class="cc-row">
    @if($r && $data['stores'])
    <article class="cc-card cc-span-6 fx-card fx-reveal">
      <header class="cc-card-head"><div><h3>Reservas</h3><small>Del activo al paquete entregado</small></div><a href="{{ route('reservations.index') }}" class="cc-link">Ver todas <i class="fa fa-angle-right"></i></a></header>
      @include('dashboard._pipeline', ['r' => $r])
    </article>
    @endif
    <article class="cc-card {{ $r && $data['stores'] ? 'cc-span-6' : 'cc-span-12' }} fx-card fx-reveal">
      <header class="cc-card-head"><div><h3>Actividad reciente</h3><small>Ventas y abonos</small></div></header>
      @if($data['activity'])
      <ul class="cc-feed">
        @foreach($data['activity'] as $a)
        <li><a href="{{ $a['url'] }}"><span class="cc-feed-ico {{ $a['type'] }}"><i class="fa {{ $a['type'] == 'venta' ? 'fa-shopping-cart' : 'fa-bookmark' }}"></i></span>
          <span class="cc-feed-main"><b>{{ $a['title'] }}</b><small>{{ $a['who'] }} · <time data-ago="{{ \Carbon\Carbon::parse($a['at'])->toIso8601String() }}">{{ \Carbon\Carbon::parse($a['at'])->format('d/m H:i') }}</time></small></span>
          <span class="cc-feed-amt">{{ $money($a['amount']) }}</span></a></li>
        @endforeach
      </ul>
      @else
      <p class="cc-empty">Sin movimientos todavía.</p>
      @endif
    </article>
  </section>

  <p class="cc-foot">Datos del sistema en tiempo real · ventas sin borradores del ambiente SRI activo · <a href="{{ url('/') }}">Volver al Inicio (radar)</a> · <a href="{{ url('/?clasico=1') }}">Ver tablero clásico</a></p>
</div>

@if($isAdmin)
<div id="goal-modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm" role="document"><div class="modal-content">
    {!! Form::open(['route' => 'dashboard.goal', 'method' => 'post']) !!}
    <div class="modal-header"><h5 class="modal-title"><i class="fa fa-flag-checkered"></i> Meta de {{ $m['label'] }}</h5><button type="button" class="close" data-dismiss="modal">&times;</button></div>
    <div class="modal-body">
      <label><strong>Ventas netas que quieres lograr{{ $store ? ' en ' . $store : '' }}</strong></label>
      <div class="input-group"><div class="input-group-prepend"><span class="input-group-text">$</span></div>
        <input type="number" name="meta" min="0" step="0.01" class="form-control" value="{{ $goal['amount'] }}" placeholder="Ej. 10000" autofocus></div>
      <input type="hidden" name="warehouse_id" value="{{ $warehouse_id }}">
      <small class="text-muted d-block mt-2">Déjala vacía para quitarla. Aplica a todos los meses hasta que la cambies.</small>
    </div>
    <div class="modal-footer"><button class="btn btn-primary btn-block"><i class="fa fa-check"></i> Guardar meta</button></div>
    {!! Form::close() !!}
  </div></div>
</div>
@endif

<script type="importmap">{"imports": {"three": "{{ asset('vendor/three/three.module.min.js') }}", "three/addons/": "{{ asset('vendor/three/addons') }}/"}}</script>
<script src="{{ asset('js/centro.js') }}?v={{ @filemtime(public_path('js/centro.js')) }}"></script>
<script type="module">
  import { mountStore3D } from "{{ asset('js/marca-3d.js') }}?v={{ @filemtime(public_path('js/marca-3d.js')) }}";
  const cc = document.getElementById('command-center');
  const data = JSON.parse(cc.dataset.payload);
  mountStore3D(document.getElementById('cc-3d'), {
    model: cc.dataset.model, bars: data.months, tip: document.getElementById('cc-3d-tip'), mode: 'dashboard'
  });
</script>
@endsection