223 lines
12 KiB
PHP
223 lines
12 KiB
PHP
@extends('layouts.vending')
|
|
|
|
@section('title', 'Slot Details')
|
|
|
|
@section('content')
|
|
<div class="max-w-6xl mx-auto px-4">
|
|
<div class="mb-8">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center space-x-4">
|
|
<a href="{{ route('slots.index') }}" class="text-blue-600 hover:text-blue-800">
|
|
← Zurück zur Übersicht
|
|
</a>
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<a href="{{ route('slots.edit', $slot) }}"
|
|
class="inline-flex items-center px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-md hover:bg-purple-700">
|
|
Slot bearbeiten
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<h1 class="text-3xl font-bold text-gray-900">Slot {{ $slot->slot_number }}</h1>
|
|
<p class="text-gray-600 mt-2">{{ $slot->vendingMachine->name }} - {{ $slot->vendingMachine->location }}</p>
|
|
</div>
|
|
|
|
<!-- Slot-Informationen -->
|
|
<div class="bg-white shadow rounded-lg p-6 mb-8">
|
|
<h2 class="text-xl font-semibold text-gray-900 mb-6 border-b border-gray-200 pb-2">
|
|
Slot-Informationen
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Position</label>
|
|
<p class="mt-1 text-sm text-gray-900">{{ $slot->position ?: 'Nicht angegeben' }}</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Kapazität</label>
|
|
<p class="mt-1 text-sm text-gray-900">{{ $slot->capacity }} Produkte</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Status</label>
|
|
<p class="mt-1">
|
|
@if($slot->is_active)
|
|
<span class="inline-flex px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Aktiv</span>
|
|
@else
|
|
<span class="inline-flex px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">Inaktiv</span>
|
|
@endif
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Aktuelles Produkt -->
|
|
@if($slot->products->count() > 0)
|
|
<div class="bg-white shadow rounded-lg p-6 mb-8">
|
|
<h2 class="text-xl font-semibold text-gray-900 mb-6 border-b border-gray-200 pb-2">
|
|
Aktuelles Produkt
|
|
</h2>
|
|
|
|
@foreach($slot->products as $product)
|
|
<div class="flex items-start space-x-4 p-4 bg-blue-50 border border-blue-200 rounded-lg mb-4">
|
|
@if($product->image)
|
|
<img class="h-20 w-20 rounded object-cover" src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}">
|
|
@else
|
|
<div class="h-20 w-20 rounded bg-gray-200 flex items-center justify-center">
|
|
<span class="text-gray-400">📦</span>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="flex-1">
|
|
<h3 class="font-semibold text-blue-900 text-lg">{{ $product->name }}</h3>
|
|
<p class="text-blue-700 text-sm mb-2">{{ $product->description }}</p>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
|
<div>
|
|
<span class="font-medium text-gray-700">Bestand:</span>
|
|
<span class="text-blue-900">{{ $product->pivot->quantity ?? 0 }} Stück</span>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium text-gray-700">Preis:</span>
|
|
<span class="text-blue-900">{{ number_format($product->pivot->current_price ?? $product->price, 2) }}€</span>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium text-gray-700">Kategorie:</span>
|
|
<span class="text-blue-900">{{ $product->category ?: 'Keine' }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium text-gray-700">Status:</span>
|
|
@if(($product->pivot->quantity ?? 0) > 0)
|
|
<span class="text-green-600">Verfügbar</span>
|
|
@else
|
|
<span class="text-red-600">Ausverkauft</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bestand verwalten -->
|
|
<div class="mt-4 p-4 bg-white border rounded-lg">
|
|
<h4 class="font-medium text-gray-900 mb-3">Bestand verwalten</h4>
|
|
<form action="{{ route('slots.update-product', [$slot, $product]) }}" method="POST" class="flex items-end space-x-4">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div>
|
|
<label for="quantity" class="block text-sm font-medium text-gray-700 mb-1">Anzahl</label>
|
|
<input type="number" id="quantity" name="quantity"
|
|
value="{{ $product->pivot->quantity ?? 0 }}"
|
|
min="0" max="{{ $slot->capacity }}"
|
|
class="w-20 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="current_price" class="block text-sm font-medium text-gray-700 mb-1">Preis (€)</label>
|
|
<input type="number" id="current_price" name="current_price"
|
|
value="{{ $product->pivot->current_price ?? $product->price }}"
|
|
min="0" step="0.01"
|
|
class="w-24 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700">
|
|
Aktualisieren
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Produkt entfernen -->
|
|
<div class="mt-3 flex justify-end">
|
|
<form action="{{ route('slots.detach-product', [$slot, $product]) }}" method="POST"
|
|
onsubmit="return confirm('Sind Sie sicher, dass Sie dieses Produkt aus dem Slot entfernen möchten?')">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="text-red-600 hover:text-red-900 text-sm">
|
|
Produkt entfernen
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Produkt hinzufügen -->
|
|
<div class="bg-white shadow rounded-lg p-6">
|
|
<h2 class="text-xl font-semibold text-gray-900 mb-6 border-b border-gray-200 pb-2">
|
|
{{ $slot->products->count() > 0 ? 'Produkt wechseln' : 'Produkt hinzufügen' }}
|
|
</h2>
|
|
|
|
@if($products->count() > 0)
|
|
<form action="{{ route('slots.attach-product', [$slot, 0]) }}" method="POST" id="attach-product-form">
|
|
@csrf
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
|
<div>
|
|
<label for="product_id" class="block text-sm font-medium text-gray-700 mb-2">Produkt auswählen *</label>
|
|
<select id="product_id" name="product_id" required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
|
|
<option value="">Produkt wählen...</option>
|
|
@foreach($products as $product)
|
|
<option value="{{ $product->id }}" data-price="{{ $product->price }}">
|
|
{{ $product->name }} ({{ number_format($product->price, 2) }}€)
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="stock_quantity" class="block text-sm font-medium text-gray-700 mb-2">Anfangsbestand</label>
|
|
<input type="number" id="stock_quantity" name="stock_quantity"
|
|
value="0" min="0" max="{{ $slot->capacity }}"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
|
|
<p class="text-xs text-gray-500 mt-1">Max. {{ $slot->capacity }} Stück</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="price" class="block text-sm font-medium text-gray-700 mb-2">Verkaufspreis (€)</label>
|
|
<input type="number" id="price" name="price"
|
|
min="0" step="0.01" placeholder="0.00"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
|
|
<p class="text-xs text-gray-500 mt-1">Leer = Standardpreis verwenden</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button type="submit"
|
|
class="inline-flex items-center px-6 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700">
|
|
{{ $slot->products->count() > 0 ? 'Produkt wechseln' : 'Produkt hinzufügen' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
@else
|
|
<div class="text-center py-8">
|
|
<p class="text-gray-500 mb-4">Keine Produkte verfügbar. Erstellen Sie zuerst Produkte.</p>
|
|
<a href="{{ route('products.create') }}"
|
|
class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700">
|
|
Neues Produkt erstellen
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('product_id')?.addEventListener('change', function() {
|
|
const selectedOption = this.options[this.selectedIndex];
|
|
const price = selectedOption.getAttribute('data-price');
|
|
if (price) {
|
|
document.getElementById('price').value = price;
|
|
}
|
|
});
|
|
|
|
// Form Action dynamisch anpassen
|
|
document.getElementById('product_id')?.addEventListener('change', function() {
|
|
const productId = this.value;
|
|
const form = document.getElementById('attach-product-form');
|
|
if (productId && form) {
|
|
const baseUrl = form.action.replace('/0', '/' + productId);
|
|
form.action = baseUrl;
|
|
}
|
|
});
|
|
</script>
|
|
@endsection |