@push('scripts')
    <script>
        /**
         * Открывает всплывающее окно для локации
         */
        const openMap = (name, id, width = 640, height = 480) => {
            const url = `/${name}/index/id/${id}`;
            const windowName = `${name}_window_${id}`;
            const features = `width=${width},height=${height},scrollbars=yes,resizable=yes`;

            window.open(url, windowName, features);
        };
    </script>
@endpush
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Концертные площадки') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <!-- Сюда вставляйте вашу таблицу или данные -->
                    <div class="p-6 text-gray-900">
                        <table class="min-w-full border">
                            <thead>
                            <tr class="bg-gray-100">
                                <th class="border p-2">ID</th>
                                <th class="border p-2">Название</th>
                                <th class="border p-2">Адрес</th>
                                <th class="border p-2 w-48">Телефон</th>
                                <th class="border p-2 ">Карта</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($places as $place)
                                <tr>
                                    <td class="border p-2">{{ $place->id }}</td>
                                    <td class="border p-2">
                                        <a class="text-indigo-600 hover:text-indigo-900 transition-colors"
                                           href="{{ $place->url }}">{{ $place->name }}</a>
                                    </td>
                                    <td class="border p-2">{{ $place->address }}</td>
                                    <td class="border p-2">{{ $place->phone }}</td>
                                    <td class="p-2 border text-center w-12">
                                        <a href="#" title="Показать на карте"
                                           class="text-gray-500 hover:text-blue-600 transition-colors flex items-center justify-center"
                                           onclick="openMap('map', {{ $place->id }}); return false;">
                                            <svg class="size-6 w-5 h-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" />
                                            </svg>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

                        <div class="mt-4 flex justify-start pagination-wrapper">
                            {{ $places->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

<style>
    /* Прямая правка стилей без компиляции Tailwind */
    nav[role="navigation"] div,
    nav[role="navigation"] a,
    nav[role="navigation"] span {
        background-color: white !important;
        color: #374151 !important; /* Серый текст */
        border-color: #e5e7eb !important; /* Светлая рамка */
    }
</style>