@extends('layouts.portal')

@section('content')
<style>
    .shopping-page-wrap {
        max-width: 1100px;
        margin: 5rem auto 8rem;
        padding: 0 1.5rem;
    }

    .page-header {
        text-align: center;
        margin-bottom: 4rem;
    }

    .page-header h1 {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 3rem;
        font-weight: 800;
        color: white;
        margin: 0 0 1rem;
        letter-spacing: -1px;
    }

    .page-header p {
        color: var(--text-muted, #9CA3AF);
        font-size: 1.15rem;
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.6;
    }

    /* Modern Order Table/List Design */
    .order-container {
        background: rgba(17, 24, 39, 0.6);
        backdrop-filter: blur(24px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    }

    .order-item {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr auto;
        align-items: center;
        padding: 1.8rem 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        transition: background 0.3s ease;
        gap: 1.5rem;
    }

    .order-item:last-child {
        border-bottom: none;
    }

    .order-item:hover {
        background: rgba(255, 255, 255, 0.02);
    }

    .col-header {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--text-muted);
        font-weight: 700;
        margin-bottom: 0.5rem;
        display: block;
    }

    /* Product Info */
    .product-info h3 {
        color: white;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0 0 0.4rem 0;
    }

    .product-info p {
        color: #9CA3AF;
        font-size: 0.9rem;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Details */
    .order-detail {
        color: white;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .order-date {
        color: #9CA3AF;
        font-size: 0.95rem;
    }

    /* Status Badge */
    .status-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.4rem 1.2rem;
        border-radius: 50px;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .status-success {
        background: rgba(16, 185, 129, 0.15);
        color: #34D399;
        border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .status-pending {
        background: rgba(245, 158, 11, 0.15);
        color: #FBBF24;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }

    /* Actions */
    .btn-download {
        background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 12px;
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s ease;
        border: none;
        box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
        white-space: nowrap;
    }

    .btn-download:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(99, 102, 241, 0.45);
        color: white;
    }

    /* Responsive */
    @media (max-width: 900px) {
        .order-item {
            grid-template-columns: 1fr 1fr;
            grid-template-areas: 
                "product product"
                "price date"
                "status action";
            gap: 1.2rem;
        }
        .item-product { grid-area: product; }
        .item-price { grid-area: price; }
        .item-date { grid-area: date; }
        .item-status { grid-area: status; }
        .item-action { grid-area: action; text-align: right; }
        
        .col-header { display: inline-block; margin-right: 0.5rem; }
    }

    @media (max-width: 500px) {
        .order-item {
            grid-template-columns: 1fr;
            grid-template-areas: 
                "product"
                "price"
                "date"
                "status"
                "action";
        }
        .item-action { text-align: left; margin-top: 1rem; }
        .btn-download { width: 100%; justify-content: center; }
    }

    .empty-state {
        text-align: center;
        padding: 5rem 2rem;
    }

    .empty-state .icon {
        font-size: 4rem;
        margin-bottom: 1.5rem;
        opacity: 0.8;
    }

    .empty-state h3 {
        color: white;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.8rem;
        margin-bottom: 0.8rem;
    }

    .empty-state p {
        color: #9CA3AF;
        font-size: 1.05rem;
        margin-bottom: 2rem;
    }
</style>

<div class="shopping-page-wrap">
    <div class="page-header">
        <h1>Your <span style="color: #10B981;">Shopping History</span></h1>
        <p>Review your past purchases, download digital items (like eBooks and video courses), and track your order statuses.</p>
    </div>

    @if(count($orders) > 0)
        <div class="order-container">
            <!-- Table Header for Desktop -->
            <div class="order-item" style="background: rgba(0,0,0,0.4); padding: 1rem 2rem; border-bottom: 1px solid rgba(255,255,255,0.1); border-radius: 24px 24px 0 0;">
                <div class="col-header" style="margin: 0; color: white;">Product Details</div>
                <div class="col-header" style="margin: 0; color: white;">Amount</div>
                <div class="col-header" style="margin: 0; color: white;">Order Date</div>
                <div class="col-header" style="margin: 0; color: white;">Status</div>
                <div class="col-header" style="margin: 0; color: white; text-align: right;">Action</div>
            </div>

            @foreach($orders as $order)
                <div class="order-item">
                    <div class="item-product product-info" style="display: flex; gap: 1rem; align-items: center;">
                        @if(!empty($order->download_url))
                            <img src="{{ asset($order->download_url) }}" alt="Product Image" style="width: 60px; height: 60px; border-radius: 12px; object-fit: cover; background: rgba(0,0,0,0.3);">
                        @else
                            <div style="width: 60px; height: 60px; border-radius: 12px; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">🛍️</div>
                        @endif
                        <div>
                            <h3>{{ $order->product_name }}</h3>
                            <p>
                                <span>Order #{{ $order->order_number }}</span>
                                <span style="color: rgba(255,255,255,0.2);">|</span>
                                <span>Qty: {{ $order->qty }}</span>
                            </p>
                        </div>
                    </div>

                    <div class="item-price">
                        <span class="col-header d-md-none">Amount</span>
                        <div class="order-detail" style="color: #34D399;">₹{{ number_format($order->price, 2) }}</div>
                        <div style="font-size: 0.8rem; color: #9CA3AF; margin-top: 0.2rem;">{{ $order->payment_method ?? 'Online' }}</div>
                    </div>

                    <div class="item-date">
                        <span class="col-header d-md-none">Date</span>
                        <div class="order-date">
                            {{ isset($order->created_at) ? \Carbon\Carbon::parse($order->created_at)->format('d M, Y') : ($order->date ?? date('d M, Y')) }}
                        </div>
                    </div>

                    <div class="item-status">
                        <span class="col-header d-md-none">Status</span>
                        @if(strtolower($order->status) == 'completed' || strtolower($order->status) == 'success')
                            <span class="status-badge status-success">✓ {{ $order->status }}</span>
                        @else
                            <span class="status-badge status-pending">⌛ {{ $order->status }}</span>
                        @endif
                    </div>

                    <div class="item-action">
                        @if(!empty($order->download_url))
                            <a href="{{ asset($order->download_url) }}" class="btn-download" target="_blank" download>
                                <i class="fa fa-download"></i> Download File
                            </a>
                        @else
                            <span style="color: #6B7280; font-size: 0.9rem; font-style: italic;">No file</span>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="order-container empty-state">
            <div class="icon">🛍️</div>
            <h3>No Purchases Yet</h3>
            <p>You haven't bought any digital products, eBooks, or videos yet.<br>Explore our shop to discover amazing content.</p>
            <a href="{{ route('portal.shop') }}{{ request()->has('simulate_host') ? '?simulate_host=' . request()->query('simulate_host') : '' }}" class="btn-download" style="padding: 1rem 2.5rem; font-size: 1.05rem;">
                Browse Store Now
            </a>
        </div>
    @endif

    <div style="margin-top: 3rem; text-align: center;">
        <a href="{{ route('portal.customer.profile') }}{{ request()->has('simulate_host') ? '?simulate_host=' . request()->query('simulate_host') : '' }}" style="color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: color 0.2s;">
            ← Back to Customer Dashboard
        </a>
    </div>
</div>
@endsection