531 lines
17 KiB
PHP
531 lines
17 KiB
PHP
@extends('layouts.customer')
|
|
|
|
@section('title', 'Edit Event - Admin')
|
|
|
|
@section('content')
|
|
<div class="admin-container">
|
|
<!-- Page Header -->
|
|
<div class="page-header">
|
|
<h1>Edit Event</h1>
|
|
<p class="subtitle">Update event details and view participants</p>
|
|
</div>
|
|
|
|
<div class="content-grid">
|
|
<!-- Event Edit Form -->
|
|
<div class="form-container">
|
|
<h2 class="section-title">Event Details</h2>
|
|
|
|
<form method="POST" action="{{ route('admin.events.update', $event) }}">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<!-- Event Name -->
|
|
<div class="form-group">
|
|
<label for="name">Event Name *</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
class="form-input @error('name') error @enderror"
|
|
value="{{ old('name', $event->name) }}"
|
|
required
|
|
>
|
|
@error('name')
|
|
<span class="error-message">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="form-group">
|
|
<label for="description">Description *</label>
|
|
<textarea
|
|
id="description"
|
|
name="description"
|
|
rows="4"
|
|
class="form-input @error('description') error @enderror"
|
|
required
|
|
>{{ old('description', $event->description) }}</textarea>
|
|
@error('description')
|
|
<span class="error-message">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Event Type -->
|
|
<div class="form-group">
|
|
<label for="type">Event Type *</label>
|
|
<select id="type" name="type" class="form-select @error('type') error @enderror" required>
|
|
<option value="tasting" {{ old('type', $event->type) === 'tasting' ? 'selected' : '' }}>🍷 Wine Tasting</option>
|
|
<option value="harvest_festival" {{ old('type', $event->type) === 'harvest_festival' ? 'selected' : '' }}>🍇 Harvest Festival</option>
|
|
<option value="vineyard_tour" {{ old('type', $event->type) === 'vineyard_tour' ? 'selected' : '' }}>🚶 Vineyard Tour</option>
|
|
</select>
|
|
@error('type')
|
|
<span class="error-message">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Date and Time -->
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="event_date">Event Date *</label>
|
|
<input
|
|
type="date"
|
|
id="event_date"
|
|
name="event_date"
|
|
class="form-input @error('event_date') error @enderror"
|
|
value="{{ old('event_date', $event->event_date->format('Y-m-d')) }}"
|
|
required
|
|
>
|
|
@error('event_date')
|
|
<span class="error-message">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="event_time">Event Time *</label>
|
|
<input
|
|
type="time"
|
|
id="event_time"
|
|
name="event_time"
|
|
class="form-input @error('event_time') error @enderror"
|
|
value="{{ old('event_time', $event->event_time->format('H:i')) }}"
|
|
required
|
|
>
|
|
@error('event_time')
|
|
<span class="error-message">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Capacity and Price -->
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="capacity">Capacity (Max Guests) *</label>
|
|
<input
|
|
type="number"
|
|
id="capacity"
|
|
name="capacity"
|
|
class="form-input @error('capacity') error @enderror"
|
|
value="{{ old('capacity', $event->capacity) }}"
|
|
min="1"
|
|
required
|
|
>
|
|
@error('capacity')
|
|
<span class="error-message">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="price_per_person">Price per Person (€) *</label>
|
|
<input
|
|
type="number"
|
|
id="price_per_person"
|
|
name="price_per_person"
|
|
class="form-input @error('price_per_person') error @enderror"
|
|
value="{{ old('price_per_person', $event->price_per_person) }}"
|
|
min="0"
|
|
step="0.01"
|
|
required
|
|
>
|
|
@error('price_per_person')
|
|
<span class="error-message">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location -->
|
|
<div class="form-group">
|
|
<label for="location">Location</label>
|
|
<input
|
|
type="text"
|
|
id="location"
|
|
name="location"
|
|
class="form-input @error('location') error @enderror"
|
|
value="{{ old('location', $event->location) }}"
|
|
>
|
|
@error('location')
|
|
<span class="error-message">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Status -->
|
|
<div class="form-group">
|
|
<label for="status">Status *</label>
|
|
<select id="status" name="status" class="form-select @error('status') error @enderror" required>
|
|
<option value="upcoming" {{ old('status', $event->status) === 'upcoming' ? 'selected' : '' }}>Upcoming</option>
|
|
<option value="cancelled" {{ old('status', $event->status) === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
|
|
<option value="completed" {{ old('status', $event->status) === 'completed' ? 'selected' : '' }}>Completed</option>
|
|
</select>
|
|
@error('status')
|
|
<span class="error-message">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="form-actions">
|
|
<a href="{{ route('admin.events.index') }}" class="btn-cancel">Cancel</a>
|
|
<button type="submit" class="btn-submit">Update Event</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Participants List -->
|
|
<div class="participants-container">
|
|
<h2 class="section-title">
|
|
Participants
|
|
<span class="participants-count">({{ $event->reservations->where('pivot.status', 'confirmed')->count() }} confirmed)</span>
|
|
</h2>
|
|
|
|
@if($event->reservations->where('pivot.status', 'confirmed')->count() > 0)
|
|
<div class="participants-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-label">Total Guests</div>
|
|
<div class="stat-value">{{ $event->confirmedReservationsCount() }}</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">Available Spots</div>
|
|
<div class="stat-value">{{ $event->availableSpots() }}</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">Total Revenue</div>
|
|
<div class="stat-value">€{{ number_format($event->confirmedReservationsCount() * $event->price_per_person, 2) }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="participants-list">
|
|
@foreach($event->reservations->where('pivot.status', 'confirmed') as $user)
|
|
<div class="participant-card">
|
|
<div class="participant-avatar">
|
|
{{ strtoupper(substr($user->name, 0, 1)) }}
|
|
</div>
|
|
<div class="participant-info">
|
|
<div class="participant-name">{{ $user->name }}</div>
|
|
<div class="participant-email">{{ $user->email }}</div>
|
|
</div>
|
|
<div class="participant-guests">
|
|
<svg style="width: 18px; height: 18px; color: #718096;" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
|
|
</svg>
|
|
<span>{{ $user->pivot->number_of_guests }} {{ $user->pivot->number_of_guests === 1 ? 'guest' : 'guests' }}</span>
|
|
</div>
|
|
<div class="participant-date">
|
|
Reserved: {{ $user->pivot->created_at->format('M j, Y') }}
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<div class="empty-participants">
|
|
<svg style="width: 48px; height: 48px; color: #cbd5e0;" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
|
|
</svg>
|
|
<p>No confirmed reservations yet</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.admin-container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.page-header {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-size: 2.5rem;
|
|
color: #2d3748;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.1rem;
|
|
color: #718096;
|
|
}
|
|
|
|
.content-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 400px;
|
|
gap: 2rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.form-container,
|
|
.participants-container {
|
|
background: white;
|
|
padding: 2.5rem;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.5rem;
|
|
color: #2d3748;
|
|
margin-bottom: 1.5rem;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.participants-count {
|
|
font-size: 0.9rem;
|
|
color: #718096;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.form-input,
|
|
.form-select {
|
|
width: 100%;
|
|
padding: 0.875rem 1rem;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
transition: all 0.2s;
|
|
background: #f7fafc;
|
|
font-family: inherit;
|
|
}
|
|
|
|
textarea.form-input {
|
|
resize: vertical;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-select:focus {
|
|
outline: none;
|
|
border-color: #89b4d9;
|
|
background: white;
|
|
}
|
|
|
|
.form-input.error,
|
|
.form-select.error {
|
|
border-color: #fc8181;
|
|
background: #fff5f5;
|
|
}
|
|
|
|
.error-message {
|
|
display: block;
|
|
color: #e53e3e;
|
|
font-size: 0.875rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-top: 2rem;
|
|
padding-top: 2rem;
|
|
border-top: 2px solid #e2e8f0;
|
|
}
|
|
|
|
.btn-submit,
|
|
.btn-cancel {
|
|
flex: 1;
|
|
padding: 0.875rem 1.75rem;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-submit {
|
|
background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
|
|
color: white;
|
|
box-shadow: 0 2px 8px rgba(66, 153, 225, 0.3);
|
|
}
|
|
|
|
.btn-submit:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(66, 153, 225, 0.4);
|
|
}
|
|
|
|
.btn-cancel {
|
|
background: #f7fafc;
|
|
color: #4a5568;
|
|
border: 2px solid #e2e8f0;
|
|
}
|
|
|
|
.btn-cancel:hover {
|
|
background: #edf2f7;
|
|
}
|
|
|
|
/* Participants Section */
|
|
.participants-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.stat-item {
|
|
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.875rem;
|
|
color: #718096;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: #2d3748;
|
|
}
|
|
|
|
.participants-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.participant-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
background: #f7fafc;
|
|
border-radius: 8px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.participant-card:hover {
|
|
background: #edf2f7;
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.participant-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.participant-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.participant-name {
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
font-size: 0.95rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.participant-email {
|
|
font-size: 0.875rem;
|
|
color: #718096;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.participant-guests {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: #4a5568;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
padding: 0.5rem 0.75rem;
|
|
background: white;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.participant-date {
|
|
font-size: 0.75rem;
|
|
color: #a0aec0;
|
|
text-align: right;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.empty-participants {
|
|
text-align: center;
|
|
padding: 3rem 1rem;
|
|
color: #718096;
|
|
}
|
|
|
|
.empty-participants p {
|
|
margin-top: 1rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.content-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.participants-container {
|
|
order: -1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.form-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.participants-stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.form-container,
|
|
.participants-container {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.participant-card {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.participant-date {
|
|
width: 100%;
|
|
text-align: left;
|
|
margin-top: 0.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
@endsection
|