@extends('layouts.public')

@section('content')
<main class="doc-body" role="main" data-navigation-section="body">
  {{-- Hero / título --}}
  <div class="hero-wrapper">
    <div class="hero-content">
      <div class="container text-center">
        <div class="text-sm uppercase tracking-wide text-gray-500">Sección de Proyecto</div>
        <h1 class="text-3xl font-semibold mt-2">{{ $project->name }}</h1>
        <div class="mt-1 text-gray-500">
          {{ $section->name }}
          @if($project->location) · {{ $project->location }} @endif
        </div>
      </div>
    </div>
  </div>

  <div class="wrapper-maplayout-bg">
    <div class="section-maplayout pb-5">
      <div class="container">
        <div class="title main-text text-center mb-4 pt-3">
          {{ $section->description ?? 'Explora esta sección y elige tu fractional' }}
        </div>
      </div>

      <div class="position-relative">
        {{-- Leyenda --}}
        <div class="position-absolute legend-accordion">
          <div class="legend-card">
            <div class="legend-body">
              Pulsa las zonas con colores para ver el fractional.
              <div class="mt-2 space-y-1">
                <div><span class="legend-circle legend--available"></span> Disponible</div>
                <div><span class="legend-circle legend--reserved"></span> Apartado</div>
                <div><span class="legend-circle legend--sold"></span> Vendido</div>
                <div><span class="legend-circle legend--unavailable"></span> No disponible</div>
              </div>
            </div>
          </div>
        </div>

        {{-- Mapa SVG del Section --}}
        <div class="map-svg-wrapper">
          {{-- IMPORTANTE: incluye xmlns:xlink para que <a> funcione en SVG en todos los navegadores --}}
          <svg class="map-svg"
               viewBox="{{ $section->viewbox ?? '0 0 1600 900' }}"
               xmlns="http://www.w3.org/2000/svg"
               xmlns:xlink="http://www.w3.org/1999/xlink"
               role="img"
               aria-label="Mapa de la sección {{ $section->name }}">
            <defs>
              {{-- Sombras/Hover --}}
              <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
                <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
                <feMerge>
                  <feMergeNode in="coloredBlur"/>
                  <feMergeNode in="SourceGraphic"/>
                </feMerge>
              </filter>
            </defs>

            @foreach ($fractionals as $f)
              @php
                // Soporta diferentes campos: svg_code (points) o svg_data JSON con {points, ...}
                $points = $f->svg_code
                  ?? ($f->svg_points ?? null)
                  ?? (data_get($f->svg_data, 'points') ?? null);

                $status = $f->status ?? 'available';
                $cls = $statusClasses[$status] ?? 'poly--available';

                // URL al público del fractional
                $href = route('public.fractionals.show', $f->slug);
              @endphp

              @if ($points)
                {{-- Anchor dentro del SVG: el <a> envuelve al <polygon>. --}}
                <a xlink:href="{{ $href }}" href="{{ $href }}" target="_blank">
                  <polygon
                    points="{{ is_array($points) ? implode(' ', $points) : $points }}"
                    class="poly {{ $cls }}"
                    data-name="{{ $f->name }}"
                    data-status="{{ $status }}"
                    data-price="{{ $f->price ?? '' }}"
                    data-area="{{ $f->area ?? '' }}"
                    filter="url(#glow)">
                    {{-- Tooltip accesible nativo --}}
                    <title>
                      {{ $f->name }}
                      @if(!empty($f->area)) · {{ number_format($f->area, 2) }} m² @endif
                      @if(!empty($f->price)) · ${{ number_format($f->price, 0) }} MXN @endif
                      · {{ strtoupper($status) }}
                    </title>
                  </polygon>
                </a>
              @endif
            @endforeach
          </svg>
        </div>
      </div>
    </div>
  </div>

  {{-- Panel flotante de datos (opcional) --}}
  <div id="hover-card" class="hover-card hidden" aria-hidden="true"></div>
</main>
@endsection

@push('styles')
<style>
  .legend-card{background:#fff;border-radius:.75rem;box-shadow:0 10px 25px rgba(0,0,0,.08);padding:.75rem 1rem}
  .legend-circle{display:inline-block;width:12px;height:12px;border-radius:9999px;margin-right:.4rem;vertical-align:middle}
  .legend--available{background:#22c55e}
  .legend--reserved{background:#f59e0b}
  .legend--sold{background:#ef4444}
  .legend--unavailable{background:#9ca3af}

  .map-svg-wrapper{position:relative;overflow:hidden}
  .map-svg{width:100%;height:auto;display:block;background:linear-gradient(180deg,#f8fafc, #fff)}
  .poly{cursor:pointer;stroke:#111827;stroke-width:1.2;transition:opacity .15s ease, transform .15s ease}
  .poly:hover{opacity:.9}
  .poly--available{fill:rgba(34,197,94,.35)}
  .poly--reserved{fill:rgba(245,158,11,.35)}
  .poly--sold{fill:rgba(239,68,68,.35);cursor:not-allowed}
  .poly--unavailable{fill:rgba(156,163,175,.35);cursor:not-allowed}

  .hover-card{
    position:fixed;pointer-events:none;z-index:40;
    background:#0b1220;color:#fff;padding:.6rem .75rem;border-radius:.5rem;
    box-shadow:0 10px 30px rgba(2,6,23,.35);font-size:.85rem;line-height:1.2
  }
  .hidden{display:none}
</style>
@endpush

@push('scripts')
<script>
(function() {
  const card = document.getElementById('hover-card');
  const svg = document.querySelector('.map-svg');

  if (!svg || !card) return;

  // Hover tooltip ligero
  svg.addEventListener('mousemove', (e) => {
    const target = e.target.closest('.poly');
    if (!target) { card.classList.add('hidden'); return; }

    const name = target.dataset.name || 'Fractional';
    const status = (target.dataset.status || '').toUpperCase();
    const area = target.dataset.area ? `${Number(target.dataset.area).toLocaleString()} m²` : '';
    const price = target.dataset.price ? `$${Number(target.dataset.price).toLocaleString('es-MX')} MXN` : '';

    card.innerHTML = `
      <strong>${name}</strong><br>
      ${area ? area + ' · ' : ''}${price ? price + ' · ' : ''}${status}
    `;
    card.style.left = (e.clientX + 16) + 'px';
    card.style.top  = (e.clientY + 16) + 'px';
    card.classList.remove('hidden');
  });

  svg.addEventListener('mouseleave', () => card.classList.add('hidden'));

  // Evita click en vendidos/no disponibles
  svg.addEventListener('click', (e) => {
    const poly = e.target.closest('.poly');
    if (!poly) return;
    const status = poly.dataset.status || 'available';
    if (status === 'sold' || status === 'unavailable') {
      e.preventDefault();
      e.stopPropagation();
    }
  });
})();
</script>
@endpush