@extends('layouts.customer')

@section('title', 'My Orders - Winery')

@section('content')
<div class="purchases-container">
    <div class="page-header">
        <h1>My Orders</h1>
        <p class="subtitle">Your order history</p>
    </div>

    @if($purchases->count() > 0)
    <div class="purchases-list">
        @foreach($purchases as $purchase)
        <div class="purchase-card">
            <div class="purchase-header">
                <div class="purchase-info">
                    <h3 class="purchase-title">
                        Order No. {{ $purchase->id }}
                    </h3>
                    <p class="purchase-date">
                        <svg style="width: 16px; height: 16px; display: inline-block;" 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>
                        {{ \Carbon\Carbon::parse($purchase->purchased_at ?? $purchase->created_at)->format('d.m.Y H:i') }}
                    </p>
                </div>

                <div class="purchase-status">
                    @if($purchase->status === 'completed')
                    <span class="status-badge status-completed">
                        <svg style="width: 16px; height: 16px;" 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>
                        Completed
                    </span>
                    @elseif($purchase->status === 'pending')
                    <span class="status-badge status-pending">
                        <svg style="width: 16px; height: 16px;" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                        </svg>
                        Pending
                    </span>
                    @elseif($purchase->status === 'shipped')
                    <span class="status-badge status-shipped">
                        <svg style="width: 16px; height: 16px;" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
                            <path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"/>
                        </svg>
                        Shipped
                    </span>
                    @else
                    <span class="status-badge status-cancelled">
                        <svg style="width: 16px; height: 16px;" 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>
                        {{ ucfirst($purchase->status) }}
                    </span>
                    @endif
                </div>
            </div>

            <!-- Purchase Items -->
            <div class="purchase-items">
                @foreach($purchase->items as $item)
                <div class="purchase-item">
                    <div class="item-image-small">
                        @if($item->wine->image_url)
                            <img src="{{ asset('storage/' . $item->wine->image_url) }}" alt="{{ $item->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="item-info-small">
                        <p class="item-name-small">{{ $item->wine->wine_name ?? 'N/A' }}</p>
                        <p class="item-details-small">
                            {{ $item->wine->grapeVariety->variety_name ?? 'N/A' }} - {{ $item->wine->vintage ?? 'N/A' }}
                        </p>
                        <p class="item-quantity-small">
                            {{ $item->quantity }} pcs × {{ number_format($item->unit_price, 2) }} €
                        </p>
                    </div>

                    <div class="item-total-small">
                        {{ number_format($item->quantity * $item->unit_price, 2) }} €
                    </div>
                </div>
                @endforeach
            </div>

            <!-- Purchase Footer -->
            <div class="purchase-footer">
                <div class="purchase-total">
                    <span class="total-label">Total Amount:</span>
                    <span class="total-value">{{ number_format($purchase->items->sum(function($item) {
                        return $item->quantity * $item->unit_price;
                    }), 2) }} €</span>
                </div>

                @if($purchase->note)
                <button class="btn-toggle-details" onclick="toggleDetails('purchase-{{ $purchase->id }}')">
                    <svg style="width: 16px; height: 16px;" 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 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                    </svg>
                    Show Details
                </button>

                <div class="purchase-details" id="purchase-{{ $purchase->id }}" style="display: none;">
                    <h4>Billing Information:</h4>
                    <pre class="billing-info">{{ $purchase->note }}</pre>
                </div>
                @endif
            </div>
        </div>
        @endforeach
    </div>
    @else
    <!-- Empty State -->
    <div class="empty-state">
        <svg style="width: 120px; height: 120px; color: #cbd5e0;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
        </svg>
        <h2>You don't have any orders yet</h2>
        <p>Start shopping in our catalog</p>
        <a href="{{ route('catalog.index') }}" class="btn-shop-now">
            <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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
            </svg>
            Go to Catalog
        </a>
    </div>
    @endif
</div>

<style>
    .purchases-container {
        max-width: 1000px;
        margin: 0 auto;
    }

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

    /* Purchases List */
    .purchases-list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

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

    .purchase-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem;
        background: #f7fafc;
        border-bottom: 2px solid #e2e8f0;
    }

    .purchase-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #2d3748;
        margin: 0 0 0.5rem 0;
    }

    .purchase-date {
        font-size: 0.9rem;
        color: #718096;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .purchase-status {
        display: flex;
        align-items: center;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .status-completed {
        background: #c6f6d5;
        color: #22543d;
    }

    .status-pending {
        background: #fef5e7;
        color: #975a16;
    }

    .status-shipped {
        background: #bee3f8;
        color: #2c5282;
    }

    .status-cancelled {
        background: #fed7d7;
        color: #742a2a;
    }

    /* Purchase Items */
    .purchase-items {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .purchase-item {
        display: grid;
        grid-template-columns: 60px 1fr auto;
        gap: 1rem;
        align-items: center;
        padding: 1rem;
        background: #f7fafc;
        border-radius: 8px;
    }

    .item-image-small {
        background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);
        border-radius: 6px;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #cbd5e0;
        overflow: hidden;
    }

    .item-image-small svg {
        width: 30px;
        height: 30px;
    }

    .item-info-small {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .item-name-small {
        font-size: 1rem;
        font-weight: 600;
        color: #2d3748;
        margin: 0;
    }

    .item-details-small, .item-quantity-small {
        font-size: 0.85rem;
        color: #718096;
        margin: 0;
    }

    .item-total-small {
        font-size: 1.1rem;
        font-weight: 700;
        color: #2d3748;
        text-align: right;
    }

    /* Purchase Footer */
    .purchase-footer {
        padding: 1.5rem;
        background: #f7fafc;
        border-top: 2px solid #e2e8f0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .purchase-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .total-label {
        font-size: 1.1rem;
        color: #4a5568;
        font-weight: 600;
    }

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

    .btn-toggle-details {
        background: none;
        border: 2px solid #e2e8f0;
        color: #4299e1;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        align-self: flex-start;
    }

    .btn-toggle-details:hover {
        background: #ebf8ff;
        border-color: #4299e1;
    }

    .purchase-details {
        padding: 1rem;
        background: white;
        border-radius: 8px;
        margin-top: 0.5rem;
    }

    .purchase-details h4 {
        font-size: 1rem;
        color: #2d3748;
        margin: 0 0 0.75rem 0;
    }

    .billing-info {
        font-family: 'Courier New', monospace;
        font-size: 0.9rem;
        color: #4a5568;
        background: #f7fafc;
        padding: 1rem;
        border-radius: 6px;
        margin: 0;
        white-space: pre-wrap;
        line-height: 1.6;
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

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

    .empty-state p {
        font-size: 1.1rem;
        color: #718096;
        margin: 0;
    }

    .btn-shop-now {
        background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
        color: #1a365d;
        padding: 1rem 2rem;
        border-radius: 10px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 1.1rem;
        margin-top: 1rem;
    }

    .btn-shop-now:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(137, 180, 217, 0.4);
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
        .purchase-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
        }

        .purchase-item {
            grid-template-columns: 60px 1fr;
            gap: 0.75rem;
        }

        .item-total-small {
            grid-column: 1 / -1;
            text-align: left;
            padding-top: 0.5rem;
            border-top: 1px solid #e2e8f0;
        }

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

<script>
    function toggleDetails(id) {
        const element = document.getElementById(id);
        if (element.style.display === 'none') {
            element.style.display = 'block';
        } else {
            element.style.display = 'none';
        }
    }
</script>
@endsection
