@extends('layouts.customer')

@section('title', $event->name . ' - Winery')

@section('content')
<div class="event-detail-page">
    <!-- Back Button -->
    <div class="back-button-container">
        <a href="{{ route('events.index') }}" class="btn-back">
            <svg style="width: 20px; height: 20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
            Back to Events
        </a>
    </div>

    <!-- Event Detail Card -->
    <div class="event-detail-card">
        <div class="event-header">
            <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>
            <h1 class="event-name">{{ $event->name }}</h1>
        </div>

        <div class="event-content">
            <!-- Left Column: Event Info -->
            <div class="event-info">
                <div class="info-section">
                    <h3>About this Event</h3>
                    <p class="event-description">{{ $event->description }}</p>
                </div>

                <div class="info-section">
                    <h3>Event Details</h3>
                    <div class="detail-list">
                        <div class="detail-item">
                            <svg style="width: 20px; height: 20px;" 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>
                            <div>
                                <span class="detail-label">Date & Time</span>
                                <span class="detail-value">{{ $event->event_date->format('l, F j, Y') }} at {{ $event->event_time->format('H:i') }}</span>
                            </div>
                        </div>

                        @if($event->location)
                        <div class="detail-item">
                            <svg style="width: 20px; height: 20px;" 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>
                            <div>
                                <span class="detail-label">Location</span>
                                <span class="detail-value">{{ $event->location }}</span>
                            </div>
                        </div>
                        @endif

                        <div class="detail-item">
                            <svg style="width: 20px; height: 20px;" 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>
                            <div>
                                <span class="detail-label">Capacity</span>
                                <span class="detail-value">{{ $event->availableSpots() }} of {{ $event->capacity }} spots available</span>
                            </div>
                        </div>

                        <div class="detail-item">
                            <svg style="width: 20px; height: 20px;" 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>
                            <div>
                                <span class="detail-label">Price</span>
                                <span class="detail-value">{{ number_format($event->price_per_person, 2) }} € per person</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Reservation Form -->
            <div class="reservation-panel">
                @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

                <h3>Make a Reservation</h3>

                @if($event->isFull())
                    <div class="event-full-notice">
                        <svg style="width: 48px; height: 48px; color: #f56565;" 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>
                        <h4>Event Full</h4>
                        <p>This event has reached maximum capacity. Please check our other upcoming events.</p>
                    </div>
                @else
                    <form action="{{ route('events.reserve', $event) }}" method="POST" class="reservation-form">
                        @csrf

                        <div class="form-group">
                            <label for="number_of_guests">Number of Guests</label>
                            <input 
                                type="number" 
                                id="number_of_guests" 
                                name="number_of_guests" 
                                class="form-input @error('number_of_guests') input-error @enderror"
                                min="1" 
                                max="{{ $event->availableSpots() }}"
                                value="{{ old('number_of_guests', 1) }}"
                                required
                            >
                            @error('number_of_guests')
                                <span class="error-message">{{ $message }}</span>
                            @enderror
                            <span class="input-hint">Maximum {{ $event->availableSpots() }} guests available</span>
                        </div>

                        <div class="price-summary">
                            <div class="summary-row">
                                <span>Price per person:</span>
                                <span class="price-value">{{ number_format($event->price_per_person, 2) }} €</span>
                            </div>
                            <div class="summary-row total">
                                <span>Total:</span>
                                <span class="price-value" id="total-price">{{ number_format($event->price_per_person, 2) }} €</span>
                            </div>
                        </div>

                        <button type="submit" class="btn-reserve-submit">
                            <svg style="width: 20px; height: 20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            Confirm Reservation
                        </button>
                    </form>
                @endif
            </div>
        </div>
    </div>
</div>

<style>
    .event-detail-page {
        max-width: 100%;
    }

    .back-button-container {
        margin-bottom: 2rem;
    }

    .btn-back {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: #4a5568;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s;
    }

    .btn-back:hover {
        color: #89b4d9;
        transform: translateX(-4px);
    }

    .event-detail-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    .event-header {
        padding: 3rem;
        background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
    }

    .event-type-badge {
        display: inline-block;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 1rem;
        background: rgba(255, 255, 255, 0.3);
        color: #1a365d;
    }

    .event-name {
        font-size: 2.5rem;
        color: #1a365d;
        margin: 0;
        font-weight: 700;
    }

    .event-content {
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: 3rem;
        padding: 3rem;
    }

    .event-info {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .info-section h3 {
        font-size: 1.5rem;
        color: #2d3748;
        margin: 0 0 1rem 0;
        font-weight: 600;
    }

    .event-description {
        color: #4a5568;
        line-height: 1.8;
        font-size: 1.05rem;
    }

    .detail-list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .detail-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }

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

    .detail-item > div {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .detail-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #718096;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .detail-value {
        font-size: 1rem;
        color: #2d3748;
        font-weight: 500;
    }

    .reservation-panel {
        background: #f7fafc;
        border-radius: 12px;
        padding: 2rem;
        height: fit-content;
        position: sticky;
        top: 2rem;
    }

    .reservation-panel h3 {
        font-size: 1.5rem;
        color: #2d3748;
        margin: 0 0 1.5rem 0;
        font-weight: 600;
    }

    .alert {
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-weight: 500;
    }

    .alert-success {
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        color: #155724;
        border: 2px solid #b1dfbb;
    }

    .alert-error {
        background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
        color: #721c24;
        border: 2px solid #f1aeb5;
    }

    .event-full-notice {
        text-align: center;
        padding: 2rem;
    }

    .event-full-notice h4 {
        font-size: 1.25rem;
        color: #2d3748;
        margin: 1rem 0 0.5rem;
    }

    .event-full-notice p {
        color: #718096;
        line-height: 1.6;
    }

    .reservation-form {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .form-group label {
        font-weight: 600;
        color: #2d3748;
        font-size: 0.95rem;
    }

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

    .form-input:focus {
        outline: none;
        border-color: #89b4d9;
        background: white;
    }

    .input-error {
        border-color: #f56565;
    }

    .error-message {
        color: #f56565;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .input-hint {
        color: #718096;
        font-size: 0.85rem;
    }

    .price-summary {
        background: white;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #4a5568;
    }

    .summary-row.total {
        padding-top: 1rem;
        border-top: 2px solid #e2e8f0;
        font-size: 1.25rem;
        font-weight: 700;
        color: #2d3748;
    }

    .price-value {
        font-weight: 600;
    }

    .btn-reserve-submit {
        background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 8px;
        border: none;
        font-weight: 700;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
    }

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

    @media (max-width: 1024px) {
        .event-content {
            grid-template-columns: 1fr;
        }

        .reservation-panel {
            position: static;
        }
    }

    @media (max-width: 768px) {
        .event-header {
            padding: 2rem;
        }

        .event-name {
            font-size: 2rem;
        }

        .event-content {
            padding: 2rem;
        }
    }
</style>

<script>
    // Update total price when guest number changes
    const guestInput = document.getElementById('number_of_guests');
    const totalPriceElement = document.getElementById('total-price');
    const pricePerPerson = {{ $event->price_per_person }};

    if (guestInput && totalPriceElement) {
        guestInput.addEventListener('input', function() {
            const guests = parseInt(this.value) || 1;
            const total = guests * pricePerPerson;
            totalPriceElement.textContent = total.toFixed(2) + ' €';
        });
    }
</script>
@endsection