@extends('layouts.goberdata')

@section('title', $title ?? 'GoberData')
@section('page_title', $title ?? 'Panel')
@section('page_sub', $subtitle ?? '')

@push('styles')
<link rel="preload" href="{{ url('/js/demo-campaign.json') }}" as="fetch" crossorigin="">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="">
<style>
  #view { min-height: 420px; }
  #mapa {
    height: 520px; width: 100%; min-height: 520px;
    border-radius: var(--r-lg); overflow: hidden;
    border: 1px solid var(--line-soft); background: var(--ink-3);
  }
  #mapa .leaflet-container { width: 100% !important; height: 520px !important; }
  #mapa img.leaflet-tile, .leaflet-tile-container img {
    max-width: none !important; max-height: none !important;
    width: 256px !important; height: 256px !important;
  }
  #mapa canvas { max-width: none !important; max-height: none !important; }
  .qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
  .qr-box { background: #fff; border-radius: 6px; display: grid; place-items: center; overflow: hidden; }
  .qr-box svg { display: block; }
</style>
@endpush

@section('content')
<div id="view">
  <div class="empty" style="padding:40px">Cargando {{ $title ?? $view }}…</div>
</div>
<div id="toastWrap" class="toast-wrap"></div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
<script>
  window.__GD_BASE__ = @json(url(''));
  window.__GD_TITLES__ = @json($titles ?? []);
  window.__GD_ROLE__ = @json($roleHint ?? 'candidato');
</script>
<script src="{{ url('/js/demo-runtime.js') }}?v={{ filemtime(public_path('js/demo-runtime.js')) }}"></script>
<script>
(function () {
  const aliases = @json(config('goberdata_menu.aliases', []));
  let roleHint = 'candidato';
  try {
    const u = JSON.parse(localStorage.getItem('user') || '{}');
    const roles = u.roles || (u.role ? [u.role] : []);
    let raw = (roles[0] || u.role || '').toLowerCase();
    roleHint = aliases[raw] || raw || 'candidato';
    const email = (u.email || '').toLowerCase();
    if (email.includes('territorial')) roleHint = 'territorial';
    if (email.includes('gerente')) roleHint = 'gerente';
    if (email.includes('candidato')) roleHint = 'candidato';
    if (email.includes('voluntario')) roleHint = 'voluntario';
    if (email.includes('tesorero')) roleHint = 'tesorero';
    if (email.includes('digital')) roleHint = 'digital';
    if (email.includes('auditor')) roleHint = 'auditor';
    if (email.includes('superadmin')) roleHint = 'superadmin';
  } catch (_) {}
  bootLaravelDemo(@json($view), roleHint).catch(err => {
    document.getElementById('view').innerHTML =
      '<div class="alert a-bad"><div class="alert-t">No se pudo cargar el módulo</div><div class="alert-d">' +
      String(err.message || err) + '</div></div>';
  });
})();
</script>
@endpush