@extends('layouts.customer')

@section('title', 'Event Management - Admin')

@section('content')
<div class="admin-container">
    <!-- Page Header -->
    <div class="page-header">
        <div class="header-content">
            <div>
                <h1>Event Management</h1>
                <p class="subtitle">Organize tastings, festivals, and vineyard tours</p>
            </div>
            <a href="{{ route('admin.events.create') }}" class="btn-create">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width: 20px; height: 20px;">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                Create New Event
            </a>
        </div>
    </div>

    <!-- Search and Filters -->
    <div class="search-filters">
        <form method="GET" action="{{ route('admin.events.index') }}" class="filter-form">
            <div class="search-box">
                <svg class="search-icon" 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"/>
                </svg>
                <input
                    type="text"
                    name="search"
                    placeholder="Search events..."
                    value="{{ request('search') }}"
                    class="search-input"
                >
            </div>

            <div class="filters">
                <select name="type" class="filter-select" onchange="this.form.submit()">
                    <option value="all" {{ request('type') === 'all' ? 'selected' : '' }}>All Types</option>
                    <option value="tasting" {{ request('type') === 'tasting' ? 'selected' : '' }}>Wine Tasting</option>
                    <option value="harvest_festival" {{ request('type') === 'harvest_festival' ? 'selected' : '' }}>Harvest Festival</option>
                    <option value="vineyard_tour" {{ request('type') === 'vineyard_tour' ? 'selected' : '' }}>Vineyard Tour</option>
                </select>

                <select name="status" class="filter-select" onchange="this.form.submit()">
                    <option value="all" {{ request('status') === 'all' ? 'selected' : '' }}>All Statuses</option>
                    <option value="upcoming" {{ request('status') === 'upcoming' ? 'selected' : '' }}>Upcoming</option>
                    <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                    <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>Completed</option>
                </select>

                <button type="submit" class="btn-primary">
                    <svg style="width: 18px; height: 18px;" 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"/>
                    </svg>
                    Search
                </button>

                @if(request('search') || request('type') != 'all' || request('status') != 'all')
                <a href="{{ route('admin.events.index') }}" class="btn-secondary">
                    Clear filters
                </a>
                @endif
            </div>
        </form>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
    <div class="alert alert-success">
        <svg style="width: 20px; height: 20px;" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
        </svg>
        {{ session('success') }}
    </div>
    @endif

    @if(session('error'))
    <div class="alert alert-error">
        <svg style="width: 20px; height: 20px;" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
        </svg>
        {{ session('error') }}
    </div>
    @endif

    <!-- Events Table -->
    @if($events->count() > 0)
    <div class="table-container">
        <table class="events-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Event Name</th>
                    <th>Type</th>
                    <th>Date & Time</th>
                    <th>Capacity</th>
                    <th>Price</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($events as $event)
                <tr>
                    <td class="event-id">{{ $event->id }}</td>
                    <td>
                        <div class="event-name-cell">
                            <strong>{{ $event->name }}</strong>
                            @if($event->location)
                            <div class="event-location">📍 {{ $event->location }}</div>
                            @endif
                        </div>
                    </td>
                    <td>
                        <span class="type-badge type-{{ $event->type }}">
                            @if($event->type === 'tasting')
                                🍷 Tasting
                            @elseif($event->type === 'harvest_festival')
                                🍇 Festival
                            @elseif($event->type === 'vineyard_tour')
                                🚶 Tour
                            @endif
                        </span>
                    </td>
                    <td class="event-datetime">
                        <div>{{ $event->event_date->format('d.m.Y') }}</div>
                        <div class="time">{{ $event->event_time->format('H:i') }}</div>
                    </td>
                    <td class="capacity-cell">
                        {{ $event->confirmedReservationsCount() }} / {{ $event->capacity }}
                    </td>
                    <td class="price-cell">{{ number_format($event->price_per_person, 2) }} €</td>
                    <td>
                        <span class="status-badge status-{{ $event->status }}">
                            @if($event->status === 'upcoming')
                                Upcoming
                            @elseif($event->status === 'cancelled')
                                Cancelled
                            @elseif($event->status === 'completed')
                                Completed
                            @endif
                        </span>
                    </td>
                    <td class="event-actions">
                        <a href="{{ route('admin.events.edit', $event) }}" class="btn-edit" title="Edit">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width: 18px; height: 18px;">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                            </svg>
                        </a>
                        <form action="{{ route('admin.events.destroy', $event) }}" method="POST" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this event?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn-delete" title="Delete">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width: 18px; height: 18px;">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                </svg>
                            </button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    @if($events->hasPages())
    <div class="pagination-container">
        {{ $events->links() }}
    </div>
    @endif
    @else
    <div class="empty-state">
        <svg style="width: 64px; height: 64px; color: #cbd5e0;" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
        </svg>
        <h3>No events found</h3>
        <p>Create your first event to get started</p>
        <a href="{{ route('admin.events.create') }}" class="btn-primary" style="margin-top: 1rem;">Create Event</a>
    </div>
    @endif
</div>

<style>
    .admin-container {
        max-width: 100%;
    }

    .page-header {
        margin-bottom: 2rem;
    }

    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
    }

    .btn-create {
        background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        color: white;
        padding: 0.875rem 1.75rem;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
    }

    .btn-create:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
    }

    .page-header h1 {
        font-size: 2.5rem;
        color: #2d3748;
        margin-bottom: 0.5rem;
        font-weight: 700;
    }

    .subtitle {
        font-size: 1.1rem;
        color: #718096;
    }

    /* Search and Filters */
    .search-filters {
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 2rem;
    }

    .filter-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .search-box {
        position: relative;
        flex: 1;
    }

    .search-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        color: #a0aec0;
    }

    .search-input {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 3rem;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        font-size: 1rem;
        transition: all 0.2s;
    }

    .search-input:focus {
        outline: none;
        border-color: #89b4d9;
    }

    .filters {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .filter-select {
        padding: 0.75rem 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        font-size: 0.95rem;
        background: white;
        cursor: pointer;
        transition: all 0.2s;
        min-width: 180px;
    }

    .filter-select:focus {
        outline: none;
        border-color: #89b4d9;
    }

    .btn-primary, .btn-secondary {
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        border: none;
        font-size: 0.95rem;
    }

    .btn-primary {
        background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
        color: #1a365d;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(137, 180, 217, 0.4);
    }

    .btn-secondary {
        background: #f7fafc;
        color: #4a5568;
        border: 2px solid #e2e8f0;
    }

    .btn-secondary:hover {
        background: #edf2f7;
    }

    /* Alerts */
    .alert {
        padding: 1rem 1.25rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .alert-success {
        background: #d1fae5;
        color: #065f46;
        border-left: 4px solid #10b981;
    }

    .alert-error {
        background: #fff5f5;
        color: #742a2a;
        border-left: 4px solid #fc8181;
    }

    /* Table */
    .table-container {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .events-table {
        width: 100%;
        border-collapse: collapse;
    }

    .events-table thead {
        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    }

    .events-table th {
        text-align: left;
        padding: 1rem;
        font-weight: 600;
        color: #2d3748;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .events-table tbody tr {
        border-bottom: 1px solid #e2e8f0;
        transition: background 0.2s;
    }

    .events-table tbody tr:hover {
        background: #f7fafc;
    }

    .events-table td {
        padding: 1rem;
        color: #4a5568;
    }

    .event-id {
        font-weight: 600;
        color: #718096;
    }

    .event-name-cell strong {
        color: #2d3748;
        font-size: 1rem;
    }

    .event-location {
        font-size: 0.875rem;
        color: #718096;
        margin-top: 0.25rem;
    }

    .type-badge {
        display: inline-block;
        padding: 0.375rem 0.75rem;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.875rem;
    }

    .type-tasting {
        background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%);
        color: #78350f;
    }

    .type-harvest_festival {
        background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
        color: #581c87;
    }

    .type-vineyard_tour {
        background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%);
        color: #065f46;
    }

    .event-datetime .time {
        font-size: 0.875rem;
        color: #718096;
        margin-top: 0.25rem;
    }

    .capacity-cell, .price-cell {
        font-weight: 600;
    }

    .status-badge {
        display: inline-block;
        padding: 0.375rem 0.75rem;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.875rem;
    }

    .status-upcoming {
        background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
        color: #1e40af;
    }

    .status-cancelled {
        background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
        color: #7f1d1d;
    }

    .status-completed {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #065f46;
    }

    .event-actions {
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
    }

    .btn-edit {
        background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
        color: white;
        padding: 0.5rem;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        text-decoration: none;
    }

    .btn-edit:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(66, 153, 225, 0.4);
    }

    .btn-delete {
        background: linear-gradient(135deg, #fc8181 0%, #f56565 100%);
        color: white;
        padding: 0.5rem;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
    }

    .btn-delete:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(252, 129, 129, 0.4);
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        background: white;
        border-radius: 12px;
    }

    .empty-state h3 {
        font-size: 1.5rem;
        color: #2d3748;
        margin: 1rem 0 0.5rem;
    }

    .empty-state p {
        color: #718096;
        font-size: 1rem;
    }

    /* Pagination */
    .pagination-container {
        display: flex;
        justify-content: center;
        padding: 2rem 0;
    }

    @media (max-width: 768px) {
        .header-content {
            flex-direction: column;
            align-items: stretch;
        }

        .filters {
            flex-direction: column;
        }

        .filter-select {
            width: 100%;
        }

        .events-table {
            font-size: 0.875rem;
        }

        .events-table th, .events-table td {
            padding: 0.75rem 0.5rem;
        }
    }
</style>
@endsection