mirror of
https://github.com/pacnpal/thrillwiki_laravel.git
synced 2025-12-20 08:51:11 -05:00
109 lines
6.6 KiB
PHP
109 lines
6.6 KiB
PHP
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-xl font-semibold text-gray-900">Areas in {{ $park->name }}</h2>
|
|
<a href="{{ route('parks.areas.create', $park) }}"
|
|
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
<svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Add Area
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Filters and Search -->
|
|
<div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-xl p-4 mb-6">
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
<!-- Search -->
|
|
<div>
|
|
<label for="search" class="block text-sm font-medium text-gray-700">Search</label>
|
|
<div class="mt-1">
|
|
<input type="text" wire:model.live.debounce.300ms="search" id="search"
|
|
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
|
placeholder="Search areas...">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sort -->
|
|
<div>
|
|
<label for="sort" class="block text-sm font-medium text-gray-700">Sort By</label>
|
|
<div class="mt-1">
|
|
<select wire:model.live="sort" id="sort"
|
|
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
|
|
@foreach($sortOptions as $value => $label)
|
|
<option value="{{ $value }}">{{ $label }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Show Closed Toggle -->
|
|
<div class="flex items-center mt-6">
|
|
<label for="showClosed" class="inline-flex relative items-center cursor-pointer">
|
|
<input type="checkbox" wire:model.live="showClosed" id="showClosed" class="sr-only peer">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
|
|
<span class="ml-3 text-sm font-medium text-gray-700">Show Closed Areas</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Areas List -->
|
|
<div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-xl overflow-hidden">
|
|
@if($areas->isEmpty())
|
|
<div class="text-center py-12">
|
|
<h3 class="text-lg font-medium text-gray-900">No areas found</h3>
|
|
<p class="mt-2 text-sm text-gray-500">Try adjusting your search or add a new area.</p>
|
|
</div>
|
|
@else
|
|
<ul role="list" class="divide-y divide-gray-200">
|
|
@foreach($areas as $area)
|
|
<li class="p-4 sm:p-6">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex-1 min-w-0">
|
|
<h3 class="text-lg font-medium text-gray-900 truncate">
|
|
<a href="{{ route('parks.areas.show', ['park' => $park, 'area' => $area]) }}" class="hover:text-indigo-600">
|
|
{{ $area->name }}
|
|
</a>
|
|
</h3>
|
|
@if($area->description)
|
|
<p class="mt-1 text-sm text-gray-500">{{ $area->brief_description }}</p>
|
|
@endif
|
|
<div class="mt-2 flex items-center text-sm text-gray-500 space-x-4">
|
|
@if($area->opening_date)
|
|
<div>
|
|
<svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
Opened: {{ $area->opening_date->format('M Y') }}
|
|
</div>
|
|
@endif
|
|
@if($area->closing_date)
|
|
<div class="text-red-600">
|
|
Closed: {{ $area->closing_date->format('M Y') }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="flex-shrink-0 flex items-center space-x-3">
|
|
<a href="{{ route('parks.areas.edit', ['park' => $park, 'area' => $area]) }}"
|
|
class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
Edit
|
|
</a>
|
|
<button wire:click="deleteArea({{ $area->id }})" wire:confirm="Are you sure you want to delete this area?"
|
|
class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="mt-6">
|
|
{{ $areas->links() }}
|
|
</div>
|
|
</div> |