@extends('layouts.main')

@section('title', 'Топография')

@section('content')

    <script>
        const LAYERS = [
            @foreach($themes as $theme)
            {
                id: '{{ $theme->id }}',
                name: `{{ $theme->title }}`,
                data: {
                    type: 'geojson',
                    data: {
                        type: 'FeatureCollection',
                        features: [
                            @foreach($theme->points as $item)
                            { type: 'Feature', geometry: { type: 'Point', coordinates: [{{ $item->location['lng'] }}, {{ $item->location['lat'] }}] }, properties: { title: `{{ $item->title }}`, description: `{{ $item->description }} <br> @if($item->link)<a href="{{ $item->link }}" target="_blank" style="text-decoration: underline;">Ссылка на ресурс</a>@endif` } },
                            @endforeach
                        ]
                    }
                },
                paint: {
                    'circle-radius': 5,
                    'circle-color': '{{ $theme->color }}'
                }
            },
            @endforeach
        ];
    </script>

<section class="topography">
    <div class="container">
        <h2>Топография</h2>
    </div>
    <div class="map-container">
        <div id="map"></div>
        <div id="legend">
            <div id="symbols" class="accordion">
                <div class="heading">
                    Обозначения
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 284.9 284.9"><path d="M2.8 89.6l133.1 133c1.9 1.9 4.1 2.9 6.6 2.9s4.7-1 6.6-2.9l133-133c1.9-1.9 2.9-4.1 2.9-6.6s-1-4.7-2.9-6.6l-14.3-14.3c-1.9-1.9-4.1-2.9-6.6-2.9s-4.7 1-6.6 2.9L142.5 174.4 30.3 62.2c-1.9-1.9-4.1-2.8-6.6-2.8s-4.7 1-6.6 2.8L2.8 76.5C.9 78.4 0 80.6 0 83.1s.9 4.6 2.8 6.5z"></path></svg>
                </div>
                <div class="panel">
                    <div class="controls">
                        <button class="all">
                            показать все
                        </button>
                        <button class="none">
                            скрыть все
                        </button>
                    </div>
                    <div class="symbol-list"></div>
                </div>
            </div>
        </div>
    </div>
</section>

@vite('resources/js/map.js')

@endsection