@extends('layouts.customer')

@section('title', 'Events - Winery')

@section('content')
<div class="events-page">
    <!-- Page Header -->
    <div class="page-header">
        <h1>Upcoming Events</h1>
        <p class="subtitle">Join us for exclusive wine experiences at our winery</p>
    </div>

    <!-- Events Grid -->
    @if($events->count() > 0)
    <div class="events-grid">
        @foreach($events as $event)
        <div class="event-card">
            <div class="event-type-badge event-type-{{ $event->type }}">
                @if($event->type === 'tasting')
                    🍷 Wine Tasting
                @elseif($event->type === 'harvest_festival')
                    🍇 Harvest Festival
                @elseif($event->type === 'vineyard_tour')
                    🚶 Vineyard Tour
                @endif
            </div>

            <h3 class="event-name">{{ $event->name }}</h3>
            <p class="event-description">{{ Str::limit($event->description, 200) }}</p>

            <div class="event-details">
                <div class="detail-item">
                    <svg style="width: 18px; height: 18px;" 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>
                    <span>{{ $event->event_date->format('d.m.Y') }} at {{ $event->event_time->format('H:i') }}</span>
                </div>
                @if($event->location)
                <div class="detail-item">
                    <svg style="width: 18px; height: 18px;" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
                    </svg>
                    <span>{{ $event->location }}</span>
                </div>
                @endif
                <div class="detail-item">
                    <svg style="width: 18px; height: 18px;" 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>{{ $event->availableSpots() }} / {{ $event->capacity }} spots available</span>
                </div>
            </div>

            <div class="event-footer">
                <div class="event-price">{{ number_format($event->price_per_person, 2) }} € / person</div>
                @auth
                    @if($event->isFull())
                        <button class="btn-reserve-disabled" disabled>Event Full</button>
                    @else
                        <a href="{{ route('events.show', $event) }}" class="btn-view-details">View Details</a>
                    @endif
                @else
                    <a href="{{ route('login') }}" class="btn-reserve">
                        <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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
                        </svg>
                        Login to Reserve
                    </a>
                @endauth
            </div>
        </div>
        @endforeach
    </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 upcoming events</h3>
        <p>Check back soon for new wine experiences</p>
    </div>
    @endif
</div>

<style>
    .events-page {
        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;
    }

    .events-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 2rem;
        margin-bottom: 3rem;
    }

    .event-card {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
    }

    .event-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    .event-type-badge {
        display: inline-block;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
        align-self: flex-start;
    }

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

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

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

    .event-name {
        font-size: 1.5rem;
        color: #2d3748;
        margin: 0 0 1rem 0;
        font-weight: 600;
        line-height: 1.3;
    }

    .event-description {
        font-size: 1rem;
        color: #718096;
        line-height: 1.6;
        margin: 0 0 1.5rem 0;
        flex-grow: 1;
    }

    .event-details {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
        padding-top: 1.5rem;
        border-top: 2px solid #e2e8f0;
    }

    .detail-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #4a5568;
        font-size: 0.95rem;
    }

    .detail-item svg {
        color: #89b4d9;
        flex-shrink: 0;
    }

    .event-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding-top: 1.5rem;
        border-top: 2px solid #e2e8f0;
    }

    .event-price {
        font-size: 1.5rem;
        font-weight: 700;
        color: #2d3748;
    }

    .btn-reserve, .btn-view-details {
        background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        border: none;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        font-size: 0.95rem;
    }

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

    .btn-reserve-disabled {
        background: #cbd5e0;
        color: #718096;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        border: none;
        font-weight: 600;
        cursor: not-allowed;
        font-size: 0.95rem;
    }

    .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-container {
        display: flex;
        justify-content: center;
        padding: 2rem 0;
    }

    @media (max-width: 768px) {
        .events-grid {
            grid-template-columns: 1fr;
        }

        .page-header h1 {
            font-size: 2rem;
        }
    }
</style>
@endsection