@php
    $mapa = \App\Models\MapVersion::ativa();

@endphp

<div
    x-data="{
        x: $wire.$entangle('data.x'),
        y: $wire.$entangle('data.y'),

        marcar(e) {
            const r = $refs.planta.getBoundingClientRect();
            this.x = +(((e.clientX - r.left) / r.width) * 100).toFixed(2);
            this.y = +(((e.clientY - r.top) / r.height) * 100).toFixed(2);
        },
    }"
    class="space-y-2"
>
    <div class="relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700 select-none">
        <img
            x-ref="planta"
            src="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($mapa->arquivo) }}"
            alt="Planta do clube"
            class="block w-full cursor-crosshair"
            draggable="false"
            @click="marcar($event)"
        >

        {{-- marcador em forma de gota, igual ao do site --}}
        <div
            class="pointer-events-none absolute"
            x-show="x !== null && x !== '' && y !== null && y !== ''"
            :style="`left:${x}%; top:${y}%; transform: translate(-50%, -100%)`"
        >
            <div
                class="h-5 w-5 rotate-45 border-2 border-white shadow-lg"
                style="background:#0F2091; border-radius:50% 50% 4px 50%"
            ></div>
        </div>
    </div>

    <p class="text-sm text-gray-500 dark:text-gray-400">
        Clique na planta para mover o marcador — ou ajuste os valores abaixo.
        <span x-show="x !== null && x !== ''" class="font-medium">
            Posição atual: <span x-text="x"></span>% / <span x-text="y"></span>%
        </span>
    </p>
</div>