@extends('layouts.customer')

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

@section('content')
<div class="reservations-page">
    <!-- Page Header -->
    <div class="page-header">
        <h1>My Reserved Events</h1>
        <p class="subtitle">View and manage your event reservations</p>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
    <div class="alert alert-success">
        <svg style="width: 20px; height: 20px; display: inline-block; margin-right: 8px;" 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; display: inline-block; margin-right: 8px;" 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

    <!-- Reservations List -->
    @if($reservations->count() > 0)
    <div class="reservations-list">
        @foreach($reservations as $reservation)
        <div class="reservation-card">
            <div class="reservation-header">
                <div class="event-type-badge event-type-{{ $reservation->event->type }}">
                    @if($reservation->event->type === 'tasting')
                        🍷 Tasting
                    @elseif($reservation->event->type === 'harvest_festival')
                        🍇 Harvest Festival
                    @else
                        🚶 Vineyard Tour
                    @endif
                </div>
                <div class="reservation-status status-{{ $reservation->status }}">
                    @if($reservation->status === 'confirmed')
                        ✓ Confirmed
                    @else
                        ✕ Cancelled
                    @endif
                </div>
            </div>

            <h3 class="event-name">{{ $reservation->event->name }}</h3>
            
            <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>
                    {{ $reservation->event->event_date->format('F j, Y') }} at {{ $reservation->event->event_time->format('H:i') }}
                </div>

                @if($reservation->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>
                    {{ $reservation->event->location }}
                </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>
                    {{ $reservation->number_of_guests }} {{ $reservation->number_of_guests === 1 ? 'guest' : 'guests' }}
                </div>

                <div class="detail-item">
                    <svg style="width: 18px; height: 18px;" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"/>
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"/>
                    </svg>
                    €{{ number_format($reservation->event->price_per_person * $reservation->number_of_guests, 2) }} total
                </div>
            </div>

            <div class="reservation-footer">
                <div class="reservation-date">
                    Reserved on {{ $reservation->created_at->format('M j, Y') }}
                </div>
                
                @if($reservation->status === 'confirmed' && $reservation->event->event_date->isFuture())
                <form action="{{ route('events.cancel', $reservation->event) }}" method="POST" onsubmit="return confirm('Are you sure you want to cancel this reservation?');">
                    @csrf
                    <button type="submit" class="btn-cancel">Cancel Reservation</button>
                </form>
                @endif
            </div>
        </div>
        @endforeach
    </div>

    <!-- Pagination -->
    @if($reservations->hasPages())
    <div class="pagination-container">
        {{ $reservations->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 reservations yet</h3>
        <p>You haven't reserved any events. Browse our upcoming events and reserve your spot!</p>
        <a href="{{ route('events.index') }}" class="btn-browse">Browse Events</a>
    </div>
    @endif
</div>

<style>
    .reservations-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;
    }

    /* Alerts */
    .alert {
        padding: 1rem 1.5rem;
        border-radius: 8px;
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
    }

    .alert-success {
        background: #f0fdf4;
        color: #166534;
        border: 1px solid #bbf7d0;
    }

    .alert-error {
        background: #fef2f2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }

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

    .reservation-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;
    }

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

    .reservation-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }

    .event-type-badge {
        display: inline-block;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .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;
    }

    .reservation-status {
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.85rem;
    }

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

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

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

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

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

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

    .reservation-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin-top: auto;
    }

    .reservation-date {
        font-size: 0.875rem;
        color: #718096;
    }

    .btn-cancel {
        padding: 0.625rem 1.25rem;
        background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-cancel:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }

    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

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

    .empty-state p {
        color: #718096;
        margin-bottom: 2rem;
    }

    .btn-browse {
        display: inline-block;
        padding: 0.875rem 2rem;
        background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
        color: white;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.2s;
    }

    .btn-browse:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
    }

    .pagination-container {
        display: flex;
        justify-content: center;
        margin-top: 2rem;
    }

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

        .reservation-footer {
            flex-direction: column;
            align-items: flex-start;
        }

        .btn-cancel {
            width: 100%;
        }
    }
</style>
@endsection