198 lines
No EOL
10 KiB
PHP
198 lines
No EOL
10 KiB
PHP
<div>
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-syncopate text-accent-blue">MANAGE DISHES</h1>
|
|
<button wire:click="create"
|
|
class="py-2 px-4 bg-primary text-white text-xl rounded hover:bg-secondary transition-colors duration-200">
|
|
Add Dish
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Flash Messages -->
|
|
@if (session()->has('success'))
|
|
<div class="border-2 border-success text-success rounded p-4 mb-6">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if (session()->has('error'))
|
|
<div class="border-2 border-danger text-danger rounded p-4 mb-6">
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Dishes List -->
|
|
<div class="space-y-4">
|
|
@forelse ($dishes as $dish)
|
|
<div class="w-full border-2 border-secondary p-4 rounded">
|
|
<div class="flex justify-between items-start">
|
|
<div class="flex-1">
|
|
<h3 class="text-lg font-bold text-gray-100 mb-2">{{ $dish->name }}</h3>
|
|
|
|
<!-- Assigned Users -->
|
|
<div class="flex flex-wrap gap-2">
|
|
@forelse($dish->users as $user)
|
|
<span class="inline-flex items-center px-2 py-1 bg-primary text-white rounded-full text-sm">
|
|
<div class="w-6 h-6 bg-white text-primary rounded-full flex items-center justify-center text-xs font-bold mr-2">
|
|
{{ strtoupper(substr($user->name, 0, 1)) }}
|
|
</div>
|
|
{{ $user->name }}
|
|
</span>
|
|
@empty
|
|
<span class="text-gray-400 text-sm">No users assigned</span>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex space-x-2 ml-4">
|
|
<button wire:click="edit({{ $dish->id }})"
|
|
class="px-3 py-1 bg-accent-blue text-gray-900 rounded hover:bg-secondary transition-colors duration-200">
|
|
Edit
|
|
</button>
|
|
<button wire:click="confirmDelete({{ $dish->id }})"
|
|
class="px-3 py-1 bg-danger text-white rounded hover:bg-red-700 transition-colors duration-200">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="text-center text-gray-300 py-8">
|
|
<p>No dishes found.</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="mt-6">
|
|
{{ $dishes->links() }}
|
|
</div>
|
|
|
|
<!-- Create Dish Modal -->
|
|
@if($showCreateModal)
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div class="bg-gray-600 border-2 border-secondary rounded-lg p-6 w-full max-w-md mx-4">
|
|
<h2 class="text-xl text-accent-blue mb-4">Add New Dish</h2>
|
|
|
|
<form wire:submit="store">
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-2">Dish Name</label>
|
|
<input wire:model="name"
|
|
type="text"
|
|
class="w-full p-2 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue"
|
|
placeholder="Enter dish name">
|
|
@error('name') <span class="text-danger text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium mb-2">Assign to Users</label>
|
|
<div class="space-y-2 max-h-40 overflow-y-auto border border-secondary rounded p-3 bg-gray-700">
|
|
@foreach($users as $user)
|
|
<label class="flex items-center">
|
|
<input type="checkbox"
|
|
wire:model="selectedUsers"
|
|
value="{{ $user->id }}"
|
|
class="rounded border-secondary bg-gray-600 text-primary focus:ring-accent-blue mr-2">
|
|
<div class="flex items-center">
|
|
<div class="w-6 h-6 bg-primary rounded-full flex items-center justify-center text-white text-xs font-bold mr-2">
|
|
{{ strtoupper(substr($user->name, 0, 1)) }}
|
|
</div>
|
|
{{ $user->name }}
|
|
</div>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
@error('selectedUsers') <span class="text-danger text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button"
|
|
wire:click="cancel"
|
|
class="px-4 py-2 border-2 border-secondary text-gray-100 rounded hover:bg-gray-700 transition-colors duration-200">
|
|
Cancel
|
|
</button>
|
|
<button type="submit"
|
|
class="px-4 py-2 bg-primary text-white rounded hover:bg-secondary transition-colors duration-200">
|
|
Create Dish
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Edit Dish Modal -->
|
|
@if($showEditModal && $editingDish)
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div class="bg-gray-600 border-2 border-secondary rounded-lg p-6 w-full max-w-md mx-4">
|
|
<h2 class="text-xl text-accent-blue mb-4">Edit Dish</h2>
|
|
|
|
<form wire:submit="update">
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-2">Dish Name</label>
|
|
<input wire:model="name"
|
|
type="text"
|
|
class="w-full p-2 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue">
|
|
@error('name') <span class="text-danger text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium mb-2">Assign to Users</label>
|
|
<div class="space-y-2 max-h-40 overflow-y-auto border border-secondary rounded p-3 bg-gray-700">
|
|
@foreach($users as $user)
|
|
<label class="flex items-center">
|
|
<input type="checkbox"
|
|
wire:model="selectedUsers"
|
|
value="{{ $user->id }}"
|
|
class="rounded border-secondary bg-gray-600 text-primary focus:ring-accent-blue mr-2">
|
|
<div class="flex items-center">
|
|
<div class="w-6 h-6 bg-primary rounded-full flex items-center justify-center text-white text-xs font-bold mr-2">
|
|
{{ strtoupper(substr($user->name, 0, 1)) }}
|
|
</div>
|
|
{{ $user->name }}
|
|
</div>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
@error('selectedUsers') <span class="text-danger text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button"
|
|
wire:click="cancel"
|
|
class="px-4 py-2 border-2 border-secondary text-gray-100 rounded hover:bg-gray-700 transition-colors duration-200">
|
|
Cancel
|
|
</button>
|
|
<button type="submit"
|
|
class="px-4 py-2 bg-primary text-white rounded hover:bg-secondary transition-colors duration-200">
|
|
Update Dish
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Delete Dish Modal -->
|
|
@if($showDeleteModal && $deletingDish)
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div class="bg-gray-600 border-2 border-secondary rounded-lg p-6 w-full max-w-md mx-4">
|
|
<h2 class="text-xl text-danger mb-4">Delete Dish</h2>
|
|
<p class="text-gray-100 mb-6">
|
|
Are you sure you want to delete <strong>{{ $deletingDish->name }}</strong>? This action cannot be undone.
|
|
</p>
|
|
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button"
|
|
wire:click="cancel"
|
|
class="px-4 py-2 border-2 border-secondary text-gray-100 rounded hover:bg-gray-700 transition-colors duration-200">
|
|
Cancel
|
|
</button>
|
|
<button wire:click="delete"
|
|
class="px-4 py-2 bg-danger text-white rounded hover:bg-red-700 transition-colors duration-200">
|
|
Delete Dish
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div> |