131 lines
7.9 KiB
PHP
131 lines
7.9 KiB
PHP
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
|
<div class="container mx-auto py-12 px-4">
|
|
<!-- Header Section -->
|
|
<div class="text-center mb-12">
|
|
<div class="flex items-center justify-center mb-6">
|
|
<a wire:navigate href="{{ route('home') }}" class="text-blue-600 hover:text-blue-700 mr-4">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
|
</svg>
|
|
</a>
|
|
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Sök Ledamöter</h1>
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto mb-8">
|
|
Sök efter riksdagsledamöter genom namn eller parti och utforska deras rösthistorik och uppdrag
|
|
</p>
|
|
</div>
|
|
<!-- Search Form -->
|
|
<div class="bg-white rounded-lg shadow-md border border-gray-200 p-6 mb-8 max-w-4xl mx-auto">
|
|
<form wire:submit.prevent="search" class="flex flex-col md:flex-row gap-4 items-end">
|
|
<div class="flex-1">
|
|
<input id="firstName" type="text" wire:model.defer="firstName"
|
|
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-black"
|
|
placeholder="Förnamn...">
|
|
</div>
|
|
<div class="flex-1">
|
|
<input id="lastName" type="text" wire:model.defer="lastName"
|
|
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-black"
|
|
placeholder="Efternamn...">
|
|
</div>
|
|
<div class="md:w-48">
|
|
<select id="party" wire:model.defer="party"
|
|
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors text-black">
|
|
<option value="" class="text-gray-700">Alla partier</option>
|
|
@foreach ($parties as $partyOption)
|
|
<option class="text-gray-700" value="{{ $partyOption->value }}">{{ $partyOption->label() }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<button type="submit"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-2 rounded-lg font-medium transition-colors duration-200 flex items-center cursor-pointer">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
Sök
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div class="hidden" wire:loading.block wire:target="search">
|
|
<div class="flex justify-center items-center py-16">
|
|
<div class="w-12 h-12 border-4 border-t-blue-600 border-blue-200 rounded-full animate-spin"></div>
|
|
<span class="ml-4 text-gray-600 font-medium">Söker ledamöter...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Section -->
|
|
<div wire:loading.remove>
|
|
@if ($results && isset($results->personlista->person))
|
|
<div class="bg-white rounded-lg shadow-md border border-gray-200 p-6 max-w-4xl mx-auto">
|
|
<div class="flex items-center mb-6">
|
|
<svg class="w-5 h-5 text-green-600 mr-2" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<h2 class="text-xl font-semibold text-gray-900">Sökresultat</h2>
|
|
</div>
|
|
<div class="space-y-4">
|
|
@php
|
|
$persons = $results->personlista->person;
|
|
if (
|
|
!is_array($persons) ||
|
|
(isset($persons->intressent_id) && is_string($persons->intressent_id))
|
|
) {
|
|
$persons = [$persons];
|
|
}
|
|
@endphp
|
|
@foreach ($persons as $person)
|
|
<div
|
|
class="bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition-colors border border-gray-200">
|
|
<div class="flex items-center">
|
|
<img src="{{ $person->bild_url_80 ?? '' }}" alt="{{ $person->tilltalsnamn }}"
|
|
class="w-16 h-16 rounded-lg object-cover mr-4 border border-gray-300">
|
|
<div class="flex-1">
|
|
<a wire:navigate href="{{ route('person.show', $person->intressent_id) }}"
|
|
class="text-xl font-bold text-blue-600 hover:text-blue-700 transition-colors">
|
|
{{ $person->tilltalsnamn }} {{ $person->efternamn }} ({{ $person->parti }})
|
|
</a>
|
|
<div class="text-gray-600 mt-1 flex items-center gap-2">
|
|
<img src="{{ App\Enums\Parties::from($person->parti)->logo() }}"
|
|
width="32">
|
|
{{ $person->valkrets }}
|
|
</div>
|
|
<div class="text-sm text-gray-500 mt-1">{{ $person->status }}</div>
|
|
</div>
|
|
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@elseif ($results && (!isset($results->personlista->person) || empty($results->personlista->person)))
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 max-w-4xl mx-auto">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 text-yellow-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<span class="text-yellow-800 font-medium">Inga ledamöter hittades med de angivna sökkriterier.</span>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|