CABM-IT/resources/views/components/locations/⚡index.blade.php

<?php

use App\Models\Organization;
use Livewire\Attributes\Url;
use Livewire\Component;
use Livewire\WithPagination;

new class extends Component
{
    use WithPagination;

    public Organization $organization;

    #[Url]
    public string $search = '';

    public function delete(int $locationId): void
    {
        $location = $this->organization->locations()->findOrFail($locationId);
        $location->delete();

        session()->flash('status', "Site \"{$location->name}\" supprimé.");
    }

    public function with(): array
    {
        return [
            'locations' => $this->organization->locations()
                ->when($this->search, fn ($query) => $query->where(function ($q) {
                    $q->where('name', 'like', "%{$this->search}%")
                        ->orWhere('city', 'like', "%{$this->search}%");
                }))
                ->orderByDesc('is_primary')
                ->orderBy('name')
                ->paginate(15),
            'mappedLocations' => $this->organization->locations()
                ->whereNotNull('latitude')
                ->whereNotNull('longitude')
                ->orderBy('name')
                ->get(['id', 'name', 'city', 'latitude', 'longitude'])
                ->map(fn ($location) => [
                    'name' => $location->name,
                    'city' => $location->city,
                    'latitude' => $location->latitude,
                    'longitude' => $location->longitude,
                    'edit_url' => route('organizations.locations.edit', [$this->organization, $location]),
                ]),
        ];
    }
};
?>

<div>
    <div class="mb-6 flex items-center justify-between">
        <div>
            <p class="text-sm text-slate-500">{{ $organization->name }}</p>
            <h1 class="text-2xl font-semibold text-slate-900">Sites</h1>
        </div>
        <a href="{{ route('organizations.locations.create', $organization) }}"
           class="rounded bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">
            + Nouveau site
        </a>
    </div>

    @if ($mappedLocations->isNotEmpty())
        <div class="mb-6 h-80 w-full overflow-hidden rounded border border-slate-200"
             x-data="sitesMap(@js($mappedLocations))" wire:ignore></div>
    @endif

    <input type="text" wire:model.live.debounce.300ms="search" placeholder="Filtrer par nom ou ville..."
           class="mb-4 w-full max-w-sm rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">

    <div class="overflow-x-auto rounded border border-slate-200 bg-white">
        <table class="min-w-full divide-y divide-slate-200 text-sm">
            <thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
                <tr>
                    <th class="px-4 py-3">Nom</th>
                    <th class="px-4 py-3">Ville</th>
                    <th class="px-4 py-3">Pays</th>
                    <th class="px-4 py-3">Téléphone</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse ($locations as $location)
                    <tr wire:key="loc-{{ $location->id }}">
                        <td class="px-4 py-3">
                            <a href="{{ route('organizations.locations.edit', [$organization, $location]) }}"
                               class="font-medium text-slate-900 hover:underline">
                                {{ $location->name }}
                            </a>
                            @if ($location->is_primary)
                                <span class="ml-2 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">Principal</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-slate-600">{{ $location->city ?? '—' }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $location->country ?? '—' }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $location->phone ?? '—' }}</td>
                        <td class="px-4 py-3 text-right whitespace-nowrap">
                            <a href="{{ route('organizations.locations.edit', [$organization, $location]) }}" class="text-slate-500 hover:text-slate-900">Modifier</a>
                            <button type="button"
                                    wire:click="delete({{ $location->id }})"
                                    wire:confirm="Supprimer ce site ? Cette action est irréversible."
                                    class="ml-3 text-red-500 hover:text-red-700">
                                Supprimer
                            </button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-4 py-6 text-center text-slate-400">Aucun site pour le moment.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4">
        {{ $locations->links() }}
    </div>
</div>

@once
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script>
        (function () {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
            link.integrity = 'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=';
            link.crossOrigin = '';
            document.head.appendChild(link);

            // Leaflet normally auto-detects its marker image path by scanning
            // <link> tags already in the document when leaflet.js runs — but
            // that link is injected above, after leaflet.js has loaded, so
            // detection fails. Point the icons at the CDN explicitly instead.
            delete L.Icon.Default.prototype._getIconUrl;
            L.Icon.Default.mergeOptions({
                iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
                iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
                shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
            });
        })();

        function sitesMap(locations) {
            return {
                init() {
                    const map = L.map(this.$el);

                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                        maxZoom: 19,
                    }).addTo(map);

                    const markers = locations.map(loc => {
                        const marker = L.marker([loc.latitude, loc.longitude]).addTo(map);

                        const link = document.createElement('a');
                        link.href = loc.edit_url;
                        link.className = 'font-medium text-slate-900 hover:underline';
                        link.textContent = loc.city ? `${loc.name} — ${loc.city}` : loc.name;
                        marker.bindPopup(link);

                        return marker;
                    });

                    if (markers.length === 1) {
                        map.setView(markers[0].getLatLng(), 14);
                    } else {
                        map.fitBounds(L.featureGroup(markers).getBounds().pad(0.2));
                    }
                },
            };
        }
    </script>
@endonce