{{--
@php
    $buildings = \App\Models\Flat::select('building')->groupBy('building')->get();
@endphp

@foreach ($buildings as $b)
    <div id="building_{{ $b->building }}">
        <a href="?building={{ $b->building }}">{{ $b->building }}</a>
    </div>
@endforeach
--}}

@php
    $buildings = [
        [
            'name' => 'A',
            'status' => 'free',
            'tooltip_text' => 'Még 14 lakás elérhető ebben az épületben.',
            'svg_code' =>
                'M378.5,295c120.7,0,218.5,97.8,218.5,218.5s-97.8,218.5-218.5,218.5-218.5-97.8-218.5-218.5,97.8-218.5,218.5-218.5Z',
        ],
        [
            'name' => 'B',
            'status' => 'free',
            'tooltip_text' => 'Még 8 lakás elérhető ebben az épületben.',
            'svg_code' => 'M769,305h402v402h-402v-402Z',
        ],
        [
            'name' => 'C',
            'status' => 'sold',
            'tooltip_text' => 'Minden lakás elkelt az épületben.',
            'svg_code' => 'M1556.5,315l220.4,381.8h-440.8l220.4-381.8Z',
        ],
    ];
@endphp


<div class="relative border border-iron/50">
    <svg width="1920" height="1080" viewBox="0 0 1920 1080" class="absolute inset-0 z-10 w-full h-full">
        @foreach ($buildings as $building)
            @if ($building['status'] === 'free')
                <a href="?building={{ $building['name'] }}">
                    <path d="{{ $building['svg_code'] }}" fill="transparent"
                        data-template="{{ 'template-' . $building['name'] }}"
                        class="tooltip-virtual fill-mantis hover:fill-laurel" />
                </a>
            @endif
            @if ($building['status'] === 'reserved')
                <path d="{{ $building['svg_code'] }}" fill="transparent"
                    data-template="{{ 'template-' . $building['name'] }}" class="tooltip-virtual fill-iron" />
            @endif
            @if ($building['status'] === 'sold')
                <path d="{{ $building['svg_code'] }}" fill="transparent"
                    data-template="{{ 'template-' . $building['name'] }}" class="tooltip-virtual fill-red-500" />
            @endif
        @endforeach
    </svg>
    <img src="{{ asset('kepek/sitebuild/virtual-search/buildings.jpg') }}" alt="" width="1920" height="1080">
</div>


<div class="hidden">
    @foreach ($buildings as $building)
        <div id="{{ 'template-' . $building['name'] }}">
            <p class="mb-4 text-lg font-bold font-headline text-laurel lg:text-xl">{{ $building['name'] }} épület</p>
            <p>{{ $building['tooltip_text'] }}</p>
        </div>
    @endforeach
</div>


@push('scripts')
    @vite(['resources/js/tooltip.js'])
@endpush