@extends('layouts.customer')

@section('title', 'Wine Catalog - Winery')

@section('content')
<div class="catalog-container">
    <!-- Page Header -->
    <div class="page-header">
        <h1>Catalog</h1>
        <p class="subtitle">Discover our wines from our own production</p>
    </div>

    <!-- Search and Filters -->
    <div class="search-filters">
        <form method="GET" action="{{ route('catalog.index') }}" class="filter-form">
            <!-- Search Bar -->
            <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 wine..."
                    value="{{ request('search') }}"
                    class="search-input"
                >
            </div>

            <!-- Filters -->
            <div class="filters">
                <select name="variety" class="filter-select" onchange="this.form.submit()">
                    <option value="all">All varieties</option>
                    @foreach($grapeVarieties as $variety)
                        <option value="{{ $variety->id }}"
                            {{ request('variety') == $variety->id ? 'selected' : '' }}>
                            {{ $variety->variety_name }}
                        </option>
                    @endforeach
                </select>

                <select name="vintage" class="filter-select" onchange="this.form.submit()">
                    <option value="all">All vintages</option>
                    @foreach($vintages as $vintage)
                        <option value="{{ $vintage }}"
                            {{ request('vintage') == $vintage ? 'selected' : '' }}>
                            {{ $vintage }}
                        </option>
                    @endforeach
                </select>

                <select name="wine_type" class="filter-select" onchange="this.form.submit()">
                    <option value="all">All types</option>
                    @foreach($wineTypes as $type)
                        <option value="{{ $type }}"
                            {{ request('wine_type') == $type ? 'selected' : '' }}>
                            @if($type === 'white')
                                White
                            @elseif($type === 'red')
                                Red
                            @elseif($type === 'rose')
                                Rosé
                            @endif
                        </option>
                    @endforeach
                </select>

                <select name="sweetness" class="filter-select" onchange="this.form.submit()">
                    <option value="all">All sweetness levels</option>
                    @foreach($sweetnessLevels as $sweetness)
                        <option value="{{ $sweetness }}"
                            {{ request('sweetness') == $sweetness ? 'selected' : '' }}>
                            @if($sweetness === 'dry')
                                Dry
                            @elseif($sweetness === 'semi_dry')
                                Semi-dry
                            @elseif($sweetness === 'semi_sweet')
                                Semi-sweet
                            @elseif($sweetness === 'sweet')
                                Sweet
                            @endif
                        </option>
                    @endforeach
                </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('variety') != 'all' || request('vintage') != 'all' || request('wine_type') != 'all' || request('sweetness') != 'all')
                <a href="{{ route('catalog.index') }}" class="btn-secondary">
                    Clear filters
                </a>
                @endif
            </div>
        </form>
    </div>

    <!-- Wine Grid -->
    @if($wines->count() > 0)
    <div class="wine-grid">
        @foreach($wines as $wine)
        <div class="wine-card" onclick="window.location='{{ route('catalog.show', $wine->id) }}'" style="cursor: pointer;">
            <div class="wine-image">
                @if($wine->image_url)
                    <img src="{{ asset('storage/' . $wine->image_url) }}" alt="{{ $wine->wine_name }}" style="width: 100%; height: 100%; object-fit: cover;">
                @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>

            <div class="wine-info">
                <div class="wine-header">
                    <h3 class="wine-name">{{ $wine->wine_name }}</h3>
                    <div class="wine-badges">
                        <span class="wine-vintage">{{ $wine->vintage }}</span>
                        @if($wine->wine_type)
                        <span class="wine-type-badge wine-type-{{ $wine->wine_type }}">
                            @if($wine->wine_type === 'white')
                                White
                            @elseif($wine->wine_type === 'red')
                                Red
                            @elseif($wine->wine_type === 'rose')
                                Rosé
                            @endif
                        </span>
                        @endif
                    </div>
                </div>

                <div class="wine-variety-row">
                    <p class="wine-variety">
                        <svg style="width: 16px; height: 16px; display: inline-block;" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
                        </svg>
                        {{ $wine->grapeVariety->variety_name ?? 'N/A' }}
                    </p>
                    @if($wine->sweetness)
                    <span class="wine-sweetness-badge wine-sweetness-{{ $wine->sweetness }}">
                        @if($wine->sweetness === 'dry')
                            Dry
                        @elseif($wine->sweetness === 'semi_dry')
                            Semi-dry
                        @elseif($wine->sweetness === 'semi_sweet')
                            Semi-sweet
                        @elseif($wine->sweetness === 'sweet')
                            Sweet
                        @endif
                    </span>
                    @endif
                </div>

                <div class="wine-details">
                    <span class="detail-item">
                        <svg style="width: 16px; height: 16px;" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                        {{ number_format($wine->alcohol_percentage, 1) }}% alk.
                    </span>
                    <span class="detail-item">
                        <svg style="width: 16px; height: 16px;" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.707-1.707l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z" clip-rule="evenodd"/>
                        </svg>
                        {{ $wine->bottles_in_stock }} pcs in stock
                    </span>
                </div>

                <div class="wine-footer">
                    <div class="wine-price">{{ number_format($wine->price_per_bottle, 2) }} €</div>

                    <form action="{{ route('cart.add', $wine->id) }}" method="POST" class="add-to-cart-form" onclick="event.stopPropagation();">
                        @csrf
                        <input type="hidden" name="quantity" value="1">
                        <button type="submit" class="btn-add-cart">
                            <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="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>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Pagination -->
    @if($wines->hasPages())
    <div class="pagination-container">
        {{ $wines->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="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"/>
        </svg>
        <h3>No wines found</h3>
        <p>Try adjusting filters or search</p>
        <a href="{{ route('catalog.index') }}" class="btn-primary" style="margin-top: 1rem;">Show all wines</a>
    </div>
    @endif
</div>

<style>
    .catalog-container {
        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;
    }

    /* 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;
    }

    /* Wine Grid */
    .wine-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 2rem;
        margin-bottom: 3rem;
    }

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

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

    .wine-image {
        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #cbd5e0;
    }

    .wine-image svg {
        width: 80px;
        height: 80px;
    }

    .wine-info {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        flex: 1;
    }

    .wine-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 1rem;
    }

    .wine-name {
        font-size: 1.25rem;
        font-weight: 600;
        color: #2d3748;
        margin: 0;
        flex: 1;
    }

    .wine-badges {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-end;
    }

    .wine-variety-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    .wine-vintage {
        background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
        color: #1a365d;
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .wine-type-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.85rem;
        white-space: nowrap;
    }

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

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

    .wine-type-rose {
        background: linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 100%);
        color: #831843;
    }

    .wine-sweetness-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.85rem;
        white-space: nowrap;
    }

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

    .wine-sweetness-semi_dry {
        background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
        color: #5b21b6;
    }

    .wine-sweetness-semi_sweet {
        background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
        color: #92400e;
    }

    .wine-sweetness-sweet {
        background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
        color: #9f1239;
    }

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

    .wine-details {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        padding-top: 0.5rem;
        border-top: 1px solid #e2e8f0;
    }

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

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

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

    .add-to-cart-form {
        margin: 0;
    }

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

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

    .view-details {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        color: #4299e1;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 500;
        transition: all 0.2s;
    }

    .view-details:hover {
        color: #2b6cb0;
        gap: 0.5rem;
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
    }

    .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;
        align-items: center;
        gap: 2rem;
        padding: 2rem 0;
    }

    .pagination-container nav {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Pagination text */
    .pagination-container p {
        font-size: 1rem;
        color: #4a5568;
        margin: 0;
        white-space: nowrap;
    }

    /* Pagination links container */
    .pagination-container nav > div:last-child {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Pagination link styling */
    .pagination-container a,
    .pagination-container span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.2s;
        text-decoration: none;
        color: #4a5568;
    }

    /* Active page */
    .pagination-container span[aria-current="page"] {
        background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
        color: #1a365d;
        border-color: #89b4d9;
    }

    /* Hover state for links */
    .pagination-container a:hover {
        background: #f7fafc;
        border-color: #89b4d9;
        transform: translateY(-2px);
    }

    /* Disabled state */
    .pagination-container span[aria-disabled="true"] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Navigation arrows (prev/next) */
    .pagination-container a[rel="prev"],
    .pagination-container a[rel="next"],
    .pagination-container span[aria-disabled="true"] {
        min-width: 50px;
        min-height: 50px;
        font-size: 1.25rem;
    }

    /* SVG icons in pagination */
    .pagination-container svg {
        width: 20px;
        height: 20px;
    }

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

        .filters {
            flex-direction: column;
        }

        .filter-select {
            width: 100%;
        }

        .page-header h1 {
            font-size: 2rem;
        }

        /* Pagination responsive */
        .pagination-container {
            flex-direction: column;
            gap: 1rem;
        }

        .pagination-container p {
            font-size: 0.9rem;
        }

        .pagination-container nav {
            gap: 0.5rem;
        }

        .pagination-container a,
        .pagination-container span {
            min-width: 40px;
            min-height: 40px;
            padding: 0.4rem 0.6rem;
            font-size: 0.9rem;
        }

        .pagination-container a[rel="prev"],
        .pagination-container a[rel="next"],
        .pagination-container span[aria-disabled="true"] {
            min-width: 44px;
            min-height: 44px;
        }
    }

    @media (max-width: 480px) {
        .pagination-container p {
            display: none;
        }
    }
</style>
@endsection
