@extends('layouts.customer')

@section('title', $wine->wine_name . ' - Winery')

@section('content')
<div class="wine-detail-container">
    <!-- Breadcrumb -->
    <nav class="breadcrumb">
        <a href="{{ route('catalog.index') }}">Catalog</a>
        <svg style="width: 16px; height: 16px; margin: 0 0.5rem;" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
        </svg>
        <span>{{ $wine->wine_name }}</span>
    </nav>

    <div class="wine-detail-grid">
        <!-- Wine Image -->
        <div class="wine-image-section">
            <div class="wine-image-large">
                @if($wine->image_url)
                    <img src="{{ asset('storage/' . $wine->image_url) }}" alt="{{ $wine->wine_name }}">
                @else
                    <svg fill="currentColor" viewBox="0 0 24 24">
                        <path d="M6 3v11c0 3.87 3.13 7 7 7s7-3.13 7-7V3H6zm12 2v2H6V5h12zm-7 14c-2.76 0-5-2.24-5-5v-5h10v5c0 2.76-2.24 5-5 5z"/>
                        <circle cx="13" cy="11" r="1"/>
                    </svg>
                @endif
            </div>

            @if($wine->bottles_in_stock > 0)
            <div class="stock-badge in-stock">
                <svg style="width: 18px; height: 18px;" 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>
                In Stock
            </div>
            @else
            <div class="stock-badge out-of-stock">
                <svg style="width: 18px; height: 18px;" 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>
                Out of Stock
            </div>
            @endif
        </div>

        <!-- Wine Information -->
        <div class="wine-info-section">
            <div class="wine-header">
                <div>
                    <h1 class="wine-title">{{ $wine->wine_name }}</h1>
                    <p class="wine-variety-name">
                        <svg style="width: 20px; height: 20px; display: inline-block;" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"/>
                        </svg>
                        {{ $wine->grapeVariety->variety_name ?? 'N/A' }}
                    </p>
                </div>
                <div class="wine-vintage-large">{{ $wine->vintage }}</div>
            </div>

            <!-- Wine Characteristics -->
            <div class="characteristics-grid">
                <div class="characteristic">
                    <div class="characteristic-label">Vintage</div>
                    <div class="characteristic-value">{{ $wine->vintage }}</div>
                </div>

                <div class="characteristic">
                    <div class="characteristic-label">Alcohol</div>
                    <div class="characteristic-value">{{ number_format($wine->alcohol_percentage, 1) }}%</div>
                </div>

                <div class="characteristic">
                    <div class="characteristic-label">Variety</div>
                    <div class="characteristic-value">{{ $wine->grapeVariety->variety_name ?? 'N/A' }}</div>
                </div>

                <div class="characteristic">
                    <div class="characteristic-label">Availability</div>
                    <div class="characteristic-value">{{ $wine->bottles_in_stock }} pcs</div>
                </div>

                <div class="characteristic">
                    <div class="characteristic-label">Bottling Date</div>
                    <div class="characteristic-value">
                        {{ $wine->bottling_date ? \Carbon\Carbon::parse($wine->bottling_date)->format('d.m.Y') : 'N/A' }}
                    </div>
                </div>

                <div class="characteristic">
                    <div class="characteristic-label">Wine Type</div>
                    <div class="characteristic-value">
                        @if($wine->wine_type === 'white')
                            White
                        @elseif($wine->wine_type === 'red')
                            Red
                        @elseif($wine->wine_type === 'rose')
                            Rosé
                        @else
                            N/A
                        @endif
                    </div>
                </div>

                <div class="characteristic">
                    <div class="characteristic-label">Sweetness</div>
                    <div class="characteristic-value">
                        @if($wine->sweetness === 'dry')
                            Dry
                        @elseif($wine->sweetness === 'semi_dry')
                            Semi-dry
                        @elseif($wine->sweetness === 'semi_sweet')
                            Semi-sweet
                        @elseif($wine->sweetness === 'sweet')
                            Sweet
                        @else
                            N/A
                        @endif
                    </div>
                </div>
            </div>

            <!-- Description Section -->
            @if($wine->description)
            <div class="description-section">
                <h3>Description</h3>
                <p>{{ $wine->description }}</p>
            </div>
            @else
            <div class="description-section">
                <h3>Description</h3>
                <p>Dry white wine with lemon aromatics and mineral character. Perfect with light dishes and fish.</p>
            </div>
            @endif

            <!-- Purchase Section -->
            <div class="purchase-section">
                <div class="price-section">
                    <div class="price-label">Price</div>
                    <div class="price-value">{{ number_format($wine->price_per_bottle, 2) }} €</div>
                </div>

                @if($wine->bottles_in_stock > 0)
                <form action="{{ route('cart.add', $wine->id) }}" method="POST" class="purchase-form">
                    @csrf
                    <div class="quantity-selector">
                        <label for="quantity">Quantity</label>
                        <div class="quantity-input-group">
                            <button type="button" class="qty-btn" onclick="decrementQty()">
                                <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="M20 12H4"/>
                                </svg>
                            </button>
                            <input
                                type="number"
                                id="quantity"
                                name="quantity"
                                value="1"
                                min="1"
                                max="{{ $wine->bottles_in_stock }}"
                                class="quantity-input"
                            >
                            <button type="button" class="qty-btn" onclick="incrementQty()">
                                <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="M12 4v16m8-8H4"/>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <button type="submit" class="btn-add-to-cart">
                        <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                        Add to Cart
                    </button>
                </form>
                @else
                <div class="out-of-stock-message">
                    <svg style="width: 24px; height: 24px;" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                    </svg>
                    <p>This wine is currently out of stock</p>
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Additional Information -->
    @if($wine->harvests && $wine->harvests->count() > 0)
    <div class="additional-info">
        <h2>Harvest Information</h2>
        <div class="harvest-grid">
            @foreach($wine->harvests as $harvest)
            <div class="harvest-card">
                <div class="harvest-detail">
                    <span class="harvest-label">Harvest Date:</span>
                    <span class="harvest-value">
                        @if($harvest->plannedTask && $harvest->plannedTask->execution_date)
                            {{ \Carbon\Carbon::parse($harvest->plannedTask->execution_date)->format('d.m.Y') }}
                        @else
                            {{ \Carbon\Carbon::parse($harvest->date)->format('d.m.Y') }}
                        @endif
                    </span>
                </div>
                <div class="harvest-detail">
                    <span class="harvest-label">Weight:</span>
                    <span class="harvest-value">{{ number_format($harvest->pivot->consumed_weight, 2) }} kg</span>
                </div>
                <div class="harvest-detail">
                    <span class="harvest-label">Sugar Content:</span>
                    <span class="harvest-value">{{ $harvest->sugar_content ?? 'N/A' }}</span>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif
</div>

<style>
    .wine-detail-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .breadcrumb {
        display: flex;
        align-items: center;
        margin-bottom: 2rem;
        font-size: 0.9rem;
        color: #718096;
    }

    .breadcrumb a {
        color: #4299e1;
        text-decoration: none;
        transition: color 0.2s;
    }

    .breadcrumb a:hover {
        color: #2b6cb0;
    }

    .wine-detail-grid {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 3rem;
        margin-bottom: 3rem;
    }

    /* Image Section */
    .wine-image-section {
        position: relative;
    }

    .wine-image-large {
        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
        border-radius: 16px;
        position: relative;
        color: #cbd5e0;
        min-height: 500px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    .wine-image-large img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .wine-image-large svg {
        width: 180px;
        height: 180px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .stock-badge {
        margin-top: 1rem;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.25rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.95rem;
    }

    .stock-badge.in-stock {
        background: #c6f6d5;
        color: #22543d;
    }

    .stock-badge.out-of-stock {
        background: #fed7d7;
        color: #742a2a;
    }

    /* Info Section */
    .wine-info-section {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .wine-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 2px solid #e2e8f0;
    }

    .wine-title {
        font-size: 2.5rem;
        font-weight: 700;
        color: #2d3748;
        margin: 0 0 0.5rem 0;
    }

    .wine-variety-name {
        font-size: 1.1rem;
        color: #718096;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .wine-vintage-large {
        background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
        color: #1a365d;
        padding: 1rem 1.5rem;
        border-radius: 12px;
        font-size: 2rem;
        font-weight: 700;
        white-space: nowrap;
    }

    /* Characteristics */
    .characteristics-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        padding: 1.5rem;
        background: #f7fafc;
        border-radius: 12px;
    }

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

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

    .characteristic-value {
        font-size: 1.1rem;
        color: #2d3748;
        font-weight: 600;
    }

    /* Description */
    .description-section {
        padding: 1.5rem;
        background: white;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
    }

    .description-section h3 {
        font-size: 1.25rem;
        color: #2d3748;
        margin: 0 0 1rem 0;
    }

    .description-section p {
        font-size: 1rem;
        color: #4a5568;
        line-height: 1.6;
        margin: 0;
    }

    /* Purchase Section */
    .purchase-section {
        padding: 2rem;
        background: white;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
    }

    .price-section {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 2px solid #e2e8f0;
    }

    .price-label {
        font-size: 0.9rem;
        color: #718096;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

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

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

    .quantity-selector label {
        display: block;
        font-size: 0.9rem;
        color: #4a5568;
        font-weight: 600;
        margin-bottom: 0.75rem;
    }

    .quantity-input-group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .qty-btn {
        background: #f7fafc;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        color: #4a5568;
    }

    .qty-btn:hover {
        background: #edf2f7;
        border-color: #cbd5e0;
    }

    .quantity-input {
        width: 80px;
        padding: 0.75rem;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        text-align: center;
        font-size: 1.1rem;
        font-weight: 600;
    }

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

    .btn-add-to-cart {
        background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        color: white;
        padding: 1rem 2rem;
        border-radius: 10px;
        border: none;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
    }

    .btn-add-to-cart:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(72, 187, 120, 0.4);
    }

    .out-of-stock-message {
        text-align: center;
        padding: 2rem;
        background: #fff5f5;
        border-radius: 10px;
        color: #742a2a;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .out-of-stock-message p {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 500;
    }

    /* Additional Information */
    .additional-info {
        background: white;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .additional-info h2 {
        font-size: 1.75rem;
        color: #2d3748;
        margin: 0 0 1.5rem 0;
    }

    .harvest-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
    }

    .harvest-card {
        background: #f7fafc;
        padding: 1.5rem;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .harvest-detail {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .harvest-label {
        font-size: 0.9rem;
        color: #718096;
        font-weight: 500;
    }

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

    /* Mobile Responsive */
    @media (max-width: 968px) {
        .wine-detail-grid {
            grid-template-columns: 1fr;
        }

        .wine-header {
            flex-direction: column;
        }

        .wine-vintage-large {
            align-self: flex-start;
        }

        .characteristics-grid {
            grid-template-columns: 1fr;
        }

        .wine-title {
            font-size: 2rem;
        }
    }
</style>

<script>
    function incrementQty() {
        const input = document.getElementById('quantity');
        const max = parseInt(input.getAttribute('max'));
        if (parseInt(input.value) < max) {
            input.value = parseInt(input.value) + 1;
        }
    }

    function decrementQty() {
        const input = document.getElementById('quantity');
        if (parseInt(input.value) > 1) {
            input.value = parseInt(input.value) - 1;
        }
    }
</script>
@endsection
