@extends('layouts.public')

@section('content')
<main class="doc-body" role="main" data-navigation-section="body">
  <div class="page-choose-lot">
    {{-- Hero / título --}}
    <div class="hero-wrapper">
      <div class="hero-content">
        <div class="container text-center">
          
          <h1 class="text-3xl font-semibold mt-2 title">Sección <b>{{ $section->code }}</b></h1>
          @if($project->location)
            <h2 class="mt-1  title">Proyecto: <b>{{ $project->name }}</b></h2>
          @endif
        </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">
            {{ $project->description ?? 'Explora las secciones del proyecto' }}
          </div>
        </div>

        <div class="position-relative">

          {{-- Leyenda (sin cambios) --}}
          <div class="position-absolute legend-accordion">
            <div class="accordion" id="legend-accordion">
              <div class="card">
                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#legend-accordion">
                  <div class="card-body">
                    Pulsa las zonas con colores para abrir la sección. <br>
                    <div class='mt-2'>
                                            <div>
                                                <span class='circle success'>
                                                </span> Disponible
                                            </div>
                                            <div>
                                                <span class='circle unavailable'>
                                                </span> No disponible
                                            </div>
                                            <div>
                                                <span class='circle reserved'>
                                                </span> Apartado
                                            </div>
                                            <div>
                                                <span class='circle sold'>
                                                </span> Vendido
                                            </div>
                                        </div>
                  </div>
                </div>
                <div class="card-footer" id="headingOne">
                  <button class="btn btn-link btn-block text-right p-0" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    <span>Ocultar</span>
                    <i class="fa fa-chevron-down d-none"></i>
                    <i class="fa fa-chevron-up"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>

          {{-- Controles de zoom --}}
          <div class="maplayout-actions position-absolute">
            <button id="maplayout-zoom-in" type="button" aria-label="Acercar">
              <i class="fas fa-plus"></i>
            </button>
            <button id="maplayout-zoom-out" type="button" aria-label="Alejar">
              <i class="fas fa-minus"></i>
            </button>
          </div>

          <div class="overflow">
            <div id="maplayout-zoom">
              @php
                $sectionImageUrl = $section->image 
                    ? asset('storage/' . ltrim($section->image, '/')) 
                    : null;
              @endphp

              @if($sectionImageUrl)
                <img src="{{ $sectionImageUrl }}" alt="{{ $section->name }}" class="w-100" />
              @else
                <div class="bg-gray-100 text-gray-500 p-10 text-center rounded">
                  Esta sección no tiene imagen cargada.
                </div>
              @endif

              <div id="MediaLayout" class="media-layout">
                {{-- IMPORTANTE: usa el mismo viewBox que tu base de dibujo --}}
                <svg id="MediaLayoutSVG" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px" viewBox="0 -5 1000 1100">
                   @foreach ($fractionals as $f)
                  <a xlink:href="{{ route('fractionals.public', $f) }}">
                    <polygon
                      class="map-polygon"
                      points="{{$f->svg_data}}"

                      data-section-id="{{ $f->id }}"
                      data-code="{{ $f->name }}"
                      {{-- Ajusta el alias de la ruta si es distinto en tu app --}}
                      data-href="{{ route('fractionals.public', $f) }}"
                      {{-- Si no tienes la ruta nombrada, usa el fallback: --}}
                      {{-- data-href="{{ url('/public/fractional/'.$f->id) }}" --}}
                    ></polygon>
                  </a>
                  @endforeach
                </svg>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>

  </div>
</main>

{{-- Estilos mínimos para overlay / interacción --}}

{{-- Zoom + click redirección --}}
<script>
  (function() {
    const zoomWrap = document.getElementById('maplayout-zoom');
    const btnIn = document.getElementById('maplayout-zoom-in');
    const btnOut = document.getElementById('maplayout-zoom-out');
    const svg = document.getElementById('master-map');

    let scale = 1;
    const step = 0.15, min = 0.5, max = 3;

    function applyZoom() {
      zoomWrap.style.transform = 'scale(' + scale + ')';
    }
    btnIn?.addEventListener('click', function() { scale = Math.min(max, scale + step); applyZoom(); });
    btnOut?.addEventListener('click', function() { scale = Math.max(min, scale - step); applyZoom(); });
    applyZoom();

    // Redirección al hacer click en un polígono
    svg.addEventListener('click', function(e) {
      const poly = e.target.closest('.map-polygon');
      if (!poly) return;

      // feedback visual rápido
      svg.querySelectorAll('.map-polygon.active').forEach(p => p.classList.remove('active'));
      poly.classList.add('active');

      const url = poly.getAttribute('data-href');
      if (url) {
        // pequeña demora para que se vea el "active"
        setTimeout(() => { window.location.href = url; }, 80);
      }
    }, { passive: true });

  })();
</script>

<style>
  polygon {
    fill: green;
  }
  </style>

@endsection