@extends('layouts.app')
@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

@section('content')
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>Список локаций</h2>
            <a href="{{ route('places.create') }}" class="btn btn-primary">Добавить место</a>
        </div>
            @if(session('success'))
                <div class="alert alert-success border-2 fw-bold mb-4" style="border-color: #0f5132 !important;">
                    {{ session('success') }}
                </div>
            @endif
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Название</th>
                        <th>Адрес</th>
                        <th>Телефон</th>
                        <th>Карта</th>
                        <th>Действия</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($places as $place)
                        <tr class="align-middle">
                            <td>{{ $place->id }}</td>
                            <td><a class="text-indigo-600 hover:text-indigo-900 transition-colors"
                                      href="{{ $place->url }}">{{ $place->name }}</a></td>
                            <td>{{ $place->address ?? '—' }}</td>
                            <td>{{ $place->formattedPhone }}</td>
                            <td class="text-center">
                                <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 xmlns="http://w3.org" width="24" height="24" fill="currentColor" class="bi bi-geo-alt-fill me-2" viewBox="0 0 16 16">
                                        <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6"/>
                                    </svg>
                                </a>
                            </td>
                            <td>
                                <div class="d-flex justify-left gap-2">
                                    <a href="{{ route('places.edit', $place->id) }}" class="btn btn-outline-secondary">Редактировать</a>
                                    <form action="{{ route('places.delete', $place->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Удалить эту локацию?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-outline-danger">Удалить</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-4 text-muted">
                                Локаций пока нет.
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>

        <div class="d-flex justify-left mt-4">
            {{ $places->links() }}
        </div>

    </div>
@endsection